改造List页面
1引入文件
<!-- 1引入vuejs axios文件-->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
2页面布局
<div id="app">
<div v-show='viewId=="add"' id="add" style="display: none">
<h1>添加</h1>
<form id="add_form">
<br/> name:<input type="text" name="name" >
<br/> value:<input type="text" name="value" >
<br/>
<input id="add_save" type="button" value="保存" >
<input id="add_cancle" type="button" value="取消" >
</form>
</div>
<div v-show='viewId=="edit"' id="edit" style="display: none">
<h1>编辑</h1>
<form id="form_edit">
<input type="text" name="id" id="edit_form_id" hidden="hidden">
<br/> name:<input type="text" id="edit_form_name" name="name" >
<br/> value:<input type="text" id="edit_form_value" name="value" >
<br/> <input id="edit_save" type="button" value="更新" > <input id="edit_cancle" type="button" value="取消" >
</form>
</div>
<div v-show='viewId=="list"' id="list" style="display: none">
<h1>列表</h1>
<input type="button" value="添加" id="list_add">
<input type="text" value="" name="searchword">
<input type="button" value="查询">
<table border="1" width="100%">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>余额</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
3使用viewId控制视图
<script type="text/javascript">
//2:创建一个vue对象
var vue = new Vue({
el:'#app',
data:{
viewId:'list'
}
})
</script>
4使用axios获取find数据
<script type="text/javascript">
//2:创建一个vue对象
var vue = new Vue({
el:'#app',
data:{
viewId:'list',
accountList:[]
},
methods:{//定义方法
loadList:function () {
console.log("methods里面的")
console.log(this)
//向后台接口发请求获取获表
var url = "http://localhost:8002/day01/account/find"
axios.get(url).then(
function (repsonse) {
console.log("axios里面的")
console.log(this)
if(200==repsonse.data.code){
//将json数组保存到vue的data的list
//不能使用this.accountList 实际是axios.accountList
//视图要显示出来，vue需要将数据保存到data
vue.accountList = repsonse.data.data
}
// console.log(vue.accountList)
}
)
}
},
created: function () {
this.loadList()
}
})
</script>
5使用v-for显示列表
<table border="1" width="100%">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>余额</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr v-for="(item,index) in accountList" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.value}}</td>
<td><a href="javascript:void(0);" >编辑</a>|<a>删除</a></td>
</tr>
</tbody>
</table>
改造删除
1 使用@click调用删除方法
<tr v-for="(item,index) in accountList" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.value}}</td>
<td><a href="javascript:void(0);" >编辑</a>|<a href="javascript:void(0);" @click="deleteById(item.id)">删除</a></td>
</tr>
2在methods里面定义deleteById
deleteById:function (id) {
var url = "http://localhost:8002/day01/account/delete/"+id
axios.get(url).then(function (resp) {
if(200 == resp.data.code){
vue.loadList()
alert(data.msg)
}
})
}改造编辑页面
添加编辑的点击事件
<tr v-for="(item,index) in accountList" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.value}}</td>
<td><a href="javascript:void(0);" @click="findById(item.id)" >编辑</a>|<a href="javascript:void(0);" @click="deleteById(item.id)">删除</a></td>
</tr>
methods添加findById
findById:function (id) {
vue.viewId = 'edit'
//为界面查询数据
var url = "http://localhost:8002/day01/account/find/"+id
axios.get(url).then(function (resp) {
if(200 == resp.data.code){
vue.accountEdit = resp.data.data
}
})
},显示在界面
<div v-show='viewId=="edit"' id="edit" style="display: none">
<h1>编辑</h1>
<form id="form_edit">
<input type="text" name="id" id="edit_form_id" hidden="hidden" v-model:text="accountEdit.id">
<br/> name:<input type="text" id="edit_form_name" name="name" v-model:text="accountEdit.name">
<br/> value:<input type="text" id="edit_form_value" name="value" v-model:text="accountEdit.value">
<br/> <input id="edit_save" type="button" value="更新" @click="updateAccount()" > <input id="edit_cancle" type="button" value="取消" @click="loadList()" >
</form>
</div
注意看 v-model:text=
在methods再添加
updateAccount:function () {
var url = "http://localhost:8002/day01/account/update"
axios.post(url,this.accountEdit).then(function(){
vue.loadList()
})
},改造添加页面
给列表机部的添加按钮添加事件
<input type="button" value="添加" id="list_add" @click="showAdd()">
methods里面添加
showAdd:function(){
vue.viewId = 'add'
},给更新按钮加点击事件
<div v-show='viewId=="edit"' id="edit" style="display: none">
<h1>编辑</h1>
<form id="form_edit">
<input type="text" name="id" id="edit_form_id" hidden="hidden" v-model:text="accountEdit.id">
<br/> name:<input type="text" id="edit_form_name" name="name" v-model:text="accountEdit.name">
<br/> value:<input type="text" id="edit_form_value" name="value" v-model:text="accountEdit.value">
<br/> <input id="edit_save" type="button" value="更新" @click="updateAccount()" > <input id="edit_cancle" type="button" value="取消" @click="loadList()" >
</form>
</div>
在methods添加提交方法
addAccount:function () {
var url = "http://localhost:8002/day01/account/add"
axios.post(url,this.accountAdd).then(function(){
vue.loadList()
})
}