三十八、Vue项目上手 | 用户管理系统（上篇）
@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项目上手 | 用户管理系统