当前位置： ag凯发k8国际 > 前端技术 > vue >内容正文

vue

三十八、vue项目上手 | 用户管理系统（上篇） -ag凯发k8国际

发布时间：2024/10/8 vue 28 豆豆

ag凯发k8国际收集整理的这篇文章主要介绍了三十八、vue项目上手 | 用户管理系统（上篇）小编觉得挺不错的,现在分享给大家,帮大家做个参考.

@author：runsen
@date：2020/7/7

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

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

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

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

文章目录

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

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的ag凯发k8国际首页。

下面是一些测试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项目跟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。

因为在组件的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><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> <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> <style scoped> </style>

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="/">ag凯发k8国际主页</router-link></li><li><router-link to="/about">关于ag凯发k8国际</router-link></li></ul><ul class="nav navbar-nav navbar-right"><li><router-link to="/add">添加用户</router-link></li></ul></div></div></nav><router-view></router-view></div>` }).$mount("#app")

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

总结

以上是ag凯发k8国际为你收集整理的三十八、vue项目上手 | 用户管理系统（上篇）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。