Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
163 lines (154 sloc) 5.75 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Use Axios To Make HTTP Request</title>
<link rel="stylesheet" href="../../../css/bootstrap.min.css">
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
<style>
a {
margin-left: 15px;
margin-top: -10px;
}
</style>
</head>
<body class="container-fluid">
<div id="app">
<div class="card border-info mb-3" style="margin-top: 20px;">
<div class="card-header text-info">
<b>用户信息</b>
</div>
<div class="card-body text-info form-inline">
<div class="form-row">
<div class="form-group">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text text-info"> Id </div>
</div>
<input type="text" class="form-control" id="id" v-model="id" autocomplete="off">
</div>
</div>
<div class="form-group">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text text-info"> Name </div>
</div>
<input type="text" class="form-control" id="name" v-model="name" autocomplete="off">
</div>
</div>
<div class="form-group">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text text-info"> Email </div>
</div>
<input type="email" class="form-control" id="email" v-model="email" autocomplete="off">
</div>
</div>
<div class="form-group">
<a class="btn btn-info" href="javascript:void(0)" role="button" @click="search">搜索</a>
<a class="btn btn-success" href="javascript:void(0)" role="button" @click="add">新增</a>
</div>
</div>
</div>
</div>
<table class="table table-striped table-bordered table-hover text-info">
<thead class="thead-inverse">
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Created On</th>
</tr>
</thead>
<tbody>
<tr v-for="item in users" :key="item.id">
<td scope="row">{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.createdTime}}</td>
</tr>
</tbody>
</table>
</div>
<script>
// request 请求拦截
axios.interceptors.request.use(function (request) {
// 对 request 进行拦截
if (true) {
console.log('跳转到登录页面')
}
return request;
}, function (error) {
// 在错误请求时进行操作
return Promise.reject(error);
});
// response 请求拦截
axios.interceptors.response.use(function (response) {
// 对 response 进行拦截
switch (response.status) {
case 200:
console.log('接口访问成功')
break
case 400:
console.log('提示错误信息')
break
case 401:
console.log('重定向到登录页面')
break
}
return response;
}, function (error) {
// 在错误请求时进行操作
return Promise.reject(error);
});
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
email: '',
users: []
},
created() {
this.getList()
},
methods: {
getList() {
axios.get('http://localhost:5000/api/user')
.then(response => {
this.users = response.data
}).catch(error => {
console.log(error)
})
},
search() {
axios.get('http://localhost:5000/api/user/query', {
params: {
id: this.id,
name: this.name,
email: this.email,
}
}).then(response => {
this.users = response.data
}).catch(error => {
console.log(error)
})
},
add() {
axios.post('http://localhost:5000/api/user', {
name: this.name,
email: this.email,
}).then(response => {
this.getList()
}).catch(error => {
console.log(error)
})
}
},
});
</script>
</body>
</html>
You can’t perform that action at this time.