Express基于Node.js的Web开发框架 --笔记

从学Node.js语法开始，到Node.js的Web开发相关内容：再到引入Express框架，似乎理解了底层源码之后，再来看Express框架，似乎就很简单啦。
Node.js的Web开发相关内容：

1. Node.js 不需要依赖第三方应用软件(Apache) 可以基于API自己去实现
2. 实现静态资源服务器
3. 路由处理
4. 动态路由
5. 模板引擎
6. get和post参数的处理

也许就是为了开发的方便，从而诞生了Express框架，要是基于Node.js去托管一个静态的网页的话，也许需要这么写

const fs = require('fs');
const path = require('path')
const mime = require('./mime.json')
exports.staticServer = (req,res, root) => {
    fs.readFile(path.join(root,req.url),'utf8', (err, fileContent) => {
        if(err){
            res.writeHead(500,{
                "Content-Type" : "text/plain;charset=utf8"
            })
            res.end("请求的页面不存在")
        }else{
            let ext = path.extname(req.url);
            let dtype = mime[ext] || 'text/html';
            if(dtype.startsWith('text')){
                dtype += ';charset=utf8';
            }
            res.writeHead(200,{
                "Content-Type" : dtype
            })
            res.end(fileContent);
        }
    })
}
```js

搭建一个动态的服务器还需要模板引擎（art-template）：

```js
const http = require('http')
const ss = require('./06.js');
const url = require('url')
const querystring = require("querystring")
const path = require('path')
http.createServer((req, res) => {
    // 启动静态资源

    // if(req.url.startsWith('/www')){
    //     ss.staticServer(req,res,__dirname);
    // }
    // 
    ss.staticServer(req,res,path.join(__dirname));  // 托管静态的网页
    // 动态资源
    if(req.url.startsWith('/login')){
        if(req.method == 'GET'){
            let param = url.parse(req.url, true).query;
            res.writeHead(200,{
                "Content-Type" : "text/plain;charset=utf8"
            })
            if(param.username == 'admin' && param.password == '123'){
                
                res.end("GET验证成功！")
            }else{
                res.end("GET验证失败")
            }
        }
        if(req.method == "POST"){
            let pdata = '';
            req.on('data',(chunk)=>{
                pdata += chunk;
            })
            req.on('end',()=>{
                let obj = querystring.parse(pdata);
                res.writeHead(200,{
                    "Content-Type" : "text/plain;charset=utf8"
                })
                if(obj.username == 'admin' && obj.password == '123'){
                    res.end("登入成功");
                }else{
                    res.end("POST 验证失败")
                }
            })
        }
    }
}).listen(3005,()=>{
    console.log("running");
})

所以Express框架的出现，改善了这个现状。

const express = require('express')
const app = express()

// 监听的路径是‘/‘
app.get('/Home', (req, res) => {
    res.send("OK!");
}).listen(3000, () => {
    console.log("running....");
})
app.use(express.static('public'));
app.use(express.static('myexpress'));

完美的封装了一个基于Node.js的Web开发框架。

Express基本使用

中间件

Express是一个路由和中间件Web框架，其自身的功能很少：Express应用程序本质上是一系列中间件函数调用。
自己的理解就是 中间件是处理过程中的一个环节(本质上就是一个函数) next() 把下一个请求传递给下一个中间件
路由处理程序使您可以为一个路径定义多个路由。
通过next() 就实现了 将控制权传递给下一个中间件。如果要是当前中间件功能结束请求-响应周期，那么请求将会挂起。

要从路由器中间件堆栈中跳过其余中间件功能，请调用next('route')将控制权传递给下一条路由。
注意：next('route')仅在使用app.METHOD()或router.METHOD()函数加载的中间件函数中有效。

使用中间件
接下来要讲的参数的处理也需要用到第三方中间件body-parser

参数处理

对于一个路径的请求，通过路由的分发，请求方式的不同，自然获取的数据方式也不一样，对于常见的get post put delete请求的方式，Express是如何解决的呢？让我们来做个笔记把。

get请求的话，不需要第三方的中间件，通过回调函数中req.query自然可以获取到Obj对象。
POST请求的方式，需要引入第三方的中间件，body-parser 然后将body-parser实例解析器添加相应的路由中去，也就是需要以下命令 挂载中间件
app.use(bodyParser.urlencoded({ extended: false }))
对于传入的数据形式是JSON格式的话，我们需要做的内容就是将
app.use(bodyParser.json()) 完成处理Json格式的数据

const express =  require('express');
const app =  express();
let bodyParser = require('body-parser')
// parse application/x-www-form-urlencoded
// 挂载参数处理中间件
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
// 处理JSON格式的数据
app.use(bodyParser.json())

// 挂载内置的中间件 就是将静态的文件托管
app.use(express.static('public'));
// 处理get提交参数
app.get('/login',(req, res) => {
    let pdata = req.query;
    console.log(pdata);
    res.send("接受数据完成!");
})
// 接受参数post请求
app.post('/login',(req, res) => {
    let pdata = req.body;
    console.log(pdata);
    res.send("数据完成post请求！");
})
app.listen(3000, () =>{
    console.log("Express---running....")
})

模板引擎

Express中使用art-template模板引擎的话 需要兼容它
具体做法如下：

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

然后设置模板引擎的文件位置

app.set('views', path.join(__dirname, 'views'));//设置模板引擎的路径

Express一起使用的一些流行模板引擎是Pug， Mustache和EJS。
当然我这里使用的是art-template

app.set('view engine','art')     // 设置模板引擎  'art' 就是模板引擎的后缀

最后通过res.render(“op1”,‘op2’);
op1 表示的是模板对应的文件名称
op2 对应的就是渲染的数据

const express = require('express');
const path = require('path')
const app = express();
const template = require('art-template')
app.set('views', path.join(__dirname, 'views'));   // 设置模板引擎的路径
app.set('view engine','art')     // 设置模板引擎  'art' 就是模板引擎的后缀
app.engine('art', require('express-art-template'));  // 使express兼容art-templatte模板引擎
app.get('/list', (req, res) =>{
    let data = {
        title : '这个是使用到了art-tmplate模板引擎',
        name : '数据的渲染是需要一个过程的'
    }
    // render是art-template中的方法 
    // 参数一: 是一开始设置模板引擎文件也就是views文件中 指定文件的名称
    // 参数二：渲染模板的数据
    res.render("test",data);
})
app.listen(3000, () => {
    console.log("running....");
})