大家在写项目时候都会遇到一个问题,就是前后端的交互情况,也就是前端发的请求,后端能给前端相应结果返回。原理很简单,但是有很多人可能不知道是如何实现的前后端交互,今天就给大家分析一下。
知道的前端和后端的基础之后,那么我们就得先知道前端该如何去请求,在前端中,最原始的请求就是去new XMLHttpRequest();但是这种方法基本被淘汰,因为比较麻烦。然后后面就是 jQuery的请求,先比与原生简单许多,但是我们所使用的前端框架是vue,所以肯定是不会去引jQuery的,所以这里所使用的是axios的这一个库。大家安装一下就可以去使用
npm i axios
好了,接下来说一下怎么在vue里发请求:
不管你是用vue2还是vue3都得引入axios这个库,不然我们没办法使用请求
import axios from 'axios'
引入完成后,vue2的话可以在方法中去发送请求也可以在生命周期钩子里发送请求,我们依次举例
//生命周期钩子函数中发送网络请求
mounted(){
axios({
url:`http://localhost:5000/getID`,
method:"GET",
}).then((res)=>{
// console.log(res.data);
this.uesremail=res.data.email;
this.username=res.data.urename;
this.text=this.username
})
}
当然大家也可以用异步的await和async 来封装修饰,这就根据自己的实际情况需求来判断了。
//方法中发送网络请求
methods:{
dialogTableVisibles(){
this.dialogTableVisible=false;
// this.$refs.upload.submit();
axios({
url:'http://localhost:5000/imgurl',
method:'get',
params:{
imgimgimg:`http://localhost:5000/${imgsurls.substr(7)}`,
username:this.username
}
}).then(res=>{
// console.log(res);
this.imgimgimg=res.data;
})
}
}
以上所举的例子都是最简单的网络请求,但是在实际情况中,一般都是对网络请求进行封装到一个js文件里面的,这里就不举例了,大家先把最基础的学会,后面在加深了解就可以了
后端接收的话其实也很简单,后端目前比较热门的是springboot,在springboot里面的接收也比较简单,大家感兴趣可以自行去查看资料,我这里举例的是node后端接收,相信这个能看懂那么springboot也问题不大。
const express = require("express");//创建express实例
let app = express();
//创建路由规则
app.get("/imgsurl",(requset,response)=>{
let Sqlimgsurl = `SELECT imgurl FROM reg WHERE urename = ${username}`
con.query(Sqlimgsurl,(err,res)=>{
// console.log(res);
response.send(res[0].imgurl)
})
})
//开启端口
app.listen(5000,()=>{
console.log("5000端口正在监听");
})
基本上就是以上的三步,创建完成后就可以去操作数据库去返回给前端的响应了