Express框架总结

express框架总结

Express安装

1. 通过express提供的脚手架直接创建一个应用

• 安装脚手架： npm install -g express-generator
• 创建项目： express express-demo
• 安装依赖： npm install
• 启动项目： node bin/www
• 默认的端口为 :3000

认识中间件

• express是一个路由和中间件的web框架。express应用程序本质是一系列中间件函数的调用

认识中间件

1. 中间件是什么
   • 中间件的本质是传递给express的一个回调函数
   • 这个回调函数接收三个参数：
     • 请求对象（request对象)
     • 响应对象（response对象）
     • next函数（在express中定义的用于执行下一个中间件的函数）
2. 中间件可以执行哪些任务呢？
   • 执行任何代码
   • 更改请求（request) 和响应（response）对象
   • 结束请求-响应周期（返回数据）
   • 调用栈中的下一个中间件
   • 注意： 如果当前中间件中没有结束请求-响应周期，则必须调用next()将控制权传递给下一个中间件，否则，请求将被挂起

一些中间件的代码案例

1. 创建一个普通的中间件：

const express = require('express')

const app = express()

// 注册一个中间件
// 不写next() 只会执行第一个中间件
app.use((req,res,next) => {
  console.log('注册了一个普通中间件01')
  next()
})

app.use((req,res,next) => {
  console.log('注册了一个普通中间件02')
  res.end('02')
})


app.listen('8888', () => {
  console.log('express普通中间件启动成功')
})

2. 路径中间件：

...
app.use('/home', (req,res,next) => {
  console.log('注册了一个普通中间件01')
  res.end('hhhhhhhhhhhh')
})
...

3. 使用multer解析form-data(文件上传)
   • 首先下载multer: npm install multer

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

const app = express()

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploadImg/');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now()+path.extname(file.originalname));
  }
})
const upload = multer({
  storage
})

// app.use(upload.any())

app.post('/login', (req,res,next) => {
 console.log(req.body)
 res.end('请求结束')
})

app.post('/upload', upload.array('file'), (req,res,next) => {
  console.log(req.files)
  res.end('文件上传成功')
 })


app.listen('8888', () => {
  console.log('express服务器启动成功')
})

4. params与query传参

const express = require('express')

const app = express()


app.get('/home/:id/:name',  (req,res,next) => {
  console.log(req.params)
  res.end('params方式传参成功')
 })

 app.get('/users',  (req,res,next) => {
  console.log(req.query)
  res.end('query方式传参成功')
 })


app.listen('8888', () => {
  console.log('express服务器启动成功')
})

5. response 数据响应

...

 app.get('/users',  (req,res,next) => {
  console.log(req.query)
  res.status(345)
  res.json(req.query)
 })
...

6. 路由的使用
   1. users.js

const express = require('express')

const router = express.Router()

router.get('/', (req,res,next) => {
  res.json(['why', 'kobe', 'wangjian'])
})

router.get('/:id', (req,res,next) => {
  res.json(`${req.params.id}的个人信息`)
})

router.post('/', (req,res,next) => {
  res.json('create user success!')
})

module.exports = router

2. xxx.js

const express = require('express')
const useRouter = require('./router/users')

const app = express()

app.use("/users", useRouter)




app.listen('8888', () => {
  console.log('express服务器启动成功')
})

7. 静态服务器：

const express = require('express')

const app = express()

app.use(express.static('./build'));

app.listen('8888', () => {
  console.log('express服务器启动成功')
})

应用中间件

• body解析
  1. 在客户端发送post请求时，会将数据放到body中：
     • 客户端可以通过json方式传递：app.use(express.json())
     • 也可以通过form表单方式传递,如果解析的是application/x-www-form-urlencoded: app.use(express.urlencoded({extended: true}))