?今天是劉小愛自學(xué)Java的第111天。

感謝你的觀看，謝謝你。

話不多說，開始今天的學(xué)習(xí)：

image

我們?yōu)g覽網(wǎng)頁時(shí)看到的數(shù)據(jù)無外乎兩種：靜態(tài)數(shù)據(jù)和動(dòng)態(tài)數(shù)據(jù)。

靜態(tài)數(shù)據(jù)是將數(shù)據(jù)給寫死了，需要修改時(shí)得去改對(duì)應(yīng)的某個(gè)頁面。

而動(dòng)態(tài)數(shù)據(jù)是需要去數(shù)據(jù)庫查詢的，其數(shù)據(jù)是隨著數(shù)據(jù)庫中的數(shù)據(jù)變化而變化的。

對(duì)于我們后臺(tái)開發(fā)來說，打交道最多的肯定就是動(dòng)態(tài)數(shù)據(jù)了。所以有業(yè)務(wù)需求時(shí)，不妨先分析頁面中的數(shù)據(jù)與數(shù)據(jù)庫中的表關(guān)系。

流程分析清楚了，寫代碼也會(huì)事半功倍。

一、業(yè)務(wù)分析

我們先來看下需要實(shí)現(xiàn)的具體業(yè)務(wù)：

點(diǎn)擊"查看詳情"，會(huì)出現(xiàn)和該頁面相關(guān)的各種詳細(xì)信息，具體如下圖：

image

我們需要搞清楚三個(gè)問題：

• 我根據(jù)什么參數(shù)去數(shù)據(jù)庫查詢？
• 我怎么查詢，查詢哪些數(shù)據(jù)表？
• 我查詢到的返回值是什么？

這三個(gè)問題搞清楚了，寫代碼也就很簡單了。

右鍵“查看詳細(xì)“，選擇檢查，可以在控制臺(tái)上快速定位對(duì)應(yīng)的頁面。

我們發(fā)現(xiàn)它是跳轉(zhuǎn)了route.detail.html頁面，而route對(duì)應(yīng)的就是數(shù)據(jù)庫中的一張表。

在跳轉(zhuǎn)頁面時(shí)將rid這個(gè)參數(shù)拼接到路徑中，向服務(wù)器發(fā)送請求時(shí)通過該參數(shù)查詢數(shù)據(jù)。

那查詢那些數(shù)據(jù)表呢？返回值又是什么？

該頁面中的數(shù)據(jù)可以將其分為兩大塊：基本信息和圖片信息，其對(duì)應(yīng)的數(shù)據(jù)表一共有4張。

我們逐個(gè)分析：

image

①tab_route表

最核心的一張表，基本信息都在這張表里面。

事實(shí)上我們需要的還有tab_category表中的cname數(shù)據(jù)，以及tab_seller表中的數(shù)據(jù)。

一張tab_route表上查詢的數(shù)據(jù)是不夠的，不過該表中有兩個(gè)字段：cid和sid。

對(duì)應(yīng)著tab_category和tab_seller這兩張表。

所以使用多表關(guān)聯(lián)查詢數(shù)據(jù)，其結(jié)果由多張表的數(shù)據(jù)組成，相當(dāng)于是一張新的表。

這些查詢數(shù)據(jù)在Java中對(duì)應(yīng)的是什么？

就可以用一個(gè)Map集合來接受查詢結(jié)果。

image

②tab_route_img表

根據(jù)rid來查詢出對(duì)應(yīng)的圖片，這張表在Java中對(duì)應(yīng)的也就是routeImg這個(gè)實(shí)體類。

因?yàn)橐粋€(gè)rid可以查詢出多行數(shù)據(jù)，所以返回的是一個(gè)集合。

這些數(shù)據(jù)在Java中對(duì)應(yīng)的是什么？

也就是裝有多個(gè)routeImg對(duì)象的集合。

業(yè)務(wù)分析完畢，就可以編寫代碼了，無外乎就是這么幾個(gè)步驟：

前端發(fā)送請求，后臺(tái)接受請求查詢并處理數(shù)據(jù)再響應(yīng)，前端接受響應(yīng)數(shù)據(jù)并渲染。

image

對(duì)應(yīng)RouteServlet中的queryRouteDetail()方法，請求參數(shù)為rid。

二、后臺(tái)代碼編寫

1web層

image

說來說去無外乎就是核心三個(gè)步驟：

①獲取請求數(shù)據(jù)

getParameter()方法：使用該方法獲取具體某個(gè)請求數(shù)據(jù)。

getParameterMap()方法：獲取多個(gè)請求數(shù)據(jù)時(shí)，就使用該方法。

②Service層處理數(shù)據(jù)

包括轉(zhuǎn)換數(shù)據(jù)為json格式，都可以在Service層中去處理。

③響應(yīng)數(shù)據(jù)

不用多說，固定寫法，只不過有時(shí)候也會(huì)使用到重定向這些。

2Service層

前面也分析過，前端需要的數(shù)據(jù)有兩塊：基本信息和圖片信息，都需要去數(shù)據(jù)庫查詢。

所以分別對(duì)應(yīng)了兩個(gè)查詢方法：

image

①查詢基本信息

在Java中數(shù)據(jù)表對(duì)應(yīng)著一個(gè)Java實(shí)體類，但是此處查詢是多表查詢，數(shù)據(jù)由多張表組成。

所以這里使用Map集合接受數(shù)據(jù)。

②查詢圖片信息

對(duì)應(yīng)tab_route_img這張表，在Java中查詢結(jié)果對(duì)應(yīng)RouteImg這個(gè)實(shí)體類。

③封裝處理數(shù)據(jù)到map中

以前我們會(huì)創(chuàng)建一個(gè)Map封裝數(shù)據(jù)。但現(xiàn)在因?yàn)棰僦杏鞋F(xiàn)成的Map，直接將②中的數(shù)據(jù)封裝進(jìn)①中即可。

④轉(zhuǎn)換層json數(shù)據(jù)并返回

不用多說，固定寫法。

3Dao層

image

①查詢頁面基本信息

既然返回值是Map，那么使用jdbcTemplate的queryForMap()方法即可。

其中這里需要主動(dòng)處理一個(gè)異常。

②查詢頁面的圖片信息

查詢結(jié)果是一個(gè)裝有RouteImg對(duì)象的集合，使用query()方法。

三、前端頁面解析

1基本信息解析

前端解析無外乎就是：

• 取出響應(yīng)數(shù)據(jù)，如果響應(yīng)數(shù)據(jù)為集合，則遍歷取出。如果不是，則使用鍵值對(duì)直接取出。
• 確定使用什么選擇器，定位頁面中對(duì)應(yīng)的標(biāo)簽，再將數(shù)據(jù)動(dòng)態(tài)添加進(jìn)該標(biāo)簽。

image

①獲取響應(yīng)數(shù)據(jù)

如果信息很少，那自然可以很輕松地將后臺(tái)響應(yīng)數(shù)據(jù)的key值記下來。

但如果信息很多，記不住，可以在控制臺(tái)上輸出，再通過F12查看，一一對(duì)應(yīng)了填寫。

②使用選擇器定位頁面

如果一個(gè)頁面很多行代碼，我們想在頁面中找到對(duì)應(yīng)標(biāo)簽挺浪費(fèi)時(shí)間的。

這里就可以使用鼠標(biāo)右鍵，點(diǎn)擊檢查，在控制臺(tái)上就可以快速定位對(duì)應(yīng)的頁面。

這時(shí)就可以確定用什么選擇器定位該標(biāo)簽。

上圖中大多數(shù)都可以用層級(jí)選擇器來定位，如果不行，可以選擇在頁面上添加一個(gè)id，再通過id選擇器也是可以的。

選擇器確定之后，再使用html()方將數(shù)據(jù)動(dòng)態(tài)添加就好了。

2圖片渲染

image

因?yàn)榉?wù)器響應(yīng)的圖片數(shù)據(jù)是集合，所以需要先使用each()方法將其遍歷，再動(dòng)態(tài)拼接。

當(dāng)然還有關(guān)于那個(gè)小圖片動(dòng)畫效果的實(shí)現(xiàn)，這種代碼我們后臺(tái)人員是很難將其寫出來的。

所以要么就是找前端人員幫忙寫，要么就是網(wǎng)上找模板了，我這邊就不說明了。

最后

謝謝你的觀看。

如果可以的話，麻煩幫忙點(diǎn)個(gè)贊，謝謝你。