開始nodejs+express的學習+實踐（3）
1.一些經常使用的api操做css
有時候咱們可能要獲取用戶的ip地址和訪問時間：html
獲取ip地址的處理：req.ipnode
獲取訪問時間，這時候咱們使用Date建立date對象，把時間獲取就能夠了，同js操做express
咱們作一個簡單的演示，在更目錄下，咱們已經作了點擊「hello world！」進入hello的處理，咱們在npm
路由 get的「/hello」獲取這些內容，而且顯示在模板頁面，路由修改以下：json
app.get('/hello', function(req, res){
var ip=req.ip;
var date=new Date();
var ri=date.getDate()
res.render('hello', { text: '麼麼噠',ip:ip,ri:ri });
});
hello.ejs以下：api
<!DOCTYPE html> <html> <head> <title>hello</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= text %></h1> <h1><%= ip %></h1> <h1><%= ri %></h1> </body> </html>
2.ejs模板引擎，後綴改成.htmlcookie
咱們知道，咱們使用的是ejs模板引擎，咱們看到頁面都是.ejs後綴，其實.ejs文件裏面寫的就是html標籤，既然就是html的標籤，咱們能不能把.ejs改成.html，畢竟不少人看着是不舒服的，主要也是使用模板的時候要修改後綴名很麻煩的，咱們作好的靜態頁都是.html結束。app
咱們找到手冊設置：post
app.js相關部分代碼以下
// view engine setup
app.engine('html', require('ejs').renderFile);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
對比以前，加入app.engine的設置和set的顯示設置爲html
從新啓動，運行，效果同以前，不過這時候.html和咱們作的html頁面確定是不太同樣的，正常html頁面是不能解析後臺數據的！
3.上傳文件的存儲
按咱們獲取客戶信息的理解，針對上傳文件的獲取應該是這樣：
req.files獲取全部上傳表單
req.files.file1獲取name叫file1的表單
覺得類推......
不過很惋惜，express沒有這樣的處理接口，看來咱們只能本身截取（有點難）或者使用第三方模塊（竊喜）了！
網上使用較多的，存儲上傳文件的第三方模塊是： formidable
咱們修改package.json：
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "~3.4.8",
"static-favicon": "~1.0.0",
"morgan": "~1.0.0",
"cookie-parser": "~1.0.1",
"body-parser": "~1.0.0",
"debug": "~0.7.4",
"ejs": "~0.8.5",
"formidable": "*"
}
}
咱們在項目下執行命令：
npm install
開始安裝 formidable，等待完成便可！
咱們在路由文件index.js引用當前模塊，index.js代碼以下：
var formidable = require('formidable');
var fs = require('fs');
function rout(app){
app.get('/',function(req, res){
res.render('index', { title: 'Express',hello: 'hello world!',arr:[111111,2222,33333,44444] });
});
app.get('/hello', function(req, res){
var ip=req.ip;
var date=new Date();
var ri=date.getDate()
res.render('hello', { text: '麼麼噠',ip:ip,ri:ri });
});
app.get('/list', function(req, res){
res.render('list', { text: req.query.id });
});
app.get('/login', function(req, res){
res.render('login');
});
app.post('/logincheck', function(req, res){
var user= req.body.user;
var pass= req.body.pass;
if(user=="tom" && pass=="tom"){
res.redirect('/');
}else{
res.redirect('/login');
};
});
};
咱們針對上傳操做建立路由處理，
上傳頁面，路由加入：
get的「/file」處理，
點擊上傳，路由加入，
post的「/upfile」 處理。
index.js加入代碼以下：
app.get('/file', function(req, res){
res.render('file');
});
app.post('/upfile', function(req, res){
//code
});
咱們建立file.html，咱們上面已經把模板後綴修改。
file.html代碼：
<!DOCTYPE html> <html> <head> <title>login</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <form method="post" action="/upfile" enctype="multipart/form-data"> <input type="file" name="file"> <input id="ok" type="submit" value="上傳"> </form> </body> </html>
注意點
enctype的設置
input類型爲file
下面咱們該在路由加入上傳存儲處理了，修改上傳路由操做
app.post('/upfile', function(req, res){
//code
var form = new formidable.IncomingForm();
form.uploadDir = "./upload";
form.parse(req, function(err, fields, files) {
if (err) {
res.redirect('/file');
}
var tmp_path, target_path;
if (files.file.size > 0) { //表示有文件上傳
tmp_path = files.file.path;//內存中的文件，當前文件目錄
var picType = files.file.name.split(".")[1];//後綴名
//移動目的目錄
target_path = './public/images/pic_1.' + picType;
//同步方式移動文件
fs.renameSync(tmp_path, target_path);
}else{
res.redirect('/file');
};
});
});
重要操做，咱們在app.js同級建立upload文件夾，用來臨時存放上傳的文件。
咱們在file頁面上傳文件，點擊上傳，就能夠在public/images下看見文件了。
幾個重要點：
formidable的方法建立對象
指定臨時目錄
使用解析方法，在回調獲取文件組
文件組.文件表單name名稱獲取上傳文件
path屬性存放上傳文件
renamesync移動文件，參數1老路徑，參數2目的路徑，此方法可重命名
關於fs模塊的各類方法能夠在nodejs的api中查看
4.總結
到這裏發生修改的文件：
1.app.js 改變模板引擎的後綴名
var express = require('express');
var http = require('http');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/user');
var app = express();
// view engine setup
app.engine('html', require('ejs').renderFile);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
routes.rout(app);
app.get('/users', users.list);
/// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
2.index.js 加入文件上傳的處理
var formidable = require('formidable');
var fs = require('fs');
function rout(app){
app.get('/',function(req, res){
res.render('index', { title: 'Express',hello: 'hello world!',arr:[111111,2222,33333,44444] });
});
app.get('/hello', function(req, res){
var ip=req.ip;
var date=new Date();
var ri=date.getDate()
res.render('hello', { text: '麼麼噠',ip:ip,ri:ri });
});
app.get('/list', function(req, res){
res.render('list', { text: req.query.id });
});
app.get('/login', function(req, res){
res.render('login');
});
app.post('/logincheck', function(req, res){
var user= req.body.user;
var pass= req.body.pass;
if(user=="tom" && pass=="tom"){
res.redirect('/');
}else{
res.redirect('/login');
};
});
app.get('/file', function(req, res){
res.render('file');
});
app.post('/upfile', function(req, res){
//code
var form = new formidable.IncomingForm();
form.uploadDir = "./upload";
form.parse(req, function(err, fields, files) {
if (err) {
res.redirect('/file');
}
var tmp_path, target_path;
if (files.file.size > 0) { //表示有文件上傳
tmp_path = files.file.path;//內存中的文件，當前文件目錄
var picType = files.file.name.split(".")[1];//後綴名
//移動目的目錄
target_path = './public/images/pic_1.' + picType;
//同步方式移動文件
fs.renameSync(tmp_path, target_path);
}else{
res.redirect('/file');
};
});
});
};
exports.rout=rout;
3.package.json 依賴加入formidable
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "~3.4.8",
"static-favicon": "~1.0.0",
"morgan": "~1.0.0",
"cookie-parser": "~1.0.1",
"body-parser": "~1.0.0",
"debug": "~0.7.4",
"ejs": "~0.8.5",
"formidable": "*"
}
}
4.file.ejs
<!DOCTYPE html> <html> <head> <title>login</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <form method="post" action="/upfile" enctype="multipart/form-data"> <input type="file" name="file"> <input id="ok" type="submit" value="上傳"> </form> </body> </html>
5.ejs後綴改成.html
相關文章
- 1. 開始nodejs+express的學習+實踐（4）
- 2. 開始nodejs+express的學習+實踐（5）
- 3. 開始nodejs+express的學習+實踐（8）
- 4. 開始nodejs+express的學習+實踐（6）
- 5. 開始nodejs+express的學習+實踐（2）
- 6. 開始nodejs+express的學習+實踐（7）
- 7. 開始nodejs+express的學習+實踐（9）
- 8. 開始nodejs+express的學習+實踐（1）
- 9. 從零開始學習HTML+CSS（3）
- 10. libevent學習，從3個例子開始
- 更多相關文章...
- • Thymeleaf項目實踐 - Thymeleaf 教程
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 適用於PHP初學者的學習線路和建議
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
