8、Node.js---express框架

目录

（一）express 介绍

（二）express 使用

1、express 下载

2、express 初体验

（三）express 路由 

1、什么是路由

2、路由的使用

3、获取请求报文参数

4、获取路由参数

5、路由参数练习

（四）express响应设置

（五）express 中间件

1、什么是中间件

2、中间件的作用

3、中间件的类型

3.1定义全局中间件

3.2多个全局中间件 

3.3 定义路由中间件

全局中间件例子：(把中间件放在路由外面)

​编辑

路由中间件实践(把路由中间件放在要受控制的函数里面)

4、静态资源中间件

5、获取请求体数据 body-parser

 6、防盗链

 （六）Router

 1、什么是 Router

2、Router 作用

3、 Router 使用

（七）EJS 模板引擎

1、什么是模板引擎

2、什么是 EJS

3、EJS 初体验 

 4、EJS 常用语法

5、ejs列表渲染

 6、ejs条件渲染（根据条件，输出需求）

 7、express中使用ejs

 8、express-generator工具

 （八）express框架--查看文件上传报文

  （九）express框架--处理文件上传

 （十）案例：记账本

---

（一）express 介绍

express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架，官方网址： https://www.expressjs. com.cn/

简单来说， express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用（ HTTP 服务）

（二）express 使用

1、express 下载

express 本身是一个 npm 包，所以可以通过 npm 安装

npm init

npm i express

2、express 初体验

//1、导入express
const express = require('express');

//2、创建应用对象
const app =express();

//3、创建路由
app.get('/home',(req,res)=>{
    res.end('hello,express');
});

//4、监听端口
app.listen(3000,()=>{
    console.log('服务已启动...')
})

（三）express 路由 

1、什么是路由

官方定义： 路由确定了应用程序如何响应客户端对特定端点的请求

2、路由的使用

怎么样可以指定发送GET请求、post请求？

表单<form></form>和ajax可以。

 

*号：后面接所有路由地址都行

 

 一个路由的组成有 请求方法 ， 路径 和 回调函数 组成

express 中提供了一系列方法，可以很方便的使用路由，使用格式如下：

app.<method>(path，callback)

示例：

//导入 express
const express = require('express');
//创建应用对象
const app = express();
//创建 get 路由
app.get('/home', (req, res) => {
    res.send('网站首页');
});
//首页路由
app.get('/', (req,res) => {
    res.send('我才是真正的首页');
});
//创建 post 路由
app.post('/login', (req, res) => {
    res.send('登录成功');
});
//匹配所有的请求方法
app.all('/search', (req, res) => {
    res.send('1 秒钟为您找到相关结果约 100,000,000 个');
});
//自定义 404 路由
app.all("*", (req, res) => {
    res.send('<h1>404 Not Found</h1>')
});
//监听端口 启动服务
app.listen(3000, () =>{
    console.log('服务已经启动, 端口监听为 3000');
});

3、获取请求报文参数

//1、导入express
const express = require('express');

//2、创建应用对象
const app =express();

//3、创建路由
//获取报文的方式与原生 HTTP 获取方式是兼容的
app.get('/request',(req,res)=>{
    //原生操作
    console.log(req.method);
    console.log(req.url)
    console.log(req.httpVersion)
    console.log(req.headers)

    //experss操作  express 独有的获取报文的方式
    console.log(req.path)
    console.log(req.query)//获取查询字符串
    console.log(req.ip) //获取ip
    console.log(req.get('host'))//获取请求头

});

//4、监听端口
app.listen(3000,()=>{
    console.log('服务已启动...')
})

4、获取路由参数

什么是路由参数？

路由参数指的是 URL 路径中的参数（数据）

例子：

//1、导入express
const express = require('express');

//2、创建应用对象
const app =express();

//3、创建路由
//get方法
app.get('/:id.html',(req,res)=>{

    //获取路由参数
    console.log(req.params.id);
    res.setHeader('content-type','text/html;charset=utf-8');
    res.end('商品详情');
    
});


//4、监听端口
app.listen(3000,()=>{
    console.log('服务已启动...')
})

5、路由参数练习

说明：

根据路由参数获取歌手信息

路径结构如下：/singer/1.html

（四）express响应设置

express 框架封装了一些 API 来方便给客户端响应数据，并且兼容原生 HTTP 模块的获取方式

//获取请求的路由规则
app.get("/response", (req, res) => {
//1. express 中设置响应的方式兼容 HTTP 模块的方式
res.statusCode = 404;
res.statusMessage = 'xxx';
res.setHeader('abc','xyz');
res.write('响应体');
res.end('xxx');
//2. express 的响应方法
res.status(500); //设置响应状态码
res.set('xxx','yyy');//设置响应头
res.send('中文响应不乱码');//设置响应体
//连贯操作
res.status(404).set('xxx','yyy').send('你好朋友')
//3. 其他响应
res.redirect('http://atguigu.com')//重定向
res.download('./package.json');//下载响应
res.json();//响应 JSON
res.sendFile(__dirname + '/home.html') //响应文件内容
});

（五）express 中间件

1、什么是中间件

中间件（ Middleware ）本质是一个回调函数

中间件函数 可以像路由回调一样访问 请求对象（ request ） ， 响应对象（ response ）

2、中间件的作用

中间件的作用 就是 使用函数封装公共操作，简化代码

3、中间件的类型

• 全局中间件
• 路由中间件

3.1定义全局中间件

每一个请求 到达服务端之后 都会执行全局中间件函数

声明中间件函数

let recordMiddleware = function(request,response,next){
//实现功能代码
//.....
//执行next函数(当如果希望执行完中间件函数之后，仍然继续执行路由中的回调函数，必须调用next)
next();
}

应用中间件

app.use(recordMiddleware);

 声明时可以直接将匿名函数传递给 use

app.use(function (request, response, next) {
console.log('定义第一个中间件');
next();
})

3.2多个全局中间件 

express 允许使用 app.use() 定义多个全局中间件

app.use(function (request, response, next) {
console.log('定义第一个中间件');
next();
})
app.use(function (request, response, next) {
console.log('定义第二个中间件');
next();
})

3.3 定义路由中间件

如果 只需要对某一些路由进行功能封装 ，则就需要路由中间件

app.get('/路径',`中间件函数`,(request,response)=>{
});
app.get('/路径',`中间件函数1`,`中间件函数2`,(request,response)=>{
});

全局中间件例子：(把中间件放在路由外面)

简单报错日志：

//导入模块
const express = require("express");
const fs = require('fs');
const path = require('path');
//创建应用对象
const app = express();

//声明中间件函数
function recordMiddleware(req,res,next){
 //获取url和ip地址
 let {url,ip}=req;
 //将信息保存到  access.log文件中
 fs.appendFileSync(path.resolve(__dirname+'/access.log'),`${url}  ${ip}\r\n` )
//调用next
    next()
}


//使用中间件函数
app.use(recordMiddleware);
//创建路由
app.get('/home',(req,res)=>{
   
    res.send("前台页面")
});

app.get('/admin',(req,res)=>{
    res.send("后台页面")
});

app.get('*',(req,res)=>{
    res.send("404 not found")
})

//监听端口
app.listen(3000,()=>{
    console.log('服务启动')
})

 

路由中间件实践(把路由中间件放在要受控制的函数里面)

针对/admin  /setting的请求，要求URL携带code= 521参数，如未携带提示【暗号错误】

//导入模块
const express = require("express");

//创建应用对象
const app = express();

//声明中间件函数
let checkCodeMiddleWare = (req,res,next)=>{
//判断URL中是否code参数等于521
if(req.query.code==='521'){
    next();
}else{
   res.send("暗号错误")
}
}

//创建路由

//前台
app.get('/home',checkCodeMiddleWare,(req,res)=>{
   
    res.send("前台页面")
});

//后台
app.get('/admin',checkCodeMiddleWare,(req,res)=>{
    res.send("后台页面")
   
});

//后台设置页面
app.get('/setting',(req,res)=>{
    res.send("设置页面")
})

app.all('*',(req,res)=>{
    res.send("404 not found")
})



//监听端口
app.listen(3000,()=>{
    console.log('服务启动')
})

4、静态资源中间件

express 内置处理静态资源的中间件

//引入express框架
const express = require('express');
//创建服务对象
const app = express();
//静态资源中间件的设置，将当前文件夹下的public目录作为网站的根目录
app.use(express.static('./public')); //当然这个目录中都是一些静态资源
//如果访问的内容经常变化，还是需要设置路由
//但是，在这里有一个问题，如果public目录下有index.html文件，单独也有index.html的路由，
//则谁书写在前，优先执行谁
app.get('/index.html',(request,response)=>{
respsonse.send('首页');
});
//监听端口
app.listen(3000,()=>{
console.log('3000 端口启动....');
});

注意事项 :

1. index.html 文件为默认打开的资源

2. 如果静态资源与路由规则同时匹配，谁先匹配谁就响应

3. 路由响应 动态资源（排行榜。。。） ，静态资源中间件响应 静态资源（图片等）

5、获取请求体数据 body-parser

express 可以使用 body - parser 包处理请求体

第一步：安装

npm i body-parser

第二步：导入 body-parser 包

const bodyParser = require('body-parser');

第三步：获取中间件函数

//处理 querystring 格式的请求体
let urlParser = bodyParser.urlencoded({extended:false}));
//处理 JSON 格式的请求体
let jsonParser = bodyParser.json();

第四步：设置路由中间件，然后使用 request.body 来获取请求体数据

app.post('/login', urlParser, (request,response)=>{
//获取请求体数据
//console.log(request.body);
//用户名
console.log(request.body.username);
//密码
console.log(request.body.userpass);
response.send('获取请求体数据');
});

获取到的请求体数据：

[Object: null prototype] { username: 'admin', userpass: '123456' }

可以参考   npm

案例：要求搭建HTTP服务

GET  /login 显示表单网页

POST    /login 获取表单中的【用户名】 和【密码】

//导入模块
const express = require('express');
const bodyParser = require('body-parser');

//创建应用对象
const app = express();
//处理 querystring 格式的请求体
let urlParser = bodyParser.urlencoded({extended:false});
//处理 JSON 格式的请求体
// let jsonParser = bodyParser.json();


//创建路由
//get规则
app.get('/login',(req,res)=>{
    //响应HTML文件
    res.sendFile(__dirname+'/form.html')
})
//post规则
app.post('/login',urlParser,(req,res)=>{  //当urlParser中间件函数执行完毕后，会往请求对象（request）身上添加一个属性，名字叫body
    //获取用户请求体和密码
    res.send('获取数据')
    console.log(req.body)

})

//监听端口
app.listen(3000,()=>{
    console.log("服务启动")
})

 6、防盗链

只能在限制域名内访问，超出则不会响应。

关键点：referer请求头

案例：要是访问地址不是127.0.0.1就不会显示图片。

//导入模块
const express = require("express");

//创建应用对象
const app = express();

//声明中间件
app.use((req,res,next)=>{
    //检测请求头中的referer 是否为127.0.0.1
    //获取referer
    let referer = req.get('referer');

    if(referer){
          //实例化
    let url = new URL(referer);
    //获取hostname
    let hostname = url.hostname
    console.log(hostname)
    //判断
    if(hostname!='127.0.0.1'){
        //响应404
        res.status(404).send('<h1>404 not found</h1>');
        return;
    }
    
    }
    next();
})

//静态资源中间件设置
app.use(express.static(__dirname+'/public')) //这个路径就是静态文件夹的路径



//监听端口
app.listen(3000,()=>{
    console.log('服务启动')
})

 （六）Router

 1、什么是 Router

express 中的 Router 是一个完整的中间件和路由系统，可以看做是一个小型的 app 对象。

2、Router 作用

对路由进行模块化，更好的管理路由

3、 Router 使用

创建独立的 JS 文件（homeRouter.js）

//1. 导入 express
const express = require('express');
//2. 创建路由器对象
const router = express.Router();
//3. 在 router 对象身上添加路由
router.get('/', (req, res) => {
res.send('首页');
})
router.get('/cart', (req, res) => {
res.send('购物车');
});
//4. 暴露
module.exports = router;

主文件

const express = require('express');
const app = express();
//5.引入子路由文件
const homeRouter = require('./routes/homeRouter');
//6.设置和使用中间件
app.use(homeRouter);
app.listen(3000,()=>{
console.log('3000 端口启动....');
})

（七）EJS 模板引擎

1、什么是模板引擎

模板引擎是分离 用户界面和业务数据 的一种技术

2、什么是 EJS

EJS 是一个高效的 Javascript 的模板引擎

官网 : https://ejs.co/

中文站： https://ejs.bootcss.com/

3、EJS 初体验 

npm i ejs --save

代码示例

//1.引入ejs
const ejs = require('ejs');
//2.定义数据
let person = ['张三','李四','王二麻子'];
//3.ejs解析模板返回结构
//<%= %> 是ejs解析内容的标记，作用是输出当前表达式的执行结构
let html = ejs.render(‘<%= person.join(",") %>’, {person:person});
//4.输出结果
console.log(html);

自己写的案例：

js页面：

//1、安装EJS
//2、导入EJS
const ejs = require('ejs');
const fs=require('fs');


//字符串
let china="中国";
let weather='今天天气不错';

//声明变量
let str = fs.readFileSync('01.html').toString();

//让ejs渲染
let result = ejs.render(str,{china,china,weather});

console.log(result);

html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>我爱你 <%= china%></h2>
<p><%= weather%></p>
</body>
</html>

 4、EJS 常用语法

执行 JS 代码

<% code %>

输出转义的数据到模板上

<%= code %>

输出非转义的数据到模板上

<%- code %>

5、ejs列表渲染

js页面：

//导入模块
const ejs = require('ejs');

const fs=require('fs');

const xiyou =["唐僧","孙悟空","猪八戒","沙僧"];

let html = fs.readFileSync('./02.html').toString();
let result = ejs.render(html,{xiyou:xiyou});

console.log(result);

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>西游F4</title>
</head>
<body>
<h2>西游四人组</h2>
<ul>
    <% xiyou.forEach(item=>{%>
        <li><%=item%></li>
        <% }) %>
</ul>
</body>
</html>

 6、ejs条件渲染（根据条件，输出需求）

通过 isLogin 决定最终的输出内容
true 输出 [<span>欢迎回来</span>]

false 输出 [<button>登录</button>  <button>注册</button>]

//导入模块
const ejs=require('ejs');
const fs = require('fs')


//变量
let isLogin=true;

//获取html
let html = fs.readFileSync('./03_条件渲染.html').toString();
let result=ejs.render(html,{Login:isLogin});

console.log(result);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>西游F4</title>
</head>
<body>
<% if(Login){%>
    <span>欢迎回来</span>
    <%}else{%>
        <button>登录</button>   <button>注册</button>
        <%}%>
</body>
</html>

 7、express中使用ejs

先创建一个文件夹views

在创建一个文件：home.ejs用来写模板引擎文件。

//导入express
const express =require('express');
const path = require('path');

//创建应用对象
const app = express();
//1、设置模板引擎
app.set('view engine','ejs');//模板引擎pug twing
//2、设置模板文件存放的位置   模板文件：具有模板语法内容的文件
app.set('views',path.resolve(__dirname,'./views'));

//创建路由
app.get('/home',(req,res)=>{
    //3、render响应
    // res.render('模板文件名','数据')
    //声明变量
    let title = '尚硅谷-让天下没有难学的技术';
    res.render('home',{title});
    //创建模板文件

});

//监听端口，启动服务
app.listen(3000,()=>{
    console.log('服务已启动。。。')
})

html：home.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2><%=title%></h2>
</body>
</html>

文件结构：

 8、express-generator工具

通过应用生成器工具express-generator 可以快速创建一个应用的骨架

全局安装

 npm install -g express-generator

查看

express 

快速创建文件夹（-e是安装ejs的模板引擎，后面跟着你要创建文件夹的名字）

 express -e 06_generator

 

 进入刚创建的文件，安装依赖

npm i

 运行一下

npm start

打开127.0.0.1:3000

在 package.json文件修改

 （八）express框架--查看文件上传报文

准备工作：

先在上一题新建的06_generator文件夹里新建一个views文件夹

然后在建一个portrait.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 文件上传的必须属性：enctype="multipart/form-data"> -->
<form action="/portrait" method="post" enctype="multipart/form-data">
用户名：<input type="text" name="username">
<br>
头像：<input type="file" name="portrait">
<br>
<button>点击</button>

</form>
</body>
</html>

js文件

var express = require('express');
var router = express.Router();




//显示网页的（表单）
router.get('/portrait',(req,res)=>{
  res.render('portrait');
});

//处理文件上传
router.post('/portrait',(req,res)=>{
  res.send('成功')
})


module.exports = router;

要是新建了路由文件，一定要在app.js文件里配置路由。

运行：

  （九）express框架--处理文件上传

准备工作：

安装 formidable

npm i formidable

var express = require('express');
var router = express.Router();
const formidable = require('formidable');
const path=require('path');



//显示网页的（表单）
router.get('/portrait',(req,res)=>{
  res.render('portrait');
});

//处理文件上传
router.post('/portrait',(req,res,next)=>{
  //创建form对象
  const form = formidable({ multiples: true ,
  //设置文件上传的保存目录
  uploadDir:path.resolve(__dirname,'../public/images'),
  //保持文件后缀
  keepExtensions:true
  });
//请求解析报文
  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err);
      return;
    }
    console.log(fields)//text radio checkbox select
    //图片的URL保存在了files里的newFilename。
    console.log(files)//file

    // res.json({ fields, files });

    //服务器保存该图片的访问URL
    let url = '/images/'+files.portrait.newFilename;//将来将此数据保存在数据库中。
    res.send(url)
  });
})


module.exports = router;

portrait.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 文件上传的必须属性：enctype="multipart/form-data"> -->
<form action="/portrait" method="post" enctype="multipart/form-data">
用户名：<input type="text" name="username">
<br>
头像：<input type="file" name="portrait">
<br>
<button>点击</button>

</form>
</body>
</html>

运行： 

 （十）案例：记账本

准备工作：

express -e accounts

npm i

lowdb:(建议下载1.0.0版本，不用ES6语法)了解即可

Simple to use local JSON database. Use native JavaScript API to query. Written in TypeScript. 🦉

易于使用的本地JSON数据库。使用本机JavaScript API进行查询。用TypeScript编写。

在项目里新建一个文件夹test

在先建一个lowdb.js

控制台进入test文件夹

cd test

安装

npm i lowdb@1.0.0

使用方法：

//导入lowdb
const low = require('lowdb')
const FileSync = require('lowdb/adapters/FileSync')
 
const adapter = new FileSync('db.json')
//获取db对象
const db = low(adapter)


//初始化数据
db.defaults({ posts: [], user: {} })
  .write()

//写入数据
db.get('posts')
  .push({ id: 1, title: 'lowdb is awesome'})
  .write()

//获取单条数据
db. get('posts').find({id:1}).value();

//获取数据
console.log(db.get('posts').value());

//删除数据
let res=db.get('posts').remove({id:1}).write();
console.log(res)

//更新数据
db. get('posts').find({id:1}).assign({title:'今天下雨啦'}).write();

shortid：自动添加id名

npm i shortid

详细见项目代码--案例_记账本