-
vue-cli项目下载axios,cd到项目目录,在终端中输入
cnpm install axios
(或者用npm也行) -
main.js把axios挂载到vue构造函数的prototype属性上,之后可以用$http进行get,post请求
import axios from ‘axios‘;
Vue.prototype.$http=axios
- get方法示例:get请求中是接口的地址(springboot写的,跨域问题要在controller类上加@CrossOrigin)
/**
* get中填的是接口的地址,then中是处理返回的数据
* 控制台打印返回的数据,将这个数据赋值给tableData
*/
this.$http.get("http://localhost:8089/user/user_list").then((res) => {
console.log(res.data);
this.tableData = res.data;
});
- post方法示例:发送post请求,上传form的数据,判断返回的数据中的状态
如果是true说明上传成功,跳出提示成功,清除表单数据,关闭对话框,重新查询页面数据
如果是false,提示错误并清除表单数据
onSubmit() {
//发送一个axios请求,绑定form参数以后上传
//清空表单信息也可以直接让form={}
this.$http
.post("http://localhost:8089/user/save", this.form)
.then((res) => {
console.log(res.data);
if (res.data.status == true) {
//成功以后,显示提示,清空表单,关闭对话框,重新调用查询方法
this.$message({
message: "成功添加用户",
type: "success",
});
this.form = {};
this.dialogFormVisible = false;
this.findAllUsers();
} else {
this.$message.error("错了哦,请重试");
this.$refs.addForm.resetFields();
}
});
},