Express-1

雷旭4466

已于 2023-03-29 21:02:55 修改

阅读量631

点赞数

分类专栏： node.js 文章标签： express 前端 javascript

于 2023-03-20 23:22:43 首次发布

本文链接：https://blog.csdn.net/leixu4466/article/details/129598910

版权

node.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Express框架创建服务器应用程序，包括在本地5000端口运行应用，处理GET和POST请求，以及设置跨域策略。通过示例展示了GET和POST请求的回调函数，以及如何通过app.get和app.post设置路由。还提到了app.use和app.all作为通用路由处理方法，以及解析请求体中的数据。最后，文章提供了前后端交互的实例代码。

摘要由CSDN通过智能技术生成

express用法

想要使用对应模块，必须先下载 express用于创建服务器应用程序
该项目运行地址在哪里？在本地5000端口运行 => http://localhost:端口(5000) || http://127.0.0.1:5000 访问本地对应项目地址，通过对应的http://localhost:端口号
在浏览器地址栏输入对应地址发送什么事情 => http://baidu.com => 默认发送get请求进行获取对应项目
在浏览器地址栏输入 http://localhost:5000/ => 默认访问跟路由(/)
get请求

app.get(“/”,callback)
回调函数参数
—request => 请求头
1.是前端携带数据给后端的参数
—response => 响应头
1.是后端返回数据给前端的参数对象
2.res.send(“返回给前端的数据”)

app.post(“/”,callback)
回调函数参数
—request => 请求头
1.是前端携带数据给后端的参数
—response => 响应头
1.是后端返回数据给前端的参数对象
2.res.send(“返回给前端的数据”)

处理跨域
——不需要进行任何的记忆，出现问题时直接拿
——给响应头 res.setHeader(“Access-Control-Allow-Origin”,“*”)
get请求和post请求是不互通的
——后端设置什么请求路由，那么前端就只能发起什么请求设置对应路由获取数据
通用性
app.use 、app.all 与get和post写法一样
use 与 all 无论是post还是get都可以进入
路由
这里路由就是指路径，"/“是根路径、”/qwe"是 http://localhost:5000:qwe (/qwe是5000端口的下面的路由地址)

后端

// 进入express
const express = require("express")
// 获取express应用程序对象
const app = express()
// 设置get请求的 根路由
app.get("/",(req, res) => {
	res.setHeader("Access-Control-Allow-Origin","*")
	res.send("5000端口数据666")
})

app.get("/qwe",(req,res) =>{
	res.setHeader("Access-Control-Allow-Origin","*")
	res.send("qwe路由数据")
})

app.listen("5000",()=>{
	// 该函数执行说明项目在本地(自身电脑)对应端口执行了
	console.log("在5000端口执行对应的应用程序，同时会触发该回调函数")
})

前端

<body>
	<button id="qwe">获取数据</button>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.js"></script>
	<script>
		qwe.onclick = async() => {
			let { data } = await axios.get("http://localhost:5000/qwe",{
				params: {
					asd: 123
				}
			})
			console.log(data)
		}
	</script>
</body>

http://localhost:5000 下的/qwe 路由中的数据怎么写？
发送什么请求 => get
地址怎么写 => http://localhost:5000/qwe

use与all设置初始跨域(get)

get请求
all 或 use 解决跨域代码臃肿问题
——app.use(“*”) *为通配符，意思是任何路由都会进入
路由后面回调函数中第三个参数是next(下一个)
——该next函数执行 => 表示执行下一个相同请求方式(get||post)并且路由地址(/qwe||/yaya)相同的路由
请求头API
req.url || req.baseUrl 获取前端请求的路由地址
req.method 获取前端请求的方式
req.query 获取前端发送给后端的get请求携带数据
req.body 获取post携带数据(需要额外进行解析参数才能获取)
—app.use(express.urlencoded({extended:false}))
—app.use(express.json())
响应头API
res.send() 后端返回给前端的数据
res.setHeader() 设置响应头允许前端哪些内容可以通过
补充
解析post携带数据
app.use() 用于使用插件(中间件)
——use使用插件时，内部有多个next()函数
记住express 使用插件(中间件)时通过app.use使用

const express = require("express")
const app = express()

app.all("*",(req,res,next)=>{
	// 允许任何请求地址访问
	res.setHeader("Access-Control-Allow-Origin","*")
	// 允许任何请求携带自定义数据访问
	res.setHeader("Access-Control-Allow-Headers", "*")
	next()
})

// 设置get请求的 根路由
app.get("/qwe",(req,res)=>{
	res.send("qwe请求成功")
})

app.get("/luyao", (req, res) => {
    res.send("luyao请求成功")
})

app.get("/xuxing", (req, res) => {
    res.send("xuxing请求成功")
})

app.listen("5000", () => {
    console.log("在5000端口执行对应的应用程序,同时会触发该回调函数11");
})

post请求

const express = require("express")
const app = express()
// 解析post请求
app.use(express.urlencoded({ extended:false }))
app.use(express.json())

app.use("*",(req, res, next)=>{
	//允许任何请求地址访问
	res.setHeader("Access-Control-Allow-Origin", "*")
	//允许任何请求携带自定义数据访问
	res.setHeader("Access-Control-Allow-Headers", "*")

	next()
})

let arr = ["qwe","luyao","xuxing"]
// 设置get请求的 跟路由
app.get("/qwe",(req,res)=>{
	let {val} = req.query //解构赋值
	console.log(val) //前端返回给后端的数据
	res.send(arr)
})

app.post("/luyao",(req,res)=>{
	res.send({code:1,value:"啦啦啦"})
})

app.listen("5000",()=>{
	console.log("在5000端口执行对应的应用程序，同时会触发该回调函数")
})