博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
开始nodejs+express的学习+实践(3)
阅读量:5907 次
发布时间:2019-06-19

本文共 7342 字,大约阅读时间需要 24 分钟。

  hot3.png

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结束。

我们找到手册设置:

142121_oWZH_2352644.jpg

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    
      
      
      
    

注意点

  1. enctype的设置

  2. 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下看见文件了。

几个重要点:

  1. formidable的方法创建对象

  2. 指定临时目录

  3. 使用解析方法,在回调获取文件组

  4. 文件组.文件表单name名称获取上传文件

  5. path属性存放上传文件

  6. 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

转载于:https://my.oschina.net/tbd/blog/550576

你可能感兴趣的文章
数据结构图之二(最小生成树--普里姆算法)
查看>>
HTML输出 一 控制列背景颜色
查看>>
Redis for Windows(C#缓存)配置文件详解
查看>>
回忆2013年的点点滴滴(各个方面)
查看>>
ASP.NET MVC 4使用PagedList.Mvc分页
查看>>
HDOJ 2066 floyed优化算法
查看>>
window.onscroll
查看>>
开发常用动画收集
查看>>
nginx js、css多个请求合并为一个请求(concat模块)
查看>>
mybatis实战教程(mybatis in action)之五:与spring3集成
查看>>
解决浏览器Adobe Flash Player不是最新版本问题
查看>>
SQLite 约束
查看>>
Python爬虫学习——使用Cookie登录新浪微博
查看>>
linux配置网络
查看>>
vsftp 500 OOPS: cannot change directory:/home/xyp
查看>>
MVC ---- EF的安装于卸载
查看>>
WebRTC 学习之 概念总结
查看>>
Java对ad操作
查看>>
unity与android交互总结
查看>>
h5 微场景
查看>>