<div class="index container">
<alert v-if="alert" v-bind:message="alert"></alert>
<input type="text" placeholder="请输入你要搜索的内容" class="form-control" v-model="filterInput"/>
<table class="table table-striped">
<caption>fitness健身网站会员管理系统</caption>
<thead>
<tr>
<th>姓名</th>
<th>电话</th>
<th>等级</th>
</tr>
</thead>
<tbody>
<tr v-for="user in filteruser(userinfo,filterInput)">
<td>{{user.name}}</td>
<td>{{user.tel}}</td>
<td>{{user.grade}}</td>
<td><router-link class="btn btn-info"v-bind:to="'/userdetails/'+user.id"> 详情</router-link></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import alert from './alert'
export default{
name:'index',
components:{
alert
},
data(){
return{
userinfo:[],
filterInput:[]
}
},
methods:{
getuserinfo:function(){
if(this.$route.query.alert){
this.alert=this.$route.query.alert
}
this.$http.get("http://localhost:3000/user").then(function(response){
this.userinfo=response.data;
})
},
filteruser:function(userinfo,value){
return userinfo.filter(function(item){
return item.name.match(value)
})
}
},
created:function(){
this.getuserinfo();
this.filteruser();
}
}
</script>
<style>
</style>
2.添加用户：
<template>
<div class="adduser container">
<form role="form">
<div class="form-group">
<label for="name">会员ID：</label>
<input type="text" class="form-control" v-model="addnewuser.id" placeholder="请输入会员ID">
</div>
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" placeholder="请输入名字" v-model="addnewuser.name">
</div>
<div class="form-group">
<label for="name">性别：</label>
<input type="text" class="form-control" placeholder="请输入性别" v-model="addnewuser.sex">
</div>
<div class="form-group">
<label for="name">电话：</label>
<input type="text" class="form-control" placeholder="请输入电话" v-model="addnewuser.tel">
</div>
<div class="form-group">
<label for="name">等级：</label>
<input type="text" class="form-control" id="name" placeholder="请输入等级" v-model="addnewuser.grade">
</div>
<div class="form-group">
<label for="name">积分：</label>
<input type="text" class="form-control" id="name" placeholder="请输入积分" v-model="addnewuser.jf">
</div>
<div class="form-group">
<label for="name">已消费：</label>
<input type="text" class="form-control" id="name" placeholder="请输入消费情况" v-model="addnewuser.consume">
</div>
<div class="form-group">
<label for="name">余额：</label>
<input type="text" class="form-control" id="name" placeholder="请输入余额" v-model="addnewuser.balance">
</div>
<button type="submit" class="btn btn-default" @click="adds">提交</button>
</form>
</div>
</template>
<script>
export default{
name:"adduser",
data(){
return{
addnewuser:[]
}
},
methods:{
adds:function(e){
var adduserinfo={
id:this.addnewuser.id,
name:this.addnewuser.name,
sex:this.addnewuser.sex,
tel:this.addnewuser.tel,
grade:this.addnewuser.grade,
jf:this.addnewuser.jf,
consume:this.addnewuser.consume,
balance:this.addnewuser.balance
}
this.$http.post("http://localhost:3000/user",adduserinfo).then(function(){
this.$router.push({path:'/',query:{alert:"添加用户成功"}})
})
e.preventDefault();
}
}
}
</script>
<style>
</style>
3.详情
<template>
<div class="userdetails container">
<router-link to="/"class="btn btn-default" >返回</router-link>
<span class="pull-right">
<router-link class="btn btn-success" v-bind:to="'/editinfo/'+addnewuser.id">编辑</router-link>
<button type="button" class="btn btn-danger" @click="deleteUser(addnewuser.id)">删除</button>
</span>
<form role="form">
<ul class="list-group"style="margin-top:36px ;">
<li class="list-group-item ">
<label>会员id:</label>
<span>{{addnewuser.id}}</span>
</li>
<li class="list-group-item ">
<label>姓名:</label>
<span>{{addnewuser.name}}</span>
</li>
<li class="list-group-item ">
<label>性别:</label>
<span>{{addnewuser.sex}}</span>
</li>
<li class="list-group-item ">
<label>电话:</label>
<span>{{addnewuser.tel}}</span>
</li>
<li class="list-group-item ">
<label>等级:</label>
<span>{{addnewuser.grade}}</span>
</li>
<li class="list-group-item ">
<label>积分:</label>
<span>{{addnewuser.jf}}</span>
</li>
<li class="list-group-item ">
<label>已消费:</label>
<span>{{addnewuser.consume}}</span>
</li>
<li class="list-group-item ">
<label>余额:</label>
<span>{{addnewuser.balance}}</span>
</li>
</ul>
</form>
</div>
</template>
<script>
export default{
name:"userdetails",
data(){
return{
addnewuser:[],
}
},
methods:{
getuserinfo:function(id){
this.$http.get("http://localhost:3000/user/"+id).then(function(response){
this.addnewuser=response.data;
})
},
deleteUser:function(id){
this.$http.delete("http://localhost:3000/user/"+id).then(function(){
this.$router.push({path:'/',query:{alert:"删除用户成功"}})
})
}
},
created:function(){
this.getuserinfo(this.$route.params.id);
}
}
</script>
<style>
</style>