前后端不分离

Posted 2020-10-03 小金鱼紫苏

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

一直做后台管理系统，采用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项目轮播，带户型说明等），一步一步摸索，变得不那么害怕新的东西，也不那么害怕自己一个人去整理规划整个项目了。