<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</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>
Title:
<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-bordered table-hover 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>
//配置全局数据根域名接口
Vue.http.options.root = 'http://api.cms.liulongbin.top/';
const app = new Vue({
el:'#app',
data:{
name: '',
list:[
{
"status":0,
"message": [
{
"id":1,"name":"宝马","ctime":"2019-10-12T02:15:20.000Z"},
{
"id":2,"name":"奥迪","ctime":"2019-12-12T03:20:59.000Z"}
]
}
]
},
created(){
this.getAllList()
},
methods:{
getAllList(){
//获取所有数据列表
this.$http.get('api/getprodlist').then(function (result) {
if (result.body.status === 0){
this.list = result.body.message
} else{
alert("获取数据失败")
}
})
},
add(){
//添加数据
this.$http.post('api/addproduct',{
name:this.name},{
emulateJSON:true})
.then(result => {
if (result.body.status ===0){
this.getAllList()
}else{
alert("添加失败")
}
})
},
del(id){
this.$http.get('api/delproduct/' + id).then(result => {
if (result.body.status === 0){
//删除成功
this.getAllList()
}else{
alert("删除失败")
}
})
}
}
})
</script>
</body>
</html>
vue-resource获取、删除、添加数据
猜你喜欢
转载自blog.csdn.net/lujiebin/article/details/107995899
今日推荐
周排行