Java Web应用开发课程大作业（电商品牌管理系统）

1 需求分析

随着电子信息行业的不断发展，网络通信以及信息技术在人类生活中的普及，利用计算机技术、网络通信技术和Internet实现商务活动的国际化、信息化，已成为各国商务发展的一大趋势, 传统模式的购物已经逐渐被方便快捷的网络购物所取代，电子商务正是为了适应市场需求而蓬勃发展起来，网上购物也随之很快成为一种时尚的购物方式，并为广大网民所接受，随着近年来电子商务的不断发展，大大小小的网络商城都逐渐涌现出来，比较成功的案例有:苏宁易购、淘宝网、卓越网、当当网等。本大作业将以苏宁易购作为参考，进行小型电子商务网站品牌管理的开发。本系统拟在Windows 系统下采取基于JSP技术，以IDEA为开发平台，Mysq8.0为后台数据库，并在软件开发过程中使用ajax、json、cookie等技术。在结构和功能上，系统主要是实现了对商品品牌信息的增加、删除、查询、修改、批量删除、分页查询、条件查询等功能，并且会在开发过程中与指导老师及时进行及时的沟通，使系统更加完善。

功能1：用户登录：输入管理员的账号、密码，判断是否在数据库中有此信息，如果有登录则成功，否则登陆失败。

功能2：用户注册：输入需要注册管理员的账号、密码，判断是否在数据库中有此信息，如果没有则注册成功，否则注册失败。

功能3：查询所有：显示所有电商品牌的信息，包括品牌名称、企业名称、排序、当前状态等。

功能4：新增品牌：新增一个电商品牌的信息，包括品牌名称、企业名称、排序、当前状态等。

功能5：修改品牌：修改一个电商品牌的信息，包括品牌名称、企业名称、排序、当前状态等。

功能6：删除品牌：删除一个电商品牌的信息，包括品牌名称、企业名称、排序、当前状态等。

功能7：批量删除：删除多个电商品牌的信息，包括品牌名称、企业名称、排序、当前状态等。

功能8：分页查询：按页数查询电商品牌信息，可以调整每一页显示的品牌个数。

功能9：条件查询：根据当前状态、商品名称、企业名称查询品牌信息，支持多条件同时查询。

2 概要设计

2.1系统功能概述

管理员需要进行登录或注册后才能看到品牌信息进行管理，主要可以实现的操作是，增加品牌信息、删除品牌信息、查询品牌信息、修改品牌信息、批量删除品牌信息、分页查询品牌信息、通过特定信息进行对品牌信息的条件查询。系统功能如下图2.1所示

 

 图2.1 电商品牌管理系统

2.2工程结构设计

工程结构包括一个主目录src，其中包括Java文件夹，里面存放Java代码，resources文件夹存放资源文件，webapp文件夹石Web项目核心目录，target文件夹是测试目录。Maven Web开发中的项目结构如下图2.1所示

 

 图2.2程序目录结构

2.3Filter设计

我希望实现的效果是用户如果登陆过了就跳转到品牌数据展示的页面，如果没有登陆就跳转到登陆页面让用户进行登陆，要实现这个效果需要在每一个资源中都写上这段逻辑，而像这种通用的操作，我们就可以放在过滤器中实现。进行Filter开发分成以下三步实现：

（1）定义类，实现 Filter接口，并重写其所有方法。

（2）配置Filter拦截资源的路径：在类上定义@WebFilter注解。而注解的value属性值/*表示拦截所有的资源。

（3）在doFilter方法判断中访问资源路径是否和登录注册相关，如果是则使用chain.doFilter(request,response);放行。

2.4代码优化设计

1. JavaScript代码简化：使用Vue框架。Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。Vue使用总共分为三步，第一步是新建HTML页面，引入Vue.js文件，第二步是在JS代码区域，创建Vue核心对象，进行数据绑定，第三步是编写视图。
2. Servlet代码优化：Web层的Servlet 个数太多了，不利于管理和编写。优化方向是一个模块只定义一个Servlet，而每一个功能只需要在该Servlet中定义对应的方法。具体方案是定义一个通用的Servlet类BaseServlet，在定义其他的Servlet是不需要继承HttpServlet，而继承我们定义的BaseServlet。在BaseServlet中调用具体Servlet（如BrandServlet）中的对应方法。在发送请求时，请求资源的二级路径（如/brandServlet/selectAll）和需要调用的方法名保持相同。

3 运行环境、开发工具

3.1 运行环境

（1）硬件环境：PC机，内存16G。

（2）软件环境：操作系统：windows11。

3.2 开发工具

（1）开发环境：Idea Ultimate Edition 2021.3.3。

（2）数据库：MySQL8.0.26。

（3）编程语言：Java、JSP。

4 数据库设计

(1)tb_user表

tb_user表用来存储用户信息，包括账号和密码，结构如下表4.1所示：

表4.1  tb_user（用户表）

列名	类型	描述
id	int	id号，唯一，主键
username	varchar(20)	用户名称
password	varchar(20)	用户密码

（2）tb_brand表

tb_brand表用来存储品牌信息，包括品牌名称、企业名称、排序字段、描述信息、状态，结构如下表4.2所示：

表4.2  tb_brand（品牌表）

列名	类型	描述
id	int	id号，唯一，主键
brand_name	varchar(20)	品牌名称
company_name	varchar(20)	企业名称
ordered	int	排序字段
description	varchar(100)	描述信息
status	int	状态：0：禁用 1：启用

5 系统功能

5.1 用户登录功能

(1) 前端login.jsp页面加载完成后，通过表单发送请求和数据给Web层的LoginServlet

(2) 在LoginServlet中接收请求和数据(用户名和密码)

(3) LoginServlet接收到请求和数据后，调用Service层完成根据用户名和密码查询用户对象

(4) 在Service层需要编写UserService类，在类中实现login方法，方法中调用Dao层的UserMapper

(5) 在UserMapper接口中，声明一个根据用户名和密码查询用户信息的方法

(6) Dao层把数据查询出来以后，将返回数据封装到User对象，将对象交给Service层

(7) Service层将数据返回给Web层

(8) Web层获取到User对象后，判断User对象，如果为Null,则将错误信息响应给登录页面，如果不为Null，则跳转到列表页面，并把当前登录用户的信息存入Session携带到列表页面

该功能截图如图5.1所示。具体代码如下：

图5.1 用户登录页面 

 <form action="/brand-case/loginServlet" method="post" id="form">
        <h1 id="loginMsg">LOGIN IN</h1>
        <div id="errorMsg">${login_msg} ${register_msg}</div>
        <p>Username:<input id="username" name="username" value="${cookie.username.value}" type="text"></p>

        <p>Password:<input id="password" name="password" value="${cookie.password.value}" type="password"></p>
        <p>Remember:<input id="remember" name="remember" value="1" type="checkbox"></p>
        <div id="subDiv">
            <input type="submit" class="button" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.jsp">没有账号？</a>
        </div>
    </form>

Servlet中代码如下：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String remember = request.getParameter("remember");
        User user = service.login(username, password);

5.2 查询所有功能

(1) 前端brand.html页面加载完成后，通过表单发送异步请求给Web层的BrandServlet

(2) BrandServlet接收到请求后，调用Service层完成查询所有功能

(3) 在Service层需要编写BrandServiceImpl类，在类中实现List < Brand > selectAll()方法，方法中调用Dao层的BrandMapper。编写BrandService接口，声明查询所有的List < Brand > selectAll()方法

(4) 在BrandMapper接口中，声明一个查询所有的方法

(5) Dao层把数据查询出来以后，将返回数据封装到Brand对象，将对象交给Service层

(6) Service层将数据返回给Web层

(7) Web层获取到Brand对象后，将数据转为JSON，响应JSON数据

(8) 前端brand.html获取列表数据，展示获取的数据

该功能截图如图5.2所示。

 

图5.2 查询所有功能 

Servlet中代码如下：

 public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Brand> brands = brandService.selectAll();
        String jsonString = JSON.toJSONString(brands);
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

5.3 新增品牌功能

(1) 前端brand.html页面，新增品牌窗口点击提交按钮，发送ajax请求，通过表单发送请求和数据给Web层的BrandServlet

(2) BrandServlet接收到请求后，调用Service层完成新增品牌功能

(3) 在Service层BrandServiceImpl类中实现void add(brand)方法，方法中调用Dao层的BrandMapper。编写BrandService接口，声明新增品牌的add(brand)方法

(4) 在BrandMapper接口中，声明一个新增品牌的方法

(5) Dao层把新增数据添加以后，将返回数据封装到Brand对象，将对象交给Service层

(6) Service层将数据返回给Web层

(7) Web层获取到Brand对象后，将数据转为JSON，响应JSON数据

(8) 前端brand.html获取数据，判断是否添加成功，关闭窗口，重新加载数据

该功能截图如图5.3所示。

 图5.3 新增品牌功能

 Servlet中代码如下：

 public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        BufferedReader br = request.getReader();
        String params = br.readLine();
        Brand brand = JSON.parseObject(params, Brand.class);
        brandService.add(brand);
        response.getWriter().write("success");
    }

5.4 修改品牌功能

(1) 前端brand.html页面，修改品牌窗口点击提交按钮，发送ajax请求，通过表单发送请求和数据给Web层的BrandServlet

(2) BrandServlet接收到请求后，调用Service层完成修改品牌功能

(3) 在Service层BrandServiceImpl类中实现void updateById(brand)方法，方法中调用Dao层的BrandMapper。编写BrandService接口，声明修改品牌的updateById(brand)方法

(4) 在BrandMapper接口中，声明一个修改品牌的方法

(5) Dao层把数据修改以后，将返回数据封装到Brand对象，将对象交给Service层

(6) Service层将数据返回给Web层

(7) Web层获取到Brand对象后，将数据转为JSON，响应JSON数据

(8) 前端brand.html获取数据，判断是否修改成功，关闭修改品牌窗口，重新加载数据

该功能截图如图5.4所示。

图5.4 修改品牌功能 

Servlet中代码如下： 

public void updateById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串
        Brand brand = JSON.parseObject(params, Brand.class);
        brandService.updateById(brand);
        response.getWriter().write("success");
    }

5.5 删除品牌功能

(1) 前端brand.html页面，点击删除按钮，发送ajax请求，通过表单发送请求和数据给Web层的BrandServlet

(2) BrandServlet接收到请求后，调用Service层完成删除品牌功能

(3) 在Service层BrandServiceImpl类中实现void deleteById(id)方法，方法中调用Dao层的BrandMapper。编写BrandService接口，声明删除品牌的deleteById(brand)方法

(4) 在BrandMapper接口中，声明一个删除品牌的方法

(5) Dao层把数据删除以后，将返回数据封装到Brand对象，将对象交给Service层

(6) Service层将数据返回给Web层

(7) Web层获取到Brand对象后，将数据转为JSON，响应JSON数据

(8) 前端brand.html获取数据，判断是否删除成功，重新加载数据

该功能截图如图5.5所示。

 图5.5 删除品牌功能

Servlet中代码如下： 

public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        BufferedReader br = request.getReader();
        String params = br.readLine();
        int id = JSON.parseObject(params,int.class);
        brandService.deleteById(id);
        response.getWriter().write("success");
    }

5.6 批量删除功能

(1) 前端brand.html页面，点击批量删除按钮，发送ajax请求，携带被选中的id数组给Web层的BrandServlet

(2) BrandServlet接收到请求后，调用Service层完成批量删除功能

(3) 在Service层BrandServiceImpl类中实现void deleteByIds(int[] ids)方法，方法中调用Dao层的BrandMapper。编写BrandService接口，声明批量删除的deleteByIds(ids)方法

(4) 在BrandMapper接口中，声明一个批量删除的方法

(5) Dao层把数据删除以后，将返回数据封装到Brand对象，将对象交给Service层

(6) Service层将数据返回给Web层

(7) Web层获取到Brand对象后，将数据转为JSON，响应JSON数据

(8) 前端brand.html获取数据，判断是否删除成功，重新加载数据

该功能截图如图5.6所示。

 图5.6 批量删除功能

 Servlet中代码如下：

 public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        BufferedReader br = request.getReader();
        String params = br.readLine();
        int[] ids = JSON.parseObject(params, int[].class);
        brandService.deleteByIds(ids);
        response.getWriter().write("success");
    }

5.7 分页查询功能

(1) 前端brand.html页面加载完成后，发送ajax异步请求，将当前页码和每页显示条数参数给Web层的BrandServlet

(2) BrandServlet接收到参数后，调用Service层完成分页查询功能

(3) 在Service层BrandServiceImpl类中实现PageBean < Brand > selectByPage(int currentPage, int pageSize)方法，方法中调用Dao层的BrandMapper。编写BrandService接口，声明分页查询的selectByPage(int currentPage, int pageSize)方法

(4) 在BrandMapper接口中，声明一个分页查询的方法

(5) Dao层把数据查询以后，将返回数据封装到PageBean对象，将对象交给Service层

(6) Service层将数据返回给Web层

(7) Web层获取到PageBean对象后，将数据转为JSON，响应JSON数据

(8) 前端brand.html获取数据，重新加载数据，将数据设置到模型上

该功能截图如图5.7所示。

图5.7 分页查询功能 

Servlet中代码如下：

public void selectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 url?currentPage=1&pageSize=5
        String _currentPage = request.getParameter("currentPage");
        String _pageSize = request.getParameter("pageSize");
        int currentPage = Integer.parseInt(_currentPage);
        int pageSize = Integer.parseInt(_pageSize);
        PageBean<Brand> pageBean = brandService.selectByPage(currentPage, pageSize);
        String jsonString = JSON.toJSONString(pageBean);
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

5.8 条件查询功能

(1) 前端brand.html页面绑定查询条件对象模型，点击查询按钮，发送ajax异步请求，将当前查询条件参数给Web层的BrandServlet

(2) BrandServlet接收到参数后，调用Service层完成条件查询功能

(3) 在Service层BrandServiceImpl类中实现PageBean selectByPageAndCondition(int currentPage, int pageSize, Brand brand)方法，方法中调用Dao层的BrandMapper。编写BrandService接口，声明分页查询的PageBean selectByPageAndCondition(int currentPage, int pageSize, Brand brand)方法

(4) 在BrandMapper接口中，声明一个条件查询的方法

(5) Dao层把数据查询以后，将返回数据封装到PageBean对象，将对象交给Service层

(6) Service层将数据返回给Web层

(7) Web层获取到PageBean对象后，将数据转为JSON，响应JSON数据

(8) 前端brand.html获取数据，重新加载数据，将数据设置到模型上

该功能截图如图5.8所示。

 

图5.8 条件查询功能 

Servlet中代码如下：

public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 url?currentPage=1&pageSize=5
        String _currentPage = request.getParameter("currentPage");
        String _pageSize = request.getParameter("pageSize");
        int currentPage = Integer.parseInt(_currentPage);
        int pageSize = Integer.parseInt(_pageSize);
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串
        Brand brand = JSON.parseObject(params, Brand.class);
        PageBean<Brand> pageBean = brandService.selectByPageAndCondition(currentPage,pageSize,brand);
        String jsonString = JSON.toJSONString(pageBean);
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

6 调试分析

问题1：网页报404错误

解决：这是页面不存在错误，要仔细核查显示的网页是否存在（在运行的浏览器地址框中仔细查看当前路径，核实该路径是否正确、是否有路径错误、当前网页名字名字错误、是否使用了相对路径导致跳转出错等问题）。

问题2：Servlet里使用getParameter得到乱码

解决：在所有执行的方法最前面添加request.setCharacterEncoding(“utf-8”);
respose.setCharacterEncoding(“UTF-8”);即可使getParameter得到的参数不会乱码。

问题3：Navicat链接数据库报2003-Can’t connect to MySql server on localhost ‘13308’错误

解决：右键点击此次电脑选择管理，在服务和应用程序中选择服务，启动MySql80服务。

7 系统测试

7.1 增加品牌功能测试

增加前所有品牌如图7.1所示，增加品牌名称为华硕天选、企业名称为华硕电脑股份有限公司、排序为30、备注为“华硕品质坚如磐石”、状态为启用的的品牌，如图7.2所示。提交后，所有品牌如图7.3所示。对比图7.1和图7.3，可以发现添加已经成功。证明增加品牌功能正常。

图7.1 增加前所有品牌 

 图7.2 增加品牌信息

 图7.3 增加后所有品牌

7.2 批量删除功能测试

批量删除前所有品牌如图7.4所示。删除品牌名称为三只松鼠、格力、小米的品牌，如图7.5出现删除确认，确定后，所有品牌如图7.6所示。对比图7.4和图7.6可以发现，确实删除了所选品牌。证明批量删除功能正常。

 

 图7.4 删除前所有品牌

 图7.5 删除确认

图7.6 删除后所有学生 

7.3 条件查询功能测试

进行条件查询前所有品牌如图7.7所示。查询企业名称为阿里巴巴的品牌，如图7.8进行查询，查询后，所有品牌如图7.9所示。对比图7.7和图7.9可以发现，确实查询到了所需查找的品牌。证明条件查询功能正常。

 

图7.7 查询前所有品牌 

图7.8 查询阿里巴巴 

图7.9查询后所有品牌 

7.4 修改功能测试

修改前华为品牌信息如图7.10所示。修改华为品牌排序为1，状态修改为禁用，修改过程如图7.11所示，提交后，华为品牌信息如图7.12所示。对比图7.10和图7.12可以发现，确实修改了华为品牌的信息。证明修改功能正常。

图7.10 修改前华为信息 

 

 图7.11 修改华为信息

图7.12 修改后华为信息 

8 心得体会

从开始这次Java Web大作业到完成这次大作业一共经历了两周时间。在这两周时间里，一边写程序一边学习，晚上基本都学到半夜，但是当程序功能一点一点距离自己的预期时，就会觉得所有的付出都值了，学到了很多东西，其中包括：知道了如何创建和使用一个servlet,首先要继承HttpServlet,并重写service方法，以及相关的配置和需要添加的依赖、了解到了两种管理技术，包括客户端状态管理技术(cookie)和服务器端状态管理技术(session)，cookie主要时用于保存客户端状态的计数，比如常用来统计用户访问量多少次servlet，session是用于保护每个用户的专用信息，比如用户登录时，获取用户的名字、密码，保存密码以及访问其他程序时的一个有效期、了解了一些HTTP协议的相关知识，首先就是HTTP协议的特点：建立连接，获取响应结果，关闭连接，其次就是了解了它的数据包格式(请求数据包、响应数据包)、请求方式(get、post)以及它的运行过程、学习了jsp的内容，它可以让数据的处理和数据的展示进行分离，里面也包含html,但还可以嵌套一些Java语言，嵌套Java相关内容可以使用el表达式实现、jstl标签使用，还可以直接用<% %>在中间添加Java语句实现、了解了过滤器和监听器的一点知识，分别了解了其配置及其执行过程，对相关知识点有了一个初步的认识、学习到了用MyBatis框架来简化JDBC代码。在开发时遇到让我印象最深的一个问题就是，Web 层的 Servlet 个数太多了，不利于管理和编写，我在网上翻看了很多博客，得到解决办法：一个模块只定义一个 servlet，而每一个功能只需要在该 servlet 中定义对应的方法。为了做到通用，定义一个通用的servlet类BaseServlet，在定义其他的servlet是不需要继承 HttpServlet，而继承我们定义的BaseServlet。在BaseServlet 中调用具体 servlet（如BrandServlet）中的对应方法。经过与指导老师沟通，发现在系统中还有一些不足，如需要先验证品牌的相关证件后，才能进行添加操作。比如在添加品牌时，需要先查看营业执照是否合格，合格后添加，不合格给出提示信息。由于时间原因，本次大作业只做了电商品牌管理的部分，待时间充裕后，会着手实现电商后台完整的系统。通过这次大作业，发现最根本的就是对数据的增删改查的基本操作，学到后面，所运用到的方法也越来越多，但核心的方面并没有改变，通过不断地练习，对数据的增删改查操作也比较熟练了，对一个网页的完成步骤也形成了一些自己的想法。

参考文献

[1]耿祥义, 张跃平. JSP实用教程（第4版）. 清华大学出版社, 2020.

[2]刘继承等. Java 8程序设计及实验. 清华大学出版社, 2018.

[3]林龙，刘华贞. JSP+Servlet+Tomcat应用开发从零开始学（第2版）. 清华大学出版社,2019.

[4]马建红, 李学相, 韩颖, 王瑞娟, 张晗.JSP应用与开发技术(第3版). 清华大学出版社,2018.