一整套获取数据，增删改查
- html
<div id="app">
<form @submit.prevent="saveData()">
<label>姓名：
<input type="text" placeholder="姓名" v-model="form.name">
</label>
<label>手机号：
<input type="text" placeholder="手机号" v-model="form.phone">
</label>
<button>保存</button>
</form>
<table>
<thead>
<tr>
<th>标号</th>
<th>姓名</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list">
<td>
<span v-text="item.id"></span>
</td>
<td>
<span v-text="item.name"></span>
</td>
<td>
<span v-text="item.phone"></span>
</td>
<td>
<button @click="deleteData(item.id)">删除{{item.id}}</button>
</td>
</tr>
</tbody>
</table>
</div>
- js
<script>
window.onload = function () {
currentPage = parseInt(getQueryString('page')) > 0 ? parseInt(getQueryString('page')) : 1;
new Vue({
el: '#app',
data: {
// 初始化数据
list: [],
// 表单数据
form: {},
},
computed: {},
created: function () {
// 创建实例之后，编译数据之前
this.getData();
},
methods: {
/**
* 获取初始化数据
*/
getData: function () {
this.$http.get('/api/index/readList', {
params: {
page: currentPage
}
}).then(function (res) {
// 填充数据
this.list = res.body.data;
console.log(this.list);
}, function (err) {
console.log(err.body);
});
},
/*
* 保存数据
*/
saveData: function () {
this.$http.post('/api/index/save',
this.form, {
eumlateJSON: true
}).then(function (res) {
if (res.body.result == 'success') {
alert('保存成功！');
} else {
alert('保存失败！');
}
// 刷新数据
this.getData();
// console.log(res);
}, function (err) {
console.log(err.body);
});
},
/*
* 删除条目
*/
deleteData: function (id) {
this.$http.post('/api/index/delete', {
id: id
}, {
eumlateJSON: true
}).then(function (res) {
if (res.body.result == 'success') {
alert(res.body.msg);
} else {
alert(res.body.msg);
}
// 刷新数据
this.getData();
// console.log(res.body);
}, function (err) {
console.log(err);
});
}
}
});
};
</script>
