vue怎么给pc端浏览器设置一个最小屏幕_老系统前后端分离指南

老系统前后端分离指南

点击上方“技术支持联盟”,选择“置顶公众号”

第一时间了解程序员大小事儿

作者: 火影小李,知识分你知道的你不知道的,还有你不知道的你不知道的,永远年轻,保持学习。 

摘要:本文主要集中于前端设计及前后端交互方式实现,旨在给老系统的前后端分离提供可行性思路及方案。



b1e407e6bfed2e6df2fb22b814703e1d.png

01 背景

场景一 浏览器兼容,加信任站点,用户体验差

业务A:为什么我用360(或Google)这个功能点击不了

同事A:用一下IE试试

业务A:为什么我用IE这个功能点击不了

同事A:你用的IE几,设置一下兼容模式,站点信任,兼容模式等等,一通说之后,算了我给你远程看看吧。

业务A:好吧(why,黑人问号)

业务A:页面有点丑,能像XX系统一样那种设计么,在google也能用,页面设计也像他们一样

经理C:咱们系统是内部管理系统,现在先这样,我们也在探索,怎么才能更好地兼容各种浏览器,目前部门也在推动。

场景二 封装过度,写法局限,非开源

同事A:(告知新人)双击域这么写,那快代码要这么写

 038d93df5c75a97cfdc3c940832ac9e9.png

新同事B:why,难道不是select,那这肯定是一个插件吧(其实不是,只是封装好的一个写法,因为以前没有这些开源框架)

    究其所以然,发现这么引用的,一堆封装好的js,除了common.js,其他js全是十年前的封装引用,或者表单的操作校验封装,对比开源框架晦涩难懂,甚至以现在的视角看有点多余。

5e2462a97813342078b4af66ee1aa2a0.png

然后在CodeSelect.js中是这么写的。

ea7dd225f90c0c59d0ffa039d97925a9.png

新同事B:算了,还是别这么写了,没必要,所以现在代码里也有人会不用这种封装好的去实现,如果这是较新的理念,或许我们会遵从,但这是几年前的设计,很少会有人采用。

场景三 测试运维经常反馈无端报错,展示混乱

同事D:这个页面响应比较慢,看还能不能再优化下,我已经优化了各种逻辑和sql实现

开发同事A:打开修改页面,F12,what,这个页面是一个大表单,数据全部加载,好,结束,不重新设计改不了(逻辑和sql已经优化完的基础上)。这个页面第一整个大页面平铺,还有各种表单操作,设计上可能存在不足(暂时不做肯定语气,先质疑设计合理),第二,整个form表单提交的方式,加载也是jsp中全部查询出来,换成ajax实现局部调用可减少响应时间,jsp中各种ifelse逻辑判断更不想说了,这也许就是所谓的“逻辑复杂”吧。

测试A:分页怎么不好使,是不是忘了改分页点击这个代码,新开发同事你是不是忘了改

开发同事F:what,分页点击后台还有个continueQuery,首次加载和点击分页竟然不是一个方法。

运维A:业务同事说这个上传文件按钮不展示,我看了一下可能是他们浏览器的问题,写法不兼容。

开发同事F:what,好吧,那我换成以前的写法。

测试A:这个页面长度不一样,调调吧。

开发同事F:我调,但治标不治本,都让我用以前的写法了,谈何设计,我要重构这个页面。

同事B:想啥呢?这不挺好的么,像以前一样改不好?

同事C:想啥呢?预算呢?业务没钱,也没想法,没必要

同事D:想啥呢?逻辑太复杂了,不好改,没你想的那么简单...

开发同事F:嗯...

这些场景作为IT人能忍?

    以上这些场景在老系统经常发生,虽然是内部管理系统,支撑平台,也不至于此,提高用户体验,可以做前后端分离,不分离也要优化下页面设计,设计相对合理,兼容主流浏览器,ie9以上加谷歌,火狐,360(360浏览器极速模式webkit内核,ie模式依赖本机ie版本)等等,页面逻辑简单可读,这些其实不难。

02 问题总结思考

前端问题

浏览器兼容问题

    目前老系统使用主要在ie浏览器,其中有些功能只能在只能用ie下使用,与js和html语法相关,比如还有tbodies,现有代码已经不支持了,拿什么兼容,当然也无需谈适配,本文就可以解决老系统这个问题。

    使用jsp和html实现都不重要,前后端是否分开部署也不重要。

    参考之前公众号中有一篇讲前端适配的文章。

js封装太多,目前主流框架更完善

    老代码基本全是纯js进行dom操作,进行了很多js封装方法,现在来看非开源,扩展性低,改起来也很复杂,其实都没必要改了,现在很多功能都不会再那么实现了,毕竟这是十年前进行的封装,那时还没有jquery,bootstrap,reactjs,vue等优秀主流框架的使用。

    各种框架怎么兼容每个版本都有说,总比各种使用原生来的快一些,就好比你用idea比记事本写代码舒服一些一样

页面交互使用form表单提交的方式

    页面交互基本全是form表单提交的方式。

    改造的重点是form表单提交换成ajax交互

逻辑“看起来”很复杂

    页面设计不合理,随着需求功能的增多只是代码的堆砌,导致逻辑“看起来”就已经复杂了,所以要梳理出设计合理的方案,每次需求改动最好提前设计评审一下。

老框架后端分层实现及前后端交互实现

    说现在有些老项目是servlet项目也不为过,struts项目是用的是strut1早期的版本。

    在最小改动的基础上,使用了struts1+ajax实现了交互,页面跳转还是走strut-config.xml,其他交互均以ajax实现。

    后台分层混乱,新的实现可以采用分三层,ui层,Facade层,DB层,去掉之前的command层和action层写法

    原计划采用Springmvc整合ajax,但涉及后台框架改动,所以尽量保持最小改动,后台框架不变,只需要改一下分层,controller层交互即可,整合spring也是下一步的计划,目前继续使用struts,此次主要改动集中于前端界面和交互,批次推进。

03 解决方案

前端技术选型

    页面可以继续用jsp,可以用h5,无所谓,都可以,目前采用jsp,不使用el表达式,jstl语法,不使用jsp的java语法,都是ajax交互,如果后台人员去做的话技术可以采用jquery(ajax及dom操作)+bootstap(样式)+datatables(表格,用easyui也行,自主选择)。

7206c82a040763ab61325d10d9bd2c28.png

    组内有前端技术栈的人可以直接用html5,,采用vue,或者react,万变不离其宗,Vue也借用elementui,react也借用boostrap等,实现思想方式的不同。

参考:

BootStrap中文网:https://www.bootcss.com/

Datatables中文网:http://datatables.club/

交互方式

由form改ajax

    老功能可以不用动以前的页面和逻辑,新起一个页面和action即可;我以新做的维护银行信息为例铺开。

    比如其中一个查询下拉框,以前的实现是jsp加载页面时设置一个attribute返回,然后取值

fdcf55831bba443af3a210b4772377f5.png

    比如新增,以前是form表单提交,必须填完后进行提交校验,提交后页面需要跳转,查询以前做法更是又嵌套了一个iframe用于展示

aeac3d6f563abf39ec3a0c80abf50e30.png

前后端json交互

    页面跳转继续使用struts-config.xml

1cf164916fd697e38a8cf68a572ba467.png

    封装统一请求工具类,返回实体,统一返回工具类

f6c823501f1bdc72d986923a2c5c0ac4.png

    Struts1因为版本较早,整合ajax时最终还是使用out.print方式返给页面,参照下文所遇问题。

    后台新的实现可以采用分三层,ui层,Facade层,DB层,去掉之前的command层和action层写法。

页面设计

    使用bootstrap的12栅栏,及各种组件,form组及模态框进行页面设计

6f3ada2660db9794fce750de9593db92.png

    效果展示

3e5a1633f6ab029b6be63c85acfd9735.png

表格使用datatables实现

Elastic-Job

    表格实现参见的有easyui的datagrid,本文使用的datatables实现等等,较新的前端框架(MVVM)也都有提供相应表格组件,这里主要展示了datatables的使用,请看下边的最终效果。

04 最终效果

页面效果

    最终共三个页面,都是h5写法,可随时替换成h5(以前一堆页面,还再次内嵌一个iframe,并且大量使用jsp语法,含后台逻辑):

    列表展示(含批量导入模态框形式)一个页面,

    新增一个页面,

    删除修改明细一个页面,

    提示都为模态框,不必跳转错误和成功页面。

ad40662efe6050c2e29107fdc2ae2f9b.png

Elastic-Job

3e5a1633f6ab029b6be63c85acfd9735.png

模态框展示

    1bce64c34458561c672a418696cc449e.png

新增页面展示

41a7ec3788bde70027085c430ea7f0f1.png

其他插件在页面中的使用效果

  比如高德api地理编码引用,内嵌到模态框中实现。

c233572021586a0378df7409efe37681.png

代码部分展示

页面跳转继续使用struts-config.xml

    页面跳转继续使用struts-config.xml

1cf164916fd697e38a8cf68a572ba467.png

前端部分代码

    引用

7206c82a040763ab61325d10d9bd2c28.png

    查询首页

dd04725638be74d8e730558ed5ba0e8b.png

    Datables实现表格及分页

6a6c94fbb1ec53ee6dc930ae75d14189.png

818f9600fecf4dc1f980c3f9a3e02329.png

8c61dd14a760e1704795f80a3b704e8a.png

提示模态框

68811a03a832c914ebeb0eb4cd750b10.png

后端部分代码

    新增举例

19ee6ef2f4c2957b46ad0958675634b0.png

    请求解析

3a4ed5c131175036b1cfd20cf49fcce0.png

87a686b75c1f745ab379fce3948fd7bd.png

    返回封装

8fa7329edfe57693662b9bec82ba5679.png

05 所遇问题

Struts1整合AJAX

    Struts1因为版本较早,整合ajax时遇到一些问题,最终还是使用out.print方式

8e1d1d888d160688e3ed1bec16eeae70.png

datatables后端分页问题解决

8e1d1d888d160688e3ed1bec16eeae70.png

后端请求参数解析

    如果以contentType: "application/json"形式传递给后台,可以用封装的generateDto的requestDeal方法以流的形式解析

585577daf99b0bf0aa99f8a7f243ee92.png

b1da942600a08e1c0bd46a19aab6c99e.png

    如果是以contentType: "application/x-www-form-urlencoded"形式传递给后台,等同于form表单提交方式,可以用以前的方式paramUtils.getParameter解析

06 未来规划

未来将会进行更加全面彻底的改造,目前正在做的有:

1、开工号权限的已经对接OA走自动化运维流程开通,解放人力

2、正在实施的weblogic迁移tomcat

3、正在实施的软负载均衡nginx引用

4、页面及交互改造,前后端分离,本文聚焦点。

5、重新规范后台分层设计

6、总体设计文档梳理,重点功能整理设计梳理

随着总体设计的梳理设计完成,在不改变以前逻辑和最少改动的情况下,页面改造也会随着一步步展开来做,特别是常用重点功能的梳理设计。目前在struts1的基础上整合ajax实现交互,页面两种思路,一种是采用jquery+bootstap+datatales实现,另外一种直接通过前端人员采用vue框架实现前后端分离。

梳理出总体设计文档,完成页面及交互改造

    整体文档全部设计完毕,改造才会结束,也正好梳理整个系统,包括异步及系统对接等。

    总体设计文档是改造前提(重中之重),文档会是组织过程资产,意义很大,即使重构这也是基础。我们要知道这个系统每个功能是怎么做的,可以不知道细节,但不能丢了这个模块整体得流程及逻辑。

    不用动以前的页面和逻辑并行去改,先把常用功能和简单功能替换搞定。保守可以采用jquery+bootstap+datatales交互改完,也可以直接进行前后端分离改造完成

controller层Struts替换为springmvc,后端框架替换

    引入spring框架,先改mvc层,引用spring,也可一步到位,直接采用springboot。

    Spring家族的优点显而易见,这里不多说。

    之前已在同事配合下在老系统struts的基础上整合了spring+springmvc,证明了这下一条路的可行性。

引入mybatis,形成ssm框架

    Springmvc+spring+mybatis ,ssm框架,也可以Springboot+mybatis。

    目前项目中用的还是原生jdbc,还需要自己手动开闭数据源,拼接sql,手动提交事务,也很容易出现流没关闭现象。

    Mybatis介绍:是一个半自动的ORM持久层框架,内部封装了JDBC。作为开发者只需要关注sql语句本身。Mybatis是通过xml或注解的方式将需要执行的各种statement配置起来。通过Java对象和statement中的sql动态参数映射生成最终执行的sql语句,最终由Mabtais框架执行sql并将结果映射为Java对象并返回。MyBatis 支持定制化 SQL、存储过程以及高级映射。MyBatis 是可以双向映射的,可以将数据集映射为Java对象,也可以将Java对象映射为数据库中的记录。

(1)简单易学,容易上手(相比于Hibernate)  基于SQL编程;

(2)JDBC相比,减少了50%以上的代码量,消除了JDBC大量冗余的代码,不需要手动开关连接;

(3)很好的与各种数据库兼容(因为MyBatis使用JDBC来连接数据库,所以只要JDBC支持的数据库MyBatis都支持,而JDBC提供了可扩展性,所以只要这个数据库有针对Java的jar包就可以就可以与MyBatis兼容),开发人员不需要考虑数据库的差异性。

(4)提供了很多第三方插件(分页插件 / 逆向工程);

(5)能够与Spring很好的集成;

(6)MyBatis相当灵活,不会对应用程序或者数据库的现有设计强加任何影响,SQL写在XML里,从程序代码中彻底分离,解除sql与程序代码的耦合,便于统一管理和优化,并可重用。

(7)提供XML标签,支持编写动态SQL语句。

(8)提供映射标签,支持对象与数据库的ORM字段关系映射。

(9)提供对象关系映射标签,支持对象关系组建维护。

服务化提供接口

    使用Nacos整合dubbo服务和springcloud服务,为其他系统提供更强大的服务能力。

07

写在最后

    拥抱开源的思维,减少闭塞,拥抱变化,把老页面做出合理的设计,对开发的效率也是提高,对测试和运维也是减少了大量的工作,对用户更为友好,十年的老系统也能焕发生机。

    系统的定位都是准确的,解决了公司组织间的一些管理和实际问题,蓝凌的OA,用友的财务管理系统,风控公司的规则引擎体系,人力的统一用户,这也是一些内部管理系统或者平台,我们的内部系统亦可如此,探索可以解决实际问题属于自己公司的解决模式,形成自己的解决方案,甚至产品,而不再是业务需求的堆砌,做到内需大于外需,迎合业务需求的同时,也是产品的完善,让我们的系统更好的探索赋能。

    这都源于作为IT人的内驱,业务中发现,业务中整合,当然这都是后话,先解决眼前存在的问题才有能力迈出下一步。

    上边的灵魂发问和思考你如果通透了,思考了,还是没有思路或者不赞同,那也许是我片面了,当然如果你有更好的办法欢迎分享交流探讨,希望对你有启发。

请参考:

BootStrap中文网:https://www.bootcss.com/

Datatables中文网:http://datatables.club/

历史文章

解决方案:

分布式定时任务调度探讨

阿里云OSS JavaAPI分享

Jmeter压测的使用

API接口安全优化浅谈

基于idea将传统应用maven化改造实践

安全漏洞预扫小工具

Nacos作为注册中心,配置中心部署方案

Rancher+K8S简化学习环境搭建方案

Excel大数据量解析优化方案

Sharding-JDBC个性化分表方案

基于JWT的接口权限认证

Spring Cloud Gateway实现限流

公网发布的通用技术解决方案

Nginx结合Lua实现限流

Mysql数据同步Canal方案

Weblogic部署基于Spring Cloud项目应用实例

智能验证码解析java语言实现

数据库的演绎与变迁-下架最后一台小型机

关于struts架构通过引入spring包实现dubbo调用测试的未来式

监控&运维

redis监控工具-redislive

微服务链路追踪工具 Apache  SkyWalking部署与实践

快速发现生产环境SQL问题

Grafana-业务数据监控实践

自动化运维能力提升

服务器监控及问题定位排除

基于Spring Boot Admin告警之应用状态告警

Ansible在自动化运维中的使用

自助迁发分支工具

大数据

基于CDH集群的大数据项目的优化总结

Oracle实时同步大数据平台解决方案

实时流关联维表解决方案

中间件

浅谈Elasticsearch的资源分配

Apache Kafka使用规范Elasticsearch安装及使用

SSDB介绍及使用

RabbitMq使用简单介绍

Spring Cloud常用组件介绍

前端

ESLint + Prettier 规范前端代码

Vue.js对WinXP系统对兼容性

关于采集操作系统、浏览器版本的设计方案及一些浏览器兼容性问题处理

安卓动态加载SO文件

对浏览器的理解及兼容移动端H5本地化方案调研和实践

自适应网页设计

短信/浏览器唤起APP方案

END

2b9e06c122e4f867354a4d3df5dfd4f1.gif

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值