后端数据的加载输入
vue框架搭建看上一个博客:vue与idea实现前后端项目分离与交互①
1.1 在src目录下创建一个utils文件夹,创建了一个request.js文件,然后下载axios。
1.2 在request.js中添加以下代码,已解决前后端连接时产生的跨域问题
import axios from 'axios'
export function request(config) {
const request = axios.create({
baseURL: 'api', // 后端请求端口设置,根据自己的端口进行设置
timeout: 4000 // 超时时间
})
// request 请求拦截
// 可以在请求发送前对请求做一些处理
// eg.统一加上token,对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// console.log(config);
// config.headers['token'] = user.token; // 设置请求头
return config
}, error => {
console.log(error);
});
// response 响应拦截
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// console.log(res);
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
// 如果是json字符串,将json字符串转换为json对象
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // 控制台打印错误信息,用于调试
})
// 直接返回
return request(config)
}
// export default request
1.3 在自己创建的vue文件中添加methods中的queryUserList()方法用来获取后端数据
<template>
<div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="id"
label="id序号"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="180">
</el-table-column>
</el-table>
</div>
</template>
<script>
import { request } from "../../utils/request";
export default {
data(){
return{
tableData: [{
}],
}
},
methods:{
//获取服务器上的用户列表,并将列表呈现到前端页面中的表格中
//向服务器发送一个名为 userServlet 的请求,获取用户列表
queryUserList(){
request({
url: '/userServlet' //请求的 URL 是 /userServlet
}).then(res => {
console.log(res); //当响应结果返回并成功时,函数将服务器响应的数据赋值给 this.tableData
this.tableData = res; //,this.tableData 将会被用来呈现在前端的表格中,用于显示用户数据
}, err => {
console.log(err); //如果请求出现错误,该函数将会输出错误信息。
})
}
},
mounted() {
this.queryUserList();// 钩子,页面加载时调用此方法。
}
}
</script>
<style>
</style>
1.4 调用aixo方法实现异步加载, 在main.js文件中加入代码:
import axios from 'axios'
import request from "@/utils/request"; //用于封装 axios 进行更高层次的请求处理的工具函数
Vue.prototype.request = request //将 request 工具函数在整个 Vue 实例中访问和调用。
Vue.prototype.$axios = axios //将 axios 在整个 Vue 实例中访问和调用。
axios.defaults.baseURL = '/api' //在请求时可以省略掉本地地址并直接使用相对路径
如图所示:
最后,如果运行时出现了如下警告。这个警告提示说在 ./src/main.js 中,你使用了 import request from "@/utils/request",
但是在文件路径 @/utils/request 中没有找到名为 default 的导出项。这意味着在 @/utils/request 模块中没有使用
export default 将 request 导出,而是使用了 export const request 这种方式导出的。
为了解决这个警告,你可以在 ./src/main.js 文件中将 import request from "@/utils/request"
修改为 import { request } from "@/utils/request",因为 request 是该模块的具名导出项。这样就可避免警告提示了。
修改: