1：实现项目全局编码过滤器功能 2：实现登录过滤器功能 3：在商品列表上增加个“添加”按钮，打开一个页面，里面有表单（某个商品），单击添加功能，将商品信息进行添加后进入到商品展示列表展示添加商品后的页面，实现商品图片的上传功能。（扩充：单击按钮打开利用bootstrap创建的模态框，模态框中有个商品表单，单击添加，商品添加成功后回到商品展示列表中）

1. 实现项目全局编码过滤器功能：

在web.xml文件中配置过滤器：

<filter>
  <filter-name>EncodingFilter</filter-name>
  <filter-class>com.example.EncodingFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>EncodingFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

创建一个编码过滤器类EncodingFilter，实现Filter接口，在doFilter方法中设置编码为UTF-8：

public class EncodingFilter implements Filter {
  public void init(FilterConfig config) throws ServletException {}
  public void destroy() {}
 
  public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
    chain.doFilter(request, response);
  }
}

2. 实现登录过滤器功能：

在web.xml文件中配置过滤器：

<filter>
  <filter-name>LoginFilter</filter-name>
  <filter-class>com.example.LoginFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>LoginFilter</filter-name>
  <url-pattern>/admin/*</url-pattern>
</filter-mapping>

创建一个登录过滤器类LoginFilter，实现Filter接口，在doFilter方法中判断用户是否已经登录，如果已经登录则放行，否则重定向到登录页面：

public class LoginFilter implements Filter {
  public void init(FilterConfig config) throws ServletException {}
  public void destroy() {}
 
  public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
    HttpServletRequest req = (HttpServletRequest) request;
    HttpServletResponse resp = (HttpServletResponse) response;
 
    HttpSession session = req.getSession(false);
    if (session == null || session.getAttribute("user") == null) {
      resp.sendRedirect(req.getContextPath() + "/login.jsp");
      return;
    }
 
    chain.doFilter(request, response);
  }
}

3. 在商品列表上增加“添加”按钮，并实现商品图片上传功能：

在商品列表页面中增加一个“添加”按钮，点击按钮弹出一个模态框（利用Bootstrap创建），在模态框中有一个商品表单用于填写商品信息，并且可以上传商品图片。当用户点击“添加”按钮时，将商品信息和图片上传到服务器并保存到数据库中，然后重新加载商品列表页面，展示添加后的商品信息。

实现步骤：

1. 在商品列表页面中添加“添加”按钮，用于弹出模态框：

<button class="btn btn-primary" data-toggle="modal" data-target="#addProductModal">添加</button>

2. 创建一个模态框，用于填写商品信息和上传商品图片：

<div class="modal fade" id="addProductModal" tabindex="-1" role="dialog" aria-labelledby="addProductModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addProductModalLabel">添加商品</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="addProductForm" enctype="multipart/form-data">
          <div class="form-group">
            <label for="productName">商品名称</label>
            <input type="text" class="form-control" id="productName" name="productName">
          </div>
          <div class="form-group">
            <label for="productPrice">商品价格</label>
            <input type="text" class="form-control" id="productPrice" name="productPrice">
          </div>
          <div class="form-group">
            <label for="productImage">商品图片</label>
            <input type="file" class="form-control-file" id="productImage" name="productImage">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="addProductBtn">添加</button>
      </div>
    </div>
  </div>
</div>

3. 在客户端使用Ajax技术将商品信息和图片上传到服务器：

$('#addProductBtn').click(function() {
  var formData = new FormData($('#addProductForm')[0]);
  $.ajax({
    url: 'AddProductServlet',
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) {
      location.reload();
    },
    error: function() {
      alert('添加商品失败');
    }
  });
});

4. 在服务器端创建一个Servlet（AddProductServlet），用于接收并保存商品信息和图片：

public class AddProductServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;
 
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String productName = request.getParameter("productName");
    double productPrice = Double.parseDouble(request.getParameter("productPrice"));
    Part productImagePart = request.getPart("productImage");
    InputStream productImageInputStream = productImagePart.getInputStream();
 
    // 保存商品信息和图片到数据库中
    // ...
 
    response.getWriter().println("添加商品成功");
  }
}

5. 在商品列表页面中重新加载商品信息：

success: function(data) {
  location.reload();
},

这样就完成了在商品列表上增加“添加”按钮，并实现商品图片上传功能的需求。