express 静态资源托管

通过 express 让某个 url 输出HTML页面

1. 读文件

• fs.readFileSyne(‘文件路径’); //读出来的是buffer 会下载
  • ①转字符串 toString res.set(‘Content-Type’,‘text/html; charset=utf-8’); //设置响应头使浏览器输出HTML
  • ②直接使用 res.sendFile(‘需要渲染的页面路径[绝对路径]’); path.resolve(__dirname,’’);

server.get('/',(req,res) => {let data = fs.readFileSync('./index/index.html');console.log(data.toString());res.set('Content-Type','text/html;charset=utf-8');// res.sendFile(path.resolve(__dirname,'./index/index.html'));
});

使用 res.sendFile 每次引入不同文件都需要创建一个路由 太麻烦，需要静态资源托管
静态资源托管：将项目下的某个文件夹作为静态资源托管的文件夹，后续只要想访问这个文件夹的资源，都可通过某种规则的路径来访问

• 配置静态资源托管的文件夹

//http://localhost:3000/app.use(express.static(path.resolve(__dirname,'./public')));  //app为express实例 use使用中间件//这时可将public文件看成web服务的根目录 .///http://localhost:3000/css/style.css

• 也可通过设置来修改静态资源托管的根路径 app.use

//http://localhost:3000/staticapp.use('/static',express.static(path.resolve(__dirname,'./public')));

• express 中间件
  • express.json()
  • express.urlencode() （req.body）
  • cookieParser()
  • express.static()

中间件其实是一个携带req、res、next这三个参数的函数，在请求与响应之间做一些中间处理的代码

//定义一个中间件函数
const name = (req,res,next) => {//需要做的事next();
};
server.use(name); //调用这个中间件

• 注意

  • 中间件函数，在做完事情之后，必须调用 next() 否则程序不会往下走

  • 中间件函数的调用必须放在需要使用的函数的前面

一、 实现一个日志输出的中间件
在这个项目中所有的请求，都要输出一个日志。日志包含请求机器的IP地址、请求路径、请求时间

// 自己实现一个中间件，中间件其实就是一个函数，携带者 req | res | next 这三个参数的函数
// 1. 定义这样的一个中间件函数出来
const logger = (req, res, next) => {console.log(`请求的ip地址是：${req.ip}, 请求的路径是：${req.url}, 请求的时间是：${new Date().getTime()}`);next();
};
// 2. 使用 server.use() 调用这个中间件 use 方法需要接受的是一个携带了 req| res| next 的函数
server.use(logger);
//在这个代码后面的请求都能使用上这个中间件

中间件可以重写 req、res 在其上面添加属性方法

二、实现一个让每个路由身上都能访问到 req.requestTime 的中间件

const helloWorld = (req, res, next) => {req.requestTime = new Date().getTime();next();
};
server.use(helloWorld);

三、思考实现一个cookieParser() 中间件 定义方法 给req加cookie(先得到cookie) cookie会随http的请求携带在请求头上 req.get 获取指定的HTTP的请求头->拆分成对象->写入res的对象上

1. req.get(‘Cookies’) 请求头中的数据
2. req.cookies = 1中拿出的数据经过转化成的对象

四、可配置的中间件
希望这个中间件能够通过不同的设置，让其 requestTime 是一个不同的格式
比如：1. 时间戳 2. 年份 3. 月份

const helloWorld = num => { //num 配置的参数return (req, res, next) => { //闭包let date = new Date();if (num === 1) {req.requestTime = date.getTime();}if (num === 2) {req.requestTime = date.getFullYear();}if (num === 3) {req.requestTime = date.getMonth();}next();};
};server.use(helloWorld(3));

• use 是全局中间件的设置

server.use(helloWorld(3));

可以局部设置中间件，给具体某一个路由设置某个中间（路由可有多个callback）

server.get("/a", helloWorld(1), (req, res) => {console.log(req.requestTime);res.send("a");});server.get("/b", helloWorld(2), (req, res) => {console.log(req.requestTime);res.send("b");});server.get("/c", helloWorld(3), (req, res) => {console.log(req.requestTime);res.send("c");});

express 跨域

// 设置 cors 允许跨域
// 在响应头中加入一个属性 Access-Control-Allow-Origin
// 将这个属性的值设置为 *
server.use((req, res, next) => {res.set("Access-Control-Allow-Origin", "*");// ...next();
});server.get("/getStudent", (req, res) => {res.send({code: 0,msg: "获取学生列表成功",data: [{ id: 1, name: "张三", age: 18 }, { id: 2, name: "李四", age: 20 }]});
});

• 此处应用 live-server 工具模块 使HTML页面在后台打开

momentjs.cn - 日期时间格式化工具类

// server.use(helloWorld(2)); // YYYY-mm-dd yy-mm-dd hh:mm:ss

1. npm install --save moment
2. 引入并使用

const moment = require('moment');
const helloWorld = str => {return (req, res, next) => {req.requestTime = moment().format(str);next();};
};server.get("/a", helloWorld("YYYY-MM-DD"), (req, res) => {console.log(req.requestTime);res.send("a");
});

服务端打开html页面

live-server 一个 nodejs d 的工具模块，能快速的帮我们将某个文件夹作为web服务的根目录文件夹，并且以 localhost:8080 端口监听

1. 全局安装 npm install -g live-server
2. 在某个文件夹下面，使用 live-server 这个命令即可