zoukankan      html  css  js  c++  java
  • 前后端不分离

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

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

  • 相关阅读:
    list与map的区别
    [BJOI2019]光线——递推
    [BJOI2019]奥术神杖——AC自动机+DP+分数规划+二分答案
    [BJOI2019]送别——非旋转treap
    [BJOI2019]排兵布阵——分组背包
    [LOJ3014][JOI 2019 Final]独特的城市——树的直径+长链剖分
    BZOJ2300[HAOI2011]防线修建——非旋转treap+凸包(平衡树动态维护凸包)
    BZOJ3033太鼓达人——哈密顿回路/欧拉回路
    BZOJ3236[Ahoi2013]作业——莫队+树状数组/莫队+分块
    BZOJ2339[HNOI2011]卡农——递推+组合数
  • 原文地址:https://www.cnblogs.com/yuanyuan0809/p/7410780.html
Copyright © 2011-2022 走看看