學生管理系統（SSM簡易版）總結

之前用 Servlet + JSP 實現了一個 "簡易版的學生管理系統" ，在學習了 SSM 框架之後，我們來對之前寫過的項目重構一下！技術準備為了完成這個項目，需要掌握如下技術： Java 基礎知識前端： HTML, CSS, JAVASCRIPT, JQUERY J2EE： Tomcat, ...

之前用 Servlet + JSP 實現了一個簡易版的學生管理系統，在學習了 SSM 框架之後，我們來對之前寫過的項目重構一下！

技術準備

為了完成這個項目，需要掌握如下技術：

Java
基礎知識
前端：
HTML, CSS, JAVASCRIPT, JQUERY
J2EE：
Tomcat, Servlet, JSP, Filter
框架：
Spring, Spring MVC, MyBatis, Spring 與 MyBatis 整合, SSM 整合
資料庫：
MySQL
開發工具：
IDEA, Maven

開發流程

之前雖然已經使用 Servlet + JSP 完成了簡單的開發，這次使用 SSM 僅僅是重構工作，但我們仍然按照商業項目的開發步驟來一步一步完成，進一步熟悉這個過程，重覆的部分我就直接複製了。

① 需求分析

首先要確定要做哪些功能

使用資料庫來保存數據
能增刪改查學生的信息（學號，名稱，年齡，性別，出生日期）

② 表結構設計

根據需求，那麼只需要一個 student 表就能夠完成功能了。

創建資料庫：student
將資料庫編碼格式設置為 UTF-8 ，便於存取中文數據

DROP DATABASE IF EXISTS student;
CREATE DATABASE student DEFAULT CHARACTER SET utf8;

創建學生表：student
不用學生學號(studentID)作為主鍵的原因是：不方便操作，例如在更新數據的時候，同時也要更改學號，那這樣的操作怎麼辦呢？
所以我們加了一個 id 用來唯一表示當前數據。

CREATE TABLE student(
  id int(11) NOT NULL AUTO_INCREMENT,
  student_id int(11) NOT NULL UNIQUE,
  name varchar(255) NOT NULL,
  age int(11) NOT NULL,
  sex varchar(255) NOT NULL,
  birthday date DEFAULT NULL,
  PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

MySQL 在 Windows 下不區分大小寫，但在 Linux 下預設區分大小寫，因此，資料庫名、表明、欄位名都不允許出現任何大寫字母，避免節外生枝。

③ 原型設計

就是設計界面，在商業項目中，這是很重要的一步，我們可以解除界面原型，低成本、高效率的與客戶達成需求的一致性。

這個項目一共就分為兩個頁面：

主頁面：
學生編輯頁面：

④ SSM 環境搭建

在真正開始編寫代碼之前，我們首先需要先來搭建好我們的 SSM 環境。

第一步：創建 Maven webapp 項目

首先新建工程，選擇 Maven 標簽，然後勾選上【Create from archetype】選擇 webapp：

點擊下一步，填寫上【GroupId】和【ArtifactId】：

GroupId：項目組織唯一的標識符，實際對應 JAVA 的包的結構，也就是 main 目錄下 java 的目錄結構（包）
AritifactId：項目的唯一標識符，實際對應項目的名稱，就是項目根目錄的名稱
實際上你可以亂填上試試，我就不亂填了

然後是確認項目路徑，這一步你可以看到 Maven 配置中的參數，不需要做改動，直接下一步就可以（圖中的路徑是我配置的本地 Maven 倉庫的地址）：

確認項目名稱和路徑，點擊【Finish】即可：

等待一會兒，控制台就會有創建成功的提示信息，我們把【Enable Auto-Import】點上，這個提示會在每次 pom.xml 有改動時出現，自動導入，省掉麻煩：

第二步：搭建項目目錄結構

下麵就是 Maven 風格的 webapp 的預設目錄結構：

註意： webapp 是預設沒有 java 源文件也沒有 test 目錄的。

遵循 Maven 的統一項目結構，我們搭建出項目的完整目錄結構如下圖：

我們並沒有使用 Log4j 來輸出日誌，而是使用 logback
提示：我們可以在 IDEA 中右鍵目錄然後選擇【Make Directory as】，讓 IDEA 識別不同的目錄作用

這裡的目錄建好之後還需要設置一下，讓 IDEA 識別目錄作用，選擇【File】>【Project Structure】：

設置好之後點擊 OK，即完成了項目目錄的搭建。

第三步：配置文件內容

在【pom.xml】文件中聲明依賴的 jar 包：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

    <modelVersion>4.0.0</modelVersion>
    <packaging>war</packaging>

    <name>StudentManagerSSM</name>
    <groupId>cn.wmyskxz</groupId>
    <artifactId>StudentManagerSSM</artifactId>
    <version>1.0-SNAPSHOT</version>

    <build>
        <plugins>
            <plugin>
                <groupId>org.mortbay.jetty</groupId>
                <artifactId>maven-jetty-plugin</artifactId>
                <version>6.1.7</version>
                <configuration>
                    <connectors>
                        <connector implementation="org.mortbay.jetty.nio.SelectChannelConnector">
                            <port>8888</port>
                            <maxIdleTime>30000</maxIdleTime>
                        </connector>
                    </connectors>
                    <webAppSourceDirectory>${project.build.directory}/${pom.artifactId}-${pom.version}
                    </webAppSourceDirectory>
                    <contextPath>/</contextPath>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <properties>
        <!-- 設置項目編碼編碼 -->
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <!-- spring版本號 -->
        <spring.version>4.3.5.RELEASE</spring.version>
        <!-- mybatis版本號 -->
        <mybatis.version>3.4.1</mybatis.version>
    </properties>

    <dependencies>

        <!-- jstl標簽 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.taglibs</groupId>
            <artifactId>taglibs-standard-impl</artifactId>
            <version>1.2.5</version>
        </dependency>


        <!-- java ee -->
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-api</artifactId>
            <version>7.0</version>
        </dependency>

        <!-- 單元測試 -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>

        <!-- 實現slf4j介面並整合 -->
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.2.2</version>
        </dependency>

        <!-- JSON -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.8.7</version>
        </dependency>


        <!-- 資料庫 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.41</version>
            <scope>runtime</scope>
        </dependency>

        <!-- 資料庫連接池 -->
        <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.5.2</version>
        </dependency>

        <!-- MyBatis -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>${mybatis.version}</version>
        </dependency>

        <!-- mybatis/spring整合包 -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.3.1</version>
        </dependency>

        <!-- Spring -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>${spring.version}</version>
        </dependency>

    </dependencies>

</project>

<build> 標簽是預設生成的
我們在 <properties> 中聲明瞭編碼格式以及使用的 spring 和 mybatis 的版本號，然後在 <dependencies> 中聲明瞭具體的 jar 包

在【web.xml】中聲明編碼過濾器並配置 DispatcherServlet ：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- 編碼過濾器 -->
    <filter>
        <filter-name>encodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- 配置DispatcherServlet -->
    <servlet>
        <servlet-name>SpringMVC</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 配置springMVC需要載入的配置文件-->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring-*.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
        <async-supported>true</async-supported>
    </servlet>
    <servlet-mapping>
        <servlet-name>SpringMVC</servlet-name>
        <!-- 匹配所有請求 -->
        <url-pattern>/</url-pattern>
    </servlet-mapping>

</web-app>

在【spring-mybatis.xml】中完成 spring 和 mybatis 的配置：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">

    <!-- 掃描service包下所有使用註解的類型 -->
    <context:component-scan base-package="cn.wmyskxz.service"/>

    <!-- 配置資料庫相關參數properties的屬性：${url} -->
    <context:property-placeholder location="classpath:jdbc.properties"/>

    <!-- 資料庫連接池 -->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driver}"/>
        <property name="jdbcUrl" value="${jdbc.url}"/>
        <property name="user" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        <property name="maxPoolSize" value="${c3p0.maxPoolSize}"/>
        <property name="minPoolSize" value="${c3p0.minPoolSize}"/>
        <property name="autoCommitOnClose" value="${c3p0.autoCommitOnClose}"/>
        <property name="checkoutTimeout" value="${c3p0.checkoutTimeout}"/>
        <property name="acquireRetryAttempts" value="${c3p0.acquireRetryAttempts}"/>
    </bean>

    <!-- 配置SqlSessionFactory對象 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 註入資料庫連接池 -->
        <property name="dataSource" ref="dataSource"/>
        <!-- 掃描entity包 使用別名 -->
        <property name="typeAliasesPackage" value="cn.wmyskxz.entity"/>
        <!-- 掃描sql配置文件:mapper需要的xml文件 -->
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>
    </bean>

    <!-- 配置掃描Dao介面包，動態實現Dao介面，註入到spring容器中 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!-- 註入sqlSessionFactory -->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        <!-- 給出需要掃描Dao介面包 -->
        <property name="basePackage" value="cn.wmyskxz.dao"/>
    </bean>

    <!-- 配置事務管理器 -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!-- 註入資料庫連接池 -->
        <property name="dataSource" ref="dataSource"/>
    </bean>

    <!-- 配置基於註解的聲明式事務 -->
    <tx:annotation-driven transaction-manager="transactionManager"/>

</beans>

在【spring-mvc.xml】中完成 Spring MVC 的相關配置：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

    <!-- 掃描web相關的bean -->
    <context:component-scan base-package="cn.wmyskxz.controller"/>

    <!-- 開啟SpringMVC註解模式 -->
    <mvc:annotation-driven/>

    <!-- 靜態資源預設servlet配置 -->
    <mvc:default-servlet-handler/>

    <!-- 配置jsp 顯示ViewResolver -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
        <property name="prefix" value="/WEB-INF/views/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

</beans>

在【jdbc.properties】中配置 c3p0 資料庫連接池：

jdbc.driver=com.mysql.jdbc.Driver
#資料庫地址
jdbc.url=jdbc:mysql://localhost:3306/student?useUnicode=true&characterEncoding=utf8
#用戶名
jdbc.username=root
#密碼
jdbc.password=root
#最大連接數
c3p0.maxPoolSize=30
#最小連接數
c3p0.minPoolSize=10
#關閉連接後不自動commit
c3p0.autoCommitOnClose=false
#獲取連接超時時間
c3p0.checkoutTimeout=10000
#當獲取連接失敗重試次數
c3p0.acquireRetryAttempts=2

在【logback.xml】中完成日誌輸出的相關配置：

<?xml version="1.0" encoding="UTF-8"?>
<configuration debug="true">
    <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
        <encoder>
            <pattern>%d{HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern>
        </encoder>
    </appender>
    <root level="debug">
        <appender-ref ref="STDOUT"/>
    </root>
</configuration>

以上就完成了 SSM 框架的基本配置：

添加進了 SSM 項目所需要的 jar 包
配置好了 spring/mybatis/spring MVC 的相關配置信息（自動掃描 cn.wmyskxz 包下的帶有註解的類）
通過 xml 配置的方式配置好了日誌和資料庫

⑤ 實體類設計

實體類僅僅是對資料庫中表的一一映射（表中欄位名應該和實體類中的名稱一一對應），同時可能還需要兼顧對業務能力的支持。

在 Packge【cn.wmyskxz.entity】下創建 Student 類：
```
package cn.wmyskxz.entity;

import java.util.Date;

/**

Student 實體類
@author: @我沒有三顆心臟
@create: 2018-04-23-下午 13:34
*/
public class Student {

private int id;
private int student_id;
private String name;
private int age;
private String sex;
private Date birthday;

/* getter and setter */
}
```

⑤ DAO 類的設計

DAO，即 Date Access Object，資料庫訪問對象，就是對資料庫相關操作的封裝，讓其他地方看不到 JDBC 的代碼。

在【cn.wmyskxz.dao】包下創建【StudentDao】介面：

package cn.wmyskxz.dao;

import cn.wmyskxz.entity.Student;

import java.util.List;

public interface StudentDao {
    int getTotal();
    void addStudent(Student student);
    void deleteStudent(int id);
    void updateStudent(Student student);
    Student getStudent(int id);
    List<Student> list(int start, int count);
}

然後在【resources/mapper】下創建好對應的映射文件【StudengDao.xml】：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<!-- 將namespace的值設置為DAO類對應的路徑 -->
<mapper namespace="cn.wmyskxz.dao.StudentDao">

    <!-- 查詢數據條目 -->
    <select id="getTotal" resultType="int">
        SELECT COUNT(*) FROM student
    </select>

    <!-- 增加一條數據 -->
    <insert id="addStudent" parameterType="Student">
        INSERT INTO student VALUES(NULL, #{student_id}, #{name}, #{age}, #{sex}, #{birthday})
    </insert>

    <!-- 刪除一條數據 -->
    <delete id="deleteStudent" parameterType="int">
        DELETE FROM student WHERE id = #{id}
    </delete>

    <!-- 更新一條數據 -->
    <update id="updateStudent" parameterType="Student">
        UPDATE student SET student_id = #{student_id}, name = #{name},
        age = #{age}, sex = #{sex}, birthday = #{birthday} WHERE id = #{id}
    </update>

    <!-- 查詢一條數據 -->
    <select id="getStudent" resultMap="student" parameterType="int">
        SELECT * FROM student WHERE id = #{id}
    </select>

    <resultMap id="student" type="student">
        <id column="id" property="id"/>
        <result column="student_id" property="student_id"/>
        <result column="name" property="name"/>
        <result column="age" property="age"/>
        <result column="sex" property="sex"/>
        <result column="birthday" property="birthday"/>
    </resultMap>

    <!-- 查詢從start位置開始的count條數據-->
    <select id="list" resultMap="student">
        SELECT * FROM student ORDER BY student_id desc limit #{param1}, #{param2}
    </select>
</mapper>

編寫好了 Dao 類是需要測試的，這裡測試類就不給出了。

⑦ 業務類設計

問題： 為什麼不直接使用 Dao 類而是還要在上面封裝一層 Service 層呢？
回答：
基於責任分離的原則，Dao 層就應該專註於對資料庫的操作，而在 Service 層我們可以增加一些非 CRUD 的方法去更好的完成本身抽離出來的 service 服務（業務處理）。

在【cn.wmyskxz.service】包下創建【StudentService】介面：

package cn.wmyskxz.service;

import cn.wmyskxz.entity.Student;

import java.util.List;

public interface StudentService {

    /**
     * 獲取到 Student 的總數
     * @return
     */
    int getTotal();

    /**
     * 增加一條數據
     * @param student
     */
    void addStudent(Student student);

    /**
     * 刪除一條數據
     * @param id
     */
    void deleteStudent(int id);

    /**
     * 更新一條數據
     * @param student
     */
    void updateStudent(Student student);

    /**
     * 找到一條數據
     * @param id
     * @return
     */
    Student getStudent(int id);

    /**
     * 列舉出從 start 位置開始的 count 條數據
     * @param start
     * @param count
     * @return
     */
    List<Student> list(int start, int count);
}

併在相同包名下創建實現類【StudentServiceImpl】：

package cn.wmyskxz.service;

import cn.wmyskxz.dao.StudentDao;
import cn.wmyskxz.entity.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * StudentService 的實現類
 *
 * @author: @我沒有三顆心臟
 * @create: 2018-04-23-下午 13:51
 */
@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    StudentDao studentDao;

    public int getTotal() {
        return studentDao.getTotal();
    }

    public void addStudent(Student student) {
        studentDao.addStudent(student);
    }

    public void deleteStudent(int id) {
        studentDao.deleteStudent(id);
    }

    public void updateStudent(Student student) {
        studentDao.updateStudent(student);
    }

    public Student getStudent(int id) {
        return studentDao.getStudent(id);
    }

    public List<Student> list(int start, int count) {
        return studentDao.list(start, count);
    }
}

⑧ 功能開發

在【cn.wmyskxz.controller】包下創建【StudentController】控制器，代碼基本上都是複製黏貼之前在 Servlet 中的代碼：

package cn.wmyskxz.controller;

import cn.wmyskxz.entity.Student;
import cn.wmyskxz.service.StudentService;
import cn.wmyskxz.util.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

/**
 * Student 控制器
 *
 * @author: @我沒有三顆心臟
 * @create: 2018-04-23-下午 13:27
 */
@Controller
@RequestMapping("")
public class StudentController {

    @Autowired
    private StudentService studentService;

    @RequestMapping("/addStudent")
    public String addStudent(HttpServletRequest request, HttpServletResponse response) {

        Student student = new Student();

        int studentID = Integer.parseInt(request.getParameter("student_id"));
        String name = request.getParameter("name");
        int age = Integer.parseInt(request.getParameter("age"));
        String sex = request.getParameter("sex");
        Date birthday = null;
        // String 類型按照 yyyy-MM-dd 的格式轉換為 java.util.Date 類
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        try {
            birthday = simpleDateFormat.parse(request.getParameter("birthday"));
        } catch (ParseException e) {
            e.printStackTrace();
        }

        student.setStudent_id(studentID);
        student.setName(name);
        student.setAge(age);
        student.setSex(sex);
        student.setBirthday(birthday);

        studentService.addStudent(student);

        return "redirect:listStudent";
    }

    @RequestMapping("/listStudent")
    public String listStudent(HttpServletRequest request, HttpServletResponse response) {

        // 獲取分頁參數
        int start = 0;
        int count = 10;

        try {
            start = Integer.parseInt(request.getParameter("page.start"));
            count = Integer.parseInt(request.getParameter("page.count"));
        } catch (Exception e) {
        }

        Page page = new Page(start, count);

        List<Student> students = studentService.list(page.getStart(), page.getCount());
        int total = studentService.getTotal();
        page.setTotal(total);

        request.setAttribute("students", students);
        request.setAttribute("page", page);

        return "listStudent";
    }

    @RequestMapping("/deleteStudent")
    public String deleteStudent(int id) {
        studentService.deleteStudent(id);
        return "redirect:listStudent";
    }

    @RequestMapping("/editStudent")
    public ModelAndView editStudent(int id) {
        ModelAndView mav = new ModelAndView("editStudent");
        Student student = studentService.getStudent(id);
        mav.addObject("student", student);
        return mav;
    }

    @RequestMapping("/updateStudent")
    public String updateStudent(HttpServletRequest request, HttpServletResponse response) {

        Student student = new Student();

        int id = Integer.parseInt(request.getParameter("id"));
        int student_id = Integer.parseInt(request.getParameter("student_id"));
        String name = request.getParameter("name");
        int age = Integer.parseInt(request.getParameter("age"));
        String sex = request.getParameter("sex");

        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        Date birthday = null;
        try {
            birthday = simpleDateFormat.parse(request.getParameter("birthday"));
        } catch (ParseException e) {
            e.printStackTrace();
        }

        student.setId(id);
        student.setStudent_id(student_id);
        student.setName(name);
        student.setAge(age);
        student.setSex(sex);
        student.setBirthday(birthday);

        studentService.updateStudent(student);
        return "redirect:listStudent";
    }
}

註意： 所有的學號都用 student_id 表示，為了契合在資料庫中的欄位名（包括下麵的 JSP 文件）

JSP 文件也直接黏之前的就好了，不過需要註意所有的 name 屬性：

【listStudent.jsp】：

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>

    <%-- 引入JQ和Bootstrap --%>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <link href="css/style.css" rel="stylesheet">

    <title>學生管理頁面 - 首頁</title>

    <script>
        $(function () {
            $("ul.pagination li.disabled a").click(function () {
                return false;
            });
        });
    </script>
</head>

<body>

<div class="listDIV">
    <table class="table table-striped table-bordered table-hover table-condensed">

        <caption>學生列表 - 共${page.total}人</caption>
        <thead>
        <tr class="success">
            <th>學號</th>
            <th>姓名</th>
            <th>年齡</th>
            <th>性別</th>
            <th>出生日期</th>

            <th>編輯</th>
            <th>刪除</th>
        </tr>
        </thead>

        <tbody>
        <c:forEach items="${students}" var="s" varStatus="status">
            <tr>
                <td>${s.student_id}</td>
                <td>${s.name}</td>
                <td>${s.age}</td>
                <td>${s.sex}</td>
                <td>${s.birthday}</td>

                <td><a href="/editStudent?id=${s.id}"><span class="glyphicon glyphicon-edit"></span> </a></td>
                <td><a href="/deleteStudent?id=${s.id}"><span class="glyphicon glyphicon-trash"></span> </a></td>
            </tr>
        </c:forEach>

        </tbody>
    </table>
</div>

<nav class="pageDIV">
    <ul class="pagination">
        <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
            <a href="?page.start=0">
                <span>«</span>
            </a>
        </li>

        <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
            <a href="?page.start=${page.start-page.count}">
                <span>‹</span>
            </a>
        </li>

        <c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">

            <c:if test="${status.count*page.count-page.start<=30 && status.count*page.count-page.start>=-10}">
                <li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>
                    <a
                            href="?page.start=${status.index*page.count}"
                            <c:if test="${status.index*page.count==page.start}">class="current"</c:if>
                    >${status.count}</a>
                </li>
            </c:if>
        </c:forEach>

        <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
            <a href="?page.start=${page.start+page.count}">
                <span>›</span>
            </a>
        </li>
        <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
            <a href="?page.start=${page.last}">
                <span>»</span>
            </a>
        </li>
    </ul>
</nav>

<div class="addDIV">

    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">增加學生</h3>
        </div>
        <div class="panel-body">

            <form method="post" action="/addStudent" role="form">
                <table class="addTable">
                    <tr>
                        <td>學號：</td>
                        <td><input type="text" name="student_id" id="student_id" placeholder="請在這裡輸入學號"></td>
                    </tr>
                    <tr>
                        <td>姓名：</td>
                        <td><input type="text" name="name" id="name" placeholder="請在這裡輸入名字"></td>
                    </tr>
                    <tr>
                        <td>年齡：</td>
                        <td><input type="text" name="age" id="age" placeholder="請在這裡輸入年齡"></td>
                    </tr>
                    <tr>
                        <td>性別：</td>
                        <td><input type="radio" class="radio radio-inline" name="sex" value="男"> 男
                            <input type="radio" class="radio radio-inline" name="sex" value="女"> 女
                        </td>
                    </tr>
                    <tr>
                        <td>出生日期：</td>
                        <td><input type="date" name="birthday" id="birthday" placeholder="請在這裡輸入出生日期"></td>
                    </tr>
                    <tr class="submitTR">
                        <td colspan="2" align="center">
                            <button type="submit" class="btn btn-success">提 交</button>
                        </td>

                    </tr>

                </table>
            </form>
        </div>
    </div>

</div>


</body>
</html>

【editStudent.jsp】：

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>

    <%-- 引入JQ和Bootstrap --%>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <link href="css/style.css" rel="stylesheet">

    <title>學生管理頁面 - 編輯頁面</title>
</head>

<body>

<div class="editDIV">

    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">編輯學生</h3>
        </div>
        <div class="panel-body">

            <form method="post" action="/updateStudent" role="form">
                <table class="editTable">
                    <tr>
                        <td>學號：</td>
                        <td><input type="text" name="student_id" id="student_id" value="${student.student_id}"
                                   placeholder="請在這裡輸入學號"></td>
                    </tr>
                    <tr>
                        <td>姓名：</td>
                        <td><input type="text" name="name" id="name" value="${student.name}" placeholder="請在這裡輸入名字">
                        </td>
                    </tr>
                    <tr>
                        <td>年齡：</td>
                        <td><input type="text" name="age" id="age" value="${student.age}" placeholder="請在這裡輸入年齡"></td>
                    </tr>
                    <tr>
                        <td>性別：</td>
                        <td><input type="radio" class="radio radio-inline" name="sex" value="男"> 男
                            <input type="radio" class="radio radio-inline" name="sex" value="女"> 女
                        </td>
                    </tr>
                    <tr>
                        <td>出生日期：</td>
                        <td><input type="date" name="birthday" id="birthday" value="${student.birthday}"
                                   placeholder="請在這裡輸入出生日期"></td>
                    </tr>
                    <tr class="submitTR">
                        <td colspan="2" align="center">
                            <input type="hidden" name="id" value="${student.id}">
                            <button type="submit" class="btn btn-success">提 交</button>
                        </td>

                    </tr>

                </table>
            </form>
        </div>
    </div>

</div>

</body>
</html>

style.css 文件：

body {
    padding-top: 60px;
}

div.listDIV {
    width: 600px;
    margin: 0 auto;
}

div.editDIV {
    width: 400px;
    margin: 0 auto;
}

nav.pageDIV {
    text-align: center;
}

div.addDIV {
    width: 300px;
    margin: 0 auto;
}

table.addTable {
    width: 100%;
    padding: 5px;
}

table.addTable td {
    padding: 5px;
}

table.editTable {
    width: 100%;
    padding: 5px;
}

table.editTable td {
    padding: 5px;
}

項目的整體結構

分頁功能

首先在 Packge【util】包下創建一個 Page 工具類：

package cn.wmyskxz.util;

public class Page {

    int start;      // 開始數據
    int count;      // 每一頁的數量
    int total;      // 總共的數據量

    public Page(int start, int count) {
        super();
        this.start = start;
        this.count = count;
    }

    public boolean isHasPreviouse(){
        if(start==0)
            return false;
        return true;

    }
    public boolean isHasNext(){
        if(start==getLast())
            return false;
        return true;
    }

    public int getTotalPage(){
        int totalPage;
        // 假設總數是50，是能夠被5整除的，那麼就有10頁
        if (0 == total % count)
            totalPage = total /count;
            // 假設總數是51，不能夠被5整除的，那麼就有11頁
        else
            totalPage = total / count + 1;

        if(0==totalPage)
            totalPage = 1;
        return totalPage;

    }

    public int getLast(){
        int last;
        // 假設總數是50，是能夠被5整除的，那麼最後一頁的開始就是40
        if (0 == total % count)
            last = total - count;
            // 假設總數是51，不能夠被5整除的，那麼最後一頁的開始就是50
        else
            last = total - total % count;

        last = last<0?0:last;
        return last;
    }

    // 各種 setter 和 getter
}

totalPage 是計算得來的數，用來表示頁碼一共的數量

在首頁顯示的 StudentList 用 page 的參數來獲取：

List<Student> students = studentService.list(page.getStart(), page.getCount());

並且在映射文件中用 LIMIT 關鍵字：

<!-- 查詢從start位置開始的count條數據-->
<select id="list" resultMap="student">
    SELECT * FROM student ORDER BY student_id desc limit #{param1}, #{param2}
</select>

第一個參數為 start，第二個參數為 count
這樣就能根據分頁的信息來獲取到響應的數據
編寫分頁欄：

1.寫好頭和尾

<nav class="pageDIV">
    <ul class="pagination">
    .....
    </ul>
</nav>

2.寫好« ‹這兩個功能按鈕
使用 <c:if>標簽來增加邊界判斷，如果沒有前面的頁碼了則設置為disable狀態

        <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
            <a href="?page.start=0">
                <span>«</span>
            </a>
        </li>

        <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
            <a href="?page.start=${page.start-page.count}">
                <span>‹</span>
            </a>
        </li>

再通過 JavaScrip 代碼來完成禁用功能：

<script>
    $(function () {
        $("ul.pagination li.disabled a").click(function () {
            return false;
        });
    });
</script>

3.完成中間頁碼的編寫
從 0 迴圈到 page.totalPage - 1 ，varStatus 相當於是迴圈變數

status.count 是從1開始遍歷
status.index 是從0開始遍歷
要求：顯示當前頁碼的前兩個和後兩個就可，例如當前頁碼為3的時候，就顯示 1 2 3(當前頁) 4 5 的頁碼
理解測試條件：
-10 <= 當前頁*每一頁顯示的數目 - 當前頁開始的數據編號 <= 30

只要理解了這個判斷條件，其他的就都好理解了

<c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">

    <c:if test="${status.count*page.count-page.start<=30 && status.count*page.count-page.start>=-10}">
        <li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>
            <a
                    href="?page.start=${status.index*page.count}"
                    <c:if test="${status.index*page.count==page.start}">class="current"</c:if>
            >${status.count}</a>
        </li>
    </c:if>
</c:forEach>

4.在控制器中獲取參數

// 獲取分頁參數
int start = 0;
int count = 10;

try {
    start = Integer.parseInt(request.getParameter("page.start"));
    count = Integer.parseInt(request.getParameter("page.count"));
} catch (Exception e) {
}

....

// 共用 page 數據
request.setAttribute("page", page);

Date 轉換的問題

最開始的時候，我們看到頁面上顯示的日期是這樣的格式：

這顯然是我們不希望看到的

解決方案：在映射文件中設置日期顯示的類型。

重新部署文件，然後刷新頁面，就能看到我們希望的效果啦：

項目總結

由於之前的項目代碼都有，所以在重構的時候，基本上沒有花什麼時間就完成了項目的搭建，能夠體會到代碼分離的重要性，這在很大程度上保證了我們的代碼復用。
相較於之前用 Servlet + JSP 來完成，很明顯的感覺是DAO層的編寫方便了很多，僅僅需要編寫一個 xml 映射文件和一個 Dao 層介面就可以完成功能，而不用自己再去重覆的去在每一個 CRUD 方法中去處理結果集，重覆而且繁瑣。
註解真的很方便，這不僅僅提升了我們自身開發的效率，寫起來也很帶勁兒。
開發效率快，而且低耦合，我們基於 xml 配置了大部分的工作，在基於 SSM 框架開發時，我們可以把專註點集中在邏輯處理上。
在 SSM 框架中能方便的對項目進行修改，這不僅僅得益於框架的約定，使得代碼分離並且可復用，也得益於 Maven 工具對於項目的管理。
我們能夠通過一個 Controller 來完成五個 Servlet 的功能，並且通過註解來完成配置。

項目改進

項目很簡單，僅僅也只是在資料庫增刪改查的基礎上增加了一個界面，我們來動手改一改。

改進一：增加刪除提示

第一個想到的就是刪除提示，沒有刪除提示是很要命的一件事情，如果手滑了一下那可能就悲劇了....

首先我們在頂部的 <head> 標簽中的 <script> 中增加一段代碼：

function del() {
    var msg = "您真的確定要刪除嗎？\n\n請確認！";
    if (confirm(msg) == true) {
        return true;
    } else {
        return false;
    }
}

然後在刪除 a 標簽頁中增加 onclick 屬性：

onclick="javascript:return del();"
....就像下麵這樣....
td><a href="/deleteStudent?id=${s.id}" onclick="javascript:return del();"><span
        class="glyphicon glyphicon-trash"></span> </a></td>

當我們刷新頁面後，點擊刪除就會彈出提示信息：

改進二：編輯頁面自動勾選上性別

在當前的項目中，如果點擊編輯按鈕進入到編輯頁面後，性別這個選項是空選的狀態，這就很low：

這個也很簡單，在 editStudent 頁面增加一些判斷就好了：

用 <c:if> 標簽來判斷 sex 的值，然後根據對應的屬性增加 checked 屬性，這樣就可以自動勾選上所對應的屬性：

改進三：空值判斷

我們允許設置為 null 的值僅僅為出生日期，其他的值均不允許出現空值，所以我們需要加入空值判斷：

function checkEmpty(id, name) {
    var value = $("#" + id).val();
    if (value.length == 0) {
        alert(name + "不能為空");
        $("#" + id).focus();
        return false;
    }
    return true;
}

然後再為 form 創建一個 id 屬性值為 “addForm” 並添加進判斷空值的方法：