Admin management system Development growth process

所有系统的开发都受限于当时的技术积累、人力资源、设计方案，没有完美的系统，我们只是在自己的技术能力内做到100分。 -- fuyuan

There is no perfect system, only the right system. I am not a big God, this article combined with my previous in a state-owned enterprise CRM management system and later development and maintenance of a system to introduce the pit I stepped on.
?

Business background

First of all, the business background, I then took over the reconstruction of the task, faced with the following situations:

2. Old system deployment environment is old, or apache+php, compared to the old environment, after a number of years of personnel turnover, division, has not been able to say clearly above the operation of the various services, operation and maintenance of the deployment is also more difficult, which day dead, basically can not replicate, a single point of the situation is more serious.
4. The framework used is also relatively old, its own framework, not only includes the background service code, but also contains management system code, development and maintenance is more difficult.
6. The interface style is also relatively old, or more than 10 years ago style, operation is more strange.
8. The leadership authority says refactoring. This is the most critical, leadership authorization, is a project to start the banner.
   ?
   System from development to later optimization are followed by the principles of PDCA.
   ??
   ?
   Well, the summary of the requirements summarized in the following situations:
10. New works a management backend system, preferably with the same structure as the main business, so as to facilitate development. That is, Linux + nginx + php + yaf + memcache + yaconf + MySQL and so on.
12. Migrate legacy system functionality, complete on time, and implement new functionality.
14. Find a popular responsive template.
16. Technology stack upgrade, this is a recent addition to the content.
    
    ??
    ? Overall system Architecture Design

    The first time because of Yaf not very familiar with, so did not notice application.dispatcher.defaultroute.controllerprefer=true this configuration. So that every time an interface, you have to rebuild a file, write a controller.
    Then I thought of one way: for a/b/c_d this route, I wrote a rule, mapped to the A_b_c controller's D action method.
    So for simple additions and deletions to the method, it can be placed in a file.
    ?

    Model design

    Access to the model of the database, because the YAF framework is relatively simple, so I refer to the thinkphp access to the database section myself wrote a simple module.
    Later a brother introduced Laravel's ORM module eloquent, but did not migrate all the business, so there are two sets of content.
    ?

    Account

    This is relatively simple and is the same as a common system.
    

    Role

    Role management is a process of determining what permissions a role has, and he is the concept of a collection, which is the composition of many minimum permission particles. We pass the permission to this role, then the role to account, so as to achieve the permissions of the account, this is the online excerpt, I did not realize in the system so complex. No use to Super Administrator, Administrator, general user role to distinguish, this depends on the system application scenario bar.
    ???

    Definition of permissions

    There are various kinds of posts on the Internet to introduce the management system, I also introduced my system inside the permissions of the section.

Permissions can be divided into three types: page permissions, operation permissions, data permissions
??
Page permissions: That is, the portal, the user can see which page, not see which page.
Operation permissions: Go to the same page, some people see this button clickable, some people can only browse the data on this page.
Data permissions: Controls what data you can see, such as a member's person a can only see or modify the data created by part A, and he cannot see or modify Part B's data.

My side implementation is to limit a list of constants and a permission menu. Can be added and removed to change, I consider this change is limited, so only in the code to write a fixed content, add a menu to change back to the code on the line.

// 常量定义define(‘P_USER_MANAGE‘, 1); // 后台用户管理define(‘P_USER‘, 2); // 用户管理列表define(‘P_GROUP‘, 3); // 组管理列表... ...// 权限树P_USER_MANAGE => [            ‘title‘ => ‘后台管理‘,            ‘link‘ => ‘‘,            ‘class‘ => ‘fa fa-user‘,            ‘child‘ => [                P_USER => [                    ‘title‘ => ‘用户列表‘,                    ‘link‘ => ‘/user/list‘,                    ‘class‘ => ‘‘,                    ‘child‘ => array()                ],                P_GROUP => [                    ‘title‘ => ‘组列表‘,                    ‘link‘ => ‘/group/list‘,                    ‘class‘ => ‘‘,                    ‘child‘ => array()                ]             ]]

So every time the user enters the page and then according to a certain algorithm to obtain the user should have permissions, the relevant code can refer to:
Https://github.com/netbird/permission

This is a previously implemented class, which is to arrange the permissions from low to High, save every 4 bits into 1 hexadecimal characters, and then merge.
For example: The user right is ", the permission 12 Plus, that is 1000 0000 0000, Save is, 800."
The following methods are mainly implemented:

Permission::setuserPermission($permission_index, $user_perm)    // 这个是设置权限，比如用户的现在权限是‘‘, 如果把12这个权限号码加上则执行：    // $user_permission = Permission::setuserPermission(12, $user_permission)Permission::deleteUserPermission($permission_index, $user_perm)    // 删除权限Permission::isAllowUserPermission($permission_index, $user_perm)     // 判断用户是否有权限

As for the button permission, this can also refer to this, define a button set constant, judge has that permission, the display button.
Data access, this specific scenario is specifically analyzed, but at least the location of each interface entry needs to determine the access rights.

Responsive templates

Technology pay attention to the thin hair, only the usual accumulation of more practice, the key to the use of the time to play. Because a similar system was previously used, one of the following template frameworks was utilized. and then the transformation.

I don't want to write a table page every time, so using jquery table, a third-party plugin, takes the form of asynchronously loading data. A simple two-time development is done on this plugin. Most of the later features are used by this plugin.

Bootstrap is a good thing, used less before, this large-scale use, daily is to tune the page, tune the front end. In the notebook look good, to the display on the aliasing, very distressed. But the page I was dealing with was generally fine.

Functional improvements

Before each new feature has to create a new table, and then write the editing page, it is annoying ah. Can be a common mechanism, simple reference to generate a simple editing page. So I made a package improvement on the editing section.
First, the database: the construction of a common table: mainly including Main_key, Second_key, Config_value, and so on, Config_value is referenced in the Key-value format database of the Value field use, of course The text type has a maximum of 65,535 bytes, which, if too large, can cause a bug.


is to use the relational database as a key-value, some additional configuration information, after the JSON into a string and then saved.

Customizing common configurations

Is there a way to do this without writing code that can be configured just by the backend point point? So first out of the design, after processing.
The general project configuration is divided into a single page and a list of configurations. You can refer to the following requirements:

1. Go to the Settings page, create 1 item, type into a single page and list.
2. Select whether the edit page contains a date, the person who publishes the permission, the person who can modify the field, the file name to publish, and so on.
3. Single page edit page or list support custom field editing (fields can be added or reduced).
   So the project was created. Although the experience is a little bit, but basically meet the needs, save development time is no problem.
   Templates

   About the template is presented on the list page, on the custom list page, each time you create a single page, you need to rebuild the data is very troublesome. So improved, in the configuration page has a template Settings page, template page can add delete definition field. This allows you to inherit the template when you create a new page.
   

   INI configuration file

   With regard to the configuration information generated, we still use the yaconf PHP extension, so most of the configuration is pushed to the line in the form of an INI file. Yaconf users can refer to the online instructions. The following blog also summarizes some of the pits used by yaconf.
   Some experience sharing using yaconf

Logs and backups

The first record of MySQL, each record, and later found not very good, when needed, nothing can be found. Still should look at this diary from the product angle.
This module has been in the development of improvements. The general direction is to give the user a friendly query interface, to query the relevant content.
Because of some hidden trouble, later I joined the configuration information backup function, each time the configuration update to save the existing online file configuration, and recorded to the database. Then do a backstage, can view, compare the configuration and go online.
This place cites a public class library: Https://github.com/chrisboulton/php-diff

Vue

An accidental opportunity to come into contact with Vue fundamentals, on some of the system's pages decided to try the following, without deep use, just introduced vue.js. have done some page processing, feel really convenient a lot. At that time just looked at the basic knowledge of vue, there are many problems do not have time to think, so no in-depth application.

Vue.js Components and routing

http://element-cn.eleme.io/
Https://ant.design/index-cn

Ant Design

At the beginning of the year, want to upgrade the system. Add several modules and friends recommend Ant design. Feel very good, use various into the pit.

Here is a summary of some of the questions.
Time processing for ant design form forms
Encounter an ant design cross-domain issue

New development model, I like it very much.


Technology stack: React,ant-design,dva,mock
About DVA, there is a diagram, I think we should learn the following:

Finally, the technology will always serve the business. This is the truth since history. Use more, think more.

Admin management system Development growth process