vue前端和后端交互实现（最简单）

大家在写项目时候都会遇到一个问题，就是前后端的交互情况，也就是前端发的请求，后端能给前端相应结果返回。原理很简单，但是有很多人可能不知道是如何实现的前后端交互，今天就给大家分析一下。

        知道的前端和后端的基础之后，那么我们就得先知道前端该如何去请求，在前端中，最原始的请求就是去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端口正在监听");
})

基本上就是以上的三步，创建完成后就可以去操作数据库去返回给前端的响应了