前端核心技术Node.js（四）——express框架

express框架

express介绍

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

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

express使用

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

express路由

什么是路由

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

路由的使用

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

express中提供了一系列方法，可以很方便的使用路由，使用格式如下：
app.<method>(path,callback)

代码示例：

javascript 复制代码

//导入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.end('login')
})

获取请求参数

express框架封装了一些API来方便获取请求报文中的数据，并目兼容原生HTTP模块的获取方式

javascript 复制代码

//导入express
const express =require('express');
//创建应用对象
const app =express();
//获取请求的路由规则
app.get('/request',(req,res)=>{
//1.获取报文的方式与原生HTTP获取方式是兼容的
console.log(req.method);
console.log(req.ur1);
console.log(req.httpVersion);
console.log(req.headers);
//2.express独有的获取报文的方式
//获取查询字符串
console.log(req.query)//『相对重要
//获取指定的请求头
console.log(req.get('host'));
res.send('请求报文的获取')
})
//启动服务
app.listen(3000,()=>{
console.1og('启动成功..')
})

获取路由参数

路由参数指的是URL路径中的参数（数据）
app.get('/:id.html',(req,res)=> res.send('商品详情，商品id为'+req.params.id): })

express响应设置

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

javascript 复制代码

//获取请求的路由规则
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(494).set('xxx','yyy').send('你好朋友')
//3.其他响应
res.redirect('http://atguigu.com')//重定向
res.download('./package.json');//下载响应
res.json();/响应JS0N
res.sendFile(__dirname+'/home.html')//响应文件内容
})

练习

根据路由参数响应歌手的信息

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

显示歌手的姓名和图片
{ "singers":[ { "singer_name":"周杰伦", "singer_pic":"http://y.gtimg.cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.webp", "other_name":"Jay Chou", "s1nger_1d":4558, "id":1 }, { "singer_name":"林俊杰", "singer_pic":"http://y.gtimg.cn/music/photo_new/T001R150x150M000001BLpXF2DyJe2.webp", "other_name":"JJ Lin", "singer_id":4286, "id":2 }, { "singer_name":"G.E.M.邓紫棋", "singer_pic":"http://y.gtimg.cn/music/photo_new/T001R150x150M000001fNHEf1SFEFN.webp", "other_name":"Gloria Tang", "singer_1d":13948, "id":3 } ] }

express中间件

什么是中间件

中间件(Middleware)本质是一个回调函数
中间件函数 可以像路由回调一样访问请求对象(request),响应对象(response)

中间件的作用

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

中间件的类型

全局中间件
路由中间件

定义全局中间件
每一个请求 到达服务端之后都会执行全局中间件函数
声明中间件函数
let recordMiddleware= function(request,response,next){ //实现功能代码 //.... //执行next函数（当如果希望执行完中间件函数之后，仍然继续执行路由中的回调函数，必须调用next) next()

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

javascript 复制代码

//引入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)=>{
response.send（'首页'）;
:({
//监听端口
app.listen(3000,()=>{
console.log（'3000端口启动....'）；
);

注意事项：

index.html文件为默认打开的资源
如果静态资源与路由规则同时匹配，谁先匹配谁就响应
路由响应动态资源，静态资源中间件响应静态资源

获取情求体数据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('获取请求体数据')； })

EJS模板引擎

什么是模板引擎

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

什么是EJS

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

官网：https://ejs.co/

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

EJS初体验

下载安装EJS
npm i ejs --save

代码示例

javascript 复制代码

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

Express应用程序生成器

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

你可以通过npx(包含在Node.js8.2.0及更高版本中)命令来运行Express应用程序生成器。
npx express-generator

对于较老的Node版本，请通过npm将Express应用程序生成器安装到全局环境中并使用：
npm install -g express-generator express

-h 参数可以列出所有可用的命令行参数：
express -h Usage:express [options][dir] Options: -h,--help //输出使用方法 --version //输出版本号 -e,--ejs //添加对ejs模板引擎的支持 --hbs //添加对handlebars越板引整的支挂