프로젝트를 작성할 때 누구나 문제에 직면하게 됩니다. 즉, 프런트엔드와 프런트엔드 간의 상호 작용, 즉 프런트엔드에서 보낸 요청과 백엔드가 해당 결과를 프런트엔드에 반환할 수 있다는 것입니다. 원리는 매우 간단하지만 프런트엔드와 백엔드 상호작용을 구현하는 방법을 모르는 사람들이 많을 수 있으므로 오늘은 이를 분석해 보겠습니다.
프론트엔드와 백엔드의 기본을 알고 나면 먼저 프론트엔드를 요청하는 방법을 알아야 합니다.프론트엔드에서 가장 독창적인 요청은 new XMLHttpRequest() 로 가는 것이지만 이 방법 은 더 귀찮기 때문에 기본적으로 제거되었습니다. 그런 다음 원본보다 훨씬 간단한 jQuery의 요청이 있지만 우리가 사용하는 프런트 엔드 프레임워크는 vue이므로 jQuery를 절대 사용하지 않을 것이므로 여기서는 axios 라이브러리를 사용합니다. 설치해서 사용하시면 됩니다
npm과 액시오스
이제 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
})
}물론 실제 요구 사항에 따라 비동기식 대기 및 비동기식을 사용하여 캡슐화하고 수정할 수도 있습니다.
//方法中发送网络请求
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에서의 수신도 비교적 간단합니다. 관심이 있는 경우 직접 정보를 확인할 수 있습니다. 여기 예제는 노드 백엔드 수신입니다. 이것이 가능하다고 믿습니다. 당신이 이해한다면, 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端口正在监听");
})기본적으로 위의 3단계로 생성이 완료된 후 데이터베이스를 운영하여 응답을 프런트 엔드로 반환할 수 있습니다.