一目的
首先准备一个web网站，这里模拟一个网站的页面，主要对开源网页实现动态存取，之后将使用本页面进一步实现对mysql的读写分离功能
二架构
前台是开源网页的页面，具体例子可从如下网站下载
后台采用springboot+thymeleaf开发
1前端页面整合
复制网站实例页面，到如下路径/template/case1page
复制静态页面包括js文件到/static
2后台整合
Pom中加入相应jar包依赖，且未方便开发可以加入热部署相关依赖，例如
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<dependencies>
<!-- spring热部署-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>springloaded</artifactId>
<version>1.2.1.RELEASE</version>
</dependency>
</dependencies>
</plugin>
</plugins>
</build>
整合mybatis
在Application中编写设置注入数据源和SqlSessionFactory的方法如下
@Bean
@ConfigurationProperties(prefix="spring.datasource")
public DataSource dataSource() {
return new org.apache.tomcat.jdbc.pool.DataSource();
//com.alibaba.druid.pool.DruidDataSource();
}
3 数据库设计
主要采用两个表SD_CATEGORY，SD_LABLE_SWITCH，存放对应页面中标题和标题中相关的详细数据。具体建表和数据可见附件脚本
三实际功能
页面中实现了12个demo的动态效果
已第11个demo为例。说明实现方式
1静态页面中数据样式如下
<li class="nLi">
<h3><a href="http://www.SuperSlide2.com" target="_blank">新闻
<ul class="sub">
<li><a href="#">新闻首页</li>
<li><a href="#">新闻人物</li>
<li><a href="#">新闻电视</li>
<li><a href="#">新闻图片</li>
<li><a href="#">新闻视频</li>
<li><a href="# ">新闻专题</li>
</ul>
</li>
<li class="nLi">
<h3><a href="http://www.SuperSlide2.com" target="_blank">预告片
<ul class="sub">
<li><a href="#">新闻首页</li>
<li><a href="#">新闻人物</li>
<li><a href="#">新闻电视</li>
<li><a href="#">新闻图片</li>
<li><a href="#">新闻视频</li>
<li><a href="# ">新闻专题</li>
</ul>
</li>
根据上面数据显示方式确定现在后台存放数据的结构是，用一个对象存放标题和条目数据(List)，然后再用一个组列表存放这些对象，已此来对应页面的结构
2页面显示方式如下
<li class="nLi" th:each="list:${grp11List}">
<h3><a href="http://www.SuperSlide2.com" target="_blank" th:text="${list.TP_NM}">新闻</a></h3>
<ul class="sub">
<li th:each="lableList:${list.lable}">
<a href="#">
<p th:text="${lableList.LAB_NM}">新闻首页</p>
</a>
</li>
</ul>
</li>
后台存放方式
在处理对应demo实例的controller里组织数据的逻辑如下
//查找标题
List<GrpTitle> grpTitle = userService.getGrpTitle(caseId);
//查找每个标题时，找出所有对应lable数据并放入一个grplist
for (GrpTitle title : grpTitle) {
List<Lable> lable = userService.getLableInfo(title.getGRP_ID());
FullContent cont = new FullContent();
cont.setTP_NM(title.getTP_NM());
cont.setLable(lable);
//把所有grplist放到一个list
grpList.add(cont);
}
//加入case1 返回需要的结果
model.addAttribute("grp11List", grpList);
