项目心得

Posted 2020-11-01

前言

前几天因为要参加一个比赛，一个老师让我给一个网站写后台，由于ssm还没学完，只能用jsp+servlet写，但由于种种原因，项目夭折了，但收获还是有不少，下面就总结下这个半成品所用到的知识点及我在做这个项目中时产生的一些想法。

知识点：

1：项目前端使用bootstrap框架
2：后台用jsp+servlet
3：数据库采用mysql(会使用数据库连接池C3P0)
4：项目结构使用MVC的开发模式，
Model：模型层，负责封装数据和进行业务操作
View：视图层，主要指和用户交互的界面
Controller：控制层，控制整个系统处理的流程
5：实现的技能点

1. 将文件上传到服务器
   1) 前台表单的请求方式设置为 Post请求
   2) 使用file表单域上传文件
   3) 编码方式设置成以二进制形式传输数据

代码清单

//添加课程
    public void addCourseMessage(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        //把上传的文件存放到项目下的upload文件夹里面，而上面的代码是获取upload在项目下的路径。
        String savePath = this.getServletContext().getRealPath("upload");
        System.out.println(savePath);
        File file = new File(savePath);

        List<String> paths = new ArrayList<>();
        if (!file.exists() && !file.isDirectory()) {
            file.mkdir(); //创建指定路径名称对应的目录
        }

        //创建FileItem对象的工厂
        DiskFileItemFactory factory = new DiskFileItemFactory();
        // ServletFileUpload 负责处理上传的文件数据，并将表单中每个输入项封装成一个FileItem 对象中
        ServletFileUpload upload = new ServletFileUpload(factory);
        upload.setHeaderEncoding("UTF-8");
        if (!ServletFileUpload.isMultipartContent(request)) {
            return;
        }

        List<FileItem> list = null;
        try {
            list = upload.parseRequest(request);
        } catch (FileUploadException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        List<String> values = new ArrayList<>();

        for (FileItem item : list) {
            if (item.isFormField()) {
                String name = item.getFieldName();
                //解决普通输入项的数据的中文乱码问题
                String value = item.getString("UTF-8");

                values.add(value);
            } else {
                String filename = item.getName();
                System.out.println(filename);
                if (filename == null || filename.trim().equals("")) {
                    continue;
                }

                filename = filename.substring(filename.lastIndexOf("\\") + 1);
                //获取item中的上传文件的输入流
                InputStream in = item.getInputStream();
                //创建一个文件输出流
                FileOutputStream out = new FileOutputStream(savePath + "\\" + filename);
                paths.add(filename);
                //创建一个缓冲区
                byte buffer[] = new byte[1024];
                //判断输入流中的数据是否已经读完的标识
                int len = 0;
                //循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据
                while ((len = in.read(buffer)) > 0) {
                    //使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\" + filename)当中
                    out.write(buffer, 0, len);
                }

            }
        }
        String courseName = values.get(0);
        String courseDesc = values.get(1);
        String courseImgAddress = paths.get(0);
        String courseTeacher = values.get(3);
        String courseType = values.get(4);
        String secondId = values.get(5);

        String message = "";
        if (courseName.equals("")) {
            message = "课程名称为空";
        } else if (courseType.equals("")) {
            message = "课程所属为空";
        } else if (secondId.equals("")) {
            message = "二级ID为空";
        }
        if (message.equals("")) {
            Course course = new Course();
            course.setCourseName(courseName);
            course.setCourseDesc(courseDesc);
            course.setCourseTeacher(courseTeacher);
            course.setCourseType(courseType);
            course.setSecondId(Integer.parseInt(secondId));

            course.setCourseImgAddress(courseImgAddress);

            courseService.register(course);
            request.getRequestDispatcher("products.jsp").forward(request, response);
            return;
        } else {
            request.getRequestDispatcher("creatCourse.jsp").forward(request, response);
            return;
        }

    }

前台页面

<form action="<%=request.getContextPath()%>/userServlet?method=addCourseMessage" enctype="multipart/form-data" class="" method="post">

<span class="input-group-addon">封面图片</span>
    <input type="text" size="36" name="upfile" placeholder="   请上传图片" id="upfile" class="" style="height:30px;border:1px solid #ccc;background:#fff">  
    <input type="button" value="浏览" onclick="path.click()" style="height:30px;border:1px solid #ccc;background:#fff">  
    <input name="file" type="file" id="path" style="display:none" onchange="upfile.value=this.value">

---

            2. ajax实现下拉列表的动态添加
                        1) 后台从数据库中取值，并往前台发送JSON格式的数据
                        2) 前台用ajax接受Json类型的数据，并动态生成到下拉表中

前台页面

$(function(){   
        $.ajax({
            type: "post",
            url: "userServlet?method=selectFirstCourseMessage",
            dataType: ‘json‘,
            error:function(request){
                alert(111);
            },
            success:function(Result){
                //Result是jsonArray字符串
                $.each(eval(Result), function(index, item){
                    //index为序号，相对于json格式的Result而言，从0，1，2，3...到Result的长度减1，item就是每条jsonObject
                    //取值就是：item.属性名，如item.name, item.id, item.number.....
                    $("#listproject").append("<li id="+index+">" +"<a href="+ item.href + ">" + item.name + "</a>" +"</li>");
                });
            }
        });
    });

    <ul id="listproject">

    </ul>

后台页面

List<FirstCourse> firstCoursesList = new ArrayList<FirstCourse>();

        firstCoursesList = firstCoursesService.selectFirstCoursesName();

        JSONArray jsonData = JSONArray.fromObject(firstCoursesList);
        System.out.println(jsonData.toString());
        PrintWriter out = response.getWriter();
        out.print(jsonData);