express框架的基本使用

144 阅读3分钟

从零开始的快速搭建

  1. 在一个文件夹中输入 npm init -y 来初始化建立package.json
  2. npm install express 安装express
  3. 新建js
const express = require('express')

//创建express服务器
const app = express()

//启动服务器,监听端口
app.listen(9000, ()=>{
    console.log('express服务器启动成功')
})
  1. 在终端中启动node,并验证得到输出如下
treacherousz@TreacherousZdeMacBook-Pro express % nodemon express.js 
[nodemon] 3.1.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node express.js`
express服务器启动成功

中间件

当express接收到客户端发送的网络请求的时候,他会在所有的中间件中开始进行匹配,当匹配到第一个符合要求的中间件时,他就会执行这个中间件。如果这个中间件中执行了res.end() 就不会继续执行。如果执行了next() 则会继续执行

//客户端访问URL
app.get('', (req, res) => {
    res.end('访问成功')
})
app.post('/login', (req, res) => {
    res.end('登录成功,欢迎回来')
})

app.get('/home', (req, res) => {
    res.end('首页访问成功')
})

app.use('/abc', (req, res, next) => {
    res.end('一个不限制方式的请求')
})

这里面use是一种不限制方法的访问,可以指定路由也可以不指定。

针对一个路径可以注册多个中间件

app.get('', (req, res,next) => {
    console.log('访问成功')
    next()
},(req,res,next)=>{
    console.log('访问成功')
    next()
}, (req,res,next)=>{
    console.log('访问成功')
})

但是要记得next()一下,不然不会继续调用后续的中间件

文件上传

单文件上传

要安装一个第三方组件 npm install multer

在这个single方法里面传入的这个参数的名字和测试是上传的字段要相对应

const express = require('express')
const multer = require('multer')

//创建express服务器
const app = express()

//文件上传
const upload = multer({
    storage: multer.diskStorage({
        //cb是callback
        destination(req, file, cb) {
            cb(null, './uploads')
        },
        filename(req, file, cb) {
            //这里存放的是文件名, 时间戳+原文件名
            cb(null, Date.now() + '_' + file.originalname)
        }
    })
})

//中间这里 因为上传的是一个文件所以是single()方法
//这个中间件的作用是解析post上来的文件,并将结果自动返回到下一个中间件上去
app.post('/avatar', upload.single('avatar'), (req, res, next) => {
    console.log(req.file) //文件上传的相关信息
    res.end('文件上传成功~')
})

app.listen(9000, () => {
    console.log('express 启动成功')
})

多文件上传

实现的话只是把上传的中间件替换成多文件的代码就可以其他都一样

//上传多文件
app.post('/photos', upload.array('photos'),(req, res, next) => {
    console.log(req.files) //这里是files了
    res.end('上传多张照片成功')
})

服务器响应数据的方式

在响应数据的时候通常不怎么用res.end() 因为限制比较多,我们通常采用res.json() 的方法响应数据,支持的数据类型会更多

app.post('/login', (req, res, next) => {
    res.json({
        code: 0,
        message:'商品列表',
        list:[
            {name:'iPhone', price:10000},
            {name:'iPad', price:5000}

        ]
    })
    //设定返回的状态码
    res.status(200)
})

express的路由

如果把所有定义的接口都放在app中,那么这个ap就会变得太过臃肿,因此我们使用express.Router把它定义在一个单独的路由对象中

//创建了一个新的路由,并把对应的接口定义在了路由里面
const useRouter = express.Router()
useRouter.get('/', (req, res, next) => { })
useRouter.get('/:id', (req, res, next) => { })
useRouter.post('/:id', (req, res, next) => { })
useRouter.delete('/:id', (req, res, next) => { })

//让路由生效
app.use('/users', useRouter)

逻辑相当于,当中间件app.use 匹配到了/users这个地址后,就会进入到路由里面去寻找对应相关能匹配上的接口

测试案例

image.png

测试案例

把路由抽取出来

首先新建一个文件存放router

const express = require('express')

const useRouter = express.Router()
useRouter.get('/', (req, res, next) => {
    res.json('用户列表数据')
})
useRouter.get('/:id', (req, res, next) => {
    const id = req.params.id
    res.json('某一个用户的数据' + id)
})
useRouter.post('/:id', (req, res, next) => { })
useRouter.delete('/:id', (req, res, next) => { })

//导出路由
module.exports = useRouter

再回到ap文件中引入

///引入路由文件
const useRouter = require('./useRouter')
//让路由生效
app.use('/users', useRouter)

访问静态资源

upoads文件夹中放置对应的静态资源,比如图片这些。

const express = require('express')

//创建express服务器
const app = express()

app.use(express.static('./uploads'))

app.post('/login', (req, res, next) => {

})

app.listen(9000, () => {
    console.log('express 启动成功')
})

访问的时候直接在后面输入对应文件的名称就可以

http://localhost:9000/1736751667724_IMG_0666.png