JavaScript入门 Express框架:npm包/express/路由中间件/脚手架 Day29

npm包管理工具

---

作用

下载第三方模板

模块

封装好的一些js库可以直接使用

        axios  js.cookie  内置模块http  第三方模块

使用

        npm install 第三方包 //下载

        引入 const axiois = require('./js/xx.js')

npm 在nodejs安装时一起被安装

         npm -v -

npm init 初始应用

         package.json文件 项目包描述文件

                 项目名称

                 项目作者

                 项目版本

                 项目依赖包

使用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,启动服务成功'))

模块化

---

es6模块化

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

b.js                                                                      a.js

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

export {max}                                                       max() 

后端commonjs模块化

a.js                                                                      b.js

let num = 100                                                            

let route = {}                                                       const {num,route} = module

module.exports = {num,route}                       const {model} = require('./a.js') 

module.exports = model                                 const model = require('./a.js') 

Route路由

---

定义资源, 每个路由对应一个资源, 用户通过路由找到资源

定义格式

app.METHOD('/PATH', function(req,res){ res.send( 'hello,world')  })
        · app    是express的一个实例instance
        · METHOD   如GET, POST…
        · PATH     是服务器请求地址路径

//引入express
const express = require('express')
//实例化express
const app = express() //应用实例对象
//创建一个路由
app.get('/ahai',(req,res)=>{
    res.send('hello,world')
})
//注册路由
app.post('/sign',(req,res)=>{  //post不能直接在地址栏测试
    res.send('注册页面')
})
//商品列表
app.get('/shop/list',(req,res)=>{
    res.send({  //页面上返回list的数据对象
        code:1,
        list :[
            {number:1001,url:"./images/13.PNG",name:"璃月有女初长成",price:'28.6',num:"0"},
            {number:1002,url:"./images/13.PNG",name:"浪花不再归海",price:'21.6',num:"0"},
            {number:1003,url:"./images/13.PNG",name:"云之海，人之海",price:'29.6',num:"0"},
        ],
    })
})
app.listen(3000,()=>console.log('监听端口3000成功！'))

路由拆分

---

把不同的路由按模块分好，划分到不同的js里去

//商品列表路由模块 ./route/product.js
const express = require('express') //引入第三方模块
const productRoute = express.Router()  //创建路由对象
//商品列表路由接口  定义路由
productRoute.get('/list',(req,res)=>{  //http://ip:port/shop/list
    res.send({
        code:1,
        list:[{number:1001,url:"./images/13.PNG",name:"璃月有女初长成",price:'28.6',num:"0"},
        {number:1002,url:"./images/13.PNG",name:"浪花不再归海",price:'21.6',num:"0"},
        {number:1003,url:"./images/13.PNG",name:"云之海，人之海",price:'29.6',num:"0"},
    ]
    })
})
//暴露模块
module.exports={productRoute}

//用户路由模块 ./route/user.js
//引入express
const express = require('express') //引入第三方模块
const useRoute = express.Router()  //创建路由对象 用于用户模块
//定义路由
useRoute.get('/get',(req,res)=>{  http://ip:port/user/get
    res.send('用户模块')
})
//登录
useRoute.get('/login',(req,res)=>{  http://ip:port/user/login
    res.send('登录模块')
})
//后端commonjs模块化规范暴露对象
module.exports = {useRoute}

//集成路由  app_route.js
//引入express
const express = require('express')
//引入user路由模块
const {useRoute} = require('./route/user')  //目录下的 js可以省
//引入product路由模块
const {productRoute} = require('./route/product')
//实例化express
const app = express() //应用实例对象
//集成路由
app.use('/user',useRoute)  //http://ip:port/user/get
app.use('/shop',productRoute)
app.listen(3000,()=>console.log('监听端口3000成功！'))

 中间件

---

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

一切皆中间件

app.use('./path',function(req,res,next){   //path路径 
    // 业务处理 
    next() // 继续向下执行  如果使用next()则会在这里一直转圈 会报错
})
//path为空表示所有路径都会执行中间件函数 path有路径表示只有这个路径会执行中间件函数

//集成路由  app_route.js
//引入express
const express = require('express')
//引入user路由模块
const {useRoute} = require('./route/user')  //目录下的 js可以省
//引入product路由模块
const {productRoute} = require('./route/product')
//实例化express
const app = express() //应用实例对象
//自定义中间件函数
app.use('./login',function(req,res,next){   //path路径
    console.log('中间件函数')// 业务处理 
    next() // 继续向下执行  如果使用next()则会在这里一直转圈 会报错
})
//集成路由
app.use('/user',useRoute)  //http://ip:port/user/get
app.use('/shop',productRoute)
app.listen(3000,()=>console.log('监听端口3000成功！'))

中间件分类 

自定义中间件

app.use('path',function(req,res,next){
    // 业务处理
    next() // 继续向下执行
})

内置中间件

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

//处理静态资源
app.use(express.static('public'))  //public是图片的文件夹同级直呼其名 http://ip:port/图片名.图片格式
app.use('/static',express.static('public')) //http://ip:port/static/图片名.图片格式

跨域资源共享cors中间件

前后端分离程序一定会引起跨域问题

需要有前端，发送ajax请求

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

        <button class="product-list">获取商品列表</button>
		<script src="./lib/myajax.js"></script>
		<script>
			const btn = document.querySelector('.product-list')
			btn.addEventListener('click', async function () {
				// 发送请求 ajax  回调函数 promise axios asyn/await
				let res = await myPromise({
					method: 'get',
					url: 'http://10.7.162.73:3000/shop/list',
				})
                console.log(res)
			})
		</script>

热更新 

自动重启服务器

1. 下载 supervisor
   npm i supervisor -g  全局安装/本地安装
    本地安装： 在本项目起作用
    全局安装:  所有项目起作用    
2. 命令行执行 >supervisor app.js
3. 配置 npm start 启动
   package.json文件中  
  "scripts": {
    "start": "supervisor app.js"
  },

常用第三方中间件

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  //post请求传参接收 body请求体
	res.send({
		code: 1,
		info: {
			username,
			password,
		},
	})
})
// 用户信息 /user/find?id=1001
useRoute.get('/find', (req, res) => { 
	const { id } = req.query //get请求接收
	res.send({
		code: 1,
		info: '你查询的用户id是' + id,
	})
})

脚手架

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

npx express-generator --view=ejs  //--view指定模板
npm install  |  npm i  安装依赖
npm start