技术沉淀转型项目案例总结(一) Springboot新闻头条项目总结

一、背景：
从完整的前端初步的结构体系，WEB前端基础(HTML+CSS+JAVASCRIPT+JQUERY+BOOTSTRAP)，加上后台样例的基础入门SSM，再加上springboot和微服务的架构体系入门的学习总结，单体服务架构和微服务架构的比较有了初步的认知，该动手进行真实的案例实践了。

经过搜索选定几个实践案例选择方向：新闻头条案例、用户权限管理案例、在线教育课程案例。

二、案例选择
经过思考，先拿新闻头条案例来入手。
正好：腾讯NEXT学院有一个基于springboot新闻头条的小程序的网课培训，其中前端使用微信小程序的框架和组件来开发设计，后台服务采用微服务springboot来设计。

项目案例实践思路：简略看了下小程序的前端开发过程，组件的开发和设计有点和jquery和bootstrap类似，微信自定义了前端组件和样式库，定义的前端组件和bootstrap很相近，其中的和后台服务器的异步通信又和jquery的中ajax很相近。因为微信小程序的的申请流程和审核上线较为麻烦，故决定编写一个H5版本的新闻头条案例程序。

三、案例开发介绍

1、项目基础信息：
1.1、项目名称：新闻头条全栈实践案例（H5版本）仿今日头条。

1.2、技术选型：
1.2.1、后台技术选型：springboot2.1.1+mybatis+mysql5.5+JDK1.8+TOMCAT9，其中springboot集成了配套spring、springmvc、spring-mybatis、mysqljdbc等相关的依赖包的组合。
1.2.2、后台开发工具：eclipse的springboot定制版STS.exe(Spring Tool Suite 3.9.4)+maven3.6.1
1.2.3、前端技术选型：bootstrap3.3.7+jQuery2.1.4+CSS3+HTML+JAVASCRIPT
1.2.4、前端开发工具和测试：sumblime3.1.1+tomcat9
1.2.5、数据库选择是mysql5.5.62 windows和linux版本，数据库链接和管理工具：navicat12.0中文版。

1.3、数据模型
核心的表就只有两个：新闻分类表和新闻明细表。
新闻分类表核心字段：新闻分类ID、新闻分类的名称
新闻明细表核心字段：新闻ID、新闻分类、新闻标题、新闻图片类(0、纯文字新闻；1只有一张图片的新闻；3 有3张图片的新闻）、新闻内容

2、项目开发过程：
2.1、后台开发
核心的开过程：POJO->DAO->Service->Controller相关的设计和实现即可。大大提升开发效率。
2.1.1、POJO和DAO层：采用mybati提供的逆向工程的插件MBG，修改逆向工程的配置文件generatorConfig.xml，自动根据关联数据库中定义的实体表自动生成pojo实体类、mapper*.xml文件以及mybatis对应resultmap等信息，将相关的pojo和mapper等相关自动生成的代码插入我们自己工程中即可。

2.1.2、Service层：服务层先定义 接口，然后定义服务实现类，并加入service注解
服务1：按照新闻分类ID获取相应的新闻分类清单列表信息，核心实现根据逆向工程中 mapper类中父类定义的：查询方法：selectByExample。按照条件查询。
服务2：根据新闻详情ID获取相应的详细信息，包括内容、标题时间等。核心实现根据逆向工程中 mapper类中父类定义的：查询方法
selectByPrimaryKey(newId)

2.1.3、Controller层：从服务层获取的POJO对象的数据，通过REST的风格的方式进行暴露，提交给springmvc中的dispatcher控制过滤器，控制器层返回的数据按照josn对象数组的方式进行返回给前台。

2.2、前端开发（新闻的样式部分参考今日头条）
2.2.1、前端静态页技术:主要是使用了bootstrap控制页面的基于H5的基础的样式、使用jQuery中tab页面技术实现页面tab点击的展示、使用CSS3实现图片圆角和div标签圆角、行内元素和块元素实现标题的样例信息展示、使用postion技术实现页面顶部信息固定浮动等。

2.2.2、前后端数据服务能力交互REST风格和JOSN数组传递，通过jquery中的信息ajax方法中post方法获取数据，然后动态修改页面中的dom元素的内容信息，比如：标题、发布时间、发布内容等信息，通过前后台能力交互后，解析后台传递过来的JOSN数组来实现的页面的动态信息展示，实现服务能力和前台页面响应的完全分离。

2.3、联调上线
2.3.1、服务打包：springboot使用war的方式打包，当然也可以使用jar的方式。具体可以根据需要来选择。打包的操作方法。参考样例：
https://blog.csdn.net/weixin_39274753/article/details/81557501

2.3.2、因为最终的应用部署在腾讯云主机上，云主机上安装linux版本的mysql 和 mysql的权限管理等遇到了一些坑。参考样例：
https://www.cnblogs.com/Troy-Lv5/p/9273235.html

3、项目开发收获：
3.1、后台收获：
3.1、先前的SSM开发方式中，关于pojo和mapper类、*.xml都需要自己进行编写，通过mybatis提供的逆向工程能大大提升效率。同时通过sprinboot的整合，能大大提升项目工程搭建的配置效率，同时在开发过程中，只需要修改application.properties配置文件关于数据库、数据源、服务器端口 等信息管理，省去了先前的SSM架构中web.xml、spring-mvc.xml、mybatis-config.xml、applicationContext.xml等繁琐的配置。

3.2、前台收获：
先前学习jQuery用的不多，这次主要是使用了jQuery中的dom元素选择器的强大，同时对于ajax服务请求调用的方便，大大提升了开发效率。对于CSS样式中盒子模型的实践有了更好的理解，同时样式选择器、对于块元素和行内元素、行内快速块元素等CSS的样式结构有了更好的实践和理解和灵活应用。

3.3、总体收获：
从全流程体系：后端表模型设计->POJO->DAO->Service->Controller，前端-静态页面设计(H5版本) jquery+css+JAVASCRIPT等，前后端数据服务能力交互REST风格和JOSN数组传递，加上mysql数据库的windows、linux安装、数据初始化，以及前端开发工具sumblime、后台的springboot服务按照war模型及进行打包发布，有了全流程贯通和整合实践认知，受益匪浅。

最大收获：技术实践是学习知识和吸收知识的最有效的手段。知行合一。

案例信息的地址展示：http://49.234.9.176:8081/yijynews/index.html 请使用手机浏览器 访问或者 使用PC端浏览器手机模拟访问。

案例信息图片信息展示：