点击详情
添加用户
搜索用户
这是vue用户后台关系系统视频学习的笔记
记录一下这个项目的代码,具体内容指路我的其他博客
文件如下所示
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vcustomers</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
因为使用的bookstrap的模板,所以要引入
customers.vue 主页
<template>
<div class="cuostomers container">
<alert v-if="alert" v-bind:message="alert"></alert>
<h1 class="page_header">用户管理系统</h1>
<input type="text" class="form-control" placeholder="搜索" v-model="filterInput">
</br>
<table class="table table-struped">
<thead>
<tr>
<th>姓名</th>
<th>电话</th>
<th>邮箱</th>
</tr>
<th></th>
</thead>
<tbody>
<tr v-for="customers in fileterBy(customers,filterInput)">
<td>{
{
customers.name}}</td>
<td>{
{
customers.phone}}</td>
<td>{
{
customers.email}}</td>
<td><router-link class="btn btn-default" v-bind:to="'/customers/'+customers.id">详情</router-link></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import alert from './alert'
export default {
name: 'customers',
data () {
return {
customers:[],
alert:"",
filterInput:""
}
},
methods:{
fetchCustomers(){
this.$http.get("http://localhost:3000/users")
.then(function(responds){
//console.log(responds);
this.customers = responds.body;
})
},
fileterBy(customers,value){
return customers.filter(function(customers){
return customers