立哥技术经验-SPA网页开发一些技术心得体会

前言：SPA网页逐渐代替以前page单页和JQuery等Java库，成为企业乃至部队开发与使用的核心技术。MVVM（前后端分离技术）从18年左右兴起，目前是研发中的主流，在项目，网站，系统中得到了广泛应用。

1.系统架构

 

 

2.业务逻辑

 

 

 

 

 

3.技术栈（Technology Stack）

笔者作为资深全栈工程师，采用后端Java的VUE框架+MySQL8.0+Swagger API +SPA管理后台+Element UI+NUXT前端+E-charts ,结合部分React技术。从前后端代码到实际上机部署，都由笔者带领手下团队完成。亲自在一线码代码，处理复杂且棘手的技术问题，有很深的体会与经验总结。

• 不必过于追求技术栈的先进，关键是切合需要，追求系统的稳定性。

4.前端CSS问题处理

4.1 元素及版式汲取

笔者开发的是新系统，没有很多以前经验参考。从自己单位有限的工业软件中，运用Chrome 开发工具获取需要的元素和版式。目前Chrome是支持移动端开发的，是咱们开发者的福音。F12将军很给力，不论做逆向还是开发调试。对了，最近360浏览器的开发者工具，有了更新。很舒服，可以使用下。

4.2 嵌套CSS架构

目前流行DIV、JS、CSS 分开的布局，但是笔者实践，不建议这样使用。一些简单的页面可能不出问题。对于比较复杂而且页面数很多的系统，非常容易出问题，而且莫名其妙，都不报错。采用div与CSS混合结构，是实践出来比较好的方法。

4.3 CSS选择器

出于简化系统复杂度需要，笔者不建议多采用选择器。功能实现必要时，适当采用。

5. 百度的二次开发

我们的系统，采用B/S结构，在网页中集成了百度插件。前端调用一行代码即可。在实际中，百度的官方文档并不太有用，很多Methods都是笔者一行行，码出来，自己开发的。百度的技术要承认，很牛，但是百度服务人员就鱼龙混杂，注意好沟通问题。

6.SPA后台管理系统

CLI脚手架的安装是重点，对于缺损的包，记得通过npm补足。打包的时候，一般使用VS 自带的打包工具就可以。有需要其他功能的需求，可以参考其他Demo，进行加装。

7.代码技能

系统项目主要用到Java，JS，H5技能，JDK1.8。如果对Rabbit MQ和 Redis不怎么熟的，需要特定打牢这方面知识。Docker的话，笔者这里用的不是很多，一些基础功能。对于巨量的数据访问，采用Druid JDBC数据池方法。