网站内容管理系统后台 设计(开发后台管理系统中前端项目的思考(一)：组件使用)

　　网站内容管理系统后台 设计(开发后台管理系统中前端项目的思考(一)：组件使用)

　　后端管理系统的开发是大多数前端开发者都接触过的项目。如何更好的进行项目建设、组件开发、数据结构设计等，这些都是需要考虑的问题。下面结合一些项目经验和其他大佬的项目代码和技术分享，对后端管理系统中的前端项目提出自己的想法

　　1. 了解需求，熟悉需求

　　这个要求是项目顺利开发的前提，无论是前端开发者还是其他端开发者。在开发项目之前，需要了解PM的需求，充分掌握原型设计。理解每个操作逻辑的含义，并扩散思考如何设计组件和数据结构。但是，单独阅读需求文档和原型更容易遗漏某些功能点。最好重新设计一个项目的思维导图，从开发的角度来设计，从项目的根节点作为一个整体。划分每个模块，在每个模块下设计相应的需求，确保每个功能都不会遗漏。虽然设计思维导图花费了更多的时间，但我认为这是值得的。

　　

　　2. 确定技术选择

　　后台管理系统的主流技术选择是Vue+ElemetUI，但我个人觉得Ant Design Vue的UI框架在组件设计上更好一些，更多的是采用数据驱动组件的设计模式，可以更方便项目开发。解耦逻辑功能。但是UI框架的选择一定要结合开发者团队自身的熟练程度和是否有相应的UI框架可以更好的解决项目中的难点进行综合比较。

　　按需全局引入 element-ui 组件：

　　import Vue from "vue";

···

import { Input } from "element-ui";

Vue.use(Input);

复制代码

　　组件使用：

　　

复制代码

　　3. 设计项目结构

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

　　路由层路由器静态文件层资产页面结构层视图组件结构层组件全局状态管理层存储功能逻辑处理层util常量管理层常量

　　在Vue项目中，还可以引入更多的配置，比如混合层mixins、过滤层filters等。

　　在项目开发中，需要区分业务功能和非业务功能的逻辑设计。对于一些可以解耦的非业务功能功能，这个功能一般不会直接在开发页面的业务逻辑中定义，而是需要分离，可以被多个业务功能功能调用。

　　组件结构层组件一般只开发与非业务功能相关的页面组件或功能组件，供多个页面结构调用。如果一个页面需要分成几个组件进行开发，而这个子组件是业务功能，建议直接在页面结构层视图中定义，也方便开发和维护同一个页面。

　　src文件夹的结构如下：

　　├─assets

├─components

├─constants

├─mixins

├─request

├─router

├─store

├─utils

└─views

复制代码

　　4. OR 动作中的数据请求方法

　　在一般项目中，数据请求方法是基于方法钩子或者其他生命周期钩子来调用请求方法的。在一些项目中，请求函数是通过发送一个disptach异步请求方法在action中调用的。使用后面的语句是为了方便统一管理请求接口，统一管理请求返回的数据。

　　结合以上两种方式可以优化项目中的请求方式。如果请求接口后返回的数据需要在多个页面或多个不同的组件中共享使用，建议在需要发送请求的函数中触发dispath。在actions中发送请求，返回的数据存放在全局状态管理状态。

　　在方法中发送请求方法：

　　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);

}

})

}

复制代码

　　在操作中发送请求方法：

　　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请求头的请求方法，后端可以判断是哪个用户，前端也可以通过权限获取接口获取用户的权限列表，并根据权限列表。如果后端返回的数据结构与前端路由设置的数据结构不同。这时候也需要编写这个映射路由的业务功能函数。如果用户有这个路由权限，可以使用全局路由监控中router.beforeEach中路由器的addRoutes方法，将授权的路由配置添加到路由中。侧边栏也可以基于路由列表中元字段中的关键字。据此作出判决。

　　在路由管理中，使用 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 分配给常量。如果需要改变状态码，可以直接改变分配给常量枚举值的状态码。常量配置还可以提醒开发者这个参数不能随便修改，方便项目维护和统一管理。

　　状态枚举值配置如下：

　　7. 组件设计

　　在前端项目中，展示组件可以分为两部分，分别是页面组件和功能组件。对于页面组件来说，它们常用于展示页面的整体内容，负责业务逻辑的正常运行，与业务有很强的耦合性。功能组件用于显示和处理单个或某个模块的功能。功能组件不关心页面的业务逻辑。它充当一个函数。只要有输入，就有相应的输出，可以多页显示。组件或功能组件被调用。综上所述，在设计页面组件时，不仅要组件能够正常完成业务功能，还要看能否从业务中分离出来，成为一个功能组件。对于内容较多的页面组件，可以列在同级目录中。创建多个子页面组件以一起构建。在设计功能组件时，需要考虑组件的布局、逻辑和视图。设计功能组件的难点在于，它们必须考虑到满足不断更新的需求变化的需要。可扩展性和灵活性是主要的设计挑战。设计功能组件的难点在于，它们必须考虑到满足不断更新的需求变化的需要。可扩展性和灵活性是主要的设计挑战。设计功能组件的难点在于，它们必须考虑到满足不断更新的需求变化的需要。可扩展性和灵活性是主要的设计挑战。

　　页面组件目录格式如下：

　　

　　8. 必要的开发文档或评论

　　项目的开发文档可以写成md文件格式，存放在项目的根目录下。一份好的开发文档可以介绍项目的背景，解释项目的结构和开发步骤，更有利于其他开发者参与或接手项目。. 对于项目中用到的逻辑函数加上业务函数，比较复杂的，写了函数的介绍和使用，判断边界条件，演示输入数据和相应的输出结果，docs文件夹可以在项目中创建用于存储开发过程中使用的文档。对于不复杂的业务逻辑函数或者非业务逻辑函数，可以在定义函数前直接写注释，

　　每一个发展过程都可以看作是一个学习和总结经验的过程。与之前的代码相比，我们可以考虑是否可以将代码结构设计得更完美，逻辑功能是否清晰并考虑了边界条件，以及性能是否可以更加优化。