Implementación de interacción de front-end y back-end de Vue (la más simple)

Todos encontrarán un problema al escribir un proyecto, es decir, la interacción entre el front-end y el front-end, es decir, la solicitud enviada por el front-end, y el back-end puede devolver el resultado correspondiente al front-end. El principio es muy simple, pero es posible que muchas personas no sepan cómo implementar la interacción front-end y back-end, así que lo analizaré hoy.

        Después de conocer los conceptos básicos del front-end y el back-end, primero debemos saber cómo solicita el front-end. En el front-end la solicitud más original es ir a new XMLHttpRequest(); pero este método es básicamente eliminado porque es más problemático. Luego está la solicitud de jQuery, que es mucho más simple que la original, pero el marco de front-end que usamos es vue, por lo que definitivamente no usaremos jQuery, por lo que aquí se usa la biblioteca de axios. Puedes instalarlo y usarlo.

npm i axios

         Bien, hablemos sobre cómo enviar una solicitud en vue:

Ya sea que use vue2 o vue3, debe importar la biblioteca axios; de lo contrario, no podremos usar la solicitud.

import axios from 'axios'

Una vez completada la introducción, para vue2, puede enviar la solicitud en el método o en el enlace del ciclo de vida, demos ejemplos por turno.

//生命周期钩子函数中发送网络请求 
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
            })
}

Por supuesto, también puede utilizar await y async asíncronos para encapsular y modificar, lo que depende de sus necesidades reales.

//方法中发送网络请求 
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;
            })
      }
  }

Los ejemplos mencionados anteriormente son las solicitudes de red más simples, pero en situaciones reales, las solicitudes de red generalmente se encapsulan en un archivo js, ​​por lo que no daré ejemplos aquí. Primero aprendamos los más básicos y luego aprendamos los conceptos básicos más adelante. Solo consigue una mejor comprensión

        La recepción de backend es en realidad muy simple. El backend popular es Springboot, y la recepción en Springboot también es relativamente simple. Si está interesado, puede verificar la información usted mismo. Aquí hay un ejemplo de recepción de backend de nodo. Creo que esto puede ser visto Si lo entiendes, entonces springboot no es un gran problema.

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端口正在监听");
})

Básicamente, son los tres pasos anteriores: una vez completada la creación, puede operar la base de datos para devolver la respuesta al front-end.