前端做后台管理系统有前途吗_关于后台管理系统前端项目的思考

开发后台管理系统是大部分前端开发人员接触过的项目,如何更好的进行项目的搭建、组件的开发、数据结构的设计等等,这些都是需要考虑的问题。以下是我结合一些项目的经历和其他大佬的项目代码与技术分享,做出了对于后台管理系统中前端项目的思考

1. 了解需求,熟悉掌握需求

这一要求无论是对于前端开发人员或是其他端的开发人员,都是能够顺利开发项目的前提。在开发项目之前,需对 PM 的需求了然于胸,对原型设计能够充分掌握。理解每一个操作逻辑的含义,并且扩散思维思考如何进行组件和数据结构的设计。但是单独只是对需求文档和原型进行阅读是比较容易遗漏某些功能点的,最好能够对项目重新设计一张 思维导图 ,从开发自己的角度进行设计,从项目整体的根节点出发,细分每一个模块,每个模块下设计好对应的需求,确保每一个功能不被遗漏。虽然多花了设计思维导图的时间,但我觉得这是值得的,这样不仅仅能够增加对于整体项目的理解,也能更好的及时发现项目的难点和疑惑点。6422581818e0fc19ea47fb9cbb892e15.png

2. 确定技术选型

后台管理系统的主流技术选型为 Vue+ElemetUI,不过个人觉得在组件设计上 AntDesignVue 的 UI 框架设计得好一些,更多的是采取数据驱动组件的设计模式,在项目开发中可以更方便的解耦逻辑函数。不过 UI 框架的选择还是得结合开发人员团队自身对于某一个的熟练程度和是否有对应的 UI 框架能更好的解决项目中存在的难点进行综合比较。
全局按需引入 element-ui 组件:

import Vue from "vue";

···

import { Input } from "element-ui";

Vue.use(Input);

组件使用:

<el-input

v-model="user"

clearable

@keyup.enter.native="search"

@clear="search"

>el-input>

3. 设计项目结构

通过 Vue 脚手架工具搭建的前端项目在 src 文件夹下可分为以下几部分:

  1. 路由层 router 

  2. 静态文件层 assets 

  3. 页面结构层 views 

  4. 组件结构层 components 

  5. 全局状态管理层 store 

  6. 功能逻辑处理层 util 

  7. 常量管理层 constants 

Vue 项目中还可以引入更多的配置如混入层 mixins 、过滤层 filtters 等。
在项目开发中,需要区分开业务功能和非业务功能的逻辑设计,对于一些可以解耦出来的非业务功能函数,一般不直接在开发页面的业务逻辑中直接定义此函数,而是需要抽离出来,可供多个业务功能函数进行调用。
组件结构层 components 中一般也只开发非业务功能相关的页面组件或功能组件,以供多个页面结构进行调用,若一个页面需分成几个组件开发,且此子组件属于业务功能的,建议直接在页面结构层 views 中定义,开发和维护同一个页面也比较方便。src 文件夹下结构如下:

├─assets

├─components

├─constants

├─mixins

├─request

├─router

├─store

├─utils

└─views

4. 数据请求 methods中 OR actions中

一般项目中对于数据请求的方式都是基于 methods 钩子或其他生命周期钩子中调用请求方法,也存在一些项目中是通过发送一个 disptach 异步请求方法在 actions 中调用请求函数。使用后者的说法是便于统一管理请求接口,并对请求返回的数据进行统一的管理。
综合以上两种做法,可以优化项目中的请求方式,若请求接口发出后返回的数据需要在多个页面或多个不同的组件中共享和使用,则推荐在需要发请求的函数中 dispath 触发,在 actions 中发送请求,返回的数据保存在全局状态管理 state 中。methods 中发送请求方式:

getGraphicCode () {

let vm = this;

api.login.getCheckCode({

type: '2'

}).then(res => {

if (res.code === '000') {

vm.graphicCode = 'data:image/png;base64,' + res.data.img;

vm.imgId = res.data.imgId;

} else {

vm.$message.error(res.msg);

}

})

}

actions 中发送请求方式:

findAllRoles({ commit }) {

return new Promise((resolve, reject) => {

api.systemAccount.findAllRoles().then(response => {

if (response.code === "000" && response.success) {

commit(MUTATIONS_TYPE.AllROLES, response.data)

resolve(response);

} else {

reject(new Error(response.code, response.msg))

}

})

})

},

5. 登录与权限管理

token 验证是目前大部分前后端分离的 Web 项目做登录验证比较常见的方法。前端通过发送账号和密码或账号和验证码给到后端后,后端验证通过会返回一个唯一的 token 作为该用户的登录凭证,在之后的每个请求当中,请求头中都需带上这个 token 作为后端的登录校验。token 有过期的机制,可以在请求拦截中做逻辑判断处理,若当前时间接近了过期时间,则通过更新 token 的接口请求更新 token ,在之后的请求中带上新的 token 。以此循环,若用户过长时间无操作,则可认为用户为离线状态,在用户之后的第一次请求时,由于 token 已经过期,访问后端接口会发生错误,根据后端返回的错误状态码作为判断,将系统定向至登录页面。
通过带有 token 请求头的请求方法,后端可以判断到是哪一个用户,前端也可以通过获取权限接口获得该用户的权限列表,根据权限列表做一份路由映射表,如果后端返回的数据结构与前端的路由设置的数据结构不同,此时还需编写此映射路由的业务功能函数。如果该用户拥有此路由权限,则通过在全局路由监控中 router.beforeEach 进行 router 中的 addRoutes 方法将有权限的路由配置添加到路由当中,侧边栏也可根据路由列表中的 meta 字段中关键字的判断进行相应的渲染。如果权限的颗粒度小到一个按钮,则可根据后端返回的权限列表映射出的权限参数,通过 v-if 进行判断该功能组件是否渲染。
在路由管理中通过 router.beforeEach 钩子中判断当前的路由权限是否为空,是的话则可执行获取权限路由的接口:

store.dispatch("getUserInfoAndAuthorityInfo").then(res => {

// 根据后端返回的路由权限格式转成前端路由配置格式

const rolesRoute = setAsyncRouterMap(res.menuList, asyncRouterMap, mainChildrenAsyncRoutes)

store.commit(Vue.VUEX_TYPES.ROLESROUTE, rolesRoute);

// 添加路由

router.addRoutes(rolesRoute);

next({ ...to })

}).catch(() => {

Message.error("验证失败")

next('/login')

})

6. 常量枚举值管理

在项目当中对关键的常量枚举值进行管理是非常有必要的。比如在项目当中后端用某个状态码 1 代表账号为启用状态,如果在项目当中多次使用 ===1 去判断账号是否为启用状态,当需要更改这个状态码的时候,对于前端来说是一件十分麻烦的事情,所以可以通过把 1 赋值给一个常量,在项目代码中引用这个常量,如果需要更改状态码的时候,则直接改变这个赋值给常量枚举值的状态码即可,常量的配置也可提醒开发人员此参数不可轻易修改,便于项目的维护和统一管理。一般常量枚举值的管理写在 constants 层中,常量的变量名使用大写字母编写。
状态枚举值得配置如下:

/**

* 账号状态对照表

* "0" 未启用 NOTUSED_CODE

* "1" 已启用 ENABLE_CODE

* "2" 已停用 DISABLE_CODE

*/

const NOTUSED_CODE = "0";

const ENABLE_CODE = "1";

const DISABLE_CODE = "2";

const ACCOUNT_TYPE = {

[NOTUSED_CODE]: "未启用",

[ENABLE_CODE]: "已启用",

[DISABLE_CODE]: "已停用"

};

export default Object.freeze({

NOTUSED_CODE,

ENABLE_CODE,

DISABLE_CODE,

ACCOUNT_TYPE

});

7. 组件设计

前端项目当中可以把展示组件分为两部分,分别为页面组件和功能组件。对于页面组件,常用于展现页面的整体内容,承担着业务逻辑的正常运行,与业务比较有强的耦合性。功能组件是用于展现和处理某一单一或某一模块的功能,功能组件并不关心页面的业务逻辑,充当着一个函数的作用,只要有输入便有对应的输出,并可在多个页面组件或功能组件中被调用。综上,在设计页面组件的时候,不仅应该考虑该组件能够正常的完成业务的功能,还要考虑其是否能够脱离业务成为一个功能组件,对于内容比较多的页面组件,可以在其同级目录下新建多个子页面组件共同构建。在设计功能组件时,需考虑组件的布局、逻辑、视图,功能组件的设计难度在于其要考虑到满足不断更新的需求变化,可扩展性,灵活性是设计的一大挑战。
页面组件目录格式如下:0d0b82d404d719e1d57bbb4275b8758a.png

8. 必要的开发文档或注释

项目的开发文档可编写为md文件格式存放于项目的根目录,一份好的开发文档能够对项目的背景进行介绍,说明项目的结构和开发的步骤,更有利于其他开发人员参与或接手项目。对于项目当中使用到的与业务功能耦合的逻辑函数,较为复杂的,编写函数的介绍以及使用方法,做好边界条件判断,示范输入数据以及对应的输出结果,可在项目中新建 docs 文件夹存放开发过程中的使用文档。对于非复杂功能的业务逻辑函数或非业务逻辑函数,可直接在定义函数之前编写注释,说明函数作用功能,以及对应的输入和输入参数的类型。

每次的开发过程都可当做是一个学习和总结经验的过程,对比以往的代码,我们可以思考代码结构是否能设计得更加完善,逻辑函数是否清晰且考虑边界条件,性能是否可以更加的优化。

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

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

相关文章

用python绘制熊猫图案_绘制带有熊猫和Matplotlib的一分钟烛台

给出了以下Pandas数据帧的示例date open high low close volume0 2015-03-13 08:00:00 71.602 71.637 71.427 71.539 0.0002491 2015-03-13 08:01:00 71.541 71.563 71.461 71.501 0.0002152 2015-03-13 08:02:00 71.521 71.537 71.504 71.533 0.0000483 2015-03-13 08:03:00 7…

mysql修改主从复制id_mysql主从复制设置

三、mysql复制master和每个slave是通过unique ID来区分的(server-id选项),而且每个slave需要配置好master的主机名&#xff0c;日志文件名&#xff0c;和日志位置这些可以通过在slave会话中使用命令CHANGE MASTER TO &#xff0c;存储在slave的master.info文件中--begin1.在mas…

响应式编程优点 有效_什么是响应式编程?

响应式编程是一种通过异步和数据流来构建事物关系的编程模型。这里每个词都很重要&#xff0c;“事物的关系”是响应式编程的核心理念&#xff0c;“数据流”和“异步”是实现这个核心理念的关键。为了帮助大家理解这个概念&#xff0c;我们不妨以APP初始化业务为例来拆解一下这…

虚拟跳线软件干什么用的_视频教程:用 ESI 的虚拟跳线给你的声音添加效果

本视频讲述了如何在互联网上给你的声音添加效果。你可以使用任何想用的效果器&#xff0c;而且不仅可以输入你的声音&#xff0c;输入信号还可以是任何乐器音源&#xff0c;例如键盘或吉他&#xff0c;你甚至可以直播你的整个工程。请先看视频&#xff1a;视频中使用Bitwig给声…

利用python进行数据分析第一版和第二版区别_《利用Python进行数据分析·第2版》第1章 准备工作...

1.1 本书的内容本书讲的是利用Python进行数据控制、处理、整理、分析等方面的具体细节和基本要点。我的目标是介绍Python编程和用于数据处理的库和工具环境&#xff0c;掌握这些&#xff0c;可以让你成为一个数据分析专家。虽然本书的标题是“数据分析”&#xff0c;重点确实Py…

极光推送java demo_极光推送- 3 分钟 Demo - 极光文档

3 分钟快速使用 JPush Android Demo本文目的在于&#xff0c;指导新接触极光推送的开发者&#xff0c;在短短几分钟时间内把极光推送跑起来&#xff1a;安装 Demo 客户端到手机在 Portal 上推送通知客户端收到推送并显示在状态栏创建极光推送开发者帐号Portal 上创建应用使用注…

python猴子偷桃_Python实例100个(基于最新Python3.7版本)

Python3 100例原题地址&#xff1a;http://www.runoob.com/python/python-100-examples.htmlgit地址&#xff1a;https://github.com/RichardFu123/Python100Cases转载请标注&#xff1a;https://blog.csdn.net/weixin_41084236/article/details/81564963原例为Python2.7版本重…

java ldap添加用户名密码_java ldap用户密码md5加密

在这里不过多介绍ldap&#xff0c;因为这样的文章特别多&#xff0c;这里就简单直接的记录这一个问题。在springboot中通过引入spring-boot-starter-data-ldap&#xff0c;使用LdapTemplate真的挺方便&#xff0c;现在遇到一个问题&#xff0c;添加用户时&#xff0c;userPassw…

python什么元素为真_如何使用Python基础内置函数

如何使用Python基础内置函数发布时间&#xff1a;2020-08-05 13:46:59

java dumpstack_Java获取执行进程的dump文件及获取Java stack

转发自https://blog.csdn.net/MCC_MCC_MCC/article/details/806231561.Windows/Linux环境下查看Java进程ID方法使用Java自带的工具VisualVM工具实现&#xff0c;在CMD或者是Linux终端下执行“jvisualvm”命令即可以进入VisualVM控制台&#xff0c;双击左侧的进程即可以查看到详…

python语言程序设计赵璐课后答案_Python语言程序设计

Q&#xff1a;为什么越来越多的学校和专业已经或者计划开设Python程序设计相关课程&#xff1f;A&#xff1a;相较于其它大部分的通用型程序设计语言&#xff0c;Python的基础语法相对简单&#xff0c;且在很多热门的领域都有着功能强大而全面的第三方库&#xff0c;使得那些即…

java println 数组_java 数组输出

那就把两个for循环的顺序改动一下&#xff0c;把条件也改一下就好。System.out.println("--------------------------武侠小说列表-----------------------------");System.out.println("序号\t\t""名称\t\t""作者\t\t""简介&quo…

python中find函数运算结果类型_Python 运算符与数据类型

Python 运算符运算符用于执行程序代码运算,会针对一个以上操作数项目来进行运算,在Python中运算符大致可以分为7种类型:算术运算符、比较运算符、赋值运算符、逻辑运算符、位运算等,下面的例子将依次介绍这几种运算符的使用技巧.◆算数运算符◆算术运算(arithmetic operators)符…

python基本概念_python基本概念-关键要素

1. 要素1&#xff1a; 数据类型Python提供了几种内置的数据类型&#xff0c;现在我们只关注其中两种。Python使用int类型表示整数(正整数或负整数)&#xff0c;使用str类型表示字符串(Unicode字符序列)。如果需要将一个数据项从某种类型转换为另一种类型&#xff0c;可以使用语…

java jar 没有主清单属性_Spring Boot jar中没有主清单属性的解决方法

使用Spring Boot微服务搭建框架&#xff0c;在eclipse和Idea下能正常运行&#xff0c;但是在打成jar包部署或者直接使用java -jar命令的时候&#xff0c;提示了xxxxxx.jar中没有主清单属性&#xff1a;D:\hu-git\spring-xxx-xxx\target>java -jar spring-cloud-eureka-0.0.1…

python分行_基于python实现对文件进行切分行

针对配置文件进行切分&#xff0c;重组&#xff0c;每隔30行为一段&#xff0c;进行重新生成功能。代码如下#!/usr/local/python/bin/python# codingutf-8import sysimport reimport osf open(config.conf,r)#判断文件条数def file_num(filename):num_col 0with open(filenam…

java 使用适当的签名_关于数字签名和policy文件设置!

目前做一项目&#xff0c;jbuilder4oraclewindows2000(linux),打算用appletservlet做成分布式b/s结构&#xff0c;其中有两个关键技术难点&#xff1a;1:与word&#xff0c;excel等程序集成。用jintegra解决(多谢路人甲等人的指点)2:applet存取客户机(browser)上的本地文件(主要…

mysql not in优化_实践中如何优化MySQL(收藏)

SQL语句的优化&#xff1a;1、尽量避免使用子查询3、用IN来替换OR4、LIKE前缀%号、双百分号、_下划线查询非索引列或*无法使用到索引&#xff0c;如果查询的是索引列则可以5、读取适当的记录LIMIT M,N&#xff0c;而不要读多余的记录6、避免数据类型不一致7、分组统计可以禁止排…

java 鼠标精灵_纯Java实现跨平台鼠标键盘模拟、找图找色,Java版按键精灵

由原本的Java使用JNI调用dll实现模拟辅助操作&#xff0c;升级到纯Java来实现&#xff0c;最新&#xff1a; https://github.com/xnx3/xnx31.[代码][Java]代码/*** 鼠标、键盘、延迟等基本操作*/public static void simple(){Robot robot new Robot();robot.delay(1000); //延…

o2oa二次开发比开发难吗_6年经验大牛,带你一起打开 Revit 二次开发的新世界大门...

​知乎视频​www.zhihu.com你好&#xff0c;这里是BIMBOX。一线的BIM工作者使用最多的软件是Revit&#xff0c;它功能强大&#xff0c;涵盖建筑、结构、MEP等专业&#xff0c;也正因为涵盖专业太多&#xff0c;它显得有点繁琐和笨拙&#xff0c;不仅约束了创造力&#xff0c;有…