JavaWeb项目实战-油画商城

整个项目都已经上传到github-mmgallery上，供有需要的读者使用，主要文件来自于csdn，区别是csdn中的项目数据存储在MySQL中，本项目数据存储在Xml文件中。课件和学习视频课程来自MK网 Java工程师2020第二阶段。

1.MVC架构模式

早期代码：显示与代码耦合，一个页码中既有html网页，也有Java代码，代码混乱且可读性差


    <%
    	int max=Integer.parseInt()
    %>

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 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


            
                
                    
                    
                        ${painting.pname}
                        
                            ${painting.description }

在实现分类预览功能中，在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文件）。



	预览

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

Java-WEB