nodejs 学习-day08

day08

1.回顾一下昨天的授课内容

1.渲染静态页面

2.get请求

3.post请求

4.express简介安装

5.路由

1.定义路由

2.路由类型

​ get post all use

3.路由参数

4.路由级别路由

#############################################################################

2.中间件使用

1.什么是中间件

​ Express是一个自身功能极简，完全是路由和中间件构成一个web开发框架

​ 一个Express应用就是在调用各种中间件。中间件在Express开发中很重要

​ 中间件函数能够访问请求对象 (req)、响应对象 (res) 以及应用程序的请求/响应循环中的下一个中间件函数

​ 该next功能是中间件函数中的一个功能，当被调用时，它将执行当前中间件之后的中间件

​ 下一个中间件函数通常由名为 next 的变量来表示 next使用

2.内置中间件

​ 内置中间件其实就是express自身携带的一些功能 express框架有11个模块 这11个模块都是内置中间件

​ static 渲染静态资源 使用static中间件就是渲染资源

​ 在项目中 一般使用它渲染css image js less 字体 不是渲染html

const express = require('express');
const path = require('path')

let app = express();

// 使用静态资源  一般使用app中的use方法进行
// 使用express.static  内置一个参数  参数是资源的路径
app.use('/haoyang',express.static(path.resolve(__dirname,'./hy')));

app.listen(3000,'127.0.0.1',()=>{
    console.log('服务器正在运行......');
})

3.错误处理中间件

​ status ： 处理http响应码

​ send ： 处理404

4.自定义中间件

​ 自定义中间件其实就是说 我们一个路由无法完成的工作 让多个路由一起完成

const express = require('express');
const fs = require('fs');
const path = require('path');

let app = express();

// 中间件
// app.get('/index',(request,response)=>{
//     let arr = [];
//     // 取出用户数据
//     fs.readFile('./data/a.json','utf-8',(error,data)=>{
//         error ? console.log(11) : arr.push(JSON.parse(data));
//     })
//     console.log(arr);
// })

// 使用自定义中间件解决
// 自定义中间件我们选择使用use方法  因为不确定中间是get或者是post
// 创建多个路由  必须是同名  但是不能响应  使用next调用下一个中间件  同名路由
// next是回调函数的第三个参数
// 我们可以将前面的所有的中间键数据  存储在request对象中
app.use('/index',(request,response,next)=>{
    fs.readFile('./data/a.json','utf-8',(error,data)=>{
        let userEric = JSON.parse(data);
        error ? console.log(11) : request.userEric = userEric;
    })
    setTimeout(() => {
        next();
    }, 200);
})

// 设定第二个路由  必须同名
app.use('/index',(request,response,next)=>{
    fs.readFile('./data/b.json','utf-8',(error,data)=>{
        let carEric = JSON.parse(data);
        error ? console.log(11) : request.carEric = carEric;
    })
    setTimeout(() => {
        next();
    }, 200);
})

// 设定第三个路由  必须同名
app.use('/index',(request,response,next)=>{
    fs.readFile('./data/c.json','utf-8',(error,data)=>{
        let computerEric = JSON.parse(data)
        error ? console.log(11) : request.computerEric = computerEric;
    })
    setTimeout(() => {
        next();
    }, 200);
})

// 响应出index路由的数据
app.use('/index',(request,response)=>{
    let arr = [request.userEric,request.carEric,request.computerEric];
    // console.log(request.userEric);
    response.send(arr);
})


app.listen(3000,'127.0.0.1',()=>{
    console.log('服务器正在运行......');
})

3.第三方中间件

​ 第三方中间件是我们使用最多的一种方式 因为Node本身几乎没有什么功能

​ express主题只有一千余行代码 所以说 使用的功能很少 几乎都要依赖于第三方中间件

​ 第三方中间件 ： 基于express的模块

1.nodemon

​ 热更新 我们使用Node的时候 编辑代码之后 我们经常会重启服务器 否则不加载

​ 那么如果使用热更新 就不会有这个问题 实时更新 但是只能用来测试 不要上线运行

​ 这是一个工具 所以说我们安装的时候 使用全局安装

​ 命令 ： npm install nodemon -g

​ 安装之后生成一个命令 生成nodemon

​ 安装好之后 打开package.json 把主文件改成我们要运行的文件

2.pug

​ 使用模板引擎的时候 需要先下载 但是模板引擎只需要下载 不需要安装

​ 命令 ： npm install pug

​ 使用的时候 不需要引入

const express = require('express');
const path = require('path')

let app = express();

// 使用模板引擎之前  必须进行配置模板引擎
// 配置模板引擎使用的是app中的set方法
// 配置模板引擎的类型
app.set('view engine','pug');
// 配置模板引擎的路径
app.set('views','./template/');

// 配置好模板引擎就可以使用了
app.get('/index',(request,response)=>{
    // 渲染模板引擎  使用response中的render方法
    // render方法内置两个参数  第一个参数是模板引擎的名字
    // 第二个参数是我们当前的程序  渲染给模板的数据
    let str = 'Eric';
    let num = 200;
    // response.render('index');
    response.render('index',{str,num});
});

app.listen(3000,'127.0.0.1',()=>{
    console.log('服务器正在运行......');
})

3.ejs

1.概念

EJS 是一套简单的模板语言，在NodeJS后端利用ejs模板引擎, 生成 HTML 页面

2.优点

​ 纯 JavaScript

​ 快速开发

​ 执行迅速

​ 语法简单: 可以直接在HTML中书写JS代码

​ 同时支持前后端环境

​ 相比pug, 更贴近于我们现使用的HTML标签语法

3.使用

​ 安装ejs模块, npm install ejs

​ 配置模板引擎类型 ： app.set(‘view engine’, ‘ejs’)

​ 配置模板引擎的路径 ： app.set(“views”, “./template”);

​ 如果说在模板引擎中输出标识符 <%=标识符%>

​ 对象不能直接进行输出 会出现【object object】

​ 那么我们使用对象必须进行迭代 也就是遍历 我们在模板引擎的<%%> 里面 完全可以使用JS代码

​ 如果说不涉及输出 只是读取JS代码 不能家等号 因为等号是输出的意思 <%%>

​ 再如果说 我们传递到后台中的数据是一个html标签 那么需要使用<%-标识符%>

4.作用

​ 模板引擎可以让(网站)程序实现界面与数据分离,业务代码与逻辑代码的分离,这就大大提升了开发效率

​ 良好的设计也使得代码重用变得更加容易

​ 我们司空见惯的模板安装卸载等概念,基本上都和模板引擎有着千丝万缕的联系

​ 模板引擎不只是可以让你实现代码分离,也可以实现数据分离(动态数据与静态数据),还可以实现代码单元共享

​ 甚至是多语言、动态页面与静态页面自动均衡(SDE)等等与用户界面可能没有关系的功能

const express = require('express');
const path = require('path')

let app = express();

// 配置模板引擎类型
app.set('view engine','ejs');
// 配置模板引擎的路径
app.set('views','./template/');

// 配置好模板引擎就可以使用了
app.get('/index',(request,response)=>{
    let num = 999999999999999;
    let str = '你好  Eric';
    let obj = {name:'Eric',age:18,sex:'男'};
    let arr = [1,3,5,7,9];
    let data = [
        {name:'貂蝉',age:17,sex:'女'},
        {name:'大乔',age:18,sex:'女'},
        {name:'西施',age:16,sex:'女'},
        {name:'王昭君',age:14,sex:'女'},
        {name:'杨玉环',age:13,sex:'女'},
        {name:'褒姒',age:16,sex:'女'},
    ];
    let html = "<h1>多多益善</h1>";
    response.render('index',{num,str,obj,arr,data,html});
});

app.listen(3000,'127.0.0.1',()=>{
    console.log('服务器正在运行......');
})

​ 模板引擎文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ejs模板引擎</title>
</head>
<body>
    <!-- <div><%=num%></div> -->
    <!-- <div><%=str%></div> -->
    <!-- <div><%=arr%></div> -->
    <!-- <div><%=obj%></div> -->
    <!-- <div><%=data%></div> -->
    <!-- <div><%=html%></div> -->
    <!-- <% for (let i in obj) { %>
        <p style="background:#CCC"><%=obj[i]%></p>
    <% } %> -->
    <table width="60%" align="center" border="1" cellspacing='0'>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <% data.forEach(element=>{ %>
            <tr align="center">
                <td><%=element.name%></td>
                <td><%=element.age%></td>
                <td><%=element.sex%></td>
            </tr>
        <% }) %>
    </table>
    <div><%-html%></div>
</body>
</html>

4.body-parser

1.作用

​ 它主要是用来处理post参数的 因为表单或者ajax经常会和后台进行交互数据

​ 那么交互数据的时候 怎么将数据传输到后台 不能像Node原生代码一样

​ 所以说express内置中间件就有处理 但是我们习惯性的使用body-parser第三方中间件

2.下载安装

​ 命令 ： npm install body-parser

​ 引入到页面中使用 使用之前需要进行配置

​ 配置接收表单参数 ： app.use(bodyParser.urlencoded({extended : true}));

​ 配置接收JSON ：app.use(bodyParser.json());

3.使用

​ 使用bodyparser的时候 我们接收post参数 参数存储在request对象中的body属性中

​ 和路由参数存储在params属性中的效果是一样的 如果说body属性中有数据 那么他就是一个对象

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path')
let app = express();

// 配置bodyparser  使用app中的use方法
// 配置表单数据  内置一个参数  参数是一个对象
// 如果说extended的值为false  那么可以接受 字符串和数组  如果说为true  那么可以接受任意数据类型
app.use(bodyParser.urlencoded({extended : true}));
// 配置JSON
app.use(bodyParser.json());

// 配置模板引擎类型
app.set('view engine','ejs');
// 配置模板引擎的路径
app.set('views',path.resolve(__dirname,'./template/'));

// 配置好模板引擎就可以使用了
app.post('/index',(request,response)=>{
    console.log(request.body);
});

app.listen(3000,'127.0.0.1',()=>{
    console.log('服务器正在运行......');
})

5.multer

​ 主要是作为文件上传模块 这个模块我很少使用 因为他不能和其他表单数据一起上传

​ 下载安装 ： npm install multer

​ 直接引入使用

const express = require('express');
const multer = require('multer');
const paths = require('path');
const fs = require('fs');
let app = express();

// 指定文件上传的目录
let upload = multer({dest : './upload/'});

app.post('/index',upload.single('photo'),(request,response)=>{
    // 我们可以使用request对象中的file属性  这是存储文件上传的内容
    // console.log(request.file);
    let {originalname,path} = request.file;
    /*
    {
        fieldname: 'photo',
        originalname: '1.jpg',
        mimetype: 'image/jpeg',
        destination: './upload/',
        filename: '0c15b12905fb3310dd1059de76f30984',
        path: 'upload\\0c15b12905fb3310dd1059de76f30984',
        size: 38045
        }
    */
   let extname = paths.extname(originalname);
   let newFileName = './upload/' + Date.now() + extname;
    fs.rename(path,newFileName,err=>{
        if (err) console.log('123123');
        else response.send('上传成功');
    })
});

app.listen(3000,'127.0.0.1',()=>{
    console.log('服务器正在运行......');
})

6.formidable

​ 这个中间件也是文件上传 只不过他可以和其他的表单数据同时上传 所以一般时候使用的比较多

​ 下载命令 ： npm install formidable

7.crypto

8.svg-captcha

9.cookie-parser

10.express-session

11.server-favicon

12.express-generator

​ 他就是express的脚手架