JavaWeb - 小米商城：首页商品分类展示

1.功能描述

2.功能分析

分类展示功能在逻辑上并不复杂：每当需要加载 <header> 标签中的内容时，都会向后端提交一个 GET 请求来获取分类数据内容。后端在收到请求后查询数据库并以 json 形式返回展示内容。

查询商品分类内的功能需要面向数据库中的另一张表 tb_goods_type，为了区分不同类型的数据查询业务以及代码的维护性和扩展性。在开发时基于三层架构体系建立对应的GoodsTypeServlet 类、GoodsTypeService 接口和实现类、GoodsTypeDao 接口和实现类。

3.代码实现

3.1 后端

3.1.1 Servlet

在 GoodsTypeServlet类中定义查询所有线路分类内容的主体逻辑

@WebServlet("/goodsType.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> lists = service.getGoodTypeByParent();if (lists != null && lists.size() >= 1) {resultData.setFlag(true);resultData.setData(lists);}String json = JSON.toJSONString(resultData);System.out.println(json);//在响应中声明返回的是json格式字符resp.setContentType("application/json;charset=utf-8");return json;}/*** 根据商品类别返回所有商品列表json列表** @param req* @param resp* @return* @throws ServletException* @throws IOException*/public String getGoodsListByTypeId(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String typeid = req.getParameter("typeid");IGoodsService service = new GoodsServiceImpl();resultData.setFlag(false);List<Goods> goods = service.getGoodsById(typeid);if (goods != null && goods.size() >= 1) {resultData.setFlag(true);resultData.setData(goods);}String json = JSON.toJSONString(resultData);System.out.println(json);//在响应中声明返回的是json格式字符resp.setContentType("application/json;charset=utf-8");return json;}
}

3.1.2 Service

在 GoodsTypeService 类中定义 GoodsTypeDaoImpl() 方法，定义旅游线路分类内容的具体查询业务逻辑

/*** 商品分类业务层*/
public class GoodsTypeServiceImpl implements IGoodsTypeService {private IGoodsTypeDao goodsTypeDao=new GoodsTypeDaoImpl(); //.....@Overridepublic List<GoodsType> getGoodTypeByParent() {List<GoodsType> goodsTypes=new ArrayList<>();List<GoodsType> goodsTypes1=goodsTypeDao.getAllDatas();if (goodsTypes1!=null){for (GoodsType gt:goodsTypes1){if (gt.getParent()==0){//从总的分类数据中做筛选goodsTypes.add(gt);}}return goodsTypes;}return null;}
}

3.1.3 Dao

在 GoodsTypeDao 类中定义 getAllDatas() 方法，操作数据库查询 tb_goods_type 表中的所有内容

public class GoodsTypeDaoImpl implements IGoodsTypeDao {private QueryRunner queryRunner = null;public GoodsTypeDaoImpl() {queryRunner = new QueryRunner();}//..... @Overridepublic List<GoodsType> getAllDatas() {String sql = "select * from tb_goods_type ";return queryBySql(sql, null);}@Overridepublic List<GoodsType> queryBySql(String sql, Object... parms) {List<GoodsType> goodsTypes = null;QueryRunner qrun = new QueryRunner(DBUtils.getDataSource());try {goodsTypes = qrun.query(sql, parms, new BeanListHandler<>(GoodsType.class));} catch (SQLException e) {e.printStackTrace();}return goodsTypes;}
}

3.2 前端

后端程序执行顺利的话，返回的响应结果可以使用 FireFox 浏览器的自动 json 解析功能观察到以下效果。

前端在加载 <header> 内容时便向后端提交异步请求。在 header.html 的 <script> 标签中定义以下 jQuery 代码：

      //获取商品类别的$.ajax({url: "goodsType.do?action=goodsTypeAjax",type: "GET",dataType: "json",success: function (result) {for (var i in result.data) {var a = $("<a href='goodsType.do?action=getGoodsListByTypeId&typeid=" + result.data[i].id + "'>" + result.data[i].name + "</a>");$("#goodsType").append(a);}},error: function () {// alert("失败");}}

4.点击分类展示分类商品

4.1功能逻辑描述

点击分类a链接跳转到Servlet中重定向操作,将typeid传递到该页面;

该页面以Ajax方式请求Servlet获取Json数据, 并将对应的数据在前端显示

4.2代码实现

4.2.1 Servlet

@WebServlet("/goods.do")
public class GoodsServlet extends BaseServlet {private ResultData resultData = new ResultData();/*** 根据商品类别返回getGoodsListByType.html** @param req* @param resp* @return*/public String getGoodsListByTypeId(HttpServletRequest req, HttpServletResponse resp)  {String typeid = req.getParameter("typeid");return Constants.REDIRECT + "/getGoodsListByType.html?typeid="+typeid;}/*** 根据商品类别返回所有商品列表json列表** @param req* @param resp* @return*/public String getGoodsList(HttpServletRequest req, HttpServletResponse resp)  {String typeid = req.getParameter("typeid");IGoodsService service = new GoodsServiceImpl();resultData.setFlag(false);List<Goods> goods = service.getGoodsById(typeid);if (goods != null && goods.size() >= 1) {resultData.setFlag(true);resultData.setData(goods);}String json = JSON.toJSONString(resultData);System.out.println(json);//在响应中声明返回的是json格式字符resp.setContentType("application/json;charset=utf-8");return json;}
}

4.2.2 Service

/*** 商品业务层*/public class GoodsServiceImpl implements IGoodsService {private IGoodsDao goodsDao=new GoodsDaoImpl();//.....@Overridepublic List<Goods> getGoodsById(String typeid) {List<Goods> goods=null;if (typeid==null){goods=goodsDao.getGoodsDatas(10);//如果没有给分类  提供前10条商品数据}else {goods=goodsDao.getGoodsByTypeId(typeid);//如果有则根据typeid查询}return goods;}
}

4.2.3 Dao

public class GoodsDaoImpl implements IGoodsDao {private QueryRunner queryRunner = null;public GoodsDaoImpl() {queryRunner = new QueryRunner();}//....@Overridepublic List<Goods> getAllDatas() {String sql = "select * from tb_goods where gstate=0";return queryBySql(sql);}@Overridepublic List<Goods> queryBySql(String sql, Object... parms) {List<Goods> goods = null;QueryRunner qrun = new QueryRunner(DBUtils.getDataSource());try {goods = qrun.query(sql, parms, new BeanListHandler<>(Goods.class));} catch (SQLException e) {e.printStackTrace();}return goods;}/*** 根据数量查询数据* @param num* @return*/@Overridepublic List<Goods> getGoodsDatas(int num) {String sql = "select * from tb_goods where gstate=0 limit 0,?";return queryBySql(sql, num);}@Overridepublic List<Goods> getGoodsByTypeId(String typeid) {String sql = "select * from tb_goods where gstate=0 and typeid=?";return queryBySql(sql, typeid);}}

4.3 前端代码

getGoodsListByType.html

//....
<script type="text/javascript">$(document).ready(function () {var typeid = getParams("typeid");//获取用户登录状态的$.get("/goods.do?action=getGoodsList", "typeid=" + typeid, function (result) {if (result.flag === true) {//登录for (var i in result.data) {var temp = '<div class="col-sm-3">\n' +'                    <div class="thumbnail">' +'                        <img src="/' + result.data[i].picture + '" width="180" height="180"alt="小米6"/>' +'                        <div class="caption">' +'                            <h4>商品名称<a href="getGoodsById?id=' + result.data[i].id + '">' + result.data[i].name + '</a></h4>' +'<p>热销指数';var stTemp = "";for (var j = 0; j <= result.data[i].star; j++) {stTemp += '<img src="data:image/star_red.gif" alt="star"/>';}temp += stTemp;temp += '                            </p>' +'                            <p>上架日期:' + result.data[i].pubdate + '</p>' +'                            <p style="color:orange">价格:' + result.data[i].price + '</p>' +'                        </div>' +'                    </div>' +'                </div>';$("#dataDiv").append(temp);}}});});</script>//.....