@Author：Runsen
@Date：2020/7/7

人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾（作者：Runsen ）

作者介绍：Runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，Python， Java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在CSDN。决定今天比昨天要更加努力。我的征途是星辰大海！

今天高考，当年我就是一个辣鸡，现在还是一个辣鸡，祝高考的个个清华北大.

完成的是用户管理系统，当作复习的Vue项目。

文章目录

安装json-server
创建Vue项目
index.html添加链接
组件编写
main.js

安装json-server

JSON-Server其实就是一台JSON服务器，测试一些业务逻辑。

JSON-Server的GIthub链接：https://github.com/typicode/json-server。

安装JSON-Serve：npm install -g json-server

新建一个JSONSERVER文件夹，创建一个db.json，具体如下。

{"users": [{"name": "Runsen","phone": "13717378202","email": "2953510364@qq.com","education": "本科","graduationschool": "东莞辣鸡学院","profession": "化工","profile": "人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾","id": 1},{"name": "adfasdf","phone": "fasdfasfd","email": "asdfasfd","education": "fasdfasfd","graduationschool": "fasfasdf","profession": "sdfasdfafd","profile": "asdfasdf","id": 2},{"name": "未来的女朋友","phone": "不知道","email": "不知道","education": "不知道","graduationschool": "不知道","profession": "不知道","profile": "不知道","id": 3}],"companies": [{"id": 1,"name": "Apple","description": "Apple is good!"},{"id": 2,"name": "Microsoft","description": "Microsoft is good!"},{"id": 3,"name": "Google","description": "Google is good!"}]
}

启动json-server，json-server db.json

访问http://localhost:3000/，就可以查看JSONSERVER的首页。

下面是一些测试JSONSERVER的API，有些字段是没有的。

// 获取所有用户信息
http://localhost:3000/users// 获取id为1的用户信息
http://localhost:3000/users/1// 获取公司的所有信息
http://localhost:3000/companies// 获取单个公司的信息
http://localhost:3000/companies/1// 获取所有公司id为3的用户
http://localhost:3000/companies/3/users// 根据公司名字获取信息
http://localhost:3000/companies?name=Microsoft// 根据多个名字获取公司信息
http://localhost:3000/companies?name=Microsoft&name=Apple// 获取一页中只有两条数据
http://localhost:3000/companies?_page=1&_limit=2// 升序排序 asc升序 desc降序
http://localhost:3000/companies?_sort=name&_order=asc// 获取年龄30及以上的
http://localhost:3000/users?age_gte=30// 获取年龄在30到40之间
http://localhost:3000/users?age_gte=30&age_lte=40// 搜索用户信息
http://localhost:3000/users?q=Runsen

但是因为json-server db.json是运行一个json，对于很多的时候，是运行一个项目

上面的scripts是我修改后的结果，这里的--watch db.json需指定db.json

"scripts": {"json:server": "json-server --watch db.json","json:server:remote": "json-server http://jsonplaceholder.typicode.com/db"},

执行npm run json:server就可以替代了上面的json-server db.json

创建Vue项目

下面，我们创建Vue项目跟JSONSERVER中的API进行对接。通过vue init webpack customers创建项目，关于webpack打包在之后的系列中。

文件结构如下所示。

Vue默认是8080端口，开启之后就是一个小火箭，在App.vue的开头去注销。

因为之后需要写组件，需要修改vscode配置文件setting.json添加

  "vetur.experimental.templateInterpolationService": false,"vetur.validation.template": false,"vetur.validation.style": false,"vetur.validation.script": false,

不然就写组件后出现红色波浪号，就会报expected.Vetur(1005)，之后重启Vscode。

index.html添加链接

因为在组件的template需要使用bootstrap，因此需要添加bootstrap.js.css，jq和bootstrap.js

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vcustomers</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.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.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></body>
</html>

组件编写

下面，我们需要编写两个组件，一个是About.vue，一个是Customers.vue

About.vue的代码如下，这里的代码是从HelloWorld.vue的复制过来的，about container是bootstrap类名，用来居中。

<template><div class="about container">关于润森</div>
</template><script>
export default {name: 'about',data() {return {}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Customers.vue的代码如下，这里的代码是从HelloWorld.vue的复制过来的，page-header和table table-striped是bootstrap类名，就是一个头部，一个table 。

<template><div class="customers container"><h1 class="page-header">用户管理系统</h1><table class="table table-striped"><thead><tr><th>姓名</th><th>电话</th><th>邮箱</th><th></th></tr></thead><tbody v-for="customer in customers"><tr><td></td><td></td><td></td><td></td></tr></tbody></table></div>
</template>
<script>
export default {name: 'customers',data() {return {customers :[]}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

main.js

main.js需要引用VueRouter，但是我在创建项目的时候没有选择yes，可以通过npm install vue-router，导入就是下面的代码

import VueRouter from 'vue-router'
Vue.use(VueRouter)

在template中导入的是bootstrap中的导航栏，对于的链接：view-source:https://v3.bootcss.com/examples/starter-template

main.js完整代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Customers from './components/Customers.vue'
import About from './components/About.vue'
Vue.config.productionTip = false
Vue.use(VueRouter)// 设置路由 每个路由应该映射一个组件。
const router = new VueRouter({mode:"history",base: __dirname,routes:[{path:'/',component:Customers},{path:'/about',component:About}]})/* eslint-disable no-new */
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")

最后通过npm run dev，运行项目，具体效果如下所示。

三十八、Vue项目上手 | 用户管理系统（上篇）相关推荐

四十、Vue项目上手 | 用户管理系统实现弹窗，搜索和详细页功能（下篇）
@Author:Runsen @Date:2020/7/10 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
三十九、Vue项目上手 | 用户管理系统实现添加用户功能（中篇）
@Author:Runsen @Date:2020/7/8 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
四十一、Vue项目上手 | 用户管理系统实现用户修改和删除功能（完成篇）
@Author:Runsen @Date:2020/7/10 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
第三十八讲项目二打豆豆
1.任务和代码 /* copyright\c)2017,csdn学院 *All cights reserved *文件名称:a.c *作者:王琦 *完成日期:2017年4月23日 *版本号:6.0 * ...
Android项目实战（三十八）：2017最新将AndroidLibrary提交到JCenter仓库（图文教程）...
Android项目实战(三十八):2017最新将AndroidLibrary提交到JCenter仓库(图文教程) 原文:Android项目实战(三十八):2017最新将AndroidLibrary ...
【甄选靶场】Vulnhub百个项目渗透——项目三十八：Tommy-Boy-1（修改UA，脏牛提权）
Vulnhub百个项目渗透 Vulnhub百个项目渗透--项目三十八:Tommy-Boy-1(修改UA,脏牛提权) 这个靶场被我打坏了,忘记快照了,自行官网下载哈~~
Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第一篇 _0.活在风浪里 ...
视频教程-三十八课时零基础matlab精通优化算法-Matlab
三十八课时零基础matlab精通优化算法图像和算法等领域有多年研究和项目经验:指导发表科技核心期刊经验丰富:多次指导数学建模爱好者参赛. 宋星星 ¥100.00 立即订阅扫码下载「CSDN程序员学 ...
OpenCV学习笔记（三十六）——Kalman滤波做运动目标跟踪 OpenCV学习笔记（三十七）——实用函数、系统函数、宏core OpenCV学习笔记（三十八）——显示当前FPS OpenC
OpenCV学习笔记(三十六)--Kalman滤波做运动目标跟踪 kalman滤波大家都很熟悉,其基本思想就是先不考虑输入信号和观测噪声的影响,得到状态变量和输出信号的估计值,再用输出信号的估计误差加 ...

三十八、Vue项目上手 | 用户管理系统（上篇）