关于后台管理系统前端项目的思考开发后台管理系统是大多数前端开发者都接触过的一个项目。如何更好的进行项目构建、组件开发、数据结构设计等，这些都是需要考虑的问题。下面是我结合自己一些项目的经验和其他大佬的项目代码和技术分享，在后台管理系统中对前端项目的反思。另一端的开发者是项目顺利开发的先决条件。在开发一个项目之前，需要对PM的需求有清晰的认识，对原型设计有充分的把握。理解每一个操作逻辑的含义，展开关于如何设计组件和数据结构的思考。但是单看需求文档和原型，更容易遗漏一些功能点。最好为项目重新设计一个思维导图，从开发本身的角度来设计，从项目整体的根节点入手。划分每个模块，并在每个模块下设计相应的需求，确保每个功能都不会遗漏。虽然设计思维导图花了更多的时间，但我觉得是值得的。这样不仅可以增加对项目整体的了解，也可以更好的及时发现项目的难点和疑点。2.确定技术选型后台管理系统的主流技术选型为Vue+ElemetUI，但个人认为AntDesignVue的UI框架在组件设计方面设计的更好，更多的采用了数据驱动的组件设计模式。在项目开发中解耦逻辑功能更方便。但是UI框架的选择还是要结合开发团队自身对某一方面的熟练程度以及是否有相应的UI框架能够更好的解决项目中的难点进行综合比较。按需全局导入element-ui组件：importVuefrom"vue"；从“element-ui”导入{输入}；Vue.use(输入);组件使用：3.设计项目结构Vue脚手架工具搭建的前端项目在src文件夹下可以分为以下几个部分：路由层router静态文件层assets页面结构层views组件结构层components全局状态管理层store功能逻辑处理层utilConstant管理层常量在Vue项目中，可以引入mixins、filter层等更多的配置。在项目开发中，需要区分业务功能和非业务功能的逻辑设计。对于一些可以解耦的非业务功能函数，一般在开发页面的业务逻辑中不直接定义这个函数，而是需要分离出来，才能被多个业务功能函数调用。组件结构层组件一般只开发页面组件或与非业务功能相关的功能组件，可被多个页面结构调用。如果一个页面需要拆分成多个组件进行开发，而这个子组件属于业务功能，建议直接在页面结构层的视图中定义同一个页面，开发维护更方便。src文件夹的结构如下：├─assets├─components├─constants├─mixins├─request├─router├─store├─utils└─views4.数据中OR操作中通用项中的数据请求方法requestmethods都是基于在methods钩子或者其他生命周期钩子中调用request方法，也有一些项目是通过发送一个disptach异步请求方法在action中调用request函数。后者用于方便统一管理请求接口和统一管理请求返回的数据。结合以上两种方式，可以优化项目中的请求方式。如果请求接口发送后返回的数据需要在多个页面或者多个不同的组件中共享使用，建议在需要发送请求的函数中触发dispath。在actions中发送请求，返回的数据存储在全局状态管理state中。methods中发送请求的方法：getGraphicCode(){letvm=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}){returnnewPromise((resolve,reject)=>{api.systemAccount.findAllRoles().then(response=>{if(response.code==="000"&&response.success){commit(MUTATIONS_TYPE.AllROLES,response.data)resolve(response);}else{reject(newError(response.code,response.msg))}})})},5.登录及权限管理Token验证是目前大多数前后端分离的Web项目中常用的登录验证方式。前端将账号和密码或者账号和验证码发送给后端后，后端验证会返回一个唯一的token作为用户的登录凭证，后续的每个请求头中都必须包含这个token请求令牌用作后端的登录验证。token有过期机制，可以在请求拦截过程中进行逻辑判断。如果当前时间接近过期时间，则通过更新token接口请求更新token，并在后续请求中带上新的token。在这个循环中，如果用户长时间没有操作，就可以认为用户离线了。用户第一次请求时，由于token已经过期，访问后端接口会报错。根据后台Code返回的错误状态作为判断，将系统定向到登录页面。通过带有token请求头的请求方法，后端可以判断是哪个用户，前端也可以通过权限接口获取用户的权限列表，根据权限列表制作路由映射表。如果后端返回的数据结构与前端路由设置的数据结构不同。这个时候也需要写这个映射路由的业务功能函数。如果用户有这个路由权限，全局路由监控中的router.beforeEach会执行router中的addRoutes方法为路由添加有权限的路由配置，侧边栏也可以根据meta字段中的关键字在路由列表中进行相应的判断。如果权限粒度小到一个按钮，可以根据后台返回的权限列表映射的权限参数，使用v-if判断功能组件是否渲染。在路由管理中，使用router.beforeEachhook判断当前路由权限是否为空。如果是，则可以执行获取权限路由的接口：store.dispatch("getUserInfoAndAuthorityInfo").then(res=>{//根据后端返回的路由权限格式转换为前端路由配置格式.constrolesRoute=setAsyncRouterMap(res.menuList,asyncRouterMap,mainChildrenAsyncRoutes)store.commit(Vue.VUEX_TYPES.ROLESROUTE,rolesRoute);//添加路由router.addRoutes(rolesRoute);next({...to})}).catch(()=>{Message.error("Authenticationfailed")next('/login')})6.常量枚举值管理项目中关键常量枚举按值管理是非常有必要的。比如在项目中，后台使用某个状态码1表示该账号已启用。如果在项目中多次使用===1判断账号是否启用。当你需要改变这个状态码的时候，对于前端来说是一件很麻烦的事情，所以你可以给一个常量赋值1，在项目代码中引用这个常量。如果需要改变状态码，可以直接改变赋给常量枚举值的状态码。常量的配置也可以提醒开发者这个参数不能轻易修改，方便项目维护和统一管理。一般常量枚举值的管理都写在常量层，常量的变量名都是用大写字母写的。状态枚举值得配置如下：/***账户状态对照表*"0"NOTUSED_CODE未启用*"1"ENABLE_CODE启用*"2"DISABLE_CODE禁用*/constNOTUSED_CODE="0";constENABLE_CODE="1";constDISABLE_CODE="2";constACCOUNT_TYPE={[NOTUSED_CODE]:"Disabled",[ENABLE_CODE]:"Enabled",[DISABLE_CODE]:"Disabled"};exportdefaultObject.freeze({NOTUSED_CODE,ENABLE_CODE,DISABLE_CODE，帐户类型}）;7.组件设计在前端项目中，展示组件可以分为页面组件和功能组件两部分。对于页面组件，常用于展示页面的整体内容，承担业务逻辑的正常运行，与业务有很强的耦合性。功能组件用于显示和处理单个或某个模块的功能。功能组件不关心页面的业务逻辑，充当一个功能。只要有输入，就会有相应的输出，可以在多个页面上使用。组件或功能组件被调用。综上所述，在设计页面组件时，不仅要让组件能够完成正常的业务功能，还要考虑能否脱离业务成为功能组件。接下来，创建多个子页面组件一起构建。在设计功能组件时，需要考虑组件的布局、逻辑和视图。设计功能组件的难点在于需要考虑到不断变化的需求。可扩展性和灵活性是主要的设计挑战。页面组件目录格式如下：8.必要的开发文档或注释项目的开发文档可以写成md文件，存放在项目的根目录下。一份好的开发文档可以介绍项目的背景，说明结构和开发步骤，更有利于其他开发者参与或接手项目。对于项目中使用的逻辑功能耦合业务功能，比较复杂，写功能介绍和使用方法，判断好边界条件，演示输入数据和对应的输出结果，以及在项目中新建一个docs文件夹，用于存放开发时使用的文档。对于业务逻辑函数或者不是复杂函数的非业务逻辑函数，可以在定义函数前直接写注释，说明函数的作用，以及对应的输入和输入参数的类型。每一个开发过程都可以看作是一个学习和总结经验的过程。与之前的代码相比，我们可以思考代码结构是否可以设计得更完善，逻辑功能是否清晰并考虑边界条件，性能是否可以优化。
