10_商品分类展示

最新推荐文章于 2022-02-26 19:10:51 发布

robona

最新推荐文章于 2022-02-26 19:10:51 发布

阅读量1.2k

点赞数

分类专栏： javaweb商城项目

本文链接：https://blog.csdn.net/qq_34598667/article/details/89022479

版权

javaweb商城项目专栏收录该内容

29 篇文章 7 订阅

订阅专栏

商品分类展示

需求设计步骤分析
步骤实现

1）需求设计步骤分析

设计

进入首页时显示分类信息
在这里插入图片描述

步骤分析

创建数据表环境
在IndexServlet上查询分类信息
实现service与dao的findAll方法

2）步骤实现

① 分类表

CREATE TABLE `category` (
  `cid` varchar(32) NOT NULL,
  `cname` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`cid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

② 分类实体

public class Category implements Serializable{
	private static final long serialVersionUID = 8552469714968114104L;
	private String cid;
	private String cname;
	//getter和setter方法略...
}

③ 创建Dao层和Service接口和实现类

在这里插入图片描述

④ 完成首页跳转

IndexServlet的映射路径为"/index/*"，修改web.xml中的< welcome-file-list >

<welcome-file-list>
  <welcome-file>/index.jsp</welcome-file>
</welcome-file-list>

在WebContent下新建index.jsp，重定向到/store/index/

<body>
	<%
		response.sendRedirect(request.getContextPath()+"/index/");
	%>
</body>

在IndexServlet中处理路径，重定向到首页，展示分类：

@WebServlet("/index/*")
public class IndexServlet extends HttpServlet{

	private static final long serialVersionUID = -387379765209282143L;
	//service层对象
	CategoryService categoryService=new CategoryServiceImpl();
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//得到URI
		String uri=request.getRequestURI();
		//处理各个方法抛出的异常
		try {
			if(uri.endsWith("/")) {
				index(request,response);
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			//抛出自定义异常
			throw new MyException();
		} 
	}
	/**
	 * 首页
	 * @param request
	 * @param response
	 * @throws IOException 
	 * @throws ServletException 
	 */
	private void index(HttpServletRequest request, HttpServletResponse response) throws Exception {
		//1、调用service查询所有的分类，返回值list
		List<Category> categoryList=categoryService.findAll();
		
		//2、将返回值放入request域中
		request.setAttribute("categoryList", categoryList);
		
		//请求转发
		request.getRequestDispatcher("/jsp/index.jsp").forward(request, response);
	}
	
}

⑤ 完成service层

CategoryService接口：

public interface CategoryService {
	/**
	 * 查询所有
	 * @return
	 */
	List<Category> findAll() throws Exception;
}

CategoryServiceImpl实现类：

public class CategoryServiceImpl implements CategoryService{
	//dao
	CategoryDao categoryDao=new CategoryDaoImpl();
	
	@Override
	public List<Category> findAll()  throws Exception{
		return categoryDao.findAll();
	}
}

⑥ 完成dao层

CategoryDao接口：

public interface CategoryDao {
	/**
	 * 查询所有
	 * @return
	 */
	List<Category> findAll()  throws Exception;
}

CategoryDaoImpl实现类：

public class CategoryDaoImpl implements CategoryDao{
	//QueryRunner
	private QueryRunner qr=new QueryRunner(DBUtil.getDataSource());

	@Override
	public List<Category> findAll() throws Exception {
		String sql="select * from category";
		return qr.query(sql, new BeanListHandler<>(Category.class));
	}
}

⑦ 使用静态导入的方式把logo区导入到各界面中

在jsp/constant/下新建一个head.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div class="container-fluid">
	<div class="col-md-4">
		<img src="${path}/img/20180824125427.png" />
	</div>
	<div class="col-md-5">
		<img src="${path}/img/header.png" />
	</div>
	<!-- 登录状态 -->
	<div class="col-md-3" style="padding-top: 20px">
		<ol class="list-inline">
			<c:if test="${empty user }">
				<li><a href="${path}/user/toLogin">登录</a></li>
				<li><a href="${path}/user/toRegister">注册</a></li>
			</c:if>
			<c:if test="${not empty user }">
							${user.username }:您好
							<li><a href="${path}/user/logout">退出</a></li>
				<li><a href="${path}/user/">我的订单</a></li>
			</c:if>
			<li><a href="cart.htm">购物车</a></li>
		</ol>
	</div>
</div>

<div class="container-fluid">
	<nav class="navbar navbar-inverse">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">首页</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<!-- 分类展示 -->
				<ul class="nav navbar-nav">
					<c:forEach items="${categoryList }" var="category">
						<li><a href="#">${category.cname }</a></li>
					</c:forEach>
					<!-- <li class="active"><a href="product_list.htm">手机数码<span class="sr-only">(current)</span></a></li>
								<li><a href="#">电脑办公</a></li>
								<li><a href="#">电脑办公</a></li>
								<li><a href="#">电脑办公</a></li> -->
				</ul>

				<form class="navbar-form navbar-right" role="search">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
					<button type="submit" class="btn btn-default">Submit</button>
				</form>

			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>
</div>

在需要展示的jsp中使用include标签静态导入：

<!-- logo展示 -->
<%@include file="constant/head.jsp" %>

注意：把其他需要替换的jsp中全部使用静态导入的方式引入该文件

⑧ 测试

进入首页
在这里插入图片描述
进入登录和注册界面，会发现在商品分类展示处没有分类展示，因为没有数据转发过来，需要使用Ajax在logo.jsp中动态加载。

3）使用Ajax动态展示展品分类

步骤分析：

编写一个CategoryServlet用来处理关于分类的请求
编写findAll方法用来查询所有—list通过json返回到页面上
在head.jsp加载成功之后发送一个ajax请求，用来展示分类

① 新建CategoryServlet，完成ajax路径的处理

其中要把findAll中查询到的list转为json格式发送带页面，需要导入json的jar包。

@WebServlet("/category/*")
public class CategoryServlet extends HttpServlet{
	
	/**
	 * 
	 */
	private static final long serialVersionUID = 3173523047984241611L;
	private CategoryService categoryService=new CategoryServiceImpl();
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//得到URI
		String uri=request.getRequestURI();
		//处理各个方法抛出的异常
		try {
			if(uri.endsWith("/findAll")) {
				findAll(request,response);
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			//抛出自定义异常
			throw new MyException();
		} 
	
	}
	private void findAll(HttpServletRequest request, HttpServletResponse response) throws Exception {
		//1、调用categoryService执行查询所有
		List<Category> list=categoryService.findAll();
		//2、将返回值转成json格式返回到页面
		String json=JsonUtil.list2json(list);
		
		//3、写回去
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println(json);
	}
	
}

② 在head.jsp页面添加ajax

<script>
	//页面加载之后完成
	$(function(){
		//发送Ajax请求
		$.ajax({
			type:"GET"
			,url:"${path}/category/findAll"
			,dataType:"json"
			,success:function(data){
				//data为后台穿过来的list的json格式数据
				//1、获取ul 给ul一个id为menuId
				var $ul=$("#menuId");
				//2、遍历数组
				$(data).each(function(){
					$ul.append($("<li><a href='#'>"+this.cname+"</a></li>"));
				});
			}
		}
		);
	});
</script>

③ 重启服务器测试：

在这里插入图片描述
首页，登录界面，和注册界面都使用include导入head.jsp。

robona

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
10_商品分类展示

商品分类展示需求设计步骤分析步骤实现1）需求设计步骤分析设计进入首页时显示分类信息步骤分析创建数据表环境在IndexServlet上查询分类信息实现service与dao的findAll方法2）步骤实现① 分类表CREATE TABLE `category` ( `cid` varchar(32) NOT NULL, `cname` varchar(2...
复制链接

扫一扫