Servlet（六）：連接數據庫，完整的CRUD

Servlet的知識點大致講完了，今天補充下與之相關的一些小知識，然后做一個完整的小例子。

一、MVC設計模式

1、MVC設計模式是什么？

在了解MVC之前，先聊聊Model1、Model2開發模式。

Model1開發模式中，使用jsp頁面嵌套一些java代碼、代碼塊，既處理請求，又處理數據，將java代碼和html代碼高度耦合在一起，對於后期的維護和拓展非常不便，這就是Model1開發模式。

Model2開發模式，引入了分層思想，即MVC模式，將代碼進行了分層，降低了耦合度，方便后期的維護和擴展。

MVC模式，其中M是Model的縮寫，表示模型，在應用中包含業務處理層和數據訪問層。數據訪問層主要是對數據庫的一些操作的封裝。業務處理層應用JavaBean構建， JavaBean主要是用作將從View層獲取的數據和數據庫的數據進行橋接。

V是View的縮寫，表示視圖，視圖提供了可交互的用戶界面，向用戶顯示模型數據，通常使用jsp和HTML搭建。

C是Controller的縮寫，表示控制層，負責調度，是模型和視圖的橋梁。

2、為什么要用MVC設計模式？

一是程序耦合度較低，方便修改和維護；二是可擴展性高，方便后期的業務擴展；三是可重用性高，可以重復使用已有的控制層，減少重復代碼。

二、完整的CRUD

1、新建一個Maven項目，建好目錄結構

項目結構使用了上面提到的MVC分層結構，如下圖所示

 

2、配置web.xml和pom.xml文件

web.xml文件是配置servlet的，pom.xml是配置所需要的jar包。

  <servlet>
      <servlet-name>servlet</servlet-name>
      <servlet-class>web.EmployeeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>servlet</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>

  <dependencies>
      <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.8</version>
    </dependency>
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.12</version>
        <scope>test</scope>
    </dependency> 
  </dependencies>

3、連接數據庫

先建庫，再建表，然后插入原始數據。

CREATE TABLE employee(
    id varchar(36) NOT NULL,
    name varchar(50),
    gender varchar(4),
    birthday DATE,
    email varchar(20),
    salary varchar(20),
    remark varchar(200),
    PRIMARY KEY (`id`)  
)ENGINE=InnoDB DEFAULT CHARSET=utf8;
insert into employee values ('5476cbc52c084d56a8d2492a372450a3','小川94','男','2000-05-25','[e-mail]','10000','無');

編寫DBUtil類，連接數據庫

/**
 * 管理數據庫連接
 * @author 小川94
 * @date 2018年6月11日
 */
public class DBUtil {
    
    private static String user ="";
    private static String password = "";
    private static String url = "";
    private static String driver = "";
    private static Connection conn = null;
    
    /**
     * 獲取數據庫連接
     * @return Connection
     */
    public static Connection getConnection(){
        try{
            // 讀取配置文件
            user = ConfigUtil.getConfigValue("jdbc.user");
            password = ConfigUtil.getConfigValue("jdbc.password");
            url = ConfigUtil.getConfigValue("jdbc.jdbcUrl");
            driver = ConfigUtil.getConfigValue("jdbc.driverClass");
            // 加載驅動
            Class.forName(driver);
            conn = DriverManager.getConnection(url, user, password);
        }catch(Exception e){
            System.out.println("數據庫連接異常");
            e.printStackTrace();
        }
        return conn;
    }
    
    /**
     * 關閉數據庫連接
     * @param conn
     */
    public static void closeConnection(Connection conn){
        if(conn != null){
            try{
                conn.close();
            }catch(SQLException e){
                System.out.println("數據庫關閉異常");
                e.printStackTrace();
            }
        }
    }
    
}

其中使用了讀取配置文件的ConfigUtil類

/**
 * 讀取配置文件
 * @author 小川94
 * @date 2018年6月11日
 */
public class ConfigUtil {

    public static String getConfigValue(String tagName) {
        String tagValue = null;
        Properties prop = new Properties();
        try {
            ClassLoader classLoader = ConfigUtil.class.getClassLoader(); 
            // 讀取配置文件dbconfig.properties
            InputStream in = classLoader.getResourceAsStream("dbconfig.properties");
            prop.load(in); // 加載屬性列表
            Iterator<String> it = prop.stringPropertyNames().iterator();
            while (it.hasNext()) {
                if (it.next().equals(tagName)) {
                    tagValue = prop.getProperty(tagName);
                }
            }
            in.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return tagValue;
    }
    
}

4、編寫實體類

/**
 * 實體類
 * @author 小川94
 * @date 2018年6月11日
 */
public class Employee {
    
    private String id; // 主鍵
    private String name; // 姓名
    private String gender; // 性別
    private String email; // 郵箱
    private String salary; // 薪水
    private String remark; // 備注
    private Date birthday; // 出生日期
    
    public Employee(){
        
    }
    
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getGender() {
        return gender;
    }
    public void setGender(String gender) {
        this.gender = gender;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getSalary() {
        return salary;
    }
    public void setSalary(String salary) {
        this.salary = salary;
    }
    public String getRemark() {
        return remark;
    }
    public void setRemark(String remark) {
        this.remark = remark;
    }
    public Date getBirthday() {
        return birthday;
    }
    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }
    
    /**
     * 重寫toString方法，方便junit測試
     */
    @Override
    public String toString() {
        return "Employee [id=" + id + ", name=" + name + ", gender=" + gender +  ", birthday=" + birthday 
                +", salary=" + salary + ", email=" + email + ", remark=" + remark + "]";
    }
    
}

5、查詢數據

查詢數據功能，一是查詢出所有數據，二是需要考慮頁面的查詢條件，需要兩者結合考慮。

控制層使用了反射機制，使用一個Servlet處理多個請求，減少代碼重復。

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 獲取請求的URI地址信息
        String url = request.getRequestURI();
        // 截取其中的方法名
        String methodName = url.substring(url.lastIndexOf("/")+1, url.lastIndexOf("."));
        Method method = null;
        try {
            // 使用反射機制獲取在本類中聲明了的方法
            method = getClass().getDeclaredMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            // 執行方法
            method.invoke(this, request, response);
        } catch (Exception e) {
            throw new RuntimeException("調用方法出錯！");
        }
    }

    /**
     * 查詢employee表中的所有數據
     * @return List<Employee> 包含所有員工信息的list
     */
    public List<Employee> queryAllEmployee(String name, String salary, String salary2) {
        Connection conn = null;
        List<Employee> employees = new ArrayList<Employee>();
        try{
            // 連接數據庫
            conn = DBUtil.getConnection();
            if (StringUtil.isEmpty(conn)) {
                throw new Exception("數據庫連接失敗");
            }
            // 編寫sql語句
            String sql = "SELECT * FROM EMPLOYEE";
            String str = "";
            if(StringUtil.isNotEmpty(name) || StringUtil.isNotEmpty(salary) || StringUtil.isNotEmpty(salary2)){
                if(StringUtil.isNotEmpty(name)){
                    str = " WHERE NAME LIKE '%"+name+"%'";
                }
                if(StringUtil.isNotEmpty(salary)){
                    if(str.length() == 0){
                        str = " WHERE SALARY > " + salary;
                    }else{
                        str = str + " AND SALARY > " + salary;
                    }
                }
                if(StringUtil.isNotEmpty(salary2)){
                    if(str.length() == 0){
                        str = " WHERE SALARY < " + salary2;
                    }else{
                        str = str + " AND SALARY < " + salary2;
                    }
                }
            }
            // 創建一個 PreparedStatement 對象，初始化sql語句
            PreparedStatement ps = conn.prepareStatement(sql+str);
            // 獲取執行sql語句后的結果集
            ResultSet rs = ps.executeQuery();
            Employee emp = null;
            // 遍歷結果集，添加到list中
            while (rs.next()) {
                emp = new Employee();
                emp.setId(rs.getString("id"));
                emp.setName(rs.getString("name"));
                emp.setGender(rs.getString("gender"));
                emp.setEmail(rs.getString("email"));
                emp.setBirthday(rs.getDate("birthday"));
                emp.setRemark(rs.getString("remark"));
                emp.setSalary(rs.getString("salary"));
                employees.add(emp);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            // 關閉數據庫連接
            if (StringUtil.isNotEmpty(conn)) {
                DBUtil.closeConnection(conn);
            }
        }
        return employees;
    }

編寫控制層代碼

    private void queryEmp(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        EmployeeDao dao = new EmployeeDao();
        request.setCharacterEncoding("utf-8");
        String name = request.getParameter("name");
        String salary = request.getParameter("salary");
        String salary2 = request.getParameter("salary2");
        List<Employee> employees = dao.queryAllEmployee(name, salary, salary2);
        request.setAttribute("employees", employees);
        request.getRequestDispatcher("queryList.jsp").forward(request, response);
    }

6、新增數據

本質是提交表單數據到后台，通過Model層處理數據。

    /**
     * 新增員工信息
     * @param emp
     */
    public int addEmployee(Employee emp){
        if(StringUtil.isEmpty(emp)){
            throw new RuntimeException("參數為空！");
        }
        Connection conn = null;
        int result = 0;
        try{
            conn = DBUtil.getConnection();
            if(StringUtil.isEmpty(conn)){
                throw new Exception("數據庫連接失敗！");
            }
            String sql = "INSERT INTO EMPLOYEE VALUES (?,?,?,?,?,?,?) ";
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setString(1, StringUtil.getUUID());
            ps.setString(2, emp.getName());
            ps.setString(3, emp.getGender());
            ps.setDate(4, emp.getBirthday());
            ps.setString(5, emp.getEmail());
            ps.setString(6, emp.getSalary());
            ps.setString(7, emp.getRemark());
            result = ps.executeUpdate();
        }catch(Exception e){
            e.printStackTrace();
        } finally {
            // 關閉數據庫連接
            if (StringUtil.isNotEmpty(conn)) {
                DBUtil.closeConnection(conn);
            }
        }
        return result;
    }

    /**
     * 新增（修改）員工信息，根據id是否為空判斷新增操作、修改操作
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    private void addEmp(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        EmployeeDao dao = new EmployeeDao();
        request.setCharacterEncoding("utf-8");
        Employee emp = new Employee();
        String id = request.getParameter("id");
        if (StringUtil.isEmpty(id) || "null".equals(id)) {
            try {
                emp.setId(StringUtil.getUUID());
                emp.setName(request.getParameter("name"));
                emp.setGender(request.getParameter("gender"));
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                java.util.Date date =  sdf.parse(request.getParameter("birthday"));
                java.sql.Date birthday = new java.sql.Date(date.getTime());
                emp.setBirthday(birthday);
                emp.setEmail(request.getParameter("email"));
                emp.setSalary(request.getParameter("salary"));
                emp.setRemark(request.getParameter("remark"));
            } catch (Exception e) {
                e.printStackTrace();
            }
            dao.addEmployee(emp);
            response.sendRedirect("queryList.jsp");
        } else {
            modifyEmpInfo(request, response);
        }
    }

7、修改數據

修改數據，我們共用了新增數據的jsp頁面，使用了js方法來控制頁面的數據展示和可修改性，同時后台需要對新增和修改的數據處理邏輯拆分。

    /**
     * 根據員工信息id來修改相關內容
     * @param id
     * @return
     */
    public boolean modifyEmployeeById(Employee emp){
        if(StringUtil.isEmpty(emp)){
            throw new RuntimeException("參數為空！");
        }
        Connection conn = null;
        boolean flag = false;
        try{
            conn = DBUtil.getConnection();
            if(StringUtil.isEmpty(conn)){
                throw new Exception("數據庫連接失敗！");
            }
            String sql = "UPDATE EMPLOYEE SET EMAIL=? , SALARY=? , REMARK=? WHERE ID=? ";
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setString(1, emp.getEmail());
            ps.setString(2, emp.getSalary());
            ps.setString(3, emp.getRemark());
            ps.setString(4, emp.getId());
            int result = ps.executeUpdate();
            if (result == 1) {
                flag = true;
            }
        } catch(Exception e) {
            e.printStackTrace();
        } finally {
            // 關閉數據庫連接
            if (StringUtil.isNotEmpty(conn)) {
                DBUtil.closeConnection(conn);
            }
        }
        return flag;
    }

編寫控制層代碼

    private void modifyEmpInfo(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        request.setCharacterEncoding("utf-8");
        EmployeeDao dao = new EmployeeDao();
        Employee emp = new Employee();
        try{
            emp.setId(request.getParameter("id"));
            emp.setName(request.getParameter("name"));
            emp.setGender(request.getParameter("gender"));
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            java.util.Date date =  sdf.parse(request.getParameter("birthday"));
            java.sql.Date birthday = new java.sql.Date(date.getTime());
            emp.setBirthday(birthday);
            emp.setEmail(request.getParameter("email"));
            emp.setSalary(request.getParameter("salary"));
            emp.setRemark(request.getParameter("remark"));
        }catch(Exception e){
            e.printStackTrace();
        }
        boolean flag = dao.modifyEmployeeById(emp);
        if(!flag){
            request.setAttribute("msg", "修改員工信息失敗！");
            request.getRequestDispatcher("error.jsp").forward(request, response);
        }else{
            response.sendRedirect("queryList.jsp");
        }
    }

8、刪除數據

刪除數據，我們需要拿到所要刪除數據的id。

    /**
     * 根據員工信息的id刪除數據
     * @param id
     * @return
     */
    public boolean deleteEmployeeById(String id){
        if(StringUtil.isEmpty(id)){
            throw new RuntimeException("參數為空！");
        }
        Connection conn = null;
        boolean flag = false;
        try{
            conn = DBUtil.getConnection();
            if(StringUtil.isEmpty(conn)){
                throw new Exception("連接數據庫失敗！");
            }
            String sql = "DELETE FROM EMPLOYEE WHERE ID = ?";
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setString(1, id);
            int result = ps.executeUpdate();
            if(result == 1){
                flag = true;
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            // 關閉數據庫連接
            if (StringUtil.isNotEmpty(conn)) {
                DBUtil.closeConnection(conn);
            }
        }
        return flag;
    }

編寫控制層代碼

    private void deleteEmp(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        EmployeeDao dao = new EmployeeDao();
        request.setCharacterEncoding("utf-8");
        String id = request.getParameter("id");
        boolean flag = dao.deleteEmployeeById(id);
        if(!flag){
            request.setAttribute("msg", "刪除員工信息失敗！");
            request.getRequestDispatcher("error.jsp").forward(request, response);
        }else{
            request.getRequestDispatcher("queryList.jsp").forward(request, response);
        }
    }

9、查看數據

查看數據的本質是將數據查詢出來，回顯到頁面。

    /**
     * 根據員工信息id查詢完整員工信息
     * @param id
     * @return
     */
    public Employee queryEmpById(String id) {
        if (StringUtil.isEmpty(id)) {
            throw new RuntimeException("參數為空！");
        }
        Connection conn = null;
        Employee emp = new Employee();
        try {
            conn = DBUtil.getConnection();
            if (StringUtil.isEmpty(conn)) {
                throw new RuntimeException("數據庫連接失敗！");
            }
            String sql = "SELECT * FROM EMPLOYEE WHERE ID=?";
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setString(1, id);
            ResultSet rs = ps.executeQuery();
            if(StringUtil.isEmpty(rs)){
                throw new RuntimeException("查詢信息失敗！");
            }
            while (rs.next()) {
                emp.setId(rs.getString("id"));
                emp.setName(rs.getString("name"));
                emp.setGender(rs.getString("gender"));
                emp.setEmail(rs.getString("email"));
                emp.setBirthday(rs.getDate("birthday"));
                emp.setRemark(rs.getString("remark"));
                emp.setSalary(rs.getString("salary"));
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            // 關閉數據庫連接
            if (StringUtil.isNotEmpty(conn)) {
                DBUtil.closeConnection(conn);
            }
        }
        return emp;
    }

編寫控制層代碼

    private void queryEmpInfo(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        EmployeeDao dao = new EmployeeDao();
        request.setCharacterEncoding("utf-8");
        String id = request.getParameter("id");
        Employee emp = dao.queryEmpById(id);
        request.getSession().setAttribute("Emp", emp);
        request.getRequestDispatcher("empInfo.jsp").forward(request, response);
    }

10、單元測試

使用Junit包，來完成相應的功能方法測試。

public class TestSample extends TestCase {

    private long startTime;
    private long endTime;
    
    @Before
    public void setUp() throws Exception {
        this.startTime= System.currentTimeMillis();
        System.out.println("=========開始測試===========");
    }
    
    @After
    public void tearDown() throws Exception {
        this.endTime = System.currentTimeMillis();
        System.out.println("測試用時："+(endTime-startTime));
        System.out.println("=========測試結束===========");
    }
    
    /**
     * 測試數據庫連接
     */
    @Test
    public void testDBConnection(){
        Connection conn = DBUtil.getConnection();
        if(StringUtil.isEmpty(conn)){
            System.out.println("數據庫連接失敗！");
        }else{
            System.out.println("數據庫連接成功！");
            DBUtil.closeConnection(conn);
        }
    }
    
    /**
     * 測試EmployeeDao中的 queryAllEmployee 方法
     */
    @Test
    public void testQueryAllEmployee(){
        EmployeeDao dao = new EmployeeDao();
        List<Employee> list = dao.queryAllEmployee("張","","");
        if(StringUtil.isEmpty(list)){
            System.out.println("查詢員工信息失敗");
        }else{
            for(Employee emp : list){
                System.out.println(emp.toString());
            }
        }
    }
    
    /**
     * 測試EmployeeDao中的 addEmployee 方法
     */
    @Test
    public void testAddEmployee(){
        EmployeeDao dao = new EmployeeDao();
        Employee emp = new Employee();
        emp.setId(StringUtil.getUUID());
        emp.setName("張三");
        emp.setGender("男");
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        try {
            java.util.Date d = sdf.parse("1987-09-23");
            java.sql.Date birthday = new java.sql.Date(d.getTime());
            emp.setBirthday(birthday);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        emp.setEmail("[e-mail]");
        emp.setSalary("10500");
        emp.setRemark("新入職員工");
        int result = dao.addEmployee(emp);
        if(result == 1){
            System.out.println("新增成功");
        }else{
            System.out.println("新增失敗");
        }
    }
    
    /**
     * 測試EmployeeDao中的 deleteEmployeeById 方法
     */
    @Test
    public void testDeleteEmployeeById(){
        EmployeeDao dao = new EmployeeDao();
        String id = "8926a2e7-4cf1-4370-abdd-1141f8f6412d";
        boolean flag = dao.deleteEmployeeById(id);
        if(!flag){
            System.out.println("刪除員工信息失敗！");
        }else{
            System.out.println("刪除成功！");
        }
    }
    
    /**
     * 測試EmployeeDao中的 queryEmpById 方法
     */
    @Test
    public void testQueryEmpById(){
        String id = "0a100fb2-a619-40b5-a667-dba96fae8b49";
        EmployeeDao dao = new EmployeeDao();
        Employee emp = dao.queryEmpById(id);
        System.out.println(emp.toString());
    }
}

11、編寫View層

查詢頁面jsp編寫

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*,entity.*,dao.*" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>員工信息查詢列表</title>
<script type="text/javascript">
    function searchList(){
        var name = document.getElementById("name").value;
        var salary = document.getElementById("salary").value;
        var salary2 = document.getElementById("salary2").value;
        var url = "queryEmp.do";
        var str = "";
        if (name || salary || salary2) {
            if(name){
                str = "?name=" + name + "";
            }
            if(salary){
                if(str.length == 0){
                    str = "?salary=" + salary + "";
                }else{
                    str = str + "&salary=" + salary + "";
                }
            }
            if(salary2){
                if(str.length == 0){
                    str = "?salary2=" + salary2 + "";
                }else{
                    str = str + "&salary2=" + salary2 + "";
                }
            }
        } 
        window.location.href = url+str;
    }
    
    function addEmp(){
        window.location.href = "addEmp.jsp";
    }
    
    function myreset(){
        document.getElementById("name").value = "";
        document.getElementById("salary").value = "";
        document.getElementById("salary2").value = "";
    }
</script>
</head>
<body>
    <div style="height:100px;">
        <div style="">
            <div style="float:left;">
                <span style="margin-left:150px;">姓名</span>
                <% 
                    String name = request.getParameter("name");
                    if(name == null || name == ""){
                        name = "";
                    }
                    String salary = request.getParameter("salary");
                    if(salary == null || salary == ""){
                        salary = "";
                    }
                    String salary2 = request.getParameter("salary2");
                    if(salary2 == null || salary2 == ""){
                        salary2 = "";
                    }
                %>
                <input id="name" style="width:150px;height:20px;" type="text" name="name" value="<%=name %>">
            </div>
            <div style="float:left;">
                <span style="margin-left:50px;">薪水</span>
                <input id="salary" style="width:120px;height:20px;" type="text" value="<%=salary %>" name="salary">&nbsp;至
                <input id="salary2" style="width:120px;height:20px;" type="text" value="<%=salary2 %>" name="salary2">
            </div>
        </div>
        <div style="margin-top:40px;" align="center">
            <input style="height:30px;font-size:16px;margin-right:20px;" type="button" onclick="searchList()" value="查詢">
            <input style="height:30px;font-size:16px;margin-right:20px;" type="button" onclick="myreset()" value="重置">
            <input style="height:30px;font-size:16px;" type="button" onclick="addEmp()" value="新增">
        </div>
    </div>
    <div align="center">
        <table onload="searchList()" cellpadding="0" cellspacing="0" border="1px black solid">
            <thead>
                <tr style="height:40px;">
                    <th style="width:80px;text-align: center;">序號</th>
                    <th style="width:120px;text-align: center;">姓名</th>
                    <th style="width:100px;text-align: center;">性別</th>
                    <th style="width:150px;text-align: center;">出生日期</th>
                    <th style="width:120px;text-align: center;">薪水</th>
                    <th style="width:180px;text-align: center;">郵箱</th>
                    <th style="width:150px;text-align: center;">備注</th>
                    <th style="width:150px;text-align: center;">操作</th>
                </tr>
            </thead>
            <tbody>
                <%
                    List<Employee> employees = (List<Employee>)request.getAttribute("employees");
                    if(employees != null){
                        for(int i=0; i<employees.size(); i++){
                            Employee e = employees.get(i);
                %>
                <tr style="height:35px;">
                    <td style="text-align:center;"><%=i+1 %></td>
                    <td style="text-align:center;"><a href="queryEmpInfo.do?id=<%=e.getId() %>" style="text-decoration:none;color:blue"><%=e.getName() %></a></td>
                    <td style="text-align:center;"><%=e.getGender() %></td>
                    <td style="text-align:center;"><%=e.getBirthday() %></td>
                    <td style="text-align:center;"><%=e.getSalary() %></td>
                    <td style="text-align:center;"><%=e.getEmail() %></td>
                    <td style="text-align:center;"><%=e.getRemark() %></td>
                    <td style="text-align:center;">
                    <a href="openModifyEmpInfo.do?id=<%=e.getId()  %>" style="text-decoration:none;color:blue">修改</a>&nbsp;
                    <a href="deleteEmp.do?id=<%=e.getId()  %>" style="text-decoration:none;color:blue">刪除</a>
                    </td>
                </tr>
                <%         
                        }
                    }
                %>
            </tbody>
        </table>
    </div>
    
    
</body>
</html>

新增（修改）jsp頁面編寫

<%@page import="jdk.nashorn.internal.runtime.Undefined"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*,java.text.*,entity.Employee" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增員工信息</title>    
</head>
<body onload="myload()">
    
    <%
        String id = request.getParameter("id");
        Employee emp = (Employee)request.getSession().getAttribute("Emp");
        String name = "";
        String gender = "";
        String birthday = "";
        String email = "";
        String salary = "";
        String remark = "";
        if (emp!= null) {
            name = emp.getName();
            gender = emp.getGender();
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            if(emp.getBirthday() != null){
                java.sql.Date d = emp.getBirthday();
                java.util.Date date = new java.util.Date(d.getTime());
                birthday = sdf.format(date);
            }
            email = emp.getEmail();
            salary = emp.getSalary();
            remark = emp.getRemark();
        }
    %>
    
    <div style="padding-top: 60px;" align="center">
        <form action="addEmp.do?id=<%=id %>" method="post">
            <table cellpadding="0" cellspacing="0" border="1px black solid">
                <tr style="height:40px;">
                    <td style="font-size:18px;text-align: right;width:100px;">姓名&nbsp;</td>
                    <td style="width:400px;">
                        <input id="name" style="width:350px;height:20px;margin-left:10px;" type="text" name="name">
                    </td>
                </tr>
                <tr style="height:40px;">
                    <td style="font-size:18px;text-align: right;width:100px;">性別&nbsp;</td>
                    <td>
                        <input id="boy" style="width:30px;height:20px;margin-left:10px;" type="radio" name="gender" value="男">男
                        <input id="gril" style="width:30px;height:20px;margin-left:10px;" type="radio" name="gender" value="女">女
                    </td>
                </tr>
                <tr style="height:40px;">
                    <td style="font-size:18px;text-align: right;width:100px;">出生日期&nbsp;</td>
                    <td>
                        <input id="birthday" style="height:20px;margin-left:10px;" type="date" name="birthday">
                    </td>
                </tr>
                <tr style="height:40px;">
                    <td style="font-size:18px;text-align: right;width:100px;">郵箱&nbsp;</td>
                    <td>
                        <input id="email" style="width:350px;height:20px;margin-left:10px;" type="text" name="email">
                    </td>
                </tr>
                <tr style="height:40px;">
                    <td style="font-size:18px;text-align: right;width:100px;">薪水&nbsp;</td>
                    <td>
                        <input id="salary" style="width:350px;height:20px;margin-left:10px;" type="text" name="salary">
                    </td>
                </tr>
                <tr style="height:40px;">
                    <td style="font-size:18px;text-align: right;width:100px;">備注&nbsp;</td>
                    <td>
                        <textarea id="remark" style="margin:10px;"  rows="6" cols="47" name="remark"></textarea>
                    </td>
                </tr>
            </table>
            <div style="margin:20px;">
                <input style="height:30px;font-size:16px;margin-right:20px;" type="submit" value="提交"/>
                <input style="height:30px;font-size:16px;" type="reset" value="重置"/>
            </div>
        </form>
    </div>
    
    <script type="text/javascript">
        var idstr = "<%=id %>";
        function myload() {
            if (idstr != null && idstr != undefined && idstr != "null") {
                document.getElementById("name").value = "<%=name %>";
                var gender = "<%=gender %>";
                if(gender == "男"){
                    document.getElementById("boy").checked = true;
                    document.getElementById("girl").disabled = "disabled";
                } else {
                    document.getElementById("gril").checked = true;
                    document.getElementById("boy").disabled = "disabled";
                }
                document.getElementById("birthday").value = "<%=birthday %>";
                document.getElementById("email").value = "<%=email %>";
                document.getElementById("salary").value = "<%=salary %>";
                document.getElementById("remark").value = "<%=remark %>";
                // 設置只讀
                document.getElementById("name").readOnly = true;
                document.getElementById("gril").readOnly = true;
                document.getElementById("birthday").readOnly = true;
            } else {
                document.getElementById("name").readOnly = false;
                document.getElementById("boy").readOnly = false;
                document.getElementById("gril").readOnly = false;
                document.getElementById("birthday").readOnly = false;
            }
        }
    </script>
    
</body>
</html>

查看信息jsp頁面編寫

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="entity.Employee" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>員工信息</title>
</head>
<body>
    
    <jsp:useBean id="Emp" class="entity.Employee" scope="session"></jsp:useBean>
    <div style="padding-top: 60px;" align="center">
        <form>
            <h4>員工信息</h4>
            <table cellpadding="0" cellspacing="0" border="1px black solid">
                <tr style="height:40px;">
                    <td style="font-size:18px;text-align: right;width:100px;">姓名&nbsp;</td>
                    <td style="width:300px;">
                        &nbsp;&nbsp;<jsp:getProperty property="name" name="Emp"/>
                    </td>
                </tr>
                <tr style="height:40px;">
                    <td style="font-size:18px;text-align: right;width:100px;">性別&nbsp;</td>
                    <td style="width:300px;">
                        &nbsp;&nbsp;<jsp:getProperty property="gender" name="Emp"/>
                    </td>
                </tr>
                <tr style="height:40px;">
                    <td style="font-size:18px;text-align: right;width:100px;">出生日期&nbsp;</td>
                    <td style="width:300px;">
                        &nbsp;&nbsp;<jsp:getProperty property="birthday" name="Emp"/>
                    </td>
                </tr>
                <tr style="height:40px;">
                    <td style="font-size:18px;text-align: right;width:100px;">郵箱&nbsp;</td>
                    <td style="width:300px;">
                        &nbsp;&nbsp;<jsp:getProperty property="email" name="Emp"/>
                    </td>
                </tr>
                <tr style="height:40px;">
                    <td style="font-size:18px;text-align: right;width:100px;">薪水&nbsp;</td>
                    <td style="width:300px;">
                        &nbsp;&nbsp;<jsp:getProperty property="salary" name="Emp"/>
                    </td>
                </tr>
                <tr style="height:40px;">
                    <td style="font-size:18px;text-align: right;width:100px;">備注&nbsp;</td>
                    <td style="width:300px;">
                        &nbsp;&nbsp;<jsp:getProperty property="remark" name="Emp"/>    
                    </td>
                </tr>
            </table>
            <div style="margin:20px;">
                <input style="height:30px;font-size:16px;margin-right:20px;" type="button" onclick="history.back()" value="返回"/>
            </div>
        </form>
    </div>
</body>
</html>

錯誤信息jsp頁面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>錯誤提示信息</title>
</head>
<body>
    <h1 style="margin:200px;">:( 您的上一步操作發生了錯誤！
        <br>
        錯誤信息:<%=request.getParameter("msg") %>
    </h1>
    
</body>
</html>

三、測試

測試結果如下圖所示，對於分頁展示數據的問題，下次再單獨處理。

 

 

文章首發於我的個人公眾號：悅樂書。喜歡分享一路上聽過的歌，看過的電影，讀過的書，敲過的代碼，深夜的沉思。期待你的關注！

公眾號后台輸入關鍵字“Java學習電子書”，即可獲得12本Java學習相關的電子書資源，如果經濟能力允許，還請支持圖書作者的紙質正版書籍，創作不易。