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="data: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代码的实现，后续还需要很多时间去消化和理解，先暂时写出来。