Vue.js实现CRUD应用
一个简单的功能，实现用户的CDUR，用户表，有四个字段，id,name,age,salary.
<!DOCTYPE html>
<html>
<head>
<title>list.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="content-type" charset="UTF-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<style>
td{
border:1px solid red;
}
</style>
</head>
<body>
<div id="app">
<form id="demo">
姓名：<input type="" v-model="addArr.name" />
薪水：<input type="" v-model="addArr.salary" />
年龄：<input type="" v-model="addArr.age"/>
<a href="javascript:return false;" v-on:click='add()'>添加</a>
<a href="javascript:return false;" v-on:click='update()'>更新</a>
</form>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>收入</th>
</tr>
</thead>
<tbody>
<template v-for="todo in messages">
<tr>
<td>{{ todo.id}}</td>
<td>{{ todo.name}}</td>
<td>{{ todo.age}}</td>
<td>{{ todo.salary}}</td>
<td v-on:click='del(todo.id)'>删除</td>
<td v-on:click="load(todo.id)">修改</td>
</tr>
</template>
</tbody>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
messages:'',
addArr:{id:'','name':'','salary':'','age':''},//新增的表单字段
addResult:'',
},
mounted: function() {
var self = this;
console.log(this);
this.$http.post('list.do').then(function(data){
self.messages =eval(data.body);
});
},
methods:{
del:function(id){
var self = this;
if(confirm("确定删除吗？")){
this.$http.post("del.do?id="+id).then(function(data){
console.log(eval(data.body));
if(eval(data.body) == 1){
alert("删除成功");
this.$http.post('list.do').then(function(data){
self.messages =eval(data.body);
});
}else{
alert("删除失败");
}
});
}
},
add:function(){
var self = this;
console.log(1);
var addArr={
'name':this.addArr.name,
'salary':this.addArr.salary,
'age':this.addArr.age,
};
$.ajax({
type:"post",
url:"add.do",
data:vm.addArr,
async:true,
success:function(data){
if(data==1){
alert("添加成功");
self.$http.post('list.do').then(function(data){
self.messages =eval(data.body);
});
self.resetStu();
}else{
alert("添加失败");
}
}
});
},
update:function(){
var self = this;
var addArr={
'id':this.addArr.id,
'name':this.addArr.name,
'salary':this.addArr.salary,
'age':this.addArr.age,
};
if(confirm("确定修改吗？")){
$.ajax({
type:"post",
url:"update.do",
data:vm.addArr,
async:true,
success:function(data){
if(data==1){
alert("修改成功");
self.$http.post('list.do').then(function(data){
self.messages =eval(data.body);
});
self.resetStu();
}else{
alert("修改失败");
}
}
});
}
},
load:function(id){
var self = this;
this.$http.post("load.do?id="+id).then(function(data){
var emp = eval("("+data.body+")") ;
self.addArr ={
'id':emp.id,
'name':emp.name,
'salary':emp.salary,
'age':emp.age,
}
});
},
//复位新增表单
resetStu:function(){
this.addArr={
'name':'',
'salary':'',
'age':''
}
}
}
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
