axios改造品牌列表案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="lib/bootstrap.css">
<script src="lib/vue-2.6.10.js"></script>
<script src="lib/axios.min.js"></script>
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Name:
<input type="text" v-model="name" class="form-control">
</label>
<input type="button" value="添加" @click="add" class="btn btn-primary">
</div>
</div>
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//全局的axios配置
axios.defaults.baseURL = 'http://www.liulongbin.top:3005/';
//创建vue实例，得到ViewMode1
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
// {id: 1, name: '五菱宏光', ctime: new Date()},
// {id: 2, name: '众泰', ctime: new Date()},
]
},
created() { //当 vm 实例的 data 和 methods 初始化完毕后，vm实例会自动执行这个生命周期函数
this.getAllList();
},
methods: {
add() { // 添加品牌列表到后台服务器
//分析
//通过API借口，发送一个post请求
axios({
method: 'post',
url: 'api/addproduct',
data: {
name: this.name
}
}).then(res => {
// console.log(res);
var result = res.data;
if (result.status === 0) {
this.getAllList();
this.name = '';
} else {
alert('添加失败！');
}
}).catch(error => {
console.log(error);
})
},
del(id) {//删除品牌
axios({
method: 'get',
url: 'api/delproduct/' + id,
}).then(res => {
// console.log(res);
var data = res.data;
if (data.status === 0) {
this.getAllList();
} else {
alert('删除失败！');
}
}).catch(error => {
console.log(error);
})
},
getAllList() { //获取所有的品牌的列表
//分析
//由于已经导入了axios这个包，所以可以直接通过axios来发起数据请求
//根据api地址获取数据
axios({
method: 'get',
url: 'api/getprodlist',
}).then(res => {
var data = res.data;
// console.log(data);
if (data.status === 0) { //成功
this.list = res.data.message;
} else {
alert('获取数据失败！');
}
}).catch(error => {
console.log(error);
})
}
}
});
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
