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

编程语言 2018-05-20 16:21:05 阅读次数: 2

使用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")

一共需要用到６个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},
	]
})

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

猜你喜欢

转载自my.oschina.net/GracefulTing/blog/1797675
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022