JavaWeb - 仿小米商場（4）：首頁線路分類展示
1 功能描述
接上篇JavaWeb-仿小米商場(3):登入與退出本篇部落格将分析和實作旅遊線路分類内容的查詢和展示。此功能旨在控制 banner 頂部的展示内容。如以下H5頁面所示：
2 功能分析
2.1 功能邏輯抽象
分類展示功能在邏輯上并不複雜：每當需要加載
/<header>
标簽中的内容時，都會向後端送出一個 GET 請求來擷取分類資料内容。後端在收到請求後查詢資料庫并以 json 形式傳回展示内容。
查詢旅遊線路分類内的功能需要面向資料庫中的另一張表 tab_goods_type，為了區分不同類型的資料查詢業務以及代碼的維護性和擴充性。在開發時基于三層架構體系建立對應的 GoodsTypeServlet 類、GoodsTypeService 接口和實作類、GoodsTypeDao 接口和實作類。
3 代碼實作
3.1 業務流程描述
3.2 Servlet
3.1.1 Servlet
在 GoodsTypeServlett 類中定義查詢所有線路分類内容的主體邏輯
@WebServlet(value = "/goodType.do")
public class GoodsTypeServlet extends BaseServlet {
private ResultData resultData = new ResultData();
/**
* 擷取所有商品分類,傳回json資料
*
* @param req
* @param resp
* @return
* @throws ServletException
* @throws IOException
*/
public String goodsTypeAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
IGoodsTypeService service = new GoodsTypeServiceImpl();
resultData.setFlag(false);
List<GoodsType> list = service.getGoodsTypeByParent();
if (list != null && list.size() >= 1) {
System.out.println(list);
resultData.setFlag(true);
resultData.setData(list);
}
String json = JSON.toJSONString(resultData);
System.out.println(json);
resp.setContentType("application/json;charset=utf-8");
return json;
}
}
3.1.2 Service
在GoodsTypeServicel 類中定義getGoodsTypeByParent() 方法，定義商品分類内容的具體查詢業務邏輯
public class GoodsTypeServiceImpl implements IGoodsTypeService {
private IGoodsTypeDao goodsTypeDao = new GoodsTypeDaoImpl();
//.......
@Override
//封裝的查詢資料的方法 根據sql語句查詢不同的資料
public List<GoodsType> getGoodsTypeByParent() {
List<GoodsType> allDatas = goodsTypeDao.getAllDatas();
System.out.println(allDatas);
List<GoodsType> arr = new ArrayList<>();
if (allDatas != null && allDatas.size() >= 1) {
for (GoodsType gt : allDatas) {
if (gt.getParent() == 0) {//從總的分類資料中做篩選,隻提取級别為零的分類資料
arr.add(gt);
}
}
return arr;
}
return null;
}
}
3.1.3 Dao
在 GoodsTypeDao類中定義getAllDatas 方法，操作資料庫查詢 tb_goods 表中的所有内容
public class GoodsTypeDaoImpl implements IGoodsTypeDao {
private QueryRunner runner = null;
//.......
@Override
public GoodsType findDataById(int id) {
String sql = "select *from tb_goods_type";
List<GoodsType> goodsTypes = queryGoodsBySql(sql, id + "");
if (goodsTypes.size() >= 1 && goodsTypes != null) {
return goodsTypes.get(0);
}
return null;
}
@Override
public List<GoodsType> getAllDatas() {
String sql = "select *from tb_goods_type";
return queryGoodsBySql(sql, null);
}
@Override
public List<GoodsType> queryGoodsBySql(String sql, Object... parms) {
List<GoodsType> query = null;
QueryRunner run = new QueryRunner(DBUtils.getDataSource());
try {
query = run.query(sql, parms, new BeanListHandler<>(GoodsType.class));
} catch (SQLException e) {
e.printStackTrace();
}
return query;
}
//........
}
3.2 前端
後端程式執行順利的話，傳回的響應結果可以使用 FireFox 浏覽器的自動 json 解析功能觀察到以下效果。
3.2.1:根據資料庫的資料動态改變導航欄
因為其他導航欄都是使用header頁面,是以隻需要改變header頁面就可以達到改變所有相關頁面的效果
$(document).ready(function () {
//擷取使用者登入狀态的請求
$.get("user.do?action=checkUserLogin", "", function (data) {
if (data.flag == true) {//登入
var temp = '歡迎回來,<a href="userAddress?flag=show" target="_blank" rel="external nofollow" id="a_top">'+data.data.username+'</a>' +
'<li>|</li>' +
'<a href="userservlet?method=logOut" target="_blank" rel="external nofollow" id="a_top">登出</a> ' +
'<li>|</li>' +
'<a href="getOrderList" target="_blank" rel="external nofollow" id="a_top">我的訂單</a> ' +
' <li>|</li> ' +
'<a href="userservlet?method=getAddress" target="_blank" rel="external nofollow" id="a_top">位址管理</a>' +
'<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="a_top">消息通知</a> ' +
'<a href="cartservlet?method=getCart" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="shorpcar">購物車</a> ';
$("#showuser").html(temp);
} else {
var temp = '<a href="login.html" target="_blank" rel="external nofollow" id="a_top">登入</a> ' +
'<li>|</li>' +
'<a href="register.html" target="_blank" rel="external nofollow" id="a_top">注冊</a> ' +
'<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="a_top">消息通知</a> ' +
'<a href="cartservlet?method=getCart" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="shorpcar">購物車</a> ';
$("#showuser").html(temp);
}
})
//擷取商品類别的
$.ajax({
url: "goodType.do?action=goodsTypeAjax",
type: "GET",
dataType: "json",
success: function (result) {
for (var i in result.data) {
//注意這裡的servlet對象為goods.do 點選該連結會跳轉到商品清單頁面,然後根據資料庫中的資料展示相應類别的商品
var a = $("<a href='goods.do?action=getGoodsTypeAjax&typeid=" + result.data[i].id + "'>" + result.data[i].name + "</a>");
$("#goodsType").append(a);
}
},
error: function () {
//alert("失敗");
}
})
})
4點選分類展示分類商品
4.1功能描述
GoodsServlet類的代碼如下
@WebServlet(value = "/goods.do")
public class GoodsServlet extends BaseServlet{
private ResultData resultData = new ResultData();
/**
* 轉發請求到商品清單頁面
* @param req
* @param resp
* @return
* @throws ServletException
* @throws IOException
*/
public String getGoodsTypeAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String typeId = req.getParameter("typeid");
return Constants.REDIRECT+"/goodsListByType.html?typeid="+typeId;
}
/**
* 通過前端頁面傳來的typeid 查詢對應資料并傳回其對應的json資料
* @param req
* @param resp
* @return
* @throws ServletException
* @throws IOException
*/
public String getGoodsList(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String typeId = req.getParameter("typeid");
IGoodsService service = new GoodsServiceImpl();
resultData.setFlag(false);
List<Goods> list = service.getGoodsByTypeId(typeId);
if (list != null && list.size() >= 1) {
resultData.setFlag(true);
resultData.setData(list);
}
String json = JSON.toJSONString(resultData);
System.out.println(json);
resp.setContentType("application/json;charset=utf-8");
return json;
}
}
GoodsService類代碼:
public class GoodsServiceImpl implements IGoodsService {
private IGoodsDao goodsDao = new GoodsDaoImpl();
//.......
public List<Goods> getGoodsByTypeId(String typeId) {
List<Goods> allDatas = null;
if (typeId == null) {
allDatas= goodsDao.getGoodDatas(10);//todo 如果沒有給分類 提供前十條商品資料
} else {
allDatas= goodsDao.getGoodsByTypeId(typeId);
}
return allDatas;
}
//........
}
GoodsDao類代碼
public class GoodsDaoImpl implements IGoodsDao {
//......
@Override
public List<Goods> getAllDatas() {
String sql = "select *from tb_goods where gstart=0 ";
return queryGoodsBySql(sql, null);
}
public List<Goods> queryGoodsBySql(String sql, Object... parms) {
List<Goods> query = null;
QueryRunner run = new QueryRunner(DBUtils.getDataSource());
try {
query = run.query(sql, parms, new BeanListHandler<>(Goods.class));
} catch (SQLException e) {
e.printStackTrace();
}
return query;
}
@Override
public List<Goods> getGoodDatas(int i) {
String sql = "select * from tb_goods where gstart=0 limit 0,?";
List<Goods> goods = queryGoodsBySql(sql, i);
return goods;
}
@Override
public List<Goods> getGoodsByTypeId(String typeId) {
String sql = "select * from tb_goods where gstart=0 and typeid=? ";
List<Goods> goods = queryGoodsBySql(sql, typeId);
return goods;
}
//.....
}
商品分類頁面加載商品資訊的函數
讀取後端傳來的json資料 加載商品對應的資訊
<script type="text/javascript">
$(document).ready(function () { //擷取使用者登入狀态的請求
let typeid = getParams("typeid");
$.get("goods.do?action=getGoodsList", "typeid=" + typeid, function (result) {
if (result.flag === true) {//登入
for (let i in result.data) {
let a = ' <div class="col-sm-3">\n' +
' <div class="thumbnail">\n' +
' <img src="/' + result.data[i].picture + '" width="180" height="180"\n' +
' alt="小米6"/>\n' +
' <div class="caption">\n' +
' <h4>商品名稱<a href="getGoodsById?id=' + result.data[i].name + '">' + result.data[i].name + '</a>\n' +
' </h4>\n' +
' <p>熱銷指數\n <img src="image/star_red.gif" alt="star"/>';
let imstr = "";
for (let j = 0; j < result.data[i].star; j++) {
imstr += ' <img src="image/star_red.gif" alt="star"/>'
}
a += imstr;
a += ' </p>\n' +
' <p>上架日期:' + result.data[i].pubdate + '</p>\n' +
' <p style="color:orange">價格:' + result.data[i].price + '</p>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n';
$("#showDiv").append(a)
}
}
})
})
</script>
ata[i].price + ‘
\n’ +
’ \n’ +
’ \n’ +
’ \n’;
$("#showDiv").append(a)
}
}
})
})
</script>