JAVAWEB练习——后台商品管理系统，技术点提取（三层架构，数据库的内容显示到前端表格中，增删等操作）

一、页面展示

二、素材提供（页面前端素材）

链接：https://pan.baidu.com/s/1VmZbfghTrXcZt5N0Rzcbgw
提取码：s05w

三、项目目录浏览

四、技术点记录

1.学会使用三层架构

2.添加功能

@WebServlet("/AdminAddProductServlet")
public class AdminAddProductServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        //1.获取数据
        Map<String, String[]> properties = request.getParameterMap();
        //2.封装数据
         Product product = new Product();
        try {
            BeanUtils.populate(product,properties);
        } catch (IllegalAccessException | InvocationTargetException e) {
            e.printStackTrace();
        }
        //此位置Product已经封装完毕————将表单的数据封装完毕
        //手动设置表单中没有的数据
        //1）、private String pid;
        product.setPid(UUID.randomUUID().toString());
        //2）、private String pimage;
        product.setPimage("products/1/c_0033.jpg");
        //3）、private String pdate;//上架日期
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
        String pdate = format.format(new Date());
        product.setPdate(pdate);
        //4）、private int pflag;//商品是否下载 0代表未下架
        product.setPflag(0);
        
        //3.传递数据到service层
        AdminProductService service = new AdminProductService();
        try {
            service.addProduct(product);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        //跳转到列表页面
        response.sendRedirect(request.getContextPath()+"/AdminProductListServlet");
    }
}

项目技术点提取：前端页面所有提供的数据，存储在Map集合中

• Map<String, String[]> properties = request.getParameterMap();

并使用BeanUtils，将其进行封装

• BeanUtils.populate(product,properties);

并且我们设置一些固定值，如id，这些并不会出现在前端页面中，需要手动进行设置。

3.将数据库中的数据通过前端的表格进行展示

3.1后端技术点

@WebServlet("/AdminProductListServlet")
public class AdminProductListServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        AdminProductService service =new AdminProductService();
        List<Product> productList=null;
        try {
            productList =service.findAllProduct();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        request.setAttribute("productList",productList);
        request.getRequestDispatcher("/admin/product/list.jsp").forward(request, response);
    }
}

比较简单，我们只需要从dao层接受传过来的数据，并在controller层，用request放到域中即可。

3.2前端技术点

从后端传输过来的数据，我们需要放到前端的表格中。我们使用jstl中的ForEach即可。并且修改他的需要变动的值。

<c:forEach items="${productList}" var="pro" varStatus="vs">
	<tr>
		<td >${vs.count}</td>
		<td ><img width="40" height="45" src="${pageContext.request.contextPath}/${pro.pimage}"></td>
		<td >${pro.pname}</td>
		<td >${pro.shop_price}</td>
		<td >${pro.is_hot==1?"是":"否"}</td>
		<td ><a href="${ pageContext.request.contextPath }/AdminUpdateProductUI?pid=${pro.pid}">
		<img src="${pageContext.request.contextPath}/images/i_edit.gif">
		</a></td>
		<td >
	<a href="javascript:void(0)" onclick="delProduct('${pro.pid}')">
	<img src="${pageContext.request.contextPath}/images/i_del.gif "></a></td>
		</tr>
	</c:forEach>

为了查看方便，删去了一些属性，注意我们只需要保留表格的框架，然后动态的使用EL表达式去获取数据即可

4.删除功能

4.1后端技术

删除功能的后端比较简单，也是根据前端传过来的id值，去数据库进行删除。

@WebServlet("/AdminDelProductServlet")
public class AdminDelProductServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取需要删除的商品pid
        String pid = request.getParameter("pid");
        AdminProductService service = new AdminProductService();
        try {
            service.delProductByPid(pid);
        } catch (SQLException e) {
            e.printStackTrace();
        }

        response.sendRedirect(request.getContextPath()+"/AdminProductListServlet");
    }
}

4.2前端技术
前端有两个个人比较留意的地方，或者说薄弱的地方。第一个怎么传参数，你点击删除的商品，是不是确定是删除正确的。第二个，我们每次点删除，不会有锚记效应，也就是跳回到页面顶部。

传参数问题

我们在遍历数据库中的数据到表格中的时候，可以通过el表达式，获取到每一个商品的id，并且使用点击事件，将id传入到后端。

<td >
<a href="javascript:void(0)" onclick="delProduct('${pro.pid}')">
<img src="${pageContext.request.contextPath}/images/i_del.gif" ></a>
</td>

通过点击事件，转发请求到后端

function delProduct(pid) {
		var isDel = confirm("确定要删除吗？");
		if (isDel){
			//需要删除  get提交
location.href = "${pageContext.request.contextPath}/AdminDelProductServlet?pid="+pid;
	}
}

锚记效应消除

注意上面的代码

<td >
<a href="javascript:void(0)" onclick="delProduct('${pro.pid}')">
<img src="${pageContext.request.contextPath}/images/i_del.gif" ></a>
</td>

<a href="javascript:void(0)"，改行代码意思是进行终止。我们a标签先执行了点击事件。并且，我们将他的跳转功能使用了 ==javascript:void(0)==用以表示，我终止跳转。

5.数据回显

我们点击更新操作的时候，我们必须将原有的数据显示给用户，用户再进行修改，有些动态的数据，如下拉框的动态页面需要进行调整，

5.1后端技术点

@WebServlet("/AdminUpdateProductUI")
public class AdminUpdateProductUI extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获得要查询Product的pid
        String pid = request.getParameter("pid");
        //传递pid查询商品信息
        AdminProductService service = new AdminProductService();
        Product product =null;
        try {
            product = service.findProductByPid(pid);
        } catch (SQLException e) {
            e.printStackTrace();
        }

        //获得所有的商品类
        List<Category> categoryList=null;
        try {
            categoryList =service.findAllCategory();
        } catch (SQLException e) {
            e.printStackTrace();
        }

        request.setAttribute("categoryList",categoryList);
        request.setAttribute("product",product);
        request.getRequestDispatcher("/admin/product/edit.jsp").forward(request, response);
    }
}

后端的技术点比较简单，只需要根据用户id查询到商品的信息即可。以及商品种类的信息。是单独放在一张表中的。

5.2前端技术

前端获取后端提供的数据，只需要将表格中的数据用EL获取域中的商品product，并且使用product的各类属性即可。如${product.pname}等属性

<tr>
					<td >
						商品名称：
					</td>
					<td >
						<input type="text" name="pname" value="${product.pname}" />
					</td>
					<td >
						是否热门：
					</td>
					<td >
						<select name="is_hot" id="is_hot">
							<option value="1">是</option>
							<option value="0">否</option>
						</select>
					</td>
				</tr>
				<tr>
					<td >
						市场价格：
					</td>
					<td >
					<input type="text" name="market_price" value="${product.market_price}"/>
					</td>
					<td>
						商城价格：
					</td>
					<td >
						<input type="text" name="shop_price" value="${product.shop_price}" />
					</td>

其次，我们需要动态显示商品类别。

在不使用AJAX的情况下，我们将该数据回显。

用JavaScript和jQuery两种写法

<script type="text/javascript">
		//页面加载完毕后确定哪个option被选中
		window.onload =function () {
			//获得当前回显的product.pid
			var cid="${product.cid}";
			//获得所有的<select name="cid">下的option
			var options =document.getElementById("cid").getElementsByTagName("option");
			//比较每一个option的value与cid
			for (var i=0;i<options.length;i++){
				if (cid==options[i].value){
					options[i].selected =true;
				}
			}
		}
	//下面的是jquery写法	
		$(function () {
			//回显当前product的cid
			$("#cid option[value='${product.cid}']").prop("selected",true);
			//是否热门
			$("#is_hot option[value='${product.is_hot}']").prop("selected",true);
		});
	</script>