前幾天因為要參加一個比賽，一個老師讓我給一個網站寫後臺，由於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);

項目心得