先后端不分离

今天找文件的时候忽然发现了一枚总结文档，以为有必要留存，以防下次找不着就一不当心发了这篇，哈哈哈

一直作后台管理系统，采用react先后端分离，以接口的形式相互交流，猝不及防得来了三个页面开发，而后：

项目概况：二月开始接手A项目，该项目由前端写静态页面，php开发嵌套数据的形式展示，为期一个月，给前端时间为两周，而后交付到数据嵌套的人员；三月中旬开始接手B项目，该项目有两个端，支付宝端C端以及后台管理平台，这两个项目通通由前端写静态页面，java来嵌套数据。

项目详情：

1.A项目：因为一直没有好好的啃过bootstrap，对于这个有点熟悉又陌生，使用过可是都是别人已经搭好总体框架，本身在那个框架的基础之上进行修改调整迭代需求，也就是粘过来删删改改。因而最开始没想要运用这个，试图本身从0开始写页面，固然也是以为这个框架不够轻便，有不少的强大的功能，本身又用不上那么多，好比优雅的响应式，以为蛮累赘的。技术选型的时候有同事推荐bootstrap：有小组件能够拿过来直接使用好比弹框。表单等，还有就是兼容性会不须要咱们本身来考虑，针对我以为这个比较大型累赘的想法，提议一张图片就比这个框架大得许多了。

对于网站类项目经验缺少，而后又是第一次本身一我的担任一个完整的前端，没有一点儿懈怠，就开始了bootstrap的摸索之路。开始写demo实验，差很少试验了两天把头部尾部等公共部分完成，写好了一个页面。在试验响应式的时候，没有手机端页面设计，而后作起来也花费大量时间经历，结合产品方面的需求，最后决定将页面宽度定位1200px，大于时左右留白显示，小于时将容许出现滚动条。因为是官网的项目，测试了各浏览器的兼容性都没问题，最后测试结果代表基本没有兼容性问题。

对于文件的结构纠结了一段时间，一开始给每一个页面都写了一个样式文件，可是请求这么多样式文件也是很消耗资源的，有的页面样式添加的仍是蛮少的，到后来就把本身写的所有样式文件都写入到了一个文件里面index.css有大概50k的样子。

2.支付宝C端：根据以前支付宝生活号的开发，便于后期统一管理维护，因而借鉴了他们采用的技术，采用antUI组件，全部新增样式差很少22k的样子，对于手机端仍是蛮好用的，手机端的经常使用组件基本上都有，在支付宝里面也不会存在兼容性。

3.后台B端：原本特别想争取这个项目用react那一套来作的，antDesign功能全面，系统可维护性高。可是如今这个项目时间紧急，前端这边抽不出更多人手，我一我的负责两个端页面开发已经够呛，因而java组抽出人手来作嵌套的工做。最后这个项目根据metronic.bootstrap框架来作，一个基于bootsrtap的成熟框架。

存在的问题：

1.经常使用的控件应该积累起来，到时候要用了直接取过来用。控件好比：时间选择，分页，输入匹配，轮播，弹框，弱提示，等等

2.对于框架里面的样式咱们是直接重写，仍是本身再取class来覆盖掉

3.UI设计跟框架出入较大，调整内容较多。

4.交付以前老是很想尽善尽美，可是一交付出去就出现问题，此次一连三个项目都这样，同类型的技术形式没有放一块儿总结。嵌套形式的完整交付必须包括：页面没有遗漏，错误页面，表单验证机制，通用的报错提醒，弱提示，弹框的用法。

解决问题：

1.针对控件的积累问题，在查找控件的时候发现一个好办法，那就是把日常的好用的控件都放到一个地方集中管理，推荐放到GIthub找的时候比较方便不用电脑里死找文件。借鉴一些好的作法，而后本身写写，本身写的用起来确定更加顺手，有些控件基本上每一个系统会出现，更加得本身动手去写，理解其中的原理。

2.在项目中采用的方法是，在本身的class下覆盖框架内部。

3.尽可能避免UI在前端以前介入产品，尽可能在技术框架选定以后再去进行针对性的UI设计，否则会有不少调整，重写。

4.***important***页面通常不会落下，下次嵌套项目进行以前，首先把基础设施建好，可行性demo，错误页面，表单验证机制，通用的报错提醒，弱提示，弹框的用法，在这些所有完成的状况下再去动手写页面，预防最后匆匆交付而后遗漏了。

总结：三种框架以前都没有用过，能在项目开始以前写可行性demo，在技术选型的时候听取同事提出的的建议，在A项目前台开发的时候，推荐的bootstrap得到良好的兼容性，antUI是借鉴以前支付宝生活号的开发方式，B端选型的时候在项目经理肯定只能出静态页面时，采用原来php开发人员用的metronic.bootstrap。

以前一直很恐惧的用插件框架，感受没法驾驭，担忧用着不彻底符合需求，后期本身不会改，此次以后，能本身动手找到问题所在，而后进行调整（A项目轮播，带户型说明等），一步一步摸索，变得不那么惧怕新的东西，也不那么惧怕本身一我的去整理规划整个项目了。