Java EE 學習（8）：IDEA + maven + spring 搭建 web（4）- 用戶管理

時間 2019-11-24

標籤 java 學習 idea maven spring 搭建 web 用戶管理欄目 Java 简体版

原文原文鏈接

轉載：Gaussic（一個致力於AI研究卻不得不兼顧項目的研究生） css

注：在閱讀本文前，請先閱讀：html

Java EE 學習（5）：IDEA + maven + spring 搭建 web（1）html5

ava EE 學習（6）：IDEA + maven + spring 搭建 web（2）- 配置 Springjava

Java EE 學習（7）：IDEA + maven + spring 搭建 web（3）- 配置數據庫jquery

記錄: 經過對用戶表的管理，更加深刻地講解SpringMVC的操做。web

6 用戶管理

既然咱們要作一個博客管理系統，固然要首先實現咱們的用戶管理。在上一節中，咱們已經配置好了數據庫。接下來，就要實現網站的一些業務邏輯。spring

（1）、JPA操做定義

在實現用戶管理操做以前，須要講解一下JPA的開發工做。數據庫

首先，在 com.example.repository 包內新建一個 UserRepository 接口（注意此處的 Kind：選擇的是 Interface）：bootstrap

讓該接口繼承 JpaRepository：瀏覽器

package com.example.repository;

import com.gaussic.model.UserEntity;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

/**
 * Created by dzkan on 2016/3/8.
 */
@Repository
public interface UserRepository extends JpaRepository<UserEntity, Integer> {
}

在 JpaRepository 中，定義了幾個簡化的操做數據庫的方法：

（1） findAll()：查找表中全部記錄；

（2）findOne(Integer id)：按id來查找某一條記錄；

（3）findByXXX(Object xxx)：在這裏XXX是一個字段名，根據該字段的值開查找全部記錄；

（4）save()和delete()：添加一條記錄以及刪除一條記錄。

除此以外，咱們還能夠在該repository中自定義新的方法，這將在稍後實際開發中說起。

（2）、後臺管理

爲了儘量的在省去篇幅的狀況下，在此省去管理員操做的開發。默認在訪問 /admin 時，進入後臺管理。

（1）查看全部用戶

將 MainController 補充爲以下形式：

package com.example.controller;

import com.gaussic.model.UserEntity;
import com.gaussic.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import java.util.List;

/**
 * Created by dzkan on 2016/3/8.
 */
@Controller
public class MainController {

    // 自動裝配數據庫接口，不須要再寫原始的Connection來操做數據庫
    @Autowired
    UserRepository userRepository;

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String index() {
        return "index";
    }

    @RequestMapping(value = "/admin/users", method = RequestMethod.GET)
    public String getUsers(ModelMap modelMap) {
        // 查詢user表中全部記錄
        List<UserEntity> userList = userRepository.findAll();

        // 將全部記錄傳遞給要返回的jsp頁面，放在userList當中
        modelMap.addAttribute("userList", userList);

        // 返回pages目錄下的admin/users.jsp頁面
        return "admin/users";
    }
}

講解：

自動裝配：至關於數據庫操做的極簡化，只要定義了就能夠直接進行數據庫操做，不用再去管開啓鏈接、關閉鏈接等問題
找到全部記錄：使用JpaRepository的默認方法findAll()。
modelMap：用於將controller方法裏面的參數傳遞給所需的jsp頁面，以進行相關顯示。

如今，須要在 pages下新建目錄 admin，並新建users.jsp 頁面，以進行用戶的管理：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>  # JSP 指令（在 <%@ 和 %> 內的）： 用於設置和整個 JSP 網頁相關的屬性，經常使用的 3 種指令爲： page、include、taglib
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
 <title>SpringMVC 用戶管理</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
 <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <h1>SpringMVC 博客系統-用戶管理</h1>
    <hr/>

    <h3>全部用戶 <a href="/admin/users/add" type="button" class="btn btn-primary btn-sm">添加</a></h3>

    <!-- 若是用戶列表爲空 -->
 <c:if test="${empty userList}">
        <div class="alert alert-warning" role="alert">
            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>User表爲空，請<a href="/admin/users/add" type="button" class="btn btn-primary btn-sm">添加</a>
        </div>
    </c:if>

    <!-- 若是用戶列表非空 -->
 <c:if test="${!empty userList}">
        <table class="table table-bordered table-striped">
            <tr>
                <th>ID</th>
                <th>暱稱</th>
                <th>姓名</th>
                <th>密碼</th>
                <th>操做</th>
            </tr>

            <c:forEach items="${userList}" var="user">
                <tr>
                    <td>${user.id}</td>
                    <td>${user.nickname}</td>
                    <td>${user.firstName} ${user.lastName}</td>
                    <td>${user.password}</td>
                    <td>
                        <a href="/admin/users/show/${user.id}" type="button" class="btn btn-sm btn-success">詳情</a>
                        <a href="/admin/users/update/${user.id}" type="button" class="btn btn-sm btn-warning">修改</a>
                        <a href="/admin/users/delete/${user.id}" type="button" class="btn btn-sm btn-danger">刪除</a>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </c:if>
</div>

<!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

講解：

<c>標籤：在 jsp 中使用了 jstl 語法，能夠方便地進行一些判斷 <c:if> 與遍歷操做 <c:forEach>；
頁面使用了Bootstrap，部分功能將在以後實現。

運行Tomcat，在瀏覽器中輸入 http://localhost:8080/admin/users，進入用戶管理界面，顯示以下：

因爲目前數據庫中沒有數據，於是顯示爲空，如今須要向數據庫中添加用戶。

（2）添加用戶

在 MainController 中增長兩個方法：

// get請求，訪問添加用戶 頁面
@RequestMapping(value = "/admin/users/add", method = RequestMethod.GET)
public String addUser() {
    // 轉到 admin/addUser.jsp頁面
    return "admin/addUser";
}

// post請求，處理添加用戶請求，並重定向到用戶管理頁面
@RequestMapping(value = "/admin/users/addP", method = RequestMethod.POST)
public String addUserPost(@ModelAttribute("user") UserEntity userEntity) {
    // 注意此處，post請求傳遞過來的是一個UserEntity對象，裏面包含了該用戶的信息
    // 經過@ModelAttribute()註解能夠獲取傳遞過來的'user'，並建立這個對象

    // 數據庫中添加一個用戶，該步暫時不會刷新緩存
    //userRepository.save(userEntity);

    // 數據庫中添加一個用戶，並當即刷新緩存
    userRepository.saveAndFlush(userEntity);

    // 重定向到用戶管理頁面，方法爲 redirect:url
    return "redirect:/admin/users";
}

講解：

/admin/users/add請求：get請求轉到添加用戶頁面
/admin/users/addP請求：post請求收集數據並存庫
@ModelAttribute註解：收集post過來的數據（在此，至關於post過來了一整個userEntity，不用一個一個地取）
save()和saveAndFlush()：save()方法處理完畢後，數據依然在緩衝區未寫入數據庫，使用saveAndFlush()能夠當即刷新緩衝區，寫入數據庫
redirect:/admin/users：這裏使用重定向，可讓該方法重定向訪問一個請求，ruturn以後，將跳轉到 :/admin/users 所訪問的頁面。

如今，在 pages 的 admin 目錄下新建一個 addUser.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
 <title>SpringMVC 添加用戶</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
 <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <h1>SpringMVC 添加用戶</h1>
    <hr/>
    <form:form action="/admin/users/addP" method="post" commandName="user" role="form">
        <div class="form-group">
            <label for="firstName">Nickname:</label>
            <input type="text" class="form-control" id="nickname" name="nickname" placeholder="Enter Nickname:"/>
        </div>
        <div class="form-group">
            <label for="firstName">First Name:</label>
            <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Enter FirstName:"/>
        </div>
        <div class="form-group">
            <label for="lastName">Last Name:</label>
            <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Enter LastName:"/>
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="text" class="form-control" id="password" name="password" placeholder="Enter Password:"/>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-sm btn-success">提交</button>
        </div>
    </form:form>
</div>

<!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

講解：

<form:form>標籤：使用Spring的form標籤，能夠方便的收集整塊數據，commondName=「user」說明form內的內容都保存在這個user實例中，而後將整個user實例傳遞給controller處理。在全部的input標籤中，name必定要與UserEntity中的成員相同，否則沒法找到。
在提交以後，後臺將會處理 /admin/users/addP 請求。

如今，從新啓動服務器，訪問 http://localhost:8080/admin/users/add 頁面，以下圖所示：

輸入數據，點擊提交，數據庫中將會寫入新的用戶，從新跳轉到用戶管理頁面：

（3）查看用戶詳情

在 MainController 中加入查看詳情操做：

// 查看用戶詳情
// @PathVariable能夠收集url中的變量，需匹配的變量用{}括起來
// 例如：訪問 localhost:8080/admin/users/show/1 ，將匹配 id = 1
@RequestMapping(value = "/admin/users/show/{id}", method = RequestMethod.GET)
public String showUser(@PathVariable("id") Integer userId, ModelMap modelMap) {

    // 找到userId所表示的用戶
    UserEntity userEntity = userRepository.findOne(userId);

    // 傳遞給請求頁面
    modelMap.addAttribute("user", userEntity);
    return "admin/userDetail";
}

在 pages 目錄下新建 userDetail.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
 <title>SpringMVC 用戶詳情</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
 <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <h1>SpringMVC 用戶詳情</h1>
    <hr/>

    <table class="table table-bordered table-striped">
        <tr>
            <th>ID</th>
            <td>${user.id}</td>
        </tr>
        <tr>
            <th>Nickname</th>
            <td>${user.nickname}</td>
        </tr>
        <tr>
            <th>First Name</th>
            <td>${user.firstName}</td>
        </tr>
        <tr>
            <th>Last Name</th>
            <td>${user.lastName}</td>
        </tr>
        <tr>
            <th>Password</th>
            <td>${user.password}</td>
        </tr>
    </table>
</div>

<!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

講解：如何訪問一個實例內的數據？

使用${}語法，在{}內可使用相似Java的方法方便地訪問數據。

重啓服務器，進入 http://localhost:8080/admin/users ，點擊 ID = 1 的用戶的詳情按鈕，能夠查看用戶詳情：

從 url 能夠看出，訪問的是 ID=1 的用戶的詳細狀況，這樣的 URL 採用了 REST 風格設計，看起來更加簡便。

（4）修改用戶信息

如今咱們要對用戶信息作必定的修改，那該如何作呢。假設咱們要可以修改所有的數據（除了id），JpaRepository 未定義 update 方法，須要咱們本身定義。

打開 UserRepository，添加 updateUser() 接口方法：

package com.gaussic.repository;

import com.gaussic.model.UserEntity;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;

/**
 * Created by dzkan on 2016/3/8.
 */
@Repository
public interface UserRepository extends JpaRepository<UserEntity, Integer> {

    @Modifying      // 說明該方法是修改操做
    @Transactional  // 說明該方法是事務性操做
    // 定義查詢
    // @Param註解用於提取參數
    @Query("update UserEntity us set us.nickname=:qNickname, us.firstName=:qFirstName, us.lastName=:qLastName, us.password=:qPassword where us.id=:qId")
    public void updateUser(@Param("qNickname") String nickname, @Param("qFirstName") String firstName,
                           @Param("qLastName") String qLastName, @Param("qPassword") String password, @Param("qId") Integer id);
}

在 MainController 中定義update 操做方法：

// 更新用戶信息 頁面
@RequestMapping(value = "/admin/users/update/{id}", method = RequestMethod.GET)
public String updateUser(@PathVariable("id") Integer userId, ModelMap modelMap) {

    // 找到userId所表示的用戶
    UserEntity userEntity = userRepository.findOne(userId);

    // 傳遞給請求頁面
    modelMap.addAttribute("user", userEntity);
    return "admin/updateUser";
}

// 更新用戶信息 操做
@RequestMapping(value = "/admin/users/updateP", method = RequestMethod.POST)
public String updateUserPost(@ModelAttribute("userP") UserEntity user) {

    // 更新用戶信息
    userRepository.updateUser(user.getNickname(), user.getFirstName(),
            user.getLastName(), user.getPassword(), user.getId());
    userRepository.flush(); // 刷新緩衝區
    return "redirect:/admin/users";
}

而後，在 pages 目錄下，新建 updateUser.jsp 文件：

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
 <title>SpringMVC Demo 更新用戶</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
 <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <h1>SpringMVC 更新用戶信息</h1>
    <hr/>

    <form:form action="/admin/users/updateP" method="post" commandName="userP" role="form">
        <div class="form-group">
            <label for="firstName">Nickname:</label>
            <input type="text" class="form-control" id="nickname" name="nickname" placeholder="Enter Nickname:"
 value="${user.nickname}"/>
        </div>
        <div class="form-group">
            <label for="firstName">First Name:</label>
            <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Enter FirstName:"
 value="${user.firstName}"/>
        </div>
        <div class="form-group">
            <label for="lastName">Last Name:</label>
            <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Enter LastName:"
 value="${user.lastName}"/>
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="text" class="form-control" id="password" name="password" placeholder="Enter Password:"
 value="${user.password}"/>
        </div>
        <!-- 把 id 一併寫入 userP 中 -->
 <input type="hidden" id="id" name="id" value="${user.id}"/>

        <div class="form-group">
            <button type="submit" class="btn btn-sm btn-success">提交</button>
        </div>
    </form:form>
</div>


<!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

重啓服務器，進入 http://localhost:8080/admin/users ，點擊第一個用戶的修改按鈕，作以下修改：

提交後，從新跳轉回用戶管理頁面，可發現修改完成：

（5）刪除用戶

如今，新添加一個用戶：

如今咱們須要刪掉新加入的用戶，打開 MainController，加入如下方法：

// 刪除用戶
@RequestMapping(value = "/admin/users/delete/{id}", method = RequestMethod.GET)
public String deleteUser(@PathVariable("id") Integer userId) {

    // 刪除id爲userId的用戶
    userRepository.delete(userId);
    // 當即刷新
    userRepository.flush();
    return "redirect:/admin/users";
}

重啓服務器，進入 http://localhost:8080/admin/users ，點擊 ID=2 的用戶的刪除按鈕，在 controller 中處理完以後，將跳轉回用戶管理界面：

這樣，增刪該查基本完成了。

其實，更到這裏，基本就能夠開始開發工做了，還有一些其餘的功能，都須要經過平時的積累以及多查資料來完成。例如 JSON 數據的處理，異步請求的處理，以及相關外鍵等操做。

要知道的是，讀者所閱讀的三十分鐘，須要寫這篇文章的人數個小時的努力，整理確實不易。讀文章要有觸類旁通地態度，才能真正的把東西學精學全。

另開一文Java EE 學習（9）：IDEA + maven + spring 搭建 web（5）- 博客文章管理