我们视图上的数据最终都是来源于数据库的,那就意味着项目不可避免的需要发送请求到后端,将数据获取出来并渲染到视图上。而关于发送网络请求方式有很多中,那么在Vue中该如何选择呢?
Ajax
是基于XMLHttpRequest(XHR)
,配置和调用方式等非常混乱所以真实开发中很少直接使用,而是使用jQurey-Ajax
,也就是==原生态ajax的方式。==在
Vue的整个开发中都不需要使用
jQuery了,所以我们不会为了一个网络请求,就引进
jQuery`。官方在
Vuel.x的时候就推出了
Vue-resource,它的体积比
jQuery小很多,在
Vue2.0推出后,
Vue的作者决定去掉
Vue-resource`,并且以后再也不会更新,所以使用它对项目的开发和维护存在很大的隐患。 定位到D:\dev\project\webpack
目录,打开控制台输入创建项目的命令:vue create 项名称
vue create vue-axios
选择默认配置还是自定义手动配置,这里选择【自定义手动配置】:
选择项目需要的功能,此处选择默认即可,什么都不用装。
选择如何存放配置,这里选择第二个:
等待创建项目,稍等一会儿之后,就创建 完成了。
打开D:\dev\project\webpack\vue_axios
目录,定位到vue_axios
目录,输入命令:npm run serve
在浏览器上输入地址:http://localhost:8080
,即可打开Vue的网页说明安装成功。
说明:使用脚手架创建好项目之后,会自动生成一些额外的代码,为了看起来更加清爽,删除掉一些不必要的内容。
把`components`文件夹下的`HelloWorld.vue`删除。
把`App.vue`中原有的内容全部删掉,改写成自己的内容。代码如下:
<template>
<div>
HelloWorld,axios
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
打开`D:\dev\project\webpack\vue_axios`目录,定位到`vue_axios`目录,输入命令:`npm run serve`
浏览器地址栏中输入:`http://localhost:8080`,效果如下:
对于项目中的其他文件,暂且就不改了,可以查看一下默认创建好的文件内容。
使用SpringBoot搭建的项目环境
项目位置:`F:\书稿笔记\Vue笔记\springboot-vue` 。
项目端口号:9090
浏览器地址栏输入:`http://localhost:9090/queryAll?empName=刘建伟`
定位到`D:\dev\project\webpack`目录,打开刚刚创建好的`vue-axios`文件夹,打开`cmd`输入命令:
npm install axios --save
打开`main.js`文件,`import`引入`axios`,并实现网络请求的发送。
import axios from "axios";
axios({
url: "http://localhost:9090/queryAll",
params: {
empName: '刘建伟'
}
}).then((resp)=>{
console.log(resp);
})
说明:
浏览器地址栏输入:`http://localhost:8080`运行之后,打开浏览器控制台,就可以看到报错信息。
只需要加一个注解就可以了。
实际工作中,经常有遇到一个页面初始需要多个请求的情况,在多个请求都完成后再执行一些逻辑。或者说:如果我们需要在两个接口同时完成后,然后在执行一些逻辑,该如何做呢?
此时就可以使用`axios.all()`方法和`axios.spread()`两个辅助函数用于处理同时发送多个请求。需要注意的是:该方法是axios的静态方法,不是axios实例的方法!
axios.all([]) //数组中可以放入多个请求,返回的结果是一个数组。
axios.spread(func); // 参数是一个函数func,而func函数又接收多个参数,每个参数就是多个请求响应后的每个响应结果。
打开`main.js`文件,`import`引入`axios`,并实现网络请求的发送。
import axios from "axios";
axios.all([
axios({
url: "http://localhost:9090/queryAll",
params: {
empName: '刘建伟'
}
}),
axios({
url: "http://localhost:9090/queryById?id=1"
})
]).then((resps)=>{
console.log(resps);
})
使用`axios.spread`实现请求展开。
打开`main.js`文件,`import`引入`axios`,并实现网络请求的发送。
import axios from "axios";
axios.all([
axios({
url: "http://localhost:9090/queryAll",
params: {
empName: '刘建伟'
}
}),
axios({
url: "http://localhost:9090/queryById?id=1"
})
]).then(axios.spread((resp1,resp2)=>{
console.log(resp1);
console.log(resp2);
}))
在开发中可能很多参数都是固定的,这时候我们可以进行一些抽取,可以利用`axios`做一些全局配置。比如:以下图为例,每次发送请求都是写固定不变的`http://localhost:9090`,每次这么写,很麻烦,所以我们可以对这个部分进行抽取。形成全局配置。
全局配置语法:
axios.defaults.配置项 = 值
把公共的url路径给抽取出来,形成公共配置。 代码实现:
axios.defaults.baseURL = "http://localhost:9090";
在`main.js`文件中
import axios from "axios";
// 抽取公共的url配置
axios.defaults.baseURL = "http://localhost:9090";
axios.all([
axios({
url: "/queryAll",
params: {
empName: '刘建伟'
}
}),
axios({
url: "/queryById?id=1"
})
]).then(axios.spread((resp1,resp2)=>{
console.log(resp1);
console.log(resp2);
}))
实现超时的全局配置
在`main.js`文件中实现全局配置
import axios from "axios";
// 抽取公共的url配置
axios.defaults.baseURL = "http://localhost:9090";
// 抽取公共的超时配置
axios.defaults.timeout = 5000;
axios.all([
axios({
url: "/queryAll",
params: {
empName: '刘建伟'
}
}),
axios({
url: "/queryById?id=1"
})
]).then(axios.spread((resp1,resp2)=>{
console.log(resp1);
console.log(resp2);
}))
说明之前的`axios`请求都是使用的全局对象,有时候我们需要这样的场景(当然这种场景主要是应用在分布式系统里面):
比如说有些接口的地址的域名是:http://192.168.0.123
又比如说有些接口的地址的域名是:http://192.168.1.45
等等
那么此时,我们项目中的请求路径baseURL就可能就是多个了,或者说不能全局配置了。该 如何做呢?
解决方案:此时可以针对不同接口地址的域名分别使用`axios`,此时就可以创建`axios`的实例。
对于不同的接口地址域名,创建不同的`axios`实例。【说明:此处仅仅是演示,我们的接口地址还是一样的。】
在`main.js`文件中去实现
import axios from "axios";
// 创建实例1--axios实例
const instance1 = axios.create({
baseURL: "http://localhost:9090",
timeout: 5000
});
instance1({
url: "/queryAll",
params: {
empName: '刘建伟'
}
}).then((resp)=>{
console.log(resp);
});
// 创建实例2
const instance2 = axios.create({
baseURL: "http://localhost:9090",
timeout: 6000
});
instance2({
url: "/queryById?id=3",
}).then((resp)=>{
console.log(resp);
})
打开`D:\dev\project\webpack\vue_axios`目录,定位到`vue_axios`目录,输入命令:`npm run serve`
可以想象,之后的项目一定是多组件化的项目,那么每个组件都需要动态获取数据,也就是要发送`axios`请求,那么就意味着每个组件都会有这样的代码:
如下,在`components`目录中去创建一个组件,叫`HelloAxios.vue` ,代码如下:
<template>
<div>
<ul>
<li v-for="item in persons">
{{item.id}}--{{item.empName}}
</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "HelloAxios",
data: function(){
return {
persons: []
}
},
// 生命周期
created() {
axios({
url: "http://localhost:9090/queryAll"
}).then(resp=>{
this.persons = resp.data.data;
});
}
}
</script>
<style scoped>
</style>
对于`8.1`的说明,如果每个组件在它的声明周期函数`created`中去发送`axios`请求,虽然是可以的,但是对于将来会埋藏一个隐患,假如之后我们不再使用`axios`,那么就意味着你的每个组件都需要重新修改,显然是不可取的,针对这个问题,我们可以对`axios`进行封装。
在`src`目录下创建`axios`目录,并且在该目录下,创建`request.js`文件,对`axios`进行封。
import axios from "axios";
// get请求
let get = function(url,params){
let instance = axios.create({
baseURL: "http://localhost:9090",
timeout: 6000
});
return instance({
url,
params
});
}
// post请求
let post = function (config) {
// 省略
}
export {
get,
post
};
<template>
<div>
<ul>
<li v-for="item in persons">
{{item.id}}--{{item.empName}}
</li>
</ul>
</div>
</template>
<script>
import {get} from "../axios/request";
export default {
name: "HelloAxios",
data: function(){
return {
persons: []
}
},
// 生命周期
created() {
let params = {empName: '刘建伟'};
get("/queryAll",params).then(resp=>{
console.log(resp);
})
}
}
</script>
<style scoped>
</style>
在`App.vue`组件中去引用`HelloAxios.vue`组件。
<template>
<div>
HelloWorld,axios
<hello-axios></hello-axios>
</div>
</template>
<script>
import HelloAxios from "./components/HelloAxios";
export default {
name: 'App',
components: {HelloAxios},
HelloAxios
}
</script>
<style>
</style>
打开`D:\dev\project\webpack\vue_axios`目录,定位到`vue_axios`目录,输入命令:`npm run serve`
axios里面可以设置拦截器 ,可以在我们正式请求发送之前或者响应之后做一些事情。比如说,在请求发送之前,设置`Headers`信息;在请求发送之前,判断用户是否携带`Token`等。换句话说,使用拦截器可以在我们真正要做业务处理的时候,前置的做一些事情,或者业务处理完毕之后,后置的做一些事情。
instance.interceptors.request.use(function(config){
// 请求成功之前
},function(error){
// 请求失败之前
});
instance.interceptors.response.use(function(config){
// 响应成功之后
},function(error){
// 响应失败之后
});
我们去完成某些业务功能的时候,有时候用户必须是已经登录的状态,比如说查看用户的订单,购物车等信息。系统如何知道当前用户是否已经是登录状态的呢?一般来说,使用的是Token机制。当用户要去访问功能的时候,必须携带Token,比如说,形如是这样的:`http://localhost:8080/shop?token=abc12ytx` 。那么问题来了,如果每个请求都要求加上Token,难道我们每次都人工的拼接吗?显然是太麻烦了,此时**==拦截器就派上用场了,使用拦截器使Token自动增加。==**
在`src/axios`目录下,打开`request.js`文件,模拟实现`Token`的使用。
import axios from "axios";
// get请求
let get = function(url,params){
let instance = axios.create({
baseURL: "http://localhost:9090"
});
instance.interceptors.request.use(function(config){
// 再发送请求之前获取localStorage是否存储了Token
let token = localStorage.getItem("token");
if (token){
// 如果Token存在,则在请求中添加Token参数
config.headers['Authorization'] = token;
}
return config;
},function(error){
console.log(error);
});
return instance({
url,
params
});
}
// post请求
let post = function (config) {
// 省略
}
export {
get,
post
};
打开`main.js`文件,实现发送GET请求。
import axios from "axios";
axios.get("http://localhost:9090/queryAllNoParams")
.then(resp=>{
console.log("==");
console.log(resp.data);
console.log("--");
});
@RequestMapping("/queryAllNoParams")
@ResponseBody
public ResponseResult queryAllNoParams(){
List<Employee> employees = employeeMapper.selectAll(null);
ResponseResult result = new ResponseResult();
result.setCode(200);
result.setMessage("success");
result.setData(employees);
return result;
}
import axios from "axios";
axios.get("http://localhost:9090/queryById?id=2")
.then(resp=>{
console.log(resp.data);
});
@RequestMapping("/queryById")
@ResponseBody
public ResponseResult queryById(Integer id){
Employee employee = employeeMapper.selectById(id);
ResponseResult result = new ResponseResult();
result.setCode(200);
result.setMessage("success");
result.setData(employee);
return result;
}
import axios from "axios";
axios.get("http://localhost:9090/queryByIdForRestful/2")
.then(resp=>{
console.log(resp.data);
});
@RequestMapping("/queryByIdForRestful/{id}")
@ResponseBody
public ResponseResult queryByIdForRestful(@PathVariable("id") Integer id){
Employee employee = employeeMapper.selectById(id);
ResponseResult result = new ResponseResult();
result.setCode(200);
result.setMessage("success");
result.setData(employee);
return result;
}
import axios from "axios";
axios.get("http://localhost:9090/queryById",{
params: {
id: 2
}
})
.then(resp=>{
console.log("=###");
console.log(resp.data);
console.log("--");
});
@RequestMapping("/queryById")
@ResponseBody
public ResponseResult queryById(Integer id){
Employee employee = employeeMapper.selectById(id);
ResponseResult result = new ResponseResult();
result.setCode(200);
result.setMessage("success");
result.setData(employee);
return result;
}
import axios from "axios";
// 直接传递对象
axios.post("http://localhost:9090/save",{
"empName": '小王',
"email": 'wang@163.com'
})
.then(resp=>{
console.log(resp.data);
});
@RequestMapping("/save")
@ResponseBody
public Employee save(@RequestBody Employee employee){ // @RequestBody不能丢
System.out.println(employee.getEmpName());
System.out.println(employee.getEmail());
return employee;
}
**==直接传递对象的话,axios会自动把参数封装成json对象进行传递。==**
let params = new URLSearchParams();
params.append("empName" , "小红");
params.append("email" , 'hong@126.com');
axios.post("http://localhost:9090/add",params)
.then(resp=>{
console.log(resp.data);
});
@RequestMapping("/add")
@ResponseBody
public Employee add(Employee employee){
System.out.println(employee.getEmpName());
System.out.println(employee.getEmail());
return employee;
}
**==使用URLSearchParams传递,其实本质就是和表单提交是一样的,采用的是application/x-www-form-urlencode。==**
任何一个async函数都会隐式返回一个promise实例对象。
import axios from "axios";
async function queryData(){
let resp = await axios.get("http://localhost:9090/queryAllNoParams");
console.log(resp.data);
}
queryData();
import axios from "axios";
async function queryData(){
let resp = await axios.get("http://localhost:9090/queryAllNoParams");
return resp;
}
queryData().then(resp=>{
console.log(resp);
});
还是借助于之前创建好的`vue-axios`项目,把之前的代码全部清空,保留一个最干净的项目。
在`src`目录下新建`components`文件夹,在该文件夹下新建`ShowEmployeeList.vue`,代码如下:
<template>
<div>
<table border="1px">
<tr>
<td>id</td><td>员工姓名</td><td>邮箱</td><td>性别</td><td>操作</td>
</tr>
<tr v-for="emp in employees">
<td>{{emp.id}}</td>
<td>{{emp.empName}}</td>
<td>{{emp.email}}</td>
<td>{{emp.sex}}</td>
<td>
<a href="">删除</a> |
<a href="">修改</a>
</td>
</tr>
</table>
</div>
</template>
<script>
// 1、导入axios
import axios from "axios";
export default {
name: "ShowEmployeeList",
data: function(){
return {employees: []}
},
// 2、生命周期函数
mounted() {
// 3、发送get请求,获取员工列表数据
axios.get("http://localhost:9090/queryAll").then(resp=>{
if (resp && resp.data){
console.log(resp.data.data);
this.employees = resp.data.data;
}
});
}
}
</script>
<style scoped>
</style>
在`App.vue`组件中去应用组件,代码如下:
<template>
<div>
<show-employee-list></show-employee-list>
</div>
</template>
<script>
import ShowEmployeeList from "./components/ShowEmployeeList";
export default {
name: 'App',
components: {
ShowEmployeeList
}
}
</script>
<style>
</style>
打开`D:\dev\project\webpack\vue_axios`目录,定位到`vue_axios`目录,输入命令:`npm run serve`。
思路:采用`async`和`await`实现代码优化。打开`ShowEmployeeList.vue`组件,代码如下:
<template>
<div>
<table border="1px">
<tr>
<td>id</td><td>员工姓名</td><td>邮箱</td><td>性别</td><td>操作</td>
</tr>
<tr v-for="emp in employees">
<td>{{emp.id}}</td>
<td>{{emp.empName}}</td>
<td>{{emp.email}}</td>
<td>{{emp.sex}}</td>
<td>
<a href="">删除</a> |
<a href="">修改</a>
</td>
</tr>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "ShowEmployeeList",
data: function(){
return {employees: []}
},
methods: {
async queryAll(){
let resp = await axios.get("http://localhost:9090/queryAll");
this.employees = resp.data.data;
}
},
mounted() {
this.queryAll();
}
}
</script>
<style scoped>
</style>
姓名:<input type="text" v-model="empName"><br/>
邮箱:<input type="text" v-model="email"><br/>
性别:<input type="text" v-model="sex"><br/>
<button @click="add">添加员工</button>
data: function(){
return {
employees: [],
empName: "",
email: "",
sex: ""
}
}
methods: {
add(){
axios.post("http://localhost:9090/save",{
empName: this.empName,
email: this.email,
sex: this.sex
}).then(resp=>{
// 添加成功,则再去查询一个列表数据
this.queryAll();
});
}
}
methods: {
async add(){
// 发送请求
await axios.post("http://localhost:9090/save",{
empName: this.empName,
email: this.email,
sex: this.sex
})
// 查询列表数据
this.queryAll();
}
}
打开`ShowEmployeeList.vue`组件,完整代码如下:
<template>
<div>
姓名:<input type="text" v-model="empName"><br/>
邮箱:<input type="text" v-model="email"><br/>
性别:<input type="text" v-model="sex"><br/>
<button @click="add">添加员工</button>
<table border="1px">
<tr>
<td>id</td><td>员工姓名</td><td>邮箱</td><td>性别</td><td>操作</td>
</tr>
<tr v-for="emp in employees">
<td>{{emp.id}}</td>
<td>{{emp.empName}}</td>
<td>{{emp.email}}</td>
<td>{{emp.sex}}</td>
<td>
<a href="">删除</a> |
<a href="">修改</a>
</td>
</tr>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "ShowEmployeeList",
data: function(){
return {
employees: [],
empName: "",
email: "",
sex: ""
}
},
methods: {
async add(){
// 发送请求
await axios.post("http://localhost:9090/save",{
empName: this.empName,
email: this.email,
sex: this.sex
})
// 查询列表数据
this.queryAll();
},
async queryAll(){
let resp = await axios.get("http://localhost:9090/queryAll");
this.employees = resp.data.data;
}
},
mounted() {
this.queryAll();
}
}
</script>
<style scoped>
</style>
打开D:\dev\project\webpack\vue_axios
目录,定位到vue_axios
目录,输入命令:npm run serve
。
data: function(){
return {
employees: [],
empName: "",
email: "",
sex: "",
isAdd: true // 该变量是判断添加按钮是否可用
}
}
watch: {
async empName(value){
let resp = await axios.get("http://localhost:9090/validateEmpNameIsExists",{
params: {
empName: value
}
});
if (resp.data){
// 为true,则表示存在,
this.isAdd = true;
}else{
this.isAdd = false;
}
}
}
打开`ShowEmployeeList.vue`组件,完整代码如下:
<template>
<div>
姓名:<input type="text" v-model="empName"><br/>
邮箱:<input type="text" v-model="email"><br/>
性别:<input type="text" v-model="sex"><br/>
<button @click="add" :disabled="isAdd">添加员工</button>
<table border="1px">
<tr>
<td>id</td><td>员工姓名</td><td>邮箱</td><td>性别</td><td>操作</td>
</tr>
<tr v-for="emp in employees">
<td>{{emp.id}}</td>
<td>{{emp.empName}}</td>
<td>{{emp.email}}</td>
<td>{{emp.sex}}</td>
<td>
<a href="">删除</a> |
<a href="">修改</a>
</td>
</tr>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "ShowEmployeeList",
data: function(){
return {
employees: [],
empName: "",
email: "",
sex: "",
isAdd: true
}
},
watch: {
async empName(value){
let resp = await axios.get("http://localhost:9090/validateEmpNameIsExists",{
params: {
empName: value
}
});
if (resp.data){
// 为true,则表示存在,
this.isAdd = true;
}else{
this.isAdd = false;
}
}
},
methods: {
async add(){
// 发送请求
await axios.post("http://localhost:9090/save",{
empName: this.empName,
email: this.email,
sex: this.sex
})
// 查询列表数据
this.queryAll();
},
async queryAll(){
let resp = await axios.get("http://localhost:9090/queryAll");
this.employees = resp.data.data;
}
},
mounted() {
this.queryAll();
}
}
</script>
<style scoped>
</style>
id:<input type="text" v-model="id">
<a href="" @click.prevent="toEditUI(emp.id)">修改</a>
methods: {
async toEditUI(id){
let resp = await axios.get("http://localhost:9090/queryById?id="+id);
let emp = resp.data.data;
this.empName = emp.empName;
this.email = emp.email;
this.sex = emp.sex;
this.id = id;
}
}
<button @click="update">修改员工</button>
methods: {
async update(){
await axios.post("http://localhost:9090/update",{
empName: this.empName,
email: this.email,
sex: this.sex,
id: this.id
});
// 再次查询全部数据
this.queryAll();
}
}
<template>
<div>
id:<input type="text" v-model="id"><br/>
姓名:<input type="text" v-model="empName"><br/>
邮箱:<input type="text" v-model="email"><br/>
性别:<input type="text" v-model="sex"><br/>
<button @click="add" :disabled="isAdd">添加员工</button>
<button @click="update">修改员工</button>
<table border="1px">
<tr>
<td>id</td><td>员工姓名</td><td>邮箱</td><td>性别</td><td>操作</td>
</tr>
<tr v-for="emp in employees">
<td>{{emp.id}}</td>
<td>{{emp.empName}}</td>
<td>{{emp.email}}</td>
<td>{{emp.sex}}</td>
<td>
<a href="">删除</a> |
<a href="" @click.prevent="toEditUI(emp.id)">修改</a>
</td>
</tr>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "ShowEmployeeList",
data: function(){
return {
employees: [],
empName: "",
email: "",
sex: "",
id: "",
isAdd: true
}
},
watch: {
async empName(value){
let resp = await axios.get("http://localhost:9090/validateEmpNameIsExists",{
params: {
empName: value
}
});
if (resp.data){
// 为true,则表示存在,
this.isAdd = true;
}else{
this.isAdd = false;
}
}
},
methods: {
async update(){
await axios.post("http://localhost:9090/update",{
empName: this.empName,
email: this.email,
sex: this.sex,
id: this.id
});
// 再次查询全部数据
this.queryAll();
},
async toEditUI(id){
let resp = await axios.get("http://localhost:9090/queryById?id="+id);
let emp = resp.data.data;
this.empName = emp.empName;
this.email = emp.email;
this.sex = emp.sex;
this.id = id;
},
async add(){
// 发送请求
await axios.post("http://localhost:9090/save",{
empName: this.empName,
email: this.email,
sex: this.sex
})
// 查询列表数据
this.queryAll();
},
async queryAll(){
let resp = await axios.get("http://localhost:9090/queryAll");
this.employees = resp.data.data;
}
},
mounted() {
this.queryAll();
}
}
</script>
<style scoped>
</style>
打开D:\dev\project\webpack\vue_axios
目录,定位到vue_axios
目录,输入命令:npm run serve
。
<a href="" @click.prevent="deleteById(emp.id)">删除</a>
methods: {
async deleteById(id){
await axios.get("http://localhost:9090/deleteById",{
params: {
id: id
}
});
// 再次查询
this.queryAll();
}
}
<template>
<div>
id:<input type="text" v-model="id"><br/>
姓名:<input type="text" v-model="empName"><br/>
邮箱:<input type="text" v-model="email"><br/>
性别:<input type="text" v-model="sex"><br/>
<button @click="add" :disabled="isAdd">添加员工</button>
<button @click="update">修改员工</button>
<table border="1px">
<tr>
<td>id</td><td>员工姓名</td><td>邮箱</td><td>性别</td><td>操作</td>
</tr>
<tr v-for="emp in employees">
<td>{{emp.id}}</td>
<td>{{emp.empName}}</td>
<td>{{emp.email}}</td>
<td>{{emp.sex}}</td>
<td>
<a href="" @click.prevent="deleteById(emp.id)">删除</a> |
<a href="" @click.prevent="toEditUI(emp.id)">修改</a>
</td>
</tr>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "ShowEmployeeList",
data: function(){
return {
employees: [],
empName: "",
email: "",
sex: "",
id: "",
isAdd: true
}
},
watch: {
async empName(value){
let resp = await axios.get("http://localhost:9090/validateEmpNameIsExists",{
params: {
empName: value
}
});
if (resp.data){
// 为true,则表示存在,
this.isAdd = true;
}else{
this.isAdd = false;
}
}
},
methods: {
async deleteById(id){
await axios.get("http://localhost:9090/deleteById",{
params: {
id: id
}
});
// 再次查询
this.queryAll();
},
async update(){
await axios.post("http://localhost:9090/update",{
empName: this.empName,
email: this.email,
sex: this.sex,
id: this.id
});
// 再次查询全部数据
this.queryAll();
},
async toEditUI(id){
let resp = await axios.get("http://localhost:9090/queryById?id="+id);
let emp = resp.data.data;
this.empName = emp.empName;
this.email = emp.email;
this.sex = emp.sex;
this.id = id;
},
async add(){
// 发送请求
await axios.post("http://localhost:9090/save",{
empName: this.empName,
email: this.email,
sex: this.sex
})
// 查询列表数据
this.queryAll();
},
async queryAll(){
let resp = await axios.get("http://localhost:9090/queryAll");
this.employees = resp.data.data;
}
},
mounted() {
this.queryAll();
}
}
</script>
<style scoped>
</style>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。