Express框架简介express使用模块引擎模式数据

Posted 2021-05-29 苦海123

Express简介：

原生的http不足以应对我们的开发需求，所以我们需要使用框架来加快我们的开发，这里推荐expressjs，其官网：expressjs.com，中文文档推荐：http://javascript.ruanyifeng.com/nodejs/express.html#toc0

Express是目前最流行的基于Node.js的Web开发框架，可以快速地搭建一个完整功能的网站。

Express上手非常简单，如下简介：

	// 1.安装express：npm install express --save(使用淘宝镜像安装的：npm --registry https://registry.npm.taobao.org install express)
    // 2.引包：
    var express = require('express');
    // 3.创建服务器应用程序：（类似原生中createServer）
    var app = express();
    // 4.业务设计（路由设计）:
    // 以get的方式对一个路径作出处理,这也是路由。get中第一个参数为访问路径，第个为回调函数（回调函数第一个参数为请求对象，第二个为响应对象）：这样的路由可以指定多个。
    app.get('/', function(req, res) {
        res.send('index.html');//响应浏览器访问，类似原生中end();
      
      	req.files;//
    })
    .get('/users', function(req, res) {//这里类似jQuery中的链式调用
        res.send('users.html');
    });
    // 以post的方式对一个路径作出处理,这也是路由。post中第一个参数为访问路径，第个为回调函数（回调函数第一个参数为请求对象，第二个为响应对象）：这样的路由可以指定多个。
    app.post('/login', function(req, res) {
        res.send('login.html');
      	res.redirect(301, "/index.html");//网页重定向，第一个参数可以省略，为状态码；第二个参数是重定向的路径，这里可以写网址或相对文件路径。
      	res.sendFile("/faded.mp3");//用于发送文件(各种类型文件)
      	res.render("index", { message: "Hello World" });//用于渲染网页模板，第一各参数为模板；第二个参数对象为模板中需要的变量及值。
    });
    app.listen(3000,function(){
      console.log(running...);
    });//设定监听端口,回调函数可以省略，表示应用启动成功后作出反应。

express-中间件：

处理http请求的函数被称为中间件，每个中间件可以接收三个参数（请求对象、响应对象、next回调函数代表下一个中间件）；如：

	 function middleware(req, res, next) {
      next('出错了！');//next如果传入了参数，那么这个参数代表抛出一个错误；如果这里不调用next，那么下面的中间件将不再执行。
    };

express-use:

use()方法用于注册中间件，如：

	app.use(function(request,response,next){
      console.log(request.url);
      response.end('hello');
    });

	 //利用use开放资源：将资源开放后，可以通过url访问到此资源，如：
    app.use('/public/',express.static('./public/'));//第一个参数是别名，建议和后面的开放资源的URL一样，也可以省略，省略后直接访问public中的文件即可，不用再访问public此文件夹路径，/后面跟被开放的URL目录中的文件名，

express-set：

set方法用于设置变量的值，如：

app.set('avator',_dirname + '/avator');//第一个参数是变量名，第二个参数是变量的值。

router路由模块：

	// 在入口app执行node代码的情况下，路由模块载入可以使用函数传参数app的方式：不推荐方式，不合理,如：
    module.exports = function (apps) {
      apps.get('/students', function (req, res) {
        // readFile 的第二个参数是可选的，传入 utf8 就是告诉它把读取到的文件直接按照 utf8 编码转成我们能认识的字符 , 除了这样来转换之外，也可以通过 data.toString() 的方式
        fs.readFile('./db.json', 'utf8', function (err, data) {
          if (err) {
            return res.status(500).send('Server error.')
          }
          // 从文件中读取到的数据一定是字符串 ,所以这里一定要手动转成对象
          var students = JSON.parse(data).students;
          res.render('index.html', {
            fruits: [
              '苹果',
              '香蕉',
              '橘子'
            ],
            students: students
          })
        })
      })
    
    
    // 推荐方式：express提供了专门的路由设计的模块：Router()，在载入express模块的情况下使用方法如下：
    // 1.创建一个路由容器：
    var router = express.Router();
    // 2.把路由挂载到路由容器中：
    router.get('/public', function(request, response) {});
    router.post('/public', function(request, response) {});
    // 3.导出router：
    module.exports = router;
    // 4.在入口app中载入Router模块：
    var router = require('./router');
    // 5.把router挂载到app中：
    app.use(router);

path模块：

	var path = require('path');
    // path是一个核心模块，简单介绍常用API：
    
    path.basename('C:/e/fs/f/index.html') //'index.html'-----返回的是一个目录中的文件名及后缀名
    path.basename('C:/e/fs/f/index.html', '.html') //'index'-----basename可以传入第二个参数(.文件后缀名),此时返回的仅是文件名，不包括后缀名
    
    path.dirname('C:/e/fs/f/index.html') //'C:/e/fs/f'------获取路径中文件的目录，不包括文件名及后缀名
    path.extname('C:/e/fs/f/index.html') //'.html'-------获取路径中文件的扩展名(后缀名)
    
    path.isAbsolute('C:/e/fs/f/index.html') //true -----判断一个路径是否为绝对路径
    path.isAbsolute('/e/fs/f/index.html') //true------ / 开头表示的是文件磁盘根目录，所以是绝对路径
    path.isAbsolute('./e/fs/f/index.html') //false------ ./ 开头表示的是文件当前目录，所以不是绝对路径，为相对路径
    
    // 拆分一个路径的API：path.parse():
    path.parse('C:/e/fs/f/index.html') //解析得到一个对象：
    // {
    //     root: 'C:/',
    //     dir: 'C:/e/fs/f',
    //     base: 'index.html',
    //     ext: '.html',
    //     name: 'index'
    // }
    
    path.join('./a', 'b') //'a\\\\b'-----路径拼接，实际是a/b,解决路径字符串拼接的难题，两个反斜杠是操作系统导致的，

body-parser中间件：

默认是不能解析post方式提交的请求体的，body-parser中间件（插件）专门用来解析表单 POST 请求体，其用法如下：

	//1.下载安装body-parser插件：
    npm install body-parser --save
    //2.引入body-parser模块：
    var bodyParser = require('body-parser');
    //3.配置body-parser核心部分：
    app.use(bodyParser.urlencoded({extended: false}));// parse application/x-www-form-urlencoded，解析post请求数据
    app.use(bodyParser.json());// parse application/json,数据为JSON类型
    
    //4.接收以post提交的数据：
    app.post('/post',function(request,response){
      console.log(request.body);//request.query只能拿到以get方式提交的数据；配置完后require会有一个新的body属性，这个属性request.body可以拿到以post提交的数据
    });

也可以使用暂存请求体的方式接受post提交数据，如：

	 var http = require('http');
    var querystring = require('querystring');
    var util = require('util');
    
    http.createServer(function(request, response) {
        // 定义了一个post变量，用于暂存请求体的信息
        var post = '';
        // 通过request的data事件监听函数，每当接受到请求体的数据，就累加到post变量中
        request.on('data', function(chunk) {
            post += chunk;
        });
    
        // 在end事件触发后，通过querystring.parse将post解析为真正的POST请求格式，然后向客户端返回。
        request.on('end', function() {
            post = querystring.parse(post);
            response.end(util.inspect(post));
        });
    }).listen(3000, function() {
        console.log('running...');
    });

express中使用art-template模板：

art-template模板也可在node中使用，其具基本用法如下：

	 var express = require('express');
    var app = express();
    //在Express中配置使用art-template的步骤：
    // 1.在github上搜索art-template打开官方文档，官方文档导航栏中有Express点进去查阅相关说明，步骤如下一步：
    // 2.分别安装art-template和express-art-template：打开命令窗口分别键入命令：npm install --save art-template  和 npm install --save express-art-template ;（当然这里可以同时安装两个包，键入命令：npm install --save art-template express-art-template）;express-art-template是专门在express中把art-template整合到express中的包，原因是express-art-template依赖了art-template。
    // 3.配置使用art-template模板引擎：
    app.engine('html', require('express-art-template')); //第一个参数表示渲染以 .art 结尾的文件的时候使用 art-template 模板引擎,注意需要渲染的页面文件后缀名修改为art,当然不也可以修改 app.engine() 中第一个参数值为html,这样就不用再修改文件后缀名
    // 4.渲染数据到模板引擎(使用)：
    app.get('/', function(require, response) {
        response.render('index.html', { //Express 为 Response 相应对象提供了一个方法：render,render 方法默认是不可以使用，但是如果配置了模板引擎就可以使用了，其用法：res.render('html模板名', {模板数据})
            name: 'jkon',//render 第一个参数不能写路径，默认会找view目录中的模板文件(express约定开发人员把所有视图文件放到view目录中)，如果想要修改默认view目录，使用 app.set('view','新的路径'):
            message: 'hello word',
            dateTime: '2020-11-7'
        }); //注意需要渲染的页面文件后缀名修改为art,当然不也可以修改 app.engine() 中第一个参数值为html,这样就不用再修改文件后缀名
    });

art-template中子模板和继承模板：

	<!-- 在node中有很多第三方模板，不同的模板语法不同，其他模板如：ejs、jade(pug)、handlebars、nunjucks -->
    
    <!-- 子模板的使用：在界面需要填充公共内容的地方直接插入公共代码：{{ include './header.html'}}   ，插入的是相同的区域。 -->
    {{ include './header.html'}}
    
    
    
    <!-- 模板继承：在一个界面中，公共部分非常多，不同的部分只有一点，可以通过改变不同部分区域来实现，和上面子模板差不多，只是插入的是不同区域。 -->
    <!-- 要继承的界面：  -->
    {{ block 'content'}}
      <!-- <p>默认内容</p> ,如果在新的页面没有修改这里，则默认渲染此模板中的默认内容和此坑以外的界面,如果需要修改默认内容，则需在新的页面使用block并修改其中的默认部分-->
    {{ /block }}
    
    
    <!-- 新的页面： -->
    <!-- 在新的页面渲染继承的界面，默认内容 + 继承页面坑以外的内容 -->
    {{ extend './conent.html'}}
    
    
    <!-- 默认内容被修改了 -->
    {{ block 'content'}}
      <!-- <div>这是修改后新的内容 + 继承页面坑以外的内容</div> -->
    {{ /block }}

express中使用cookie和session：

在express中默认是不支持Session和Cookie， 但是我们可以使用第三方中间件： express - session， 使用步骤如下：

	// 1.下载安装：
    // 在cmd中npm install express-session
    // 2.引包：
    var Session = require('express-session');
    // 3.配置：
    app.use(session({
        secret: 'keyboard cat', //配置加密字符串，在原有的字符串上拼接，增加安全性，括号里的字符自定义
        resave: false,
        saveUninitialized: true //无论是否使用session，都会分配一把钥匙，当值为false时，默认是不会分配钥匙，需要自己设置。
    }));
    
    // 4.使用：当配置好插件后，可以通过require.session来访问和设置Session成员：添加：require.session.foo = 'bar' ;访问：require.session
    app.use(function(require, response, next) {
        if (!require.session.login) {
            require.session.login = {};
        };
    });

express中的中间件：

	var express = require('express');
    var app = express();
    // 中间件：处理请求的，本质就是一个函数，这个函数有三个形参，repuest----请求结果,response----响应结果,next-----下一个，调用下一个中间件的参数。
    // express中的中间件有几种分类：
    // 1.任何请求都会进入型(不关心请求方法和请求路劲)，如：
    app.use(function(repuest,response,next){
      console.log('test')
      next();//---------------------------------如果不调用此下一个中间件，是不会继续向下一个中间件执行的，当有多个中间件时，必须调用下一个才会执行下一个，当然next也是调用匹配条件的。
      // next(err);next可以传递参数，如果传递了参数，当发生错误的时候，则直接往后找到带有 四个参数的应用程序级别中间件，可以用来处理全局错误。
    });
    app.use(function(repuest,response,next){
      console.log('test')
    });
    
    // 2.关心请求路径型，以/x开头的路径都会进来,必须是以/x 开头 ，强调‘开头’如：
    app.use('/a',function(repuest,response,next){
      console.log('test')
    });
    
    // 3.get和post是严格模式的，表示以/a为请求时才执行里面的代码。
    app.get('/a',function(repuest,response,next){
      console.log('test')
    });
    app.post('/a',function(repuest,response,next){
      console.log('test')
    });
    
    
    // 四个参数的中间件：
    app.use(function(error,require,response,next){
      res.status(500).send('This is error')
    });

mock模拟数据：模拟数据接口的数据，提高前端开发效率，实际就是一个json文件，不同router定义不同意义的接口。

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：[e-mail]联系笔者删除。
笔者：苦海