一文带你理解vue创建一个后台管理系统流程(Vue+Element)

我是歌谣 放弃很容易 但是坚持一定很酷

1前言

本文根据自己工作经历编写,若有不合理之处,欢迎吐槽

2定义

后台管理系统什么 对一个页面进行增删改查 是不是有点像,不重复定义

3第一次接触后台管理系统

第一次接触后台管理系统是某b站的一个后台管理系统(Vue+Element 实现电商管理系统)

那时候还是很努力的去跟着视频编写

当时也是认真编写完成这个后台管理系统

现在已经找不到那个代码了 当时换了电脑 代码就丢失了

反正是b站的视频学习所得

3.1原始版后台管理(Vue+Element电商管理系统)

为什么要说这是最原始版的管理系统呢

因为相对于后面的代码比较简单

3.1.1项目演示

项目演示就是一个标准的一个后台管理 包括用户管理 权限管理 商品管理页面什么的 相对来说还是非常的简单易懂

3.1.2目录结构

看完这个布局 当初还是觉得有点东西的 现在想想就是简单的单页面开发 所有的接口调用初始化生命周期里面 会引入一个echart和富文本相对来说还是复杂一点 基本全都是单页面开发样式和调用接口

3.1.3接口文档

每一个系统都有自己的一个接口文档 接口文档大多是按照restful规范进行设计的 如果不按照这个来实现也是可行的 具体看你个人 这里就拿出一部分接口文档增删改查用来做展示而已

## 1.3. 用户管理### 1.3.1. 用户数据列表- 请求路径:users
- 请求方法:get
- 请求参数| 参数名   | 参数说明     | 备注     |
| -------- | ------------ | -------- |
| query    | 查询参数     | 可以为空 |
| pagenum  | 当前页码     | 不能为空 |
| pagesize | 每页显示条数 | 不能为空 |- 响应参数| 参数名    | 参数说明     | 备注 |
| --------- | ------------ | ---- |
| totalpage | 总记录数     |      |
| pagenum   | 当前页码     |      |
| users     | 用户数据集合 |      |- 响应数据```json
{"data": {"totalpage": 5,"pagenum": 4,"users": [{"id": 25,"username": "tige117","mobile": "18616358651","type": 1,"email": "tige112@163.com","create_time": "2017-11-09T20:36:26.000Z","mg_state": true, // 当前用户的状态"role_name": "炒鸡管理员"}]},"meta": {"msg": "获取成功","status": 200}
}
```### 1.3.2. 添加用户- 请求路径:users
- 请求方法:post
- 请求参数| 参数名   | 参数说明 | 备注     |
| -------- | -------- | -------- |
| username | 用户名称 | 不能为空 |
| password | 用户密码 | 不能为空 |
| email    | 邮箱     | 可以为空 |
| mobile   | 手机号   | 可以为空 |- 响应参数| 参数名   | 参数说明    | 备注 |
| -------- | ----------- | ---- |
| id       | 用户 ID     |      |
| rid      | 用户角色 ID |      |
| username | 用户名      |      |
| mobile   | 手机号      |      |
| email    | 邮箱        |      |- 响应数据```json
{"data": {"id": 28,"username": "tige1200","mobile": "test","type": 1,"openid": "","email": "test@test.com","create_time": "2017-11-10T03:47:13.533Z","modify_time": null,"is_delete": false,"is_active": false},"meta": {"msg": "用户创建成功","status": 201}
}
```### 1.3.3. 修改用户状态- 请求路径:users/:uId/state/:type
- 请求方法:put
- 请求参数| 参数名 | 参数说明 | 备注                                        |
| ------ | -------- | ------------------------------------------- |
| uId    | 用户 ID  | 不能为空`携带在url中`                       |
| type   | 用户状态 | 不能为空`携带在url中`,值为 true 或者 false |- 响应数据```json
{"data": {"id": 566,"rid": 30,"username": "admin","mobile": "123456","email": "bb@itcast.com","mg_state": 0},"meta": {"msg": "设置状态成功","status": 200}
}
```### 1.3.4. 根据 ID 查询用户信息- 请求路径:users/:id
- 请求方法:get
- 请求参数| 参数名 | 参数说明 | 备注                  |
| ------ | -------- | --------------------- |
| id     | 用户 ID  | 不能为空`携带在url中` |- 响应参数| 参数名  | 参数说明 | 备注 |
| ------- | -------- | ---- |
| id      | 用户 ID  |      |
| role_id | 角色 ID  |      |
| mobile  | 手机号   |      |
| email   | 邮箱     |      |- 响应数据```json
{"data": {"id": 503,"username": "admin3","role_id": 0,"mobile": "00000","email": "new@new.com"},"meta": {"msg": "查询成功","status": 200}
}
```### 1.3.5. 编辑用户提交- 请求路径:users/:id
- 请求方法:put
- 请求参数| 参数名 | 参数说明 | 备注                        |
| ------ | -------- | --------------------------- |
| id     | 用户 id  | 不能为空 `参数是url参数:id` |
| email  | 邮箱     | 可以为空                    |
| mobile | 手机号   | 可以为空                    |- 响应参数| 参数名  | 参数说明 | 备注 |
| ------- | -------- | ---- |
| id      | 用户 ID  |      |
| role_id | 角色 ID  |      |
| mobile  | 手机号   |      |
| email   | 邮箱     |      |- 响应数据```json
/* 200表示成功,500表示失败 */
{"data": {"id": 503,"username": "admin3","role_id": 0,"mobile": "111","email": "123@123.com"},"meta": {"msg": "更新成功","status": 200}
}
```### 1.3.6. 删除单个用户- 请求路径:users/:id
- 请求方法:delete
- 请求参数| 参数名 | 参数说明 | 备注                       |
| ------ | -------- | -------------------------- |
| id     | 用户 id  | 不能为空`参数是url参数:id` |- 响应参数
- 响应数据```json
{"data": null,"meta": {"msg": "删除成功","status": 200}
}
```### 1.3.7. 分配用户角色- 请求路径:users/:id/role
- 请求方法:put
- 请求参数| 参数名 | 参数说明 | 备注                       |
| ------ | -------- | -------------------------- |
| id     | 用户 ID  | 不能为空`参数是url参数:id` |
| rid    | 角色 id  | 不能为空`参数body参数`     |- 响应参数| 参数名  | 参数说明 | 备注 |
| ------- | -------- | ---- |
| id      | 用户 ID  |      |
| role_id | 角色 ID  |      |
| mobile  | 手机号   |      |
| email   | 邮箱     |      |- 响应数据```json
{"data": {"id": 508,"rid": "30","username": "asdf1","mobile": "123123","email": "adfsa@qq.com"},"meta": {"msg": "设置角色成功","status": 200}
}
```

3.1.4页面复杂度

1页面接口调用当前页面调用

2页面样式当前页面微调

3页面不封装组件

4页面不用vuex

3.1.5小结

很显然 第一次接触的后台管理系统他没有任何的一个难度 算是入门水平 这就是为什么很多人选择网上买课程的原因吧 这里没有vuex 没有组件封装 没有组件传值 没有过多的复杂操作

 4.1进阶版后台管理系统(SBS+后台管理系统)

为什么说是进阶的系统呢 因为对其中的一些元素加入更多 有了组件封装 组件传值 vuex

4.1.1项目演示

毕竟开始商用了 所以呀 从代码的构造上就开始变得复杂了

4.1.2目录结构

代码开始趋向复杂化了 常规用到的vue的组件都开始引入了 vuex这边用的较少 但是引用到了 组件封装 多个组件可以重复拿过来用 就直接用了

4.1.3接口文档

这边就不展示接口文档了 多的可能就是有个工具生成了接口文档 需要postman进行一个本地测试了

 4.1.4页面复杂度

1页面接口调用当前页面调用(页面接口调用可以父子调用)

2页面样式当前页面微调(开始有全局调用了)

3页面不封装组件(组件开始封装 耦合性更低)

4页面不用vuex(页面开始用vuex 但是用的极少 除了很需要的一些用户 部门才会存储起来 留存使用)

4.1.5小结

随着我们工作的不断学习 进入一家公司的历练 代码的写作需要更高的水平 而不是需要一个自学的水平

 5.1继续进阶的系统(某大型公司的系统)

5.1.1项目演示

此处不便项目演示

5.1.2目录结构

目录结构为常规vue-cli

5.1.3接口文档

Swagger工具获取 可以在线调试 直接mock数据 接口未开发就可以进行前端页面的全部开发

5.1.4页面复杂度

1页面接口调用当前页面调用(页面接口调用可以父子调用)

2页面样式当前页面微调(开始有全局调用了)

3页面不封装组件(组件开始封装 耦合性更低)

4页面不用vuex(vuex用的很多 所有的接口调用直接用过vuex去识别和规范)

5自定义指令 公用方法进行封装

 5.1.5小结

一开始接触好的架构对你的成长还是有飞快的促进作用 所以选择平台的重要性就凸显出来了

 6.1....更进阶的代码架构和规范

7总结

综上所述 搭建一个好的vue+element的项目

1抽离出公共方法(引用的时候直接import和export即可 提高代码复用性)

2发送请求的方法(常见的有ajax axios等都是可以选择的 本文第二个项目用的就是简单的一个接口封装 还是页面的一个调用 第三个直接在vuex里面实现了接口的全部)

3接口文档(接口文档 可以通过一个后台直接模拟数据 在接口还没有开发好的时候就可以进行一个前端开发)

4组件封装(对于经常用到的组件可以进行一个手动封装 便于后期维护)

5定义全局样式(设定整个页面的整体架构 保持页面的美观)

6定义自定义指令(自定义指令可以帮助我们进行代码的一个高度实现)

 

附录:代码规范

最近学到的一些规范 当然不全 持续总结

代码规范
1变量 方法命名驼峰 变量命名需要有意义
2两种情况判断多用三元
3element 设置宽度直接内联
4按照架构代码构造 
5公用组件注释少写 注释少写
6页面不用的逻辑找到摈弃 
7console.log及时清除
8全部用三等 不可以二等 需要全等
9尽量避免污染公共组件 代码注重优化
10提示只留一个提示 提示不要加感叹号

我是歌谣 一个vue+elment的项目都是常规的一些项目流程 如何用最少最简单的代码实现才是我们的根本选择 不要为了实现功能写代码 实现功能的同时需要思考一下优化  简单 维护性高 规范 欢迎补充.....

推荐阅读

“数万行代码“教你用html和css编写一个精美的网页

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/409379.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

glibc的头文件 linux_求助,编译glibc头文件时出错

我用的软件包如下:binutils-2.16.tar.gzgcc-3.4.4.tar.bz2glibc-2.3.5.tar.gzglibc-linuxthreads-2.3.5.tar.gzlinux-2.6.14.1.tar.gz补丁:ioperm.c.diffflow.c.difft-linux.diff想编译交叉工具链,用的编译指令是这样的:[rootlocalhost build-glibc-headers]#../glibc-2.3.5/co…

多表查询的一些技巧

1、基本方法:From 后面可以接多个表名,表与表之间用逗号隔开,查询字段之间要加上表的名字。 例如:Select table1.column1, table2.column1 from table1, table2 2、表别名:可以为表设置别名,以简化输入&…

c语言 将结构体放在flash,如何将 结构体 的 数据 定义在flash里面,并如何读出来,求各位达人帮助……...

如题,本人不太熟悉GCC,特别是定义在flash和eeprom的数据,所以在做液晶的字库时遇到问题,讲解下思路:用查表的方式,定义一个结构体来装载字符的内码和字符数据。程序如下:/*********************…

“数万行代码“教你用html和css编写一个精美的网页

我是歌谣 放弃很容易 但是坚持一定很酷 1前言 作为一名前端开发工程师 开发一个完美的网页也是我们的必修课之一 逻辑写起来有时候不是那么的难 据说页面样式才是最难的一课 本文内容纯属自己个人观点 欢迎一起交流吐槽 2网页基础版(divcss) 我第一次接触…

C#中在主窗体中用ShowDialog方法显示子窗体的使用技巧

显示和关闭子窗体: 方法1:源代码: EatGood.FoodManageUI.MessageForm.ConfirmDelFeelkindOrFeelsForm feelkindform new MessageForm.ConfirmDelFeelkindOrFeelsForm(); //创建一个窗体对象 feelkindform.ShowDialog() ; //显示窗体 子窗体中…

cmd oracle sys登录_oracle忘记sys/system/scott用户密码的解决方法

一、忘记除SYS、SYSTEM用户之外的用户的登录密码。用SYS (或SYSTEM)用户登录。CONN SYS/PASS_WORD AS SYSDBA;使用如下语句修改用户的密码。ALTER USER user_name IDENTIFIED BY newpass;注意:密码不能全是数字。并且不能是数字开头。否则会出现:ORA-009…

汇编语言写c51延时程序,单片机延时程序实例讲解

在单片机实验中,有一个很重要也是很基本的子程序必须要求我们掌握,那就是延时程序。下面我凭记忆来讲解延时程序。课本上讲,1个机器周期6个状态周期12个时钟周期,而这个时钟周期与晶振频率有关。我们接下来要上的实验基本都是以12…

Data Analysis: What are the skills needed to become a data analyst?

今天看到一个讨论贴:如何成为一个牛逼的数据分析师?其中有一贴如此总结。全文如下:There are two classes of skills that are needed to be a successful data analyst: both soft and technical skills are needed. The core work flow fo…

一文带你理解如何解决工作中的需求

我是歌谣 放弃很容易 但是坚持一定很酷 1前言 在我们的开发过程中 会遇到一些开发的需求 怎么实现 怎么写 怎么做才最合理 2需求处理 拿到一个需求就和做数学题一样 我们要理清所有的关系 由于本文知识对需求进行阐述 所以就以vue为例子 2.1 需求1处理页面样式某页面跳转之后如…

tc溜溜865手机投屏卡_溜溜tcgames老版本(电脑玩手机游戏)-溜溜TC Games32位/64位旧版本PC下载V2.0.0官网安卓真机投屏-西西软件下载...

溜溜TC Games32位/64位旧版本PC是一款非常好用的手机游戏投屏工具,有了这款软件我们就可以将手机上的游戏画面投入到电脑上,大屏幕玩游戏,这样肯定会跟畅快,该软件是由成都杰华科技有限公司基于PC端研发的,从此电脑玩游…

c语言八个方向迷宫课程设计,【精品资料最新版】C语言课程设计-迷宫游戏.doc...

计算机技术基础课程设计C语言设计报告题目:完整的二维迷宫游戏学院:工商管理学院专业:信息系统与信息管理班级:050507姓名:孙月指导教师:张首伟设计日期:2004年12月10日题目:完整的二…

文件操作的小tips

freopen功 能: 替换一个流,或者说重新分配文件指针,实现重定向。 eg: freopen("in.txt","r",stdin); freopen("out.txt","w",stdout); /* close the standard output stream */ fclose(stdout);若要返回到显示…

ant接口用什么天线_Ant-Basic天线基本知识讲

1天线1.1天线的作用与地位无线电发射机输出的射频信号功率,通过馈线(电缆)输送到天线,由天线以电磁波形式辐射出去。电磁波到达接收地点后,由天线接下来(仅仅接收很小很小一部分功率),并通过馈线送到无线电接收机。可见&#xff0…

android imageview 图片切换动画,在Android中以动画方式将ImageView移动到不同的位置...

TranslateAnimation animation new TranslateAnimation(0, 50, 0, 100);animation.setDuration(1000);animation.setFillAfter(false);animation.setAnimationListener(new MyAnimationListener());imageView.startAnimation(animation);更新:问题是,Vi…

shell,perl,python

shell,perl,python的区别 2012-03-18 10:48:42| 分类: 默认分类 | 标签: |字号大中小 订阅 shellsedawk三者中功能最弱,没有调试程序,大多数操作必须通过运行其他程序才能执行,所以需要更多时间、内存并在进程表中…

宁波python学习_python学习第五天

一 常用模块定义:可以实现某种功能的.py结尾的python文件,文件名为test.py,则模块名为test导入方法import 模块名import 模块名1,模块名2from 模块名 import * 不建议使用这种方法,容易引起模块中的方法被…

android管理员和普通用户登录,asp登录页如何区别管理员和普通用户,登录后跳转到不同页面?...

数据库表 user表 中,username(用户名) pass(密码) type(超级管理员、高级发文者) cname(单位名称)登录页index.aspif request.Form("submit")"登陆系统" thenusertrim(request.Form("uname"))passucase(md5(request.Form("pass&…

envoy实现_如何利用 Envoy 的 Postgres 过滤器实现网络可观察性

作者:Christoph Pakulski自发布版本 1.15.0 起,Envoy 代理就开始支持 Postgres 信息解码用于统计目的了。该功能为网络中发生的 Postgres 事务提供聚合视图。有了聚合视图,Postgres 作业的种类、故障的数量和严重性瞬间一目了然。通过时间序列…