vue2解决并实现页面刷新内容不变化

前言

        我们都知道，在vue中数据是响应式的，但是对于刷新的之后数据也会丢失，这就得借助于数据库存储，那么在vue中怎么去实现数据库的连接以及数据传输呢？下面我们来一起看一看，在之前我也在这个问题上困扰了很长时间，为了让大家都能看得懂，给大家画一个图的形式来理解

         基本是这样的一个流程，在图中很好体现，但是在代码中不是很好写，所以得拆分一下细节问题，再来看看登录的时候怎么去请求服务器吧

首先还是正常登录，先看看没有加这些功能的时候有什么样的问题

         登录成功后我们的信息也会随之呈现在上面，这就是简单的路由跳转携带参数，就不细说了，不会的同学可以去了解一下即可。貌似现在一切正好，也没有什么问题，但是刷新一下来看看结果就知道了

        可以看到，刷新之后信息全部丢失，这可是严重的问题，也就是说我们开发的程序的不能让用户刷新的，这显然是不现实的，所以必须得解决这个问题，具体思路如下：

         我们的解决方法是这样的，我们在登录的时候就把登录的账号先在服务器保存起来，当我们之后要请求账号的时候就可以直接通过账号去查询数据库得到账号相关的所有信息

let username
app.post("/logincheck",(request,response)=>{
    let Sqlaccount = `SELECT urename FROM reg WHERE urename=${request.body.account}`
    username = request.body.account;

 可以看到通过变量username保存到了账号信息，有了账号我们再去查询数据库就很方便，最后再把查询到的信息返回给页面，这样页面不管怎么刷新也不会发生变化了

//发送记账功能信息,实现页面刷新不改变
app.get("/acquire",(requset,response)=>{
    console.log(username);
    let Sqlgain = `SELECT asset FROM assetsaccount WHERE username=${username}`;
    con.query(Sqlgain,(err,res)=>{
        // console.log(res[0].asset);
        // console.log(JSON.parse(res[0].asset));
        response.send(JSON.parse(res[0].asset))
    })
})

        

 mounted(){
            this.username=this.user;
            this.uesremail=this.email;
            // console.log(this);
            // console.log(this.user);
            // console.log(this.email);
            axios({
            url:"http://127.0.0.1:5000/getID",
            method:"GET",
            }).then((res)=>{
                // console.log(res.data);
                this.uesremail=res.data.email;
                this.username=res.data.urename;
                this.text=this.username
            })
   
        }

具体是这样实现的，在前端页面再通过mounted生命周期钩子去发送请求就可以了，经过这些操作之后页面刷新不会发生变化了，看下最终效果即可