JavaWeb项目实战-油画商城
整个项目都已经上传到github-mmgallery上，供有需要的读者使用，主要文件来自于csdn，区别是csdn中的项目数据存储在MySQL中，本项目数据存储在Xml文件中。课件和学习视频课程来自MK网 Java工程师2020第二阶段。
1.MVC架构模式
早期代码：显示与代码耦合，一个页码中既有html网页，也有Java代码，代码混乱且可读性差
<Ul>
<%
int max=Integer.parseInt()
%>
</Ul>
Model View Controller
显示与代码解耦，各司其职
- 模型Model：负责生产业务需要的数据，即具体的业务逻辑，功能类默认以**Service.java命名。
-
控制器是视图与模型的中介(粘合剂)
-
视图(View) 用于展示最终结果
MVC优点：
- 软件团队分工合作，成员各司其职
- 分层开发，显示与数据解耦，便于维护
- 组件可灵活替代，互不影响
2.项目代码结构
2.1 工程结构与开发规约
工程结构
包结构
MVC调用关系
2.2 JavaBean
一种Java中可重用组件，是一种Java类的格式要求，通常用于存储数据
格式要求：
- public类，并提供默认构造函数；
- 所有属性private私有化
- 属性通过getter与setter方法读写
3.实现思路
- 开发PaintingDao读取xml数据，实现分页操作；
- 开发PaintingService服务类，调用PaintingDao；
- 开发PaintingController控制器，调用PaintingService，同时分发请求，响应
- 重写index.html，利用jsp技术读取分页
4.编写
4.1 创建工程
本工程的数据以xml文件存储，而不是数据库
4.2 开发XmlDataSource 获取XML路径
Dao与XML的中介
4.3 分页思路
分页有两个类：XmlDataSource.java 和 PageModel.java 加一个JavaBean Painting.java。XmlDataSource.java读取XML，得到 存储Painting对象的List 的 data ，（使用了一个getRawData的静态方法）。PageModel获取 data 并
获取 page(页号) 和 rows(每页记录数)参数 得到 关键的 当前页面数据List pageData 。PaintingDao 是整合两个类形成一个数据接口，关键是一个分页函数pagination：
public PageModel pagination(int page, int rows) {
List<Painting> list = XmlDataSource.getRawData();
PageModel pageModel = new PageModel(list,page,rows);
return pageModel;
}
PaintingService重写 pagination 直接调用的Dao的分页函数，只是进行一定的参数判断，避免一些异常
public PageModel pagination(int page, int rows, String...category) {
if(rows == 0) {
throw new RuntimeException("无效的rows参数");
}
if(category.length == 0 || category[0] == null) {
return paintingDao.pagination(page,rows);
} else {
return paintingDao.pagination(Integer.parseInt(category[0]), page,rows);
}
}
再到 PaintingController.java中获取参数，提供默认值，获取 pageModel的对象，然后再req中设置参数并请求转发给 对应的 index.jsp页面
index.jsp使用EI和JSTL来获取 pageModel
<ul>
<c:forEach items="${pageModel.pageData}" var="painting">
<li>
<img src="${painting.preview}" class="img-li">
<div class="info">
<h3>${painting.pname}</h3>
<p>
${painting.description }
</p>
<div class="img-btn">
<div class="price"><fmt:formatNumber pattern="0.00" value="${painting.price}"></fmt:formatNumber></div>
<a href="#" class="cart">
<div class="btn">
<img src="image/cart.svg">
</div>
</a>
</div>
</div>
</li>
</c:forEach>
</ul>
在实现分类预览功能中，在PaintingDao中重写了pagination()，并添加category参数，对其进行分类，并在PaintingService中利用可变参数来返回数据：
public PageModel pagination(int page, int rows, String...category) {
if(rows == 0) {
throw new RuntimeException("无效的rows参数");
}
if(category.length == 0 || category[0] == null) {
return paintingDao.pagination(page,rows);
} else {
return paintingDao.pagination(Integer.parseInt(category[0]), page,rows);
}
}
4.4 后台管理平台结构
三栏布局，提供油画列表展示，预览，修改，删除等操作，新增作品提供文件上传功能
以 management.html做模板，然后右侧展示内容使用 请求。
对应的编写一个 ManagementController.java来统一管理各项请求，利用method来分配到各个具体请求处理方法中：
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8"); //为了doPostd调用 doGet
resp.setContentType("text/html;charset=utf-8");
String method = req.getParameter("method");
if(method.equals("list")){
this.list(req,resp);
} else if(method.equals("delete")) {
this.delete(req,resp);
} else if(method.equals("show_create")){
this.show_createPage(req,resp);
} else if(method.equals("create")){
this.create(req,resp);
} else if(method.equals("show_update")) {
this.showUpdatePage(req, resp);
} else if (method.equals("update")) {
this.update(req,resp);
}
}
/**
* 分页展示
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
private void list(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String p = req.getParameter("p");
String r = req.getParameter("r");
if(p == null) {
p = "1";
}
if(r == null) {
r = "6";
}
PageModel pageModel = paintingService.pagination(Integer.parseInt(p),Integer.parseInt(r));
req.setAttribute("pageModel", pageModel);
req.getRequestDispatcher("/WEB-INF/jsp/list.jsp").forward(req,resp);
}
BTW：IDEA热部署对于HTML与JAVA都可以的，只要设置两点：
- IDEA界面右上角 Tomcat 下拉 找到Edited Configuration，将其中的服务器 Server板块的 On frame deativation设置为 Update classes and resource
- 处于Debug模式进行调试，这样就是热启动了。
在执行预览功能的时候，使用了SweetAlert2对话框js组件（github上的源代码需要利用node.js编译成最终可使用的js文件）。
<script type="text/javascript">
//对话框显示预览图
function showPreview(previewObj){
var preview = $(previewObj).attr("data-preview");
var pname = $(previewObj).attr("data-pname");
Swal.fire({
title: pname,
html: "<img src='" + preview + "' style='width:361px;height:240px'>",
showCloseButton: true,
showConfirmButton: true
})
}
</script>
<td>
<a class="oplink" data-preview="${painting.preview}" data-pname="${painting.pname }" href="javascript:void(0)" onclick="showPreview(this)">预览</a>
</td>
4.4.3 处理文件上传
- 利用Apache Commons FileUpload组件实现上传功能
- 封装可重用的js脚本解决表单校验问题
文件上传表单：
- form表单method="post"
- form表单enctype="multipart/form-data"
- form表单持有file类型input进行文件选择
文件上传之后，特别是表单 form 中设置 enctype="multopart/form-data"之后与标准的表单post请求是不同的。因此直接用req.getParameter()取数据都是null，得不到数据的，因此需要Apache Commons FileUpload组件。
在这个过程中，逻辑是 从前端到后端，从Controller到XmlDataSource，在ManagementController.java中的create方法如下：
private void create(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//文件上传时的数据处理与标准表单完全不同
//1.初始化FileUpload组件
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload sf = new ServletFileUpload(factory);
//2.遍历所有表单项FileItem
try {
List<FileItem> formData = sf.parseRequest(req);
Painting painting = new Painting();
for(FileItem fi:formData) {
if (fi.isFormField()) {
System.out.println("普通输入项：" + fi.getFieldName() + ": " + fi.getString("UTF-8"));
switch(fi.getFieldName()){
case "pname":
painting.setPname(fi.getString("UTF-8"));
break;
case "category":
painting.setCategory(Integer.parseInt(fi.getString("UTF-8")));
break;
case "price":
painting.setPrice(Integer.parseInt(fi.getString("UTF-8")));
break;
case "description":
painting.setDescription(fi.getString("UTF-8"));
break;
default:
break;
}
} else {
System.out.println("文件上传项:" + fi.getFieldName());
//3.文件保存到服务器目录中
String path = req.getServletContext().getRealPath("/upload");
System.out.println("上传文件目录:" + path);
String fileName = UUID.randomUUID().toString();
String suffix = fi.getName().substring(fi.getName().lastIndexOf("."));
fi.write(new File(path,fileName + suffix));
painting.setPreview("upload/" + fileName + suffix);
}
}
paintingService.create(painting);//新增功能
//这里用响应重定向是因为 这里的 create与list界面没有强关系，只是一个需要的展示页面
//前面使用 请求转发，是因为resp里面的数据会直接发送到对应的页面上显示。
resp.sendRedirect("/mmgallery_war_exploded/management?method=list");
} catch (FileUploadException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
4.4.6 更新表单
首先得要回填数据，保存数据在 新增页面的状态，在此基础上进行修改
- 修改与新增的最大不同是在修改前要加载原有数据
- 在修改页面设置hidden隐藏域保存id编号，随表单提交
- 对XML更新时，先按id获取原始记录，在此基础上覆盖更新
利用id来先回填数据，后面再修改，略
4.4.7 删除表单
public static void delete(Integer id){
SAXReader reader = new SAXReader();
Writer writer = null;
try {
Document document = reader.read(dataFile);
List<Node> nodes = document.selectNodes("/root/painting[@id=" + id + "]");
if(nodes.size() == 0) {
throw new RuntimeException("id=" + id + "编号油画不存在");
}
Element p = (Element)nodes.get(0);
// 删除操作
p.getParent().remove(p);
writer = new OutputStreamWriter(new FileOutputStream(dataFile),"UTF-8");
document.write(writer);
} catch (Exception e) {
e.printStackTrace();
} finally {
if(writer != null) {
try {
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
reload();
}
}
。。。。略
5.总结
暂时总结：过年期间断断续续花了可能有10多天的时间跟着视频一步一步把整个项目的所有功能写完，算是过了一遍Java-Web中的 MVC架构的实现。如何将请求传递到后台，再将后天处理的返回到前端jsp中。而且里面还有大量关于JS代码的实现，后续还需要很多时间去消化和理解，先暂时写出来。
