一个管理系统的成长历程

全部系统的开发都受限于当时的技术积累、人力资源、设计方案，没有完美的系统，
咱们只是在本身的技术能力内作到100分。           -- fuyuan

没有完美的系统，只有适合的系统。我不是大神，本文结合我之前在一个企业的CRM管理系统和后来开发维护的一个系统来讲介绍下我踩过的坑。
  

业务背景

先说下业务背景吧，我当时接手重构改造任务的时候，面临以下状况：

1. 老系统部署环境比较陈旧，仍是apache+php, 比较老的环境了，通过若干年人员更替，部门分拆，已经不能说清楚上面运行的各类服务了，运维部署起来也比较困难，哪天死了，基本上没法复制，单点状况比较严重。
2. 所用框架也比较老旧，自有框架，不只包含后台服务代码，还包含管理系统代码，开发维护也比较困难。
3. 界面风格也比较旧，仍是十几年前的风格，操做起来比较怪异。
4. 领导受权说重构吧。这个是最关键的，领导受权，是一个项目启动的旗帜。
    
   系统从开发到后来的优化都是遵循的原则PDCA。 
     
    

好，汇总各方面需求总结的状况以下：

1. 新做一个管理后台系统，最好与主业务同样的结构，这样便于开发。即linux + nginx + php + yaf + memcache + yaconf + mysql等等。
2. 迁移旧系统功能，按时完成，实现新的须要的功能。
3. 找个流行的响应式模版。
4. 技术栈升级，这个是最近才加入的内容。
   

系统总体架构设计

开始的时候由于对yaf不太熟，因此没有注意到application.dispatcher.defaultRoute.controllerPrefer=true 这个配置。以致于 每次一个接口，都得重建一个文件，写一个controller。
后来我想了一方法：对于a/b/c_d 这种路由，本身写了个规则，映射到A_B_C controller的d action方法中。
这样 对于简单的增删改查方法，就能够放在一个文件里了。

model设计

访问数据库的model，由于yaf框架比较简单，因此我参照了thinkphp的访问数据库部分本身写了一个简单的模块。
后来一个兄弟引入了laravel的ORM模块Eloquent，不过没有迁移全部的业务，因此存在了两套内容。

帐号

这个比较简单，跟经常使用的系统相同。

角色

角色管理是肯定角色具有哪些权限的一个过程，他是一个集合的概念，是众多最小权限颗粒的组成。咱们经过把权限给这个角色，再把角色给帐号，从而实现帐号的权限，这是网上摘抄的，我在系统中并无实现这么复杂。没用用到 超级管理员，管理员，普通用户角色区分，这个要看系统应用场景吧。

权限的定义

网上有各类个样的帖子介绍管理系统的，我也介绍下个人这个系统里面权限的部分。

权限能够分为三种：页面权限，操做权限，数据权限  
页面权限：即入口，用户能够看到哪一个页面，看不到哪一个页面。
操做权限：进入一样的页面，有些人看到这个按钮可点击，有些人只能浏览这个页面的数据。
数据权限：则是控制你能够看到哪些数据，好比会员的人A只能看到或者修改A部建立的数据，他看不到或者不能修改B部的数据。

我这边实现是限定一个一个常量列表和一个权限菜单。能够是增删改查的，我这边考虑到这个变化有限，因此只在代码中写成了固定的内容，增长一项菜单就改回代码就好了。

// 常量定义
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()
                ]
             ]
]

这样 每次用户进入页面 再根据必定的算法得到用户 应该有的权限，相关代码能够参考：
https://github.com/netbird/permission

这个是之前实现的一个类，是将权限由低到高排列，保存的时候每4位转变成1个十六进制的字符，而后合并。
例如： 用户权限是 '', 把权限 12加上，就是1000 0000 0000, 保存就是，800。
主要实现了如下方法：

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)
     // 判断用户是否有权限

至于按钮权限，这个也能够参照这个进行，定义一个按钮的设置常量，判断有那个权限，则展现按钮。
数据访问，这个具体场景 具体分析了，不过每一个接口入口的地方 至少须要断定访问权限。
 

响应式模版

技术讲究厚积薄发，只有平时多积累多实践，关键的时候才能发挥用途。由于之前作了相似的系统，因此利用了如下一个模版框架。而后进行改造。
 
我不肯意每次都写表格页面，因此使用jquery table这个第三方的插件，采用异步加载数据的方式。在这个插件上面进行了简单的二次开发。后来的大多数功能都是采用的这个插件。
 
bootstrap是个好东西，之前用的少，此次大规模使用，天天就是调页面，调前端。在笔记本上看着不错，到了显示器上就走样，很苦恼。不过我经手的页面广泛没啥问题。
 

功能改进

以前每次新建功能都得新建个表，而后写编辑页面，好烦啊。能不能搞个公用的机制，简单的引用就生成个简单的编辑页面。因而，我对编辑部分进行了封装改进。
先说下数据库：建造个公共表：主要包含 main_key, second_key, config_value,等内容，config_value是参照key-value格式数据库的value字段使用，固然 text类型最高65535个字节把，若是太大，会形成bug。

 
就是将关系型数据库做为key-value用了，一些加单的配置信息，通过json转成字符串而后保存下来。
 

自定义通用配置

有没有一种方案，可以不编写代码，仅靠后台点点就能知足配置？ 因而先出设计方案，后加工。
通常的项目配置分红单页和列表的配置。可参照以下需求：

1. 进入设置页面，建立1个item，类型分红单页和列表。
2. 选择 编辑页面是否包含日期，发布权限的人员，可修改字段的人员，发布的文件名称等等吧。
3. 单页面或者列表的单页面编辑页支持自定义字段编辑(可添加或减小字段)。

因而这个项目就产生了。虽然体验差了一点，可是基本知足需求，节约开发时间仍是没有问题的。

模版

关于模版是在列表页面提出的，在自定义列表页，每次建立单页面的时候都须要重建数据很麻烦。因而改进了下，在配置页面有个模版设置页面，模版页面能够添加删除定义字段。这样在建立新页面的时候就能够继承模版了。
 

ini配置文件

关于生成的配置信息，咱们仍是采用了yaconf的php扩展插件，因此大部分配置以ini文件的形式推到线上。yaconf的用户能够参考线上说明。下面博客也总结了一些yaconf使用的坑。
一些使用Yaconf的经验分享

日志及备份

一开始记录mysql，每条都记录，后来发现不太好，须要的时候什么也查不出来。仍是应该从产品的角度看这个日志吧。
这个模块一直在开发改进中。大体的方向是给使用者一个友好的查询界面，去查询相关的内容。
由于一些隐患，后来我加入了配置信息备份功能，每次配置更新的时候保存已有的线上这个文件配置，而且记录到数据库。而后作个后台，能够查看，比对配置而且上线。
这个地方引用了一个公共类库：https://github.com/chrisboulton/php-diff
 

vue

一次偶然的机会接触到vue基础知识，在系统的某些页面决定尝试如下，没有深刻使用，只是引入了 vue.js。进行了一些页面处理，感受确实方便了不少。当时只是看了vue的一些基础知识，有不少问题还停留在表面层，因此没有深刻应用。

相似下面的代码，很舒服的感受。

new Vue({
        el: '#app',
        data: {
            source_url:"",
            count_result_text: "",
            uid: ""
        },
        methods: {
            count_result: function () {
                var that = this;

                if (this.source_url == '') {
                    bootbox.alert('url不能为空');
                    return;
                }
                var param = {
                    "source_url": this.source_url,
                    "uid": this.uid
                };

                $.post('/api/counts', param, function(return_data){
                    that.count_result_text = return_data.s;
                }, 'json');
            }
        }
    });

Vue.js 组件与路由

ant design

年初，想对系统升级改造。增长几个模块，朋友推荐ant design。感受挺好，使用各类入坑。


下面是一些问题的总结, 我在另外的两篇文章中提到的：
ant design form表单的时间处理
碰到一个ant design跨域问题

全新的开发模式，我很喜欢。

 
技术栈：react，ant-design，dva，Mock
关于dva，有个图，我想你们应该学习下：

本次学会使用了npm，webpack, mock.js, node.js等相关内容。最后学以至用，技术永远为业务服务。这个是历史以来的道理。多运用，多思考。