express框架

iceice0513
34 阅读4分钟

express框架

npm包管理工具

- 作用: 下载第三方模块
  模块: 封装好的一些js库可以直接使用
        内置模块  http
        第三方模块  axios  js.cookie
- 使用:
   >npm install 第三方包   //下载
   >引入  const axiois = require('./js/xx.js')
- npm 在nodejs安装时一起被安装
   npm -v
- npm init 初始应用
    package.json文件  项目包描述文件
       项目名称
       项目作者
       项目版本
       项目依赖包  
    安装第三方包，会将依赖自动记录在此文件中
    项目拷贝时，下载的第三方文件node_modules不需要拷贝，
    在移植的项目中，执行npm install 命令，自动找package.json文件依赖包下载

模块化

  • es6模块化

    1. 每个js文件都可以看作一个模块 a.js b.js 每个js模块中定义的属性和方法都是私有的

      b.js              a.js
export max()      import {max}  from './b.js'
export {max}      max()
export default {}   import A  from './b.js'

  • 后端commonjs模块化

    a.js                                   b.js
let num = 100                          const {num,route} = require('./a.js')
let route = {}                        
module.exports = {num,route}
module.exports = {}                   const A   = require('./a.js')

使用express创建web应用

  1. 创建项目目录 myapp

  2. 初始化项目 npm init [-y]

  3. 安装express框架 npm install express

  4. 使用express创建项目

      // 1. 引入express
   const express = require('express')
   // 2. 实例化express
   const app = express() // 应用实例对象
   // 3. 创建一个路由
   // http://ip:port/hello
   app.get('/test1', (req, res) => {
   // 响应数据
   res.send('hello world 这是我的第一个express后端程序')
   })

  app.listen(3000, () => console.log('监听3000,启动服务成功'))

路由

路由: 服务端, 定义一个资源，客户端可以路由到这个资源并进行访问

Respond with Hello World! on the homepage:

app.get('/', function (req, res) {
  res.send('Hello World!')
})

Respond to POST request on the root route (/), the application’s home page:

app.post('/', function (req, res) {
  res.send('Got a POST request')
})

Respond to a PUT request to the /user route:

app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user')
})

Respond to a DELETE request to the /user route:

app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user')
})

路由拆分

  1. 定义路由模块 user.js
// 1. 引入express
const express = require('express')
const useRoute = express.Router() // 创建路由对象 规定专门处理用户模块接口
//定义路由 /user
useRoute.get('/',(req,res)=>{
	res.send('用户模块')
})
// 注册 /user/sign

useRoute.post('/sign',(req,res)=>{
	res.send('注册模块')
})
// 登录 /user/login
useRoute.get('/login', (req,res)=>{
    res.send('登录接口')
})


// 后端commonjs模块化规范暴露对象
module.exports = {useRoute}

  1. app.js使用路由模块

    // 1. 引入express
const express = require('express') // 引第三方模块
// 2. 引入 user路由模块
const { useRoute } = require('./route/user.js') // 引入自定义模块
// 引入 product路由模块
const { productRoute } = require('./route/product')
// 2. 实例化express
const app = express() // 应用实例对象

//集成路由
app.use('/user', useRoute)
app.use('/shop', productRoute)

app.listen(3000, () => console.log('监听3000,启动服务成功'))

中间件

Express中间件，就是在收到请求后和发送响应之前这个阶段执行的一些函数

1664176271761

app.use([path],function(req,res,next){
    // 业务处理
    next() // 继续向下执行
})
  • 自定义中间件
app.use(function(req,res,next){
    // 业务处理
    next() // 继续向下执行
})
  • 第三方中间件
  1. body-parser 解析post请求体参数
// 1. 下载第三方中间件
npm i bodyparaser


//2.引入 bodyparaser
const bodyParser = require('body-parser')

// 3. 集成中间件
// bodyParser中间件
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())


4. 请求参数使用
// 注册 /user/sign
useRoute.post('/sign', (req, res) => {
	// const username =  req.body.username
	// const password = req.body.password
	const { username, password } = req.body
	res.send({
		code: 1,
		info: {
			username,
			password,
		},
	})
})
// 用户信息 /user/find?id=1001
useRoute.get('/find', (req, res) => {
	const { id } = req.query
	res.send({
		code: 1,
		info: '你查询的用户id是' + id,
	})
})

  • 内置中间件

    为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件，请使用 Express 中的 express.static 内置中间件函数。

    app.use(express.static('public'))

  • 跨域资源共享cors中间件

    1. 下载cors 
    npm i cors
2. app.js文件中引入 cors
const cors = require('cors')
3. 集成中间件
  app.use(cors())

  • 热更新

    1. 下载 supervisor
   npm i supervisor -g  全局安装/本地安装
    本地安装： 在本项目起作用
    全局安装:  所有项目起作用
    
2. 命令行执行 >supervisor app.js

3. 配置 npm start 启动
   package.json文件中
   
  "scripts": {
    "start": "supervisor app.js"
  },

脚手架

创建项目需要基础目录及文件

npx express-generator --view=ejs  //--view指定模板

npm install  |  npm i  安装依赖
npm start

文件上传

  • 前端

    <!-- 上传头像 -->
<input type="file" name="headerImg" /><br/>

let headerImgFile = headerImgInput.files[0] // 文件对象
// console.log(headerImgInput.files[0]);

let formDate = new FormData()
//formDate.append('username',username)
formDate.append('headerImg',headerImgFile)

let res = await axios({
 method: 'post',
 url: 'http://10.7.162.73:3000/user/upload',
 headers:{'content-type':'multipart/form-data'},
 data: formDate,
})
console.log(res.data)

  • 后端

    安装 multer  
npm i multer

const multer = require('multer') // 1 引入multer
// const multerUpload = multer({dest:'public/upload'}) // 2. 实例化multer上传对象
const storage = multer.diskStorage({
	destination: 'public/upload',  // 存储目录
	filename: function (req, file, cb) {
		cb(null, Date.now() + '.jpg') //文件名
	},
}) // 2. 实例化multer上传对象
const multerUpload = multer({storage})


//路由使用
/**
 * 文件上传接口
 * /user/upload
 */
router.post('/upload', multerUpload.single('headerImg'), (req, res, next) => {
	console.log(req.file)
	console.log(req.body)
	res.send({
		code: 1,
		file: req.file,
		body: req.body,
	})
})
avatar
文章
阅读
粉丝