后端传输数据,前端接收展示流程
1.在后端的函数中返回一个查询到的数据的结构体
2.在外置的JS中配置相关的后端请求
// 统一请求路径前缀在libs/axios.js中修改
import {
getRequest,
putRequest,
postRequest,
deleteRequest,
} from "@/libs/axios";
// 测试
export const testTask = (params) => {
return deleteRequest(`/task/listing/test`,params);//通过此请求获取传递的参数
};
3.在内置的JS(Vue文件内部的script标签)中配置
(1).导入外置JS
//region别名可以任意写,@/views/test.js地址
import region from "@/views/test.js";
(2).在默认的返回值中定义结构体
data()
{
return {
testInfo: {},//testInfo可以任意定义的测试信息
}
}
(3).在函数中设置其初始值
export default
{
data()
{
methods:
{
init() {
//查询要修改的任务信息
this.getUpdateTestInfo();
// this.topStatusChange(updateTaskInfo.autoFinish)
},
getTestInfo() {
API_Test.getTestInfoData(this.id).then((res) => {
this.$set(this, "testInfo", res.result);
});
},
}
mounted() {//初始化,方法
this.init();
}
}
}
4.在内置的HTML(Vue文件内部的template标签内部)进行配置
//通过v-model设置,与结构体初始化后的内容进行绑定操作,如果后端返回的结构体传输了testName就可以在前端进行展示了
<Input style="width: 300px" v-model="testInfo.testName"/>