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 {
Http
ServletRequest req = (Http
ServletRequest) request;
Http
ServletResponse resp = (Http
ServletResponse) 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">×</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: 'AddProduct
Servlet',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data) {
location.reload();
},
error: function() {
alert('
添加商品失败');
}
});
});
```
4. 在服务器端创建一个
Servlet（AddProduct
Servlet），用于接收并保存商品信息和图片：
```
public class AddProduct
Servlet extends Http
Servlet {
private static final long serialVersionUID = 1L;
protected void doPost(Http
ServletRequest request, Http
ServletResponse 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();
},
```
这样就完成了在商品列表上增加“
添加”
按钮，并实现商品图片上传功能的需求。
本文介绍了一个简单的JavaScript按钮点击事件处理程序。当用户点击按钮时，页面将导航到特定的Servlet来展示任务详情。
扫一扫
675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
