一目的

首先準備一個web網站，這里模擬一個網站的頁面，主要對開源網頁實現動態存取，之后將使用本頁面進一步實現對mysql的讀寫分離功能

二架構

前臺是開源網頁的頁面，具體例子可從如下網站下載

http://www.superslide2.com/

后臺采用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);

?

總結

以上是生活随笔為你收集整理的mysql读写分离实战准备一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。