使用vue-cli脚手架搭建项目,基本操作步骤前面博客也有,这里就不进行介绍了。把项目框架搭建好,以及上篇json-server搭建好以后,开启两个服务,一个是json-server的服务:localhost:3000,一个是vue项目的服务,端口默认是8080.
先上效果图:
该系统配合bootstrap渲染样式,方便快捷实现效果。在index.html中引入相关链接:
头部放在App.vue中,通过在main.js中使用ES6语法设置:
//main.js:
new Vue({
router,
template: `
<div id="app">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">用户管理系统</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><router-link to="/">主页</router-link></li>
<li><router-link to="/about">关于我们</router-link></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><router-link to="/add">添加用户</router-link></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<router-view></router-view>
</div>
`
}).$mount("#app")
一共需要用到6个vue子组件,分别展开描述,具体描述以注释的形式附在代码旁,方便表达。
1.Customers.vue:主页组件
主页主要展示的是搜索框和信息列表。
<template>
<div class="customers container">
<!--弹框提示,需要下面先引入Alert.vue组件方可使用,如果alert里面有信息才会显示,绑定message,弹出内容-->
<Alert v-if="alert" v-bind:message="alert"></Alert>
<!--标题-->
<h1 class="page-header">用户管理系统</h1>
<!--搜索框,通过filter实现-->
<input type="text" class="form-control" placeholder="搜索" v-model="filterInput"><br>
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>电话</th>
<th>邮箱</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- <tr v-for="customer in customers"> -->
<!-- 一开始使用上面的v-for,实现搜索功能时采用下面的v-for -->
<tr v-for="customer in filterBy(customers,filterInput)">
<td>{{customer.name}}</td>
<td>{{customer.phone}}</td>
<td>{{customer.email}}</td>
<!--详情按钮,绑定id,点击跳转到对应的单个信息页面-->
<td><router-link class="btn btn-default" v-bind:to="'/customer/' + customer.id">详情</router-link></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
//引用Alert组件
import Alert from './Alert'
export default {
name: 'customers',
data () {
return {
customers:[],
alert:"",
filterInput:""
}
},
methods:{
//获取数据的函数
fetchCustomers(){
//"http://..."就是json-server搭建的本地接口,get后拿到数据,将其赋值给customers就可以展示在页面中.
this.$http.get("http://localhost:3000/users").then(function(response){
// console.log(response)
this.customers = response.body;
})
},
//搜索过滤函数,第一个参数指的是所有的用户信息,第二个参数指的是输入的值,通过匹配输入值和用户姓名,达到搜索.
filterBy(customers,value){
return customers.filter(function(customer){
return customer.name.match(value);
})
}
},
created(){
//判断如果路由中参数有alert,就把值赋给alert显示
if(this.$route.query.alert){
this.alert = this.$route.query.alert;
}
//希望在一开始就获取数据展示.
this.fetchCustomers();
},
updated(){
//希望数据更新的时候也调用函数展示
this.fetchCustomers();
},
//Alert.vue组件注册
components:{
Alert
}
}
</script>
<style scoped>
</style>
2.About.vue:关于我们页面组件
<template>
<div class="about container">
<h1 class="page-header">如果有问题,欢迎随时联系我们!</h1>
<p>这是我们的官方交流群,欢迎加入!</p>
</div>
</template>
<script>
export default {
name: 'about',
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
3.Alert.vue:弹框提示组件
扫描二维码关注公众号,回复:
951515 查看本文章
<template>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
{{message}}
</div>
</template>
<script>
export default {
name: 'alert',
props:["message"],
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
4.Add.vue:添加信息组件
<template>
<div class="add container">
<!--弹框,alert有内容进行提示,绑定message的信息为alert内容-->
<Alert v-if="alert" v-bind:message="alert"></Alert>
<!--标题-->
<h1 class="page-header">添加用户</h1>
<--具体内容表单,提交触发addCustomer方法-->
<form v-on:submit="addCustomer">
<div class="well">
<h4>用户信息</h4>
<div class="form-group">
<label>姓名</label>
<input type="text" class="form-control" placeholder="name" v-model="customer.name">
</div>
<div class="form-group">
<label>电话</label>
<input type="text" class="form-control" placeholder="phone" v-model="customer.phone">
</div>
<div class="form-group">
<label>邮箱</label>
<input type="text" class="form-control" placeholder="email" v-model="customer.email">
</div>
<div class="form-group">
<label>学历</label>
<input type="text" class="form-control" placeholder="education" v-model="customer.education">
</div>
<div class="form-group">
<label>毕业学校</label>
<input type="text" class="form-control" placeholder="graduationschool" v-model="customer.graduationschool">
</div>
<div class="form-group">
<label>职业</label>
<input type="text" class="form-control" placeholder="profession" v-model="customer.profession">
</div>
<div class="form-group">
<label>个人简介</label>
<textarea rows="10" class="form-control" v-model="customer.profile"></textarea>
</div>
<button class="btn btn-primary" type="submit">添加</button>
</div>
</form>
</div>
</template>
<script>
//引入Alert.vue组件
import Alert from './Alert'
export default {
name: 'add',
data () {
return {
customer:{},
alert:""
}
},
methods:{
//添加用户信息方法,传e,阻止默认事件
addCustomer(e){
// console.log('submit');
//如果名字或者电话或者email有一个为空,则进行提示.
if(!this.customer.name || !this.customer.phone || !this.customer.email){
// console.log("请添加对应的信息!");
this.alert = "请添加对应的信息!";
}else{
//创建新的用户信息,作为对象,将上面表单绑定的信息赋值
let newCustomer = {
name:this.customer.name,
phone:this.customer.phone,
email:this.customer.email,
education:this.customer.education,
graduationschool:this.customer.graduationschool,
profession:this.customer.profession,
profile:this.customer.profile
}
//数据请求,post到json-server接口,第二个参数就是创建的新的用户信息,成功后跳转到主页并传递alert内容进行提示,添加成功后,db.json中也会添加上相应的内容
this.$http.post("http://localhost:3000/users",newCustomer).then(function(response){
// console.log(response);
this.$router.push({path:'/',query:{alert:'用户信息添加成功!'}});
})
}
e.preventDefault();
}
},
components:{
Alert
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
5.CustomerDetail.vue:详情信息组件
<template>
<div class="details container">
<!--添加返回按钮,实现从详情到主页的切换-->
<router-link to="/" class="btn btn-default">返回</router-link>
<h1 class="page-header">
{{customer.name}}
<span class="pull-right">
<!--编辑按钮,传id的时候要用v-bind:to,光是to不能实现.点击按钮跳转到edit下对应id内容-->
router-link class="btn btn-primary" v-bind:to="'/edit/' + customer.id">编辑</router-link>
<!--删除按钮,点击后调用deleteCustomer方法,参数也是id,删除所传id对应的内容-->
<button class="btn btn-danger" v-on:click="deleteCustomer(customer.id)">删除</button>
</span>
</h1>
<ul class="list-group">
<li class="list-group-item"><span class="glyphicon glyphicon-asterisk">{{customer.phone}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-plus">{{customer.email}}</span></li>
</ul>
<ul class="list-group">
<li class="list-group-item"><span class="glyphicon glyphicon-asterisk">{{customer.education}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-plus">{{customer.graduationschool}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-asterisk">{{customer.profession}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-plus">{{customer.profile}}</span></li>
</ul>
</div>
</template>
<script>
export default {
name: 'customerdetails',
data () {
return {
customer:""
}
},
created(){
//一开始就获取对应id的数据展示
this.fetchCustomers(this.$route.params.id);
},
methods:{
//获取对应id信息的数据
fetchCustomers(id){
//向本地接口中请求数据,然后赋值给customer
this.$http.get("http://localhost:3000/users/" + id).then(function(response){
// console.log(response)
this.customer = response.body;
})
},
//删除对应id的内容
deleteCustomer(id){
// console.log(id)
//使用delete方法,删除对应id的信息,跳转到主页,并传递alert内容
this.$http.delete("http://localhost:3000/users/"+id).then(function(response){
this.$router.push({path:'/',query:{alert:'用户删除成功!'}});
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
6.Edit.vue:编辑信息组件
<template>
<div class="edit container">
<!--弹框,alert有内容进行提示,绑定message的信息为alert内容-->
<Alert v-if="alert" v-bind:message="alert"></Alert>
<!--标题-->
<h1 class="page-header">编辑用户</h1>
<!--编辑内容表单,提交触发submit绑定的updateCustomer方法-->
<form v-on:submit="updateCustomer">
<div class="well">
<h4>用户信息</h4>
<div class="form-group">
<label>姓名</label>
<input type="text" class="form-control" placeholder="name" v-model="customer.name">
</div>
<div class="form-group">
<label>电话</label>
<input type="text" class="form-control" placeholder="phone" v-model="customer.phone">
</div>
<div class="form-group">
<label>邮箱</label>
<input type="text" class="form-control" placeholder="email" v-model="customer.email">
</div>
<div class="form-group">
<label>学历</label>
<input type="text" class="form-control" placeholder="education" v-model="customer.education">
</div>
<div class="form-group">
<label>毕业学校</label>
<input type="text" class="form-control" placeholder="graduationschool" v-model="customer.graduationschool">
</div>
<div class="form-group">
<label>职业</label>
<input type="text" class="form-control" placeholder="profession" v-model="customer.profession">
</div>
<div class="form-group">
<label>个人简介</label>
<textarea rows="10" class="form-control" v-model="customer.profile"></textarea>
</div>
<button class="btn btn-primary" type="submit">确认</button>
</div>
</form>
</div>
</template>
<script>
//引入Alert.vue组件
import Alert from './Alert'
export default {
name: 'edit',
data () {
return {
customer:{},
alert:""
}
},
methods:{
//获取用户信息展示的方法,参数是id,通过id传入对应的信息,方便修改
fetchCustomers(id){
this.$http.get("http://localhost:3000/users/" + id).then(function(response){
// console.log(response)
this.customer = response.body;
})
},
//修改用户信息的方法
updateCustomer(e){
// console.log('submit');
if(!this.customer.name || !this.customer.phone || !this.customer.email){
// console.log("请添加对应的信息!");
this.alert = "请添加对应的信息!";
}else{
let updateCustomer = {
name:this.customer.name,
phone:this.customer.phone,
email:this.customer.email,
education:this.customer.education,
graduationschool:this.customer.graduationschool,
profession:this.customer.profession,
profile:this.customer.profile
}
//修改用户信息后,put到接口数据中,并跳转到主页,传递alert内容 this.$http.put("http://localhost:3000/users/"+this.$route.params.id,updateCustomer).then(function(response){
// console.log(response);
this.$router.push({path:'/',query:{alert:'用户信息更新成功!'}});
})
}
e.preventDefault();
}
},
created(){
//一开始就根据对应id获取到信息展示
this.fetchCustomers(this.$route.params.id);
},
//组件注册
components:{
Alert
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
需要用到哪个组件就去创建生成相应的组件,并在main.js中引用,并设置路由,最后附上main.js:
//各个组件的引入
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import Customers from './components/Customers'
import About from './components/About'
import Add from './components/Add'
import CustomerDetails from './components/CustomerDetail'
import Edit from './components/Edit'
Vue.config.productionTip = false
//使用路由和http请求
Vue.use(VueRouter)
Vue.use(VueResource)
//设置路由
const router = new VueRouter({
mode:'history', //去掉地址的#
base:__dirname,
routes:[
{path:"/",component:Customers},
{path:"/about",component:About},
{path:"/add",component:Add},
{path:"/customer/:id",component:CustomerDetails},
{path:"/edit/:id",component:Edit},
]
})
最后,就实现了一个简单的后台管理系统,可以添加用户信息,查看详情,编辑和删除对应内容,还可以搜索信息。有时间还会继续完善功能,希望大家多多支持!如果对你有帮助,希望可以给我点赞哦!