使用vue ajax 调用数据库内容进行增删改查
作者：互联网
本项目要先预备好以下内容
1.car数据库
2.增删改查接口，我已经写好了一个简单的PHP增删改查四个接口
3.vue的指令、循环、生命函数，及get、post请求等知识点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/vue-resource-1.3.4.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7.css"/>
</head>
<body>
<div id="app" class="container">
<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" class="form-control" v-model="name">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label>
newName:
<input type="text" class="form-control" v-model="newName" id="edit" ref="edit">
</label>
<input type="button" value="确认修改" class="btn btn-primary" @click="edited">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>删除</th>
<th>修改</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>
<td>
<a href="" @click.prevent="edit(item.name)">修改</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
// 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 / ，否则 不会启用根路径做拼接；
Vue.http.options.root = 'http://localhost/dome/';
// 全局启用 emulateJSON 选项，gpost方法就不用加 { emulateJSON: true } 参数了
Vue.http.options.emulateJSON = true;
var vm = new Vue({
el: '#app',
data:{
// id:"",
name:"",
oldName:"",
list: [
{"id":1,"name":"宝马","ctime":new Date}
]
},
created() {//生命周期函数
this.getList()
},
methods:{
getList(){
this.$http.get('vueserver/data1.php').then(result => {
var result=result.body//获得数据
this.list=result//给list赋值
})
},
add(){
this.$http.post('vueserver/data3.php',{name:this.name},{ emulateJSON: true }).then(result=>{
this.getList()
this.name=''
})
},
del(id){
this.$http.post('vueserver/data2.php',{id:id}).then(result=>{
this.getList()
})
},
edit(name){
//this.oldName=name;//将要修改的内容
this.name=name
// document.getElementById("edit").focus()//js获取焦点
this.$nextTick((x)=>{ //vue获取焦点 ref
this.$refs.edit.focus();
})
},
edited(){
this.$http.post('vueserver/data4.php',{old:this.name ,news:this.newName}).then(result=>{
this.getList()
this.name=''
this.newName=""
})
},
}
})
</script>
</body>
</html>
标签：vueserver,vue,http,name,getList,改查,ajax,result,id 来源： https://www.cnblogs.com/shangrao/p/12933747.html