使用Express搭建服务,静态资源托管,路由模块-你值得拥有

1,897 阅读7分钟

Express 能做什么

对于前端程序员来说,最常见的两种服务器,分别是:
1.Web 网站服务器: 专门对外提供 Web 网页资源的服务器
2.API 接口服务器:专门对外提供API 接口的服务器。
使用 Express我们可以方便、快速的创建 Web 网站的服务器或 API 接口的服务器
下面我们使用 express 创建一个简单的web服务器

使用 express 创建一个简单的web服务器

// 1.导入 express
const express = require("express");
// 2. 创建 web 服务器
const app = express();
// 3.启动 web 服务器
app.listen(80, () => { 
    console.log('express serve Started successfully')
})

00.png

监听客户端的get、post请求并返回内容

如何要监听客户端的 get请求和post请求,我们需要通过一个方法:
app.getpost(url,对应请求的处理函数func(){})方法。

app.get('你请求的url',function(req,res){
    //你处理的业务逻辑
    res.send('返回数据给客户端')
})

ps:req: 客户端给你的信息:请求对象(包含了与请求相关的属性与方法)
ps:res: 服务器给客户端的: 响应对象(包含了与响应相关的属性与方法)
通过 res.send() 方法,可以把处理好的内容,发送给客户端。
这样一个完整的请求流程就算完成了。

创建get与post并返回内容

// 1.导入 express
const express = require("express");
// 2. 创建 web 服务器
const app = express();
// 监听客户端的get请求和post请求
app.get('/login', (req, res) => { 
    res.send({
        info:'这个是get请求。恭喜你请求成功了'
    })
})
// 监听客户端的get请求和post请求
app.post('/user', (req, res) => { 
    res.send({name:'张三',age:22, type:admin})
})
// 3.启动 web 服务器
app.listen(80, () => { 
    console.log('express serve Started successfully')
})
上面我们创建了get和post请求,并且返回了对应的内容。
对于get请求我们只需要在浏览器上输入 http://127.0.0.1/login
就可以看见返回的内容是  登录成功           

-01-.png

托管静态资源-express.static()

express.static() 这个方法可以帮助我们做静态资源的托管。
通过这个函数,我们可以非常方便地创建一个静态资源服务器。
比如说我们把前端写的代码打包后dist。就可以放在public 目录下。

如果没有 public这个目录,需要创建这个目录,在项目的根目录下创建。
比如现在我创建了一个 public 目录,public/img/vue3.png 文件
现在访问 http://127.0.0.1/img/vue3.png
或者http://localhost/img/vue3.png

需要注意的是,此时在访问资源的时候不需要指定 public 
http://localhost/public/img/vue3.png 访问不到
const express = require("express");
const app = express();
//这里不一定是public,你可以是其它名,被指定的目录就是存放静态资源的目录
//这里可以是绝对路径也可是相对路径 如:'./public'
app.use(express.static('public'))
app.listen(80, () => { 
    console.log('express serve Started successfully')
})

04.png

为什么不需要在访问的时候加上public?

注意:Express在指定的静态目录中查找文件,并对外提供资源的访问路径。
存放静态文件的目录名public不会出现在 URL

如何托管多个静态资源目录

因为在工作中,我们会负责多个项目。
有些时候一些bug只能够在测试环境或者项目环境上出现。
当我们改了之后,不能够确定是否一定ok了。
这个时候我们就需要托管多个静态资源目录

// 将public、testServe 目录指定为静态资源
app.use(express.static('./public'))
app.use(express.static('./testServe'))

多个目录托管需要注意的点

如过你在 public目录下有一个 xiaoxiannv.png
testServe 目录下也有一个 xiaoxiannv.png
虽然这两张图片是不一样的,但是名称一样。
在访问的时候会优先去找 public 目录下的 xiaoxiannv.png 
如果public已经有了,那么就不会去找testServe目录下的xiaoxiannv.png了。
即使他们的内容是不一样的。

如何解决上面的问题了

有的小伙伴会说:有些时候有可能出现被托管的两个服务出现相同的文件名。
这怎么处理了?
是的!很有可能出现。
这个时候我们需要给挂载的静态资源新增一个前缀 a
app.use('/a',express.static('./public'))
这个时候访问的时候url需要指定上前缀
原来我们访问 http://127.0.0.1/img/vue3.png
现在 http://127.0.0.1/a/img/vue3.png 新增了一个前缀

05.png

路由的匹配过程

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

需要注意的是:必须同时满足两个条件
1.按照先后顺序进行匹配
2.请求类型相同并且URL相同

// 监听客户端get请求
app.get('/login', (req, res) => { 
    res.send({
        info:'这个是get请求。恭喜你请求成功了'
    })
})
// 监听客户端post请求
app.post('/user', (req, res) => { 
    res.send({name:'张三',age:22, type:admin})
})
这就是一个非常简单的路由。
当客户端get请求url是/login,对应的就是 info: '这个是get请求。恭喜你请求成功了'
当客户端post请求url是/user,对应的就是 name:'张三',age:22, type:admin

模块化路由

我们从上面的路由中发现了一个问题。
一个项目的请求成百上千个。如果都这样写。
肯定是不好的。也不利于后期的维护与管理。
因此:为了方便对路由进行模块化的管理。
Express 不建议我们将路由直接挂载到app 上,
而是推荐将路由抽离为单独的模块

将路由抽离成模块的步骤

将路由抽离为单独模块的步骤如下:
1.创建路由模块对应的js文件 如:创建 router.js文件
2.调用 var router = express.Router() 创建路由对象
3.向路由对象上挂载具体的路由
router.get('/user/edit', (req, res) => { 
    res.send({info:'更改成功'})
})
4.使用 module.exports 向外共享路由对象
5.使用app.use()函数注册路由模块

router.js文件

var express = require('express')
// 创建路由对象
var router = express.Router()
//向路由对象上挂载具体的路由
router.get('/user/edit', (req, res) => { 
    res.send({info:'更改成功'})
})
// 使用 module.exports 向外共享路由对象
module.exports=router

使用注册的路由模块 main.js

const express = require("express");
// 1.导入我们写的路由模块
const useRouter=require('./router')
const app = express();

// 2. 使用app.use()注册路由模块
app.use(useRouter)

// 3.启动 web 服务器
app.listen(80, () => { 
    console.log('express serve Started successfully')
})

在地址栏输入 http://localhost/user/edit

06.jpg

如何为路由模块新增前缀?

之前我么分享了如何为静态资源添加前缀。
app.use('/a',express.static('./public'))
其实,路由模块也类似于托管静态资源。
//导入路由模块
const userRouter = require( './router.js')
使用 app.use() 注册路由模块,添加统一的访问前缀 /api 
app.use('/api', userRouter)

在地址栏输入 http://localhost/api/user/edit

07.png

尾声

如果你觉得我写的不错的话,可以给我我一个点赞、评论!div在此感谢各位友友们。
上一个给我点赞的小伙伴都已经找到女朋友了!
咦!你不信,不信你给我打赏看一下!
保准你追到到喜欢的Ta!
你不会追,哎!难受。

我教你,你可以这样说:
小生不才,斗胆一问,不知姑娘是否心系他人。
感情之事,在下不敢儿戏!
如若姑娘早已心系他人。那在下便不再打扰。
如若有所唐突还望姑娘多加体谅!
若姑娘非我良人,那在下就不庸人自恼。
在下怕越陷越深,还望姑娘尽早告知!话已至此,我便先在此谢过!
拿去不谢!回头告诉我结果啊!
咦!抓住一个没有点赞的小伙伴!

本文正在参加「金石计划 . 瓜分6万现金大奖」