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

最新推荐文章于 2025-01-07 14:49:20 发布

转载

最新推荐文章于 2025-01-07 14:49:20 发布 · 876 阅读

7 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/GracefulTing/blog/1797675

文章标签：

#json #javascript #数据库 #ViewUI

本文介绍如何使用Vue.js和json-server快速搭建一个后台管理系统的原型。通过vue-cli初始化项目，结合json-server模拟数据，实现了包括搜索、信息列表、添加、详情、编辑和删除等功能。系统采用bootstrap样式，涉及的主要组件有Customers、About、Alert、Add、CustomerDetail和Edit。这是一个简单的管理系统，未来计划进一步完善功能。

2019独角兽企业重金招聘Python工程师标准>>>

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