文档章节

Vue + json-server实现后台管理系统

wftt
 wftt
发布于 2018/04/19 10:44
字数 2268
阅读 775
收藏 1

使用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:弹框提示组件

<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">&times;</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},
	]
})

最后,就实现了一个简单的后台管理系统,可以添加用户信息,查看详情,编辑和删除对应内容,还可以搜索信息。有时间还会继续完善功能,希望大家多多支持!如果对你有帮助,希望可以给我点赞哦!

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
开源干货!!!.NET Core + Vue.js(iview-admin) 通用动态权限(RBAC)管理系统框架[DncZeus]开源啦!!!

DncZeus 前言 关于 DncZeus DncZeus = Dnc + Zeus "Dnc"--.Net Core 的缩写; "Zeus"--中文译为宙斯,是古希腊神话中的众神之王,奥林匹斯十二主神之首,统治宇宙万物的至高无上的主神(在古...

Rector
2018/12/20
0
0
基于guns的spring boot 脚手架项目 - guns-lite

Guns-lite 前言 guns-lite是在guns的基础上开发而来 guns-lite相比guns使用spring data jpa替代了mybatis guns-lite是一个基于spring boot而不是springMVC的后台管理系统。 guns-lite增加了基...

enilu
2018/12/31
9.5K
0
vue服务器端渲染(SSR)实战

什么是服务端渲染(SSR)? SSR(Server-Side Rendering),在SPA(Single-Page Application)出现之前,网页就是在服务端渲染的。服务器接收到客户端请求后,将数据和模板拼接成完整的页面响应到客...

小铭星
2018/07/12
0
0
guns-lite1.0.1 发布,增加国际化和定时任务管理功能

国际化 guns-admin-vuejs实现国际化了,不好意思guns-admin暂未实现国际化,后续也会考虑实现。 不了解上面两个的区别的同学可以再回顾下这个文档 guns-admin-vuejs实现国际化的方式参考vue...

enilu
01/05
240
0
基于SpringBoot和Vue.js的后台管理系统 - web-flash

本项目基于Spring Boot和Vue.js构建的后台管理系统 版本说明 web-flash提供了一个后台管理系统和前端h5站点系统 web-flash是一个基于Spring Boot和Vue.js的web系统,包含了基于element搭建的...

enilu
05/31
10.4K
3

没有更多内容

加载失败,请刷新页面

加载更多

Giraph源码分析(八)—— 统计每个SuperStep中参与计算的顶点数目

作者|白松 目的:科研中,需要分析在每次迭代过程中参与计算的顶点数目,来进一步优化系统。比如,在SSSP的compute()方法最后一行,都会把当前顶点voteToHalt,即变为InActive状态。所以每次...

数澜科技
49分钟前
1
0
Xss过滤器(Java)

问题 最近旧的系统,遇到Xss安全问题。这个系统采用用的是spring mvc的maven工程。 解决 maven依赖配置 <properties><easapi.version>2.2.0.0</easapi.version></properties><dependenci......

亚林瓜子
今天
7
0
Navicat 快捷键

操作 结果 ctrl+q 打开查询窗口 ctrl+/ 注释sql语句 ctrl+shift +/ 解除注释 ctrl+r 运行查询窗口的sql语句 ctrl+shift+r 只运行选中的sql语句 F6 打开一个mysql命令行窗口 ctrl+l 删除一行 ...

低至一折起
今天
7
0
Set 和 Map

Set 1:基本概念 类数组对象, 内部元素唯一 let set = new Set([1, 2, 3, 2, 1]); console.log(set); // Set(3){ 1, 2, 3 } [...set]; // [1, 2, 3] 接收数组或迭代器对象 ...

凌兮洛
今天
1
0
PyTorch入门笔记一

张量 引入pytorch,生成一个随机的5x3张量 >>> from __future__ import print_function>>> import torch>>> x = torch.rand(5, 3)>>> print(x)tensor([[0.5555, 0.7301, 0.5655],......

仪山湖
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部