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

最新推荐文章于 2023-12-11 09:05:09 发布

可基大萌萌哒的马鹿

最新推荐文章于 2023-12-11 09:05:09 发布

阅读量596

点赞数

文章标签：服务器 javascript 前端

本文链接：https://blog.csdn.net/weixin_42934729/article/details/125140259

版权

最简单的express服务器创建

// 1. 导入 express
const express = require('express')
// 2. 创建 web 服务器
const app = express()

// 4. 监听客户端的 GET 和 POST 请求，并向客户端响应具体的内容
app.get('/user', (req, res) => {
  // 调用 express 提供的 res.send() 方法，向客户端响应一个 JSON 对象
  res.send({ name: 'zs', age: 20, gender: '男' })
})
app.post('/user', (req, res) => {
  // 调用 express 提供的 res.send() 方法，向客户端响应一个 文本字符串
  res.send('请求成功')
})
app.get('/', (req, res) => {
  // 通过 req.query 可以获取到客户端发送过来的 查询参数
  // 注意：默认情况下，req.query 是一个空对象
  console.log(req.query)
  res.send(req.query)
})
// 注意：这里的 :id 是一个动态的参数
app.get('/user/:ids/:username', (req, res) => {
  // req.params 是动态匹配到的 URL 参数，默认也是一个空对象
  console.log(req.params)
  res.send(req.params)
})

// 3. 启动 web 服务器
app.listen(80, () => {
  console.log('express server running at http://127.0.0.1')
})

静态托管页面

const express = require('express')
const app = express()

// 在这里，调用 express.static() 方法，快速的对外提供静态资源
app.use('/files', express.static('./files'))
app.use(express.static('./clock'))

app.listen(80, () => {
  console.log('express server running at http://127.0.0.1')
})

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. 导入 express
const express = require('express')
// 2. 创建路由对象
const router = express.Router()

// 3. 挂载具体的路由
router.get('/user/list', (req, res) => {
  res.send('Get user list.')
})
router.post('/user/add', (req, res) => {
  res.send('Add new user.')
})

// 4. 向外导出路由对象
module.exports = router

2.使用

const express = require('express')
const app = express()

// app.use('/files', express.static('./files'))

// 1. 导入路由模块
const router = require('./router.js')
// 2. 注册路由模块
app.use( '/api',router)

// 注意： app.use() 函数的作用，就是来注册全局中间件

app.listen(80, () => {
  console.log('http://127.0.0.1')
})

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

const express = require('express')
const app = express()

// 定义一个最简单的中间件函数
//const mw = function (req, res, next) {
//console.log('这是最简单的中间件函数')
//   // 把流转关系，转交给下一个中间件或路由
// next()
//}

// // 将 mw 注册为全局生效的中间件
//app.use(mw)

// 这是定义全局中间件的简化形式
app.use((req, res, next) => {
  console.log('这是最简单的中间件函数')
// 获取到请求到达服务器的时间
    const time = Date.now()
    // 为 req 对象，挂载自定义属性，从而把时间共享给后面的所有路由
    req.startTime = time
  next()
})

app.get('/', (req, res) => {
  console.log('调用了 / 这个路由')
  res.send('Home page.'+startTime)
})
app.get('/user', (req, res) => {
  console.log('调用了 /user 这个路由')
  res.send('User page.')
})

app.listen(80, () => {
  console.log('http://127.0.0.1')
})

前后端联调

前端：uniapp

<template>
	<view>
		<button type="default" @click="request()">发起请求</button>
		<view class="arrow-area">
			{{msg}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg:'显示信息',
				"nickName": "zs",
				"age":20
			}
		},
		methods: {
			request(){
				var that = this
				uni.request({
					method:'POST',
					header: {
						// json数据的发送
						"content-type": "application/json",
						// 键值对形式数据发送
						// "content-type": "application/x-www-form-urlencoded",
						"source": "fromApp"
					},
					// dataType:JSON,
					url:'http://127.0.0.1/book',
					data:{
															
						"message" :that.msg ,						
						"nickName": "zs",
						"age":20,
						
						
						 
					},
					success:(res)=> {
						console.log('success')
						console.log(res)
						that.msg = res.data
					}
				})
			}

		}
	}
</script>

<style>

</style>

后端：node

// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()

// 1. 导入解析表单数据的中间件 body-parser
const parser = require('body-parser')
// 2. 使用 app.use() 注册中间件，请求// "content-type": "application/x-www-form-urlencoded",数据的中间件
// app.use(parser.urlencoded({ extended: false }))
app.use(express.urlencoded({ extended: false }))
// 请求json数据的中间件
app.use(express.json()) 

router.post('/user',(req,res)=>{
  body = req.body

  res.send({
    status:0,
    message:'post 请求成功！',
    data :body
  })
  console.log( req.body)
})
router.get('/user',(req,res)=>{

  const query = req.query
  res.send({
    status:0,
    message:'get 请求成功！',
    data :query
  })
  console.log(req.query)
  
  
})

// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(80, function () {
  console.log('Express server running at http://127.0.0.1')
})

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

主程序：

const express = require('express')
const req = require('express/lib/request')
const res = require('express/lib/response')
const cors = require('cors')

const app = express()
const router  =require('./router')

app.use(express.json()) 
app.use(express.urlencoded({extends:false}))
const qs = require('querystring')


app.use(cors())
app.use(router)


app.listen(80,()=>{
    console.log('express server running at http://127.0.0.1');
})

router.js

// 这是路由模块
// 1. 导入 express
const { query } = require('express')
const express = require('express')
const cors = require('cors')
// 2. 创建路由对象
const router = express.Router()

// 3. 挂载具体的路由
router.post('/user',(req,res)=>{
  body = req.body

  res.send({
    status:0,
    message:'post 请求成功！',
    data :body
  })
  console.log( req.body)
})
router.get('/user',(req,res)=>{

  const query = req.query
  res.send({
    status:0,
    message:'get 请求成功！',
    data :query
  })
  console.log(req.query)
  
  
})

// 4. 向外导出路由对象
module.exports = router

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

前端修改header里面的代码即可：
header: {
				// json数据的发送
				"content-type": "application/json",
				// 键值对形式数据发送
				// "content-type": "application/x-www-form-urlencoded",
				"source": "fromApp"
					},

后台拿到的json数据：