【Node.js】Express框架的基本使用

JavaScript/前端
396
0
0
2023-05-02
标签   NodeJs

目录

初识Express

     Express简介

        什么是Express

        进一步理解 Express

        Express能做什么

     Express的基本使用

        安装

        创建基本的Web服务器

        监听GET请求

        监听post请求

         获取URL中携带的查询参数

                获取URL中的动态参数

初始Express

    托管静态资源

        express.static()

        挂载路径前缀

     nodemon

        为什么要使用nodemon

        安装 nodemon 

        使用nodemon

Express 路由

    路由的概念

        什么是路由

                现实生活中的路由

         Express中的路由

         路由的匹配过程

     路由的使用

        最简单的用法

         模块化路由

                创建路由模块 

 Express中间件

    中间件的概念

        什么是中间件

        现实生活中的例子

         Express中间件的调用流程

        Express中间件的格式 

        next函数的作用

        Express中间件的初体验

        定义中间件函数

            触发使用中间件函数

初识Express

     Express简介

        什么是Express

官方给出的概念:Express是基于Node.js平台,快捷,开放,极简的Web开发框架

 通俗的理解,Express的作用和Node.js内置的http模块类似,是专门用来创建Web服务器的。

Express的本质:就是一个npm上的第三包,提供了快速创建Web服务器的便捷方法。

Express的中文官网:express官网

        进一步理解 Express

Express的开发效率更高,http内置模块用起来很复杂,开发效率低,Express是基于内置的http模块进一步封装出来的。能够极大地提高开发效率。

http内置模块与Express类似于WebAPI和jquery的关系,后者是基于前者进一步封装出来的

        Express能做什么

对于前端程序员来说,最常见的两种服务器,分别是:

  • Web网站服务器:专门对外提供Web网页资源的服务器。
  • API接口服务器:专门对外提供API接口的服务器。

使用Express,我们可以方便,快捷的创建Web网站的服务器或API接口的服务器。

     Express的基本使用

        安装

在项目所处的根目录中,运行如下的终端命令,就可以安装express到项目中使用。

npm i express@4.17.1

 尽量安装指定版本 避免后面有什么不一样的 出错

        创建基本的Web服务器

使用npm下载完第三方包之后,使用expres创建服务器

//导入express
const express = require('express');
//创建Web服务器
const app = express();
//监听服务器
app.listen(8080, () => {
    console.log('服务器创建成功');
})

        监听GET请求

通过app.get(),方法监听客户端的GET请求。

//监听get请求
app.get('/user', (req, res) => {
    //res.sen方法向客户端响应数据
    res.send({
        name: 'xiaoxie',
        age: 20,
        gender: '男'
    })
})

img

 启动服务器 在postCode中输入地址发送get请求,拿到数据。

        监听post请求

通过app.post()方法,可以监听客户端的post请求。

app.post('/user', (req, res) => {
    res.send('请求成功')
})

img

         获取URL中携带的查询参数

通过req.query对象,可以访问到客户端通过查询字符串的形式,发送到服务器的参数:

就是将ajax中通过serialize()方法得到的键值对字符串 转换成对象。

app.get('/', (req, res) => {
    //默认情况下 是一个空对象
    console.log(req.query);
    res.send(req.query);
})

在地址栏问号后面写,跟再params里写是一样的。

img

                获取URL中的动态参数

通过req.params对象,可以访问到URL中,通过:匹配动态参数,冒号是固定写法表示后面是动态参数,显示名称id可以自定义任何名称。

app.get('/user/:id/:name', (req, res) => {
    //默认情况下 是一个空对象
    console.log(req.params);
    res.send(req.params);
})

img

初始Express

    托管静态资源

        express.static()

express提供了一个非常好用的函数,叫做express.static(),通过它,我们可以非常方便地创建一个静态资源管理器,例如,通过以下代码就可以将public目录下的图片,CSS文件,JavaScript文件,对外开放访问了。

img

我们将前面的时钟案例,clock文件夹对外开放。

// 将clock目录对外开放

//导入express

const express = require('express');
//实例化
const app = express();
//使用express.static()方法,快速对外提供静态资源
app.use(express.static('./时钟/clock'))


//监听
app.listen(8080, () => {
    console.log('访问成功 地址为http://127.0.0.1:8080');
})

直接在路径栏里进行访问,访问的时候文件夹需要省略,直接写文件名即可。

img

 如果挂载多个文件夹,且有相同的文件名,咋按从上到下书写的先后顺序来显示 第一个文件。

        挂载路径前缀

我们可以在地址栏访问指定文件前,可以加上伪装的文件夹名。

这个abc 并不是真实存在的文件夹,只是在地址栏访问时,必须需要加上这个前缀名。

app.use('abc', express.static('./时钟/clock'))

img

     nodemon

        为什么要使用nodemon

 在编写测试Node.js项目的时候,如果修改了项目的代码,则需要频繁的手动close掉,然后重复启动,非常繁琐,现在,我们可以使用nodemon这个工具,他能够监听项目文件的变动,当代码被修改后,nodemon会自动帮我们重启项目,极大方便了开发和测试。

        安装 nodemon 

全局安装nodemon。

npm i nodemon -g 

        使用nodemon

nodemon 文件名

运行之后,只要修改文件保存后,就会自动重启项目。

Express 路由

    路由的概念

        什么是路由

广义上来讲,路由就是映射关系。

                现实生活中的路由

img

         Express中的路由

在Express中,路由指的是客户端的请求与服务器处理函数之间的映射关系。 Express中的路由分3部分组成,分别是请求的类型,请求的URL地址,处理函数。

img

         路由的匹配过程

每当一个请求到达服务器之后,需要先经过路由的匹配,只有匹配成功之后,才会调用对应的处理函数。 在匹配时,会按照路由的顺序进行匹配,如果请求类型和请求的URL同时匹配成功,则Express会将这次请求,转交给对应的function函数进行处理。

img

     路由的使用

        最简单的用法

在Express中使用路由器最简单的方式,就是把路由挂载到app上。

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

app.get('/', (req, res) => {
    res.send('hello world')
})

app.post('/', (req, res) => {
    res.send('hello post')
})

app.listen(8080, () => {
    console.log('http:127.0.0.1:8080');
})

img

         模块化路由

为了方便对路由进行模块化的管理,EXpress不建议将路由直接挂载到app上,而是推荐将路由抽离为单独的模块。

将路由抽离为单独模块的步骤如下:

  1. 创建路由模块对应的js文件
  2. 调用express.Router()函数创建路由对象
  3. 向路由对象上挂载具体的路由
  4. 使用module.exports向外共享路由对象
  5. 使用app.use()函数注册路由模块

                创建路由模块 

在一个新js文件里创建路由模块并向外暴露。

//这是路由模块


//导入express
const express = require('express');
//创建路由对象
const router = express.Router();

//挂载具体的路由

router.get('/user/list', (req, res) => {
    res.send('Get user list')
})

router.post('/user/add', (req, res) => {
    res.send('Add new user');
})

//向外曝光路由对象
module.exports = router;

导入并注册路由模块。

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

//导入路由模块
const router = require('./route.js')
//注册路由模块
app.use(router);

app.listen(8080, () => {
    console.log('http:127.0.0.1:8080');
})

img

注意 app.use的作用就是用来注册全局中间件

        为路由模块添加访问前缀

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

//导入路由模块
const router = require('./route.js')
//注册路由模块
//添加前缀
app.use('/api', router);

app.listen(8080, () => {
    console.log('http:127.0.0.1:8080');
})

img

 Express中间件

    中间件的概念

        什么是中间件

中间件,特指业务流程的中间处理环节。

        现实生活中的例子

在处理污水的时候,一般都要经过三个处理环节,从而保证处理过后的废水,达到排放标准。

img

         Express中间件的调用流程

 当一个请求到达Express的服务器之后,可以连续调用多个中间件,从而对这次请求进行预处理。

img

        Express中间件的格式 

         Express的中间件,本质上就是一个function处理函数,Express中间件的格式如下:

img

注意:中间件函数的形参列表中,必须包含next参数。而路由处理函数中只包含req和res。

        next函数的作用

 next函数是实现多个中间件连续调用的关键,它表示把流转关系转交给下一个中间件或路由。

img

        Express中间件的初体验

        定义中间件函数

可以通过如下的方式,定义一个最简单的中间件函数

const express = require('express');

const app = express();

//定义一个简单的中间件函数

const mw = function (req, res, next) {
    console.log('这是最简单的中间件函数');
    //把流转关系转交给下一个中间件
    next()
}


app.listen(8080, () => {
    console.log('http://localhost:8080');
})

            触发使用中间件函数

客户端发起的任何需求,到达服务器之后,都会触发的中间件,叫做全局生效的中间件。 通过调用app.use(中间件函数),即可定义一个全局生效的中间件。
//定义一个简单的中间件函数

const mw = function (req, res, next) {
    console.log('这是最简单的中间件函数');
    //把流转关系转交给下一个中间件
    next()
}

//全局生效的中间件
app.use(mw)