express框架

目录

简介

安装及基本使用

工具的使用

nodemon

Rest Client

路由

中间件

简介

中间件的好处

总结特点

使用中间件

---

简介

Express是基于 Nodejs平台，快速、开放、极简的 Web 开发框架

官网地址：Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网

作用：使用 Express，我们可以方便、快速的创建 Web 网站的服务器或 API 接口(纯json数据)的服务器。

本质上：express是一个第三方包存在于npm社区中。

代替原生的http模块的，并且express是基于http封装出来的一个包。但是原生的功能还保留。

安装及基本使用

初始化项目并安装express

npm init -y

npm i express

express创建web服务器

//express 是个第三方包，肯定是托管在npm社区 中
//1. 先来个管家 npm init 一问一答创建package.json     -y:yes的意思，所有的配置都用默认的
//2. 下载express  ： npm i express
​
//3. 引入
const express = require('express') //可以理解为http，express也是个函数
// console.log( typeof express )
//4. 创建一个实例
const app = express() //返回一个函数实例
// console.log( typeof app ) //function
//5. app上有很多静态方法
    //5.1 开放端口号
app.listen( 3000 )
​
​
    /*
        app.get( 路径,回调函数 )
            1：路径必须以/开头
            2：回调函数的参数为 request对象和response对象
    */ 
   //当在浏览器访问 /login 路径 的时候，执行此回调函数
   //当浏览器访问 /login?username=zs&password=123 也可以匹配上
app.get('/login',function(req,res){
    //res.end('登录页面 page')// end是原生的方法
    res.send('登录页面')
})
  //当在浏览器访问 /register 的时候，执行此回调函数
app.get('/register',function(req,res){
    res.end('register page')
})
​
​
app.get('/aa',function(req,res){
    res.end('aa page')
})
​
​
//express帮我们整理好了一些东西比如：
/*
    1) 404
    2) utf8也设置好了
*/

app对象

app.get(路径，监听函数)

目前 只用表单发post请求，其它的请求方式一律是get请求。 script link href img的src

app.post(路径，监听函数)

const express = require('express')
const app = express()
app.listen(3000, () => {
    console.log('3000端口已经开启，比如访问：http://localhost:3000')
})
​
 //当在浏览器访问 
 //当使用get方式请求 并且/login 路径 的时候，执行此回调函数
​
app.get('/login',( req,res )=>{
    res.send('login页面' + req.method)
})
​
 //当使用post方式请求 并且/register 路径 的时候，执行此回调函数
​
 app.post('/register',(req,res)=>{
    res.send('reister页面，并且是 post请求')
})
​
//当使用get方式请求 并且/register 路径 的时候，执行此回调函数
app.get('/register',(req,res)=>{
    res.send('reister页面，并且是get请求')
})

response对象

res.send(字符串 | 对象)

res.sendFile(absolute filepath)

const express = require('express')
const path = require('path')
const app = express()
app.listen(3000, () => {
    console.log('3000端口已经开启，比如访问：http://localhost:3000')
})
​
//1. send用法
app.get('/login',(req,res)=>{
    //res:response响应对象
    //res.end(响应给客户端的内容) ：end方法只能是个字符串  argument must be one of type string
    // res.end(222) 不可以
    // res.end( {username:'zs'} ) 不可以
    // res.send(333) //虽然不报错，但返回不了。
    //send还会为我们设置正确的响应头 比如说：utf8，比如状态码
    res.send( { username:'zs' } ) //但是可以传递对象，但是会加工成一个json字符串。
    //在同一个请求中，只能end或send一次（响应一次）
})
//2. sendFile用法
    //res.sendFile( 传递一个文件的绝对地址 )
        //path must be absolute or specify root to res.sendFile 必须绝对地址
app.get('/register',(req,res)=>{
    
    res.sendFile( path.join( __dirname,'views/reg.html' ) )  
})
​
//3. 想要返回一个图片
app.get('/miao',(req,res)=>{
    let f = path.join( __dirname,'static/erha2.jpg' )
    res.sendFile( f )
})

request对象

req.query

//讲这个request案例，是为了讲传参。
​
//登录：用户名和密码

app.get('/login',(req,res)=>{
    // let username = 'zs' //用户在请求 ;/login 的时候要传递过来的两个参数
    // let password = '123'
        //req.query: 帮我们接收 url ? 后面的参数  如果未传参，则是个空对象
        //http://localhost:3000/login?username=admin&password=111
    let username = req.query.username
    let password = req.query.password
​
    res.send(`实现登录：判断 用户名： ${username}和密码：${password} 是否验证成功`)
})

req.params

专业名称:动态路径（动态路由）

2. 接收动态路径的参数

req.params //获取动态路径中占位的参数 默认是个空对象

工具的使用

nodemon

npm i nodemon -g

Rest Client

基于vscde的工具。以插件形式进行安装并使用。

方便我们发请求的工具 。这只是开发者用的。

我要发送get请求。同时也让我们更加深刻认识 请求消息 格式

1、安装

2、使用vscode创建一个.http后缀的文件

### 变量定义
​
@url = http://localhost:3000
​
###  {{变量名}} 解析变量语法
​
### post请求
​
post {{url}}/demo http/1.1
​
​
### get请求
GET http://localhost:3000/login HTTP/1.1
​
### delete请求
DELETE http://localhost:3000/demo HTTP/1.1
​

路由

**每个路由都是一个功能函数，一个功能就是一个服务

Express中的路由（Node的路由）

express中一个路由包含3个功能：方式、路径、回调函数

语法：

app.method( path,callback )

参数说明：

method：代表请求方式，比如get，post ，delete，put...

path：代表请求路径

callback：代表回调函数，当method和path匹配上才会执行回调函数。

匹配流程

/* 匹配流程： 1、定义路由有顺序之分 2、不定义相同的路由（如果一个路由方法、路径和另一个路由的方法、路径相同）那么此时就是相同的两个路由 3、如果有两个相同的路由，只匹配第1个 */

express.Router 模块化路由

为什么要模块化路由
实现一个教务管理系统
管理员：
       添加学生
       删除学生
       查看某个学生
       更新某个学生

1. 引入express
const express = require('express')
2. //实例化一个路由对象
const router = express.Router() 
​
3. 定义一些路由规则 
router.get('/teacher/add',(req,res)=>{
    res.send('添加一个老师')
})
​
router.get('/teacher/delete',(req,res)=>{
    res.send('删除一个老师')
})
​
router.get('/teacher/edit',(req,res)=>{
    res.send('更新一个老师')
})
​
router.get('/teacher/view',(req,res)=>{
    res.send('查看一个老师')
})
​
4. 向外暴露
module.exports = router

const express = require('express')
const app = express()
app.listen(3000, () => {
    console.log('3000端口已经开启，比如访问：http://localhost:3000')
})
​
5. 引入路由规则
let student = require('./router/student.js')
let teacher = require('./router/teacher.js')
//6. 把student路由添加到app上
app.use( student )
app.use( teacher )

中间件

简介

中间件其实是路由的升级

中间件的好处

大家都各司其职，需要什么功能找对应的函数，需要让哪个车间（中间件）处理，就让它处理。

中间件不需要手动调用，我们express中会自动调用的。

中间件执行流程

当一个请求到达Express的服务器之后，可以连续调用多个中间件，从而对这次请求进行预处理。但是必须要有一个最终的匹配路由进行响应给客户端结果。

总结特点

1.中间件是路由的升级，路由的特点中间件都有

2.只要不是错误中间件，那么中间件应该放在所有路由的最前面

3.req,res共用，如果是共用的的数据应该放在req上。后续路由中的req可以访问到

4.不在中间件响应，是在具体的匹配路由上进行响应 res.send()

使用中间件

语法：

app.use( [前缀,]中间件函数 ) callback( req,res,next )

中间件的种类

应用级别的中间件

app.get / app.post 就是这些内置路由方法

app.put / app.delete

错误中间件

这类中间件放在路由的最后面

自定义中间件
定义一个自定义中间件，放在所有路由的最面即可。
当用户访问的路由一个也没有匹配上，则执行最后的自定义中间件
我们可以理解为这个中间的作用就是 展示404页面。

内置中间件

开放静态资源：static

什么是静态资源？      

不变的文件就是静态资源，前端使用的资源就是静态资源。唯独不包含html页面。html页面需要定义路由才能进行返回的。       css/浏览器中引入的js/图片/视频等才属于静态资源 。   前端怎么才能使用后端提供的静态资源呢？答案是后端需要为前端开放出去。 ​   开放静态资源的中间件：       express.static( 要开放的文件夹路径 )：这就是内置中间件，就是express它自己提供的   app.use( express.static( 要开放的文件夹路径 ) )   注意：这不是错误中间件，我们按规范应该放在前面 */

语法1： 不带前缀的， /注意：如何访问：路径中不包含static1名称了。 
http://localhost:3000/images/hello.jpg
app.use( express.static( 'static1' ) ) 
语法2：带前缀
app.use( '/static1',express.static( 'static1' ) ) 
​
开放public文件夹
app.use( '/public',express.static( 'public' ) ) 
访问： http://localhost:3000/public/css/style.css