Express 初级入门

express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架

Express官网 教程文档

一、Express开始

1.1 安装

1. 新建项目文件，初始化 node 
npm init -y

2. 安装 Express
npm install express --save

3. 项目中引入包
const express = require('express')
获 import express from 'express'

1.2 hello word 案例

// 引包
const express = require('express')

// 实例化
const app = express()

// 开放静态资源
app.use('/static',express.static(path.join(__dirname,'public')));

// 监听 get 请求，当请求路径为 '/' 时，响应内容
app.get('/', (req, res) => {
    res.send('123')
})

// 启动服务器，使用端口 3000 
app.listen(3000, () => {
    console.log('服务器启动成功！端口：3000')
})

二、Express 基础

2.1 路由方法

• app.get(path, function)

  • 监听 get 请求，如果匹配成功，响应函数体内的操作
  • 一般函数体可使用 es6 语法

  // GET method route
  app.get('/', function (req, res) {
    res.send('GET request to the homepage')
  })
  

• app.post(path, function)

  • 监听 post 请求，如果匹配成功，响应函数体内的操作

  // POST method route
  app.post('/', function (req, res) {
    res.send('POST request to the homepage')
  })
  

• **app.all(path, function) **

  • 监听所有请求，如果匹配成功，响应函数体内的操作
  • 相比于普通的GET 和 POST 请求方法，ALL 方法多了一个 next 方法的运用
  • 这个方法在给特定前缀路径或者任意路径上处理时会特别有用。 比如你想把下面的路由放在所有其它路由之前，它需要所有从这个路由开始的加载验证，并且自动加载一个用户 记住所有的回调都不应该被当作终点， loadUser 能够被当作一个任务，然后next()去匹配接下来的路由。

  app.all('/secret', function (req, res, next) {
    console.log('Accessing the secret section ...')
    next() // pass control to the next handler
  })
  

• app.use([path], function)

  • 如果不输入路径，默认为根路径 '/'

  // 一个简单的 logger
  app.use(function(req, res, next){
    console.log('%s %s', req.method, req.url);
    next();
  });
  

  • 挂载的路径不会在req里出现，对中间件 function**不可见，这意味着你在function的回调参数req里找不到path。 这么设计的为了让中间件可以在不需要更改代码就在任意"前缀"路径下执行

    这里有一个实际应用场景，常见的一个应用是使用./public提供静态文件服务， 用 express.static() 中间件:

    app.use(express.static(__dirname + '/public'));
    

2.2 解析参数方法

• 2.1 req.query 解析 GET 传参

  • 例如：请求路径为 http://localhost:3000/?id=1&name='张三' 时

    app.get('/', (req, res) => {
        let data = req.query
        res.send(data)
    })
    
    ==>屏幕输出
    {
        id: 0,
        name: "张三"
    }
    

• 2.2 req.params 解析 GET 传参

  • 例如：请求路径为 http://localhost:3000/user/10 时

    app.get('/user/:id', (req, res) => {
        console.log(req.params)
    })
    
    ==>终端控制台输出
    {
        id: 10
    }
    

• 2.3 解析表单参数

  • 需要利用 multer 模块，具体使用方法请参考 七牛云对象云存储 的文档 1.2 板块

2.3 response 返回

2.4 开放跨域请求

• 全部开启
  • 不管什么请求，一律不阻止

// 开放跨域请求
router.all('*',function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, 		   					Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  
    if (req.method == 'OPTIONS') {
      res.send(200); /让options请求快速返回/
    }
    else {
      next();
    }
  });

三、Express 进阶

3.1 use 区分路由

• 引入路由

  app.use('/home', require('./router'))
  

• 区分路由app.use(path,router)

  • 当一个路由有好多个子路由时用 app.use(path,router)

  • 路由/home后面有三个子路由紧紧跟随，分别是/one,/second,/three 如果使用app.get()，则要不断的重复,很麻烦，也不利用区分

3.2 use 开放静态资源

每个项目都有一些开放出来的东西供外部访问，如js，css，images等等

业内习惯将这些东西放在public文件夹内

express.static（）这个api就是专门用来开放静态资源用的，不设置，外界无法访问

var express = require('express');
	var app = express();
	app.use(express.static('public')) //开放静态资源, 恩，一步解决
	app.listen(3000, function() {
	    console.log('run server__')
})

四、基础中间件

4.1 art-template

• 功能
  • 能在页面中很方便的使用render方法将html页面渲染到浏览器中
  • 能使用art-tenplate的模板语法，方便数据的渲染

1. 装包

npm install --save art-template
npm install --save express-art-template

2. 配置页面

设置html引擎
app.engine('html', require('express-art-template'));

设置引擎默认读取目录
app.set('views', path.join(__dirname, 'views'));

设置视图引擎
app.set('view engine', 'html');

3. 实例

var express = require('express');
var app = express();

app.engine('html', require('express-art-template'));
app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'art');

// routes
app.get('/', function (req, res) {
    res.render('index.html', {
        user: {
            name: 'aui',
            tags: ['art', 'template', 'nodejs']
        }
    });
});

4.2 body-parser

• 功能

  • 主要用于 获取 POST 请求的参数
  • 经过这个中间件后，就可以在所有路由处理器的req.body中访问请求参数
  • 在实际项目中，不同路径可能要求用户使用不同的内容类型，body-parser还支持为单个express路由添加请求体解析

• 安装

  1. 装包

     npm i body-parser -save
     

  2. 引包

     const bodyParser = require('body-parser')
     

  3. 配置

     //创建application/json解析
     var jsonParser = bodyParser.json();
     
     //创建application/x-www-form-urlencoded
     var urlencodedParser = bodyParser.urlencoded({extended: false});
     
     // 配置给express实例
     app.use(jsonParser)
     app.use(urlencodedParser)
     

  4. 使用

     //POST /login 中获取URL编码的请求体
     app.post('/login', urlencodedParser, function(req, res){
         if(!req.body) return res.sendStatus(400);
         res.send('welcome, ' + req.body.username);
     })
     或者直接
     app.post('/login', (req, res) => {
         let req = req.body
         console.log(req)
     })
     

4.3 express-session

• 功能

  • 在服务端保存用户的 session
  • 一般用于自动登录校验的功能

• 安装

  • 装包

    npm i express-session -S
    

  • 引包

    const session = require('express-session')
    

  • 正常配置中间件

    // 配置 session 中间件
    // 正常配置时候 session保存在内存中
    
    app.use(session({
        secret :  'secret', // 对session id 相关的cookie 进行签名
        resave : true,
        saveUninitialized: false, // 是否保存未初始化的会话
        cookie : {
            maxAge : 1000 * 60, // 设置 session 的有效时间，单位毫秒
        }
    }))
    

  • 特殊配置

    // 特殊配置时候 session可以保存在 mongodb 数据库中
    
    app.use(session({
        secret: 'secretkey',
        store: new MongoStore({
            db: 'sessiondb'
        })
    }));