如何开发中后台项目

图片没法正常显示，请跳转到 原文 查看
工做中的你，是否是手上作着后台系统项目，应对着作不完的需求，以为作后台系统是个没有技术含量的活，技术无法提高，这么想或许你就错了，若是能作以到如下几点，不只能够提升你的开发效率，还能让你在组件抽象能力，项目架构能力等方面有很大提升，更能帮助你站在一个全局的高度思考问题，废话很少说，咱们看看到底应该怎样作中后台项目。

一. 通用组件库

首先，若是团队的中后台项目不止一个，那么多个项目中必定有不少相同或类似的交互和功能，因而乎，搭建一个属于本身团队的组件库就显得颇有必要了。

以一个VUE项目为例，咱们开发一个项目，其实就是在开发一个个的组件。而这些组件能够以下这样分类。

首先，非通用的组件，在各自的项目中去完成。

而通用组件，能够根据是否包含业务，分为强业务的组件和无业务组件。

其中非业务组件，已经有不少优秀的开源库，像element，iView，咱们能够拿来直接使用。有时候开源的组件没法知足咱们的须要，就须要本身造轮子。

其中强业务组件又能够按照是否将与服务端的数据交互部分封装在组件内部，分为纯前端组件和通用服务组件。好比获取省市区，就能够封装成通用服务组件，不须要每一个项目再去重复开发，先后端同窗都能节省时间。

哪些是须要抽象出组件的呢？这须要在工做中去发现和挖掘，当评审完一个需求时，要思考是否有以前作过的相同的形态或交互，是否有能够通用的部分可以抽像，这样思考久了，就能合理快速的对一个复杂项目进行模块划分。在中后台系统中，可以抽离出来通用的组件有不少，下面以一个最多见的列表页来分析下。

        能够先思考几分钟再继续阅读下面内容，若是你来开发，会抽象出哪些组件。

下面把页面分为3部分（如下开源库以element ui为例）

第一部分：查询表单部分

开源库提供的组件：Input 输入框，Button 按钮 ， Select 选择器， DateTimePicker日期时间选择器。

须要开发的组件

1. 区间查询，咱们能够抽象出一个无业务通用组件 Range

2. 城市选择，能够将和服务端的数据交互封装到组件内，抽象出一个通用服务组件 CitySelect，供全部项目直接使用。

3. 打印组件 Print

4. 将整个查询表单部分抽象成组件 Search，组件支持更多查询交互，重置交互，具体查询条件能够经过slot传入。

第二部分: 表格

开源库提供的组件：Table 表格

须要开发的组件

1. 脱敏操做，点击查看显示明文，能够抽象出通用服务组件 Encrypt。

2. 查看更多的交互能够抽象出组件 MoreOption

第三部分：分页

1. 分页组件 Pagnination, 开源组件库提供。

除了这些，还能够把上面三部分当作一个总体，来抽象出一个页面级别的组件，这个组件由3个组件组合而成： Search 查询，Table 表格，分页 Pagination组成，能够经过配置来控制是否须要查询和分页，来适应更多的业务场景。

列表页组件分析（绿色框为要抽象的组件）

有了这些组件，开发效率必定会大幅提高！

有了组件还不够，咱们还须要添加通用的工具和方法到组件库中，好比埋点上报，获取url中参数等方法，这些都可以复用，不须要每一个项目中重复实现。

要开发一个组件库，还有不少事要考虑，如何设计目录结构，怎么作好工程化，设计开发以及review代码的机制，版本更新机制，如何开发出优秀的组件，这些将在后续推送的文章中详细介绍。

二.通用ui规范

为了达到能够定制主题的目的，组件样式不能使用scoped，最好做为一个独立的项目维护，能够经过gulp或webpack进行独立编译，和组件代码的编译分离开。为了样式不互相污染，能够采用css的BEM规范。

可使用 sass，less 建立一系列变量，做为样式的基础，在组件开发时，严格使用这些变量进行开发，因为组件库是依赖开源库为基础进行二次开发的，能够直接使用组件库的定义的变量，不知足时再进行补充。

element ui定义的部分变量

须要定制主题时，只需改变变量值，从新编译代码便可。

三.构建脚手架

来了新项目你是怎么作的呢？ 本身搭建从新设计目录结构？复制老项目删除业务代码？若是是后者还好，至少能保证统一的技术方案。若是有一个本身的脚手架，只需一个命令，就能轻松建立项目初始化文件，这样变得优雅了不少。

使用脚手架有什么优势呢？首先项目经过命令直接生成，更优雅， 其次初始化的项目相同，保证了多项目的技术方案统一，便于维护。

搭建的脚手架能够基于现有的脚手架进行拓展，好比，使用vue能够基于vue-cli初始化的内容去进一步拓展。下面看看脚手架须要包含哪些内容。

1.引入本身搭建的组件库

1. 最大程度的复用代码，经过现有组件实现快速开发

2. 新的交互形态，直接抽象出来扩充到组件库，全部项目复用

2.使用本身的一套统同样式

1. 样式问题集中管理，改一次，全部项目受益

2. 能够定制不一样的主题

3.使用统一的mock方案

1. 前端项目运行不须要依赖后端服务

2. 开发时，直接使用mock数据进行调试，减小后期和后端的联调时间

4.统一编码规范和风格

全部项目使用一套eslint规范，能够编写一套本身团队的规范，也能够基于社区里主流的规范去调整，使它更适合你的团队，如今主流的规范有Airbnb，Standard，Google几种。

建一个团队内部规范的npm项目，全部的项目安装这个npm包，保证团队代码规范统一。

5.脚手架集成登陆，权限配置，路由配置，vuex，AJAX请求封装，不一样环境配置

把这些内容直接集成到脚手架中，这样就能够最快速度进行开发。具体怎么搭建脚手架将在后面文章中推出......

时刻前端新鲜技术推送,按期前端精品文章分享，关注公众号有惊喜