1.一些常用的api操作
有时候我们可能要获取用户的ip地址和访问时间:
获取ip地址的处理:req.ip
获取访问时间,这时候我们使用Date创建date对象,把时间获取就可以了,同js操作
我们做一个简单的演示,在更目录下,我们已经做了点击“hello world!”进入hello的处理,我们在
路由 get的“/hello”获取这些内容,并且显示在模板页面,路由修改如下:
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如下:
hello <%= text %>
<%= ip %>
<%= ri %>
2.ejs模板引擎,后缀改为.html
我们知道,我们使用的是ejs模板引擎,我们看到页面都是.ejs后缀,其实.ejs文件里面写的就是html标签,既然就是html的标签,我们能不能把.ejs改为.html,毕竟很多人看着是不舒服的,主要也是使用模板的时候要修改后缀名很麻烦的,我们做好的静态页都是.html结束。
我们找到手册设置:
app.js相关部分代码如下
// view engine setupapp.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代码:
login
注意点
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 setupapp.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 handlerapp.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err);});/// error handlers// development error handler// will print stacktraceif (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 userapp.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
login
5.ejs后缀改为.html