Thinking about the front end project of background management system

LHH young man 2020-11-08 16:59:08
thinking end project background management

Thinking about the front-end project of background management system

The development of background management system is a project that most front-end developers have been exposed to , How to better build the project 、 Component development 、 Data structure design and so on , These are all issues that need to be considered . The following is my experience of some projects and other big guy's project code and technology sharing , Made for the background management system in the front-end project thinking

1. Understand the requirements , Master the needs

This requirement, whether for front-end developers or other end developers , It's the premise to develop the project smoothly . Before developing a project , Need for PM  You know what you need , Have a good command of prototype design . Understand the meaning of each operation logic , And diffusion thinking about how to design components and data structures . However, it is easy to miss some function points just by reading the requirement documents and prototypes , It's better to redesign the project Mind mapping  , Design from the perspective of your own development , Starting from the root node of the whole project , Subdivide each module , Each module is designed with corresponding requirements , Make sure that every function is not missed . Although it took more time to design mind maps , But I think it's worth it , This will not only increase the understanding of the overall project , It can also find the difficulties and doubts of the project in time .

2. Determine the technology selection

The mainstream technology selection of background management system is Vue+ElemetUI, But I think in terms of component design Ant Design Vue  Of UI  Better frame design , More is to adopt the design pattern of data-driven components , It is more convenient to decouple logic functions in project development . however UI  The choice of the framework still depends on the proficiency of the developer team and whether there is a corresponding UI  The framework can better solve the difficulties existing in the project for comprehensive comparison .
Global on demand introduction of element-ui  Components :

import Vue from "vue";
import { Input } from "element-ui";

Components use :


3. Design project structure

adopt Vue  The front-end project of scaffold tool construction is in src  The folder can be divided into the following parts :

  1. The routing layer router 
  2. Static file layer assets 
  3. Page structure layer views 
  4. Component structure layer components 
  5. Global state management store 
  6. Functional logic processing layer util 
  7. Constant management constants 

stay Vue  The project can also introduce more configuration, such as mixed layer mixins 、 Filter layer filtters  etc. .
In project development , A logical design that distinguishes business functions from non business functions , For some non business function functions that can be decoupled , This function is not defined directly in the business logic of the development page , It needs to be pulled out , It can be called by multiple business function functions .
Component structure layer components In general, only page components or functional components related to non business functions are developed , For multiple page structures to call , If a page needs to be developed into several components , And this sub component belongs to business function , It is suggested that you should go directly to the page structure level views In the definition of , It is also convenient to develop and maintain the same page .
src  The structure under the folder is as follows :


4. Data request methods in OR actions in

In general, the way of data request in a project is based on methods  Call request method in hook or other lifecycle hook , There are also some projects that are sent through a disptach  Asynchronous request method in actions  Call the request function in . Using the latter is to facilitate unified management of the request interface , And the data returned by the request is managed in a unified way .
Combining the above two methods , You can optimize the way requests are made in a project , If the data returned after the request interface is sent out, it needs to be shared and used in multiple pages or different components , It is recommended to use the function that needs to send a request dispath  Trigger , stay actions  Send request in , The returned data is saved in global state management state  in .
methods  How to send a request in :

getGraphicCode () {
let vm = this;
type: '2'
}).then(res => {
if (res.code === '000') {
vm.graphicCode = 'data:image/png;base64,' +;
vm.imgId =;
} else {

actions  How to send a request in :

findAllRoles({ commit }) {
return new Promise((resolve, reject) => {
api.systemAccount.findAllRoles().then(response => {
if (response.code === "000" && response.success) {
} else {
reject(new Error(response.code, response.msg))

5. Login and permission management

token  The verification is currently most of the front and rear ends separated Web  Project do login verification more common method . The front end sends the account and password or account and verification code to the back end , Back end validation will return a unique token  As the user's login credentials , In every subsequent request , You need this in your request header token  As a back-end login verification . token  There is an expiration mechanism , You can do logical judgment processing in request interception , If the current time is close to the expiration time , By updating token  The interface of the token , Add new... To the request later token . In this cycle , If the user has no operation for a long time , The user can be considered offline , On the first request after the user , because token  It's overdue , There is an error accessing the back-end interface , According to the error status code returned by the back end as a judgment , Direct the system to the login page .
By carrying token  The request method of the request header , The back end can determine which user , The front end can also obtain the permission list of the user through the access permission interface , Make a routing mapping table according to the permission list , If the data structure returned by the back-end is different from the data structure set by the front-end route , At this time, we need to write the service function of the mapping route . If the user has this routing permission , In the global routing monitoring router.beforeEach Conduct router  Medium addRoutes  Method to add the routing configuration with permission to the route , The sidebar can also be based on meta  The key words in the field are rendered accordingly . If the granularity of permission is as small as a button , Then the permission parameters can be mapped according to the permission list returned by the back end , adopt v-if  Judge whether the function component is rendered or not .
In routing management, through router.beforeEach  Hook to determine whether the current routing permission is empty , If yes, the access route interface can be executed :

store.dispatch("getUserInfoAndAuthorityInfo").then(res => {
// According to the route permission format returned by the back end, it is converted to the front-end routing configuration format
const rolesRoute = setAsyncRouterMap(res.menuList, asyncRouterMap, mainChildrenAsyncRoutes)
store.commit(Vue.VUEX_TYPES.ROLESROUTE, rolesRoute);
// Add route
next({ })
}).catch(() => {
Message.error(" Validation failed ")

6. Constant enumeration value management

It is necessary to manage the key constant enumeration values in the project . For example, in the project, the backend uses a certain status code 1  Represents that the account is enabled , If you use it more than once in a project ===1  To determine whether the account is enabled , When the status code needs to be changed , It's a very troublesome thing for the front end , So you can do this by putting 1  Assign to a constant , Reference this constant in the project code , If you need to change the status code , Then directly change the status code assigned to the constant enumeration value , The configuration of the constant can also remind developers that this parameter cannot be easily modified , It is convenient for project maintenance and unified management . General constant enumeration value management is written in constants  Layer , Variable names for constants are written in uppercase .
The state enumeration is worth configuring as follows :

* Account status cross reference table
* "0" not enabled NOTUSED_CODE
* "1" Enabled ENABLE_CODE
* "2" deactivated DISABLE_CODE
const NOTUSED_CODE = "0";
const ENABLE_CODE = "1";
const DISABLE_CODE = "2";
const ACCOUNT_TYPE = {
[NOTUSED_CODE]: " not enabled ",
[ENABLE_CODE]: " Enabled ",
[DISABLE_CODE]: " deactivated "
export default Object.freeze({

7. Component design

The front-end project can be divided into two parts , They are page component and function component respectively . For page components , Often used to show the overall content of the page , Responsible for the normal operation of business logic , Strong coupling with business . Functional components are the first mock exam to display and process a single or a module , Functional components don't care about the business logic of the page , Acting as a function , As long as there is input, there is corresponding output , It can be called in multiple page components or function components . Sum up , When designing page components , We should not only consider the function that the component can normally complete the business , Also consider whether it can become a functional component out of the business , For more content page components , Multiple sub page components can be created under the same level directory . When designing functional components , Consider the layout of the components 、 Logic 、 View , The difficulty in designing functional components is that they need to take into account the ever-changing needs , Extensibility , Flexibility is a big design challenge .
The format of page component directory is as follows :

8. Necessary development documentation or comments

The development document of the project can be written as md The file format is stored in the root directory of the project , A good development document can introduce the background of the project , Explain the structure of the project and the development steps , Better for other developers to participate in or take over projects . For the logical functions used in the project and coupled with business functions , More complicated , Write function introduction and use method , Do a good job in judging the boundary conditions , Demonstrate the input data and the corresponding output , You can create a new one in the project docs  The folder stores the documents used in the development process . For business logic functions of non complex functions or non business logic functions , You can write comments directly before defining functions , Explain the function function , And the corresponding input and input parameter types .

Each development process can be regarded as a process of learning and summing up experience , Compared to the previous code , We can think about whether the code structure can be better designed , Whether logical functions are clear and consider boundary conditions , Whether the performance can be more optimized .
本文为[LHH young man]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple