• express创建服务器，以及前后端联调

    最简单的express服务器创建 

    1. // 1. 导入 express
    2. const express = require('express')
    3. // 2. 创建 web 服务器
    4. const app = express()
    5.  
    6. // 4. 监听客户端的 GET 和 POST 请求，并向客户端响应具体的内容
    7. app.get('/user', (req, res) => {
    8.   // 调用 express 提供的 res.send() 方法，向客户端响应一个 JSON 对象
    9.   res.send({ name: 'zs', age: 20, gender: '男' })
    10. })
    11. app.post('/user', (req, res) => {
    12.   // 调用 express 提供的 res.send() 方法，向客户端响应一个 文本字符串
    13.   res.send('请求成功')
    14. })
    15. app.get('/', (req, res) => {
    16.   // 通过 req.query 可以获取到客户端发送过来的 查询参数
    17.   // 注意：默认情况下，req.query 是一个空对象
    18.   console.log(req.query)
    19.   res.send(req.query)
    20. })
    21. // 注意：这里的 :id 是一个动态的参数
    22. app.get('/user/:ids/:username', (req, res) => {
    23.   // req.params 是动态匹配到的 URL 参数，默认也是一个空对象
    24.   console.log(req.params)
    25.   res.send(req.params)
    26. })
    27.  
    28. // 3. 启动 web 服务器
    29. app.listen(80, () => {
    30.   console.log('express server running at http://127.0.0.1')
    31. })

    静态托管页面

    1. const express = require('express')
    2. const app = express()
    3.  
    4. // 在这里，调用 express.static() 方法，快速的对外提供静态资源
    5. app.use('/files', express.static('./files'))
    6. app.use(express.static('./clock'))
    7.  
    8. app.listen(80, () => {
    9.   console.log('express server running at http://127.0.0.1')
    10. })

    nodemon 安装： npm i -g nodemon

    修改完代码可以不用再重启服务器，直接就会实时更新

    终端输入npx nodemon ***.js

    注意：

    新建一个express服务器时，首先需要执行以下代码：

    npm init -y

    npm install express 

    npm i -g nodemon

    npm i cors

    npm i jsonwebtoken express-jwt

     express 路由模块化

    1.路由模块

    1. // 这是路由模块
    2. // 1. 导入 express
    3. const express = require('express')
    4. // 2. 创建路由对象
    5. const router = express.Router()
    6.  
    7. // 3. 挂载具体的路由
    8. router.get('/user/list', (req, res) => {
    9.   res.send('Get user list.')
    10. })
    11. router.post('/user/add', (req, res) => {
    12.   res.send('Add new user.')
    13. })
    14.  
    15. // 4. 向外导出路由对象
    16. module.exports = router

     2.使用

    1. const express = require('express')
    2. const app = express()
    3.  
    4. // app.use('/files', express.static('./files'))
    5.  
    6. // 1. 导入路由模块
    7. const router = require('./router.js')
    8. // 2. 注册路由模块
    9. app.use( '/api',router)
    10.  
    11. // 注意： app.use() 函数的作用，就是来注册全局中间件
    12.  
    13. app.listen(80, () => {
    14.   console.log('http://127.0.0.1')
    15. })

    最简单的中间件（注意中间件和路由的顺序）

    1. const express = require('express')
    2. const app = express()
    3.  
    4. // 定义一个最简单的中间件函数
    5. //const mw = function (req, res, next) {
    6. //console.log('这是最简单的中间件函数')
    7. //   // 把流转关系，转交给下一个中间件或路由
    8. // next()
    9. //}
    10.  
    11. // // 将 mw 注册为全局生效的中间件
    12. //app.use(mw)
    13.  
    14. // 这是定义全局中间件的简化形式
    15. app.use((req, res, next) => {
    16.   console.log('这是最简单的中间件函数')
    17. // 获取到请求到达服务器的时间
    18.     const time = Date.now()
    19.     // 为 req 对象，挂载自定义属性，从而把时间共享给后面的所有路由
    20.     req.startTime = time
    21.   next()
    22. })
    23.  
    24. app.get('/', (req, res) => {
    25.   console.log('调用了 / 这个路由')
    26.   res.send('Home page.'+startTime)
    27. })
    28. app.get('/user', (req, res) => {
    29.   console.log('调用了 /user 这个路由')
    30.   res.send('User page.')
    31. })
    32.  
    33. app.listen(80, () => {
    34.   console.log('http://127.0.0.1')
    35. })

    前后端联调

    前端：uniapp

    1. <template>
    2. 	<view>
    3. 		<button type="default" @click="request()">发起请求</button>
    4. 		<view class="arrow-area">
    5. 			{{msg}}
    6. 		</view>
    7. 	</view>
    8. </template>
    9.  
    10. <script>
    11. 	export default {
    12. 		data() {
    13. 			return {
    14. 				msg:'显示信息',
    15. 				"nickName": "zs",
    16. 				"age":20
    17. 			}
    18. 		},
    19. 		methods: {
    20. 			request(){
    21. 				var that = this
    22. 				uni.request({
    23. 					method:'POST',
    24. 					header: {
    25. 						// json数据的发送
    26. 						"content-type": "application/json",
    27. 						// 键值对形式数据发送
    28. 						// "content-type": "application/x-www-form-urlencoded",
    29. 						"source": "fromApp"
    30. 					},
    31. 					// dataType:JSON,
    32. 					url:'http://127.0.0.1/book',
    33. 					data:{
    34. 															
    35. 						"message" :that.msg ,						
    36. 						"nickName": "zs",
    37. 						"age":20,
    38. 						
    39. 						
    40. 						 
    41. 					},
    42. 					success:(res)=> {
    43. 						console.log('success')
    44. 						console.log(res)
    45. 						that.msg = res.data
    46. 					}
    47. 				})
    48. 			}
    49.  
    50. 		}
    51. 	}
    52. </script>
    53.  
    54. <style>
    55.  
    56. </style>

    后端：node

    1. // 导入 express 模块
    2. const express = require('express')
    3. // 创建 express 的服务器实例
    4. const app = express()
    5.  
    6. // 1. 导入解析表单数据的中间件 body-parser
    7. const parser = require('body-parser')
    8. // 2. 使用 app.use() 注册中间件，请求// "content-type": "application/x-www-form-urlencoded",数据的中间件
    9. // app.use(parser.urlencoded({ extended: false }))
    10. app.use(express.urlencoded({ extended: false }))
    11. // 请求json数据的中间件
    12. app.use(express.json()) 
    13.  
    14. router.post('/user',(req,res)=>{
    15.   body = req.body
    16.  
    17.   res.send({
    18.     status:0,
    19.     message:'post 请求成功！',
    20.     data :body
    21.   })
    22.   console.log( req.body)
    23. })
    24. router.get('/user',(req,res)=>{
    25.  
    26.   const query = req.query
    27.   res.send({
    28.     status:0,
    29.     message:'get 请求成功！',
    30.     data :query
    31.   })
    32.   console.log(req.query)
    33.   
    34.   
    35. })
    36.  
    37. // 调用 app.listen 方法，指定端口号并启动web服务器
    38. app.listen(80, function () {
    39.   console.log('Express server running at http://127.0.0.1')
    40. })

    后端也可以模块化路由的模式：cors在哪里注册都行

     主程序：

    1. const express = require('express')
    2. const req = require('express/lib/request')
    3. const res = require('express/lib/response')
    4. const cors = require('cors')
    5.  
    6. const app = express()
    7. const router  =require('./router')
    8.  
    9. app.use(express.json()) 
    10. app.use(express.urlencoded({extends:false}))
    11. const qs = require('querystring')
    12.  
    13.  
    14. app.use(cors())
    15. app.use(router)
    16.  
    17.  
    18. app.listen(80,()=>{
    19.     console.log('express server running at http://127.0.0.1');
    20. })

    router.js

    1. // 这是路由模块
    2. // 1. 导入 express
    3. const { query } = require('express')
    4. const express = require('express')
    5. const cors = require('cors')
    6. // 2. 创建路由对象
    7. const router = express.Router()
    8.  
    9. // 3. 挂载具体的路由
    10. router.post('/user',(req,res)=>{
    11.   body = req.body
    12.  
    13.   res.send({
    14.     status:0,
    15.     message:'post 请求成功！',
    16.     data :body
    17.   })
    18.   console.log( req.body)
    19. })
    20. router.get('/user',(req,res)=>{
    21.  
    22.   const query = req.query
    23.   res.send({
    24.     status:0,
    25.     message:'get 请求成功！',
    26.     data :query
    27.   })
    28.   console.log(req.query)
    29.   
    30.   
    31. })
    32.  
    33. // 4. 向外导出路由对象
    34. module.exports = router

    后端可以把两种数据格式的中间件都注册了，这样需要什么样的数据格式，在前段修改即可

     前端修改header里面的代码即可：

    1. header: {
    2. 				// json数据的发送
    3. 				"content-type": "application/json",
    4. 				// 键值对形式数据发送
    5. 				// "content-type": "application/x-www-form-urlencoded",
    6. 				"source": "fromApp"
    7. 					},

    后台拿到的json数据 ：

     如果改成urlencoder数据：

    注意点：

    1. req.body是post请求中用的
    2. req.query是在get请求中使用的
    3. 小程序里面显示不了json的数据，可以：that.msg =JSON.stringify(res.data) ，可以将json转成字符串形式
    4. res是后端往前端发送的，req是前端往后端发送的

  • 相关阅读:
    渗透测试-Windows密码凭证获取
    JavaScript垃圾回收机制解析
    我分析30w条数据后发现，西安新房公摊最低的竟是这里？
    【java筑基】IO流基础之文件的常见操作
    python中pickle向redis中存储数据
    Arthas 常用命令
    Go语言学习笔记——Golang 1.18新特性泛型
    Django Form实现表单使用及应用场景
    ios小程序蓝牙发送信息失败，报10004
    springcloudalibaba架构(21):MQ的简介
  • 原文地址：https://blog.csdn.net/weixin_42934729/article/details/125140259