Spring Boot實戰系列《六》：人事管理系統的登錄設計

Spring Boot實戰系列《六》：人事管理系統的登錄設計

1.前言

在上一篇中教大家在IEDA或者eclipse中使用spirng initializer快速創建spring boot項目，這樣構造出來的spring boot項目，自動配置了基本的運行環境和項目結構。便于開發時的繼續工作，推薦使用。

那么在經過了前面幾篇的介紹以后，接下里我們開始做一個小小的人事管理系統，來進一步熟悉spring boot的開發流程。

本次人事管理系統的基本技術有：

• bootstrap
• spring boot
• mysql
• mybatis
• spring mvc
• thymeleaf…

廢話不多說，先使用spirng initializer來快速創建人事管理系統項目。

2.創建人事管理系統項目

首先新建spring boot項目，

填寫項目的名稱：

就叫pmsystem吧。
勾選需要的模塊依賴：

然后選擇項目保存的路徑，點擊完成。IDEA就會開始自動導入jar包，最后完成項目構建。
最后創建好了項目如下：

鑒于pom.xml愛出問題，我這里給出源碼：
pom.xml：

<?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/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.zout</groupId><artifactId>pmsystem</artifactId><version>0.0.1-SNAPSHOT</version><packaging>jar</packaging><name>pmsystem</name><description>Demo project for Spring Boot</description><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.10.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><java.version>1.8</java.version><thymeleaf.version>3.0.9.RELEASE</thymeleaf.version><!-- 布局功能的支持程序 thymeleaf3主程序 layout2以上版本 --><!-- thymeleaf2 layout1--><thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version></properties><dependencies><!-- 引入thymeleaf模板引擎 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!-- 引入web模塊 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- 引入啟動器-可以使用注解來開發了 --><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>1.3.2</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--引入jquery-webjar--><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.3.1</version></dependency><!--引入bootstrap--><dependency><groupId>org.webjars</groupId><artifactId>bootstrap</artifactId><version>4.0.0</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build> </project>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85

這樣就創建好了一個spring boot項目，也就是我們的人事管理系統pmsystem了，找到主函數main(),右鍵運行。

啟動項目：
然后你發發現報錯了？

原因：

因為spring boot默認會加載org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration類，DataSourceAutoConfiguration類使用了@Configuration注解向spring注入了dataSource bean。因為工程中沒有關于dataSource相關的配置信息，當spring創建dataSource bean因缺少相關的信息就會報錯。
因為我們剛剛創建一個基礎的spring boot，什么實體類都沒有寫，于是可以先在Application類上增加@EnableAutoConfiguration(exclude={DataSourceAutoConfiguration.class})來阻止spring boot自動注入dataSource bean。

解決：

@EnableAutoConfiguration(exclude={DataSourceAutoConfiguration.class})

• 1

圖示：

等做了相關配置或者添加了@bean注解，再去掉這個注解。

運行項目，輸入http://localhost:8080/

看到如下界面表示項目啟動成功了。

3.登錄頁面設計

創建好了本項目以后，初次啟動成功。證明jar包導入沒有問題，接下里就開始寫一個登錄頁面。
首先，我們使用的是bootstrap，那么需要引入jquery，css等靜態資源文件。

1.引入bootstarp靜態資源

靜態資源文件，需要導入項目的static文件夾下：
我新建了一個asserts文件夾來存放喲。（資源就是bootstarp官網下載的4.0版。或者文末給出項目資源文件下載地址。）
圖示：

2.新建登錄login.html：

需要放到指定位置，不然無法讓模板來解析。
這里需要說明：

假設Index.html是一個登錄頁面。
那么首先spring boot要默認訪問首頁》》是訪問靜態資源文件下的index.html這個界面。

舉個栗子：
比如你的resources文件夾下有新建一個public文件夾，下面放個index.html，然后又在templates下放一個index.html。

他就會自己去訪問public下的index而不是模板下寫的index，因為首先默認去訪問的是靜態資源。

所以我們呢，需要更改》》》使用controller來控制默認訪問的首頁的位置。

做法如下：
首先在templates文件夾下新建一個login.html頁面（自定義的，你可以寫index，xxx一樣的。）：

然后記得聲明這個一個模板引擎頁面，然后使用thymelmeaf語法引入cssjs等資源。

源碼：

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content=""><meta name="author" content=""><title>人事系統登錄頁面</title><!-- webjars是引入的jar路徑 --><link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet"><!-- asserts是本地路徑 --><link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet"> </head>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

因為是登錄頁面，那么就需要寫一個form表單：

里面就是賬號密碼登錄按鈕，這些。

body中的源碼：

<body class="text-center"> <form class="form-signin" action="dashboard.html" method="post"><img class="mb-4" th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72"><h1 class="h3 mb-3 font-weight-normal">Please sign in</h1><label class="sr-only">Username</label><input type="text" class="form-control" placeholder="Username" required="" autofocus=""><label class="sr-only">Password</label><input type="password" class="form-control" placeholder="Password" required=""><div class="checkbox mb-3"><label><input type="checkbox" value="remember-me"> Remember me</label></div><button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button><p class="mt-5 mb-3 text-muted">? 2018-www.zoutao.info/zt</p><a class="btn btn-sm">中文</a><a class="btn btn-sm">English</a> </form> </body> </html>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

解釋：
如圖中的是使用thymeleaf模板語法來指明引用的地址，

那么，比如說，我們要引用一些公共資源，是不需要引入到自己的項目下，可以直接引入jar包，然后使用webjar來引入對應的公共資源即可啊。
就是在pom.xml中引入：

然后使用模板引擎的方式來正確引用即可。
Webjar下的請求都來jar的resources文件夾下來找的。

它存在于項目的：

這就是上面
th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}"
這句話的意思，就是去當前引用的項目下找到對應的公共資源。
這只是引用公共資源的一種舉例，為了告訴大家以后可以采用這種方式來引入pom.xml里面導入的插件包。（以上做為了解就好。）

3.新建controller來控制默認訪問的首頁的位置。

因為spring boot配置了URL默認會加上前后綴：templates和html。

控制默認訪問的首頁的位置有三種方式：

第一種：在controller層里面新建一個hellocontroller：

跟spring mvc一樣的寫法：

@RequestMapping({"/","/index.html"})public String index(){return "login";}

• 1
• 2
• 3
• 4
• 5

注意：/表示當前項目路徑，/index.html表示當前url。就是這兩種URL都由index這個方法來處理的意思。

啟動sprite boot，運行：可以看到默認訪問位置已經來到了我們剛才寫的login.html頁面。

但是這種方式，以后我們每次一個URL變化都要來為頁面寫一個空方法，比較麻煩，于是改為使用config》》控制文件來控制即可。

第二種：
直接使用視圖映射，直接把請求映射到某個頁面即可。也就是我們常用的spring mvc的方式。
創建config文件夾和mymvcconfig.java：

這樣寫：寫一個addViewControllers方法，使用ViewControllerRegistry對象。該對象的addViewController方法，就是一個視圖解析器。跟ModelAndView()有點像。

源碼：

public void addViewControllers(ViewControllerRegistry registry){//瀏覽器發送 /請求來到 login.html頁面registry.addViewController("/").setViewName("login");}

• 1
• 2
• 3
• 4
• 5

運行：也是一樣的效果，記得注釋掉第一種方法，在運行喲。

第三種方法：推薦
因為所有的WebMvcConfigurerAdapter組件都會一起起作用，那么我們就應該寫成一個總體方法，不要一個一個的單獨寫。
專門做返回視圖解析。

重寫視圖解析器，經常使用spring mvc的同學都知道，我們經過controller來跳轉頁面都是一個視圖解析的過程，那么spring boot也已經提供了視圖解析器給大家使用，這樣重寫，以后我們就可以把所有需要解析的寫在里面即可。

/***告訴spring boot存在這個視圖解析的專門方法。* @return adapter 視圖解析對象*/@Beanpublic WebMvcConfigurerAdapter webMvcConfigurerAdapter(){WebMvcConfigurerAdapter adapter =new WebMvcConfigurerAdapter(){//重寫他的視圖映射方法-以后所有的視圖解析都可以寫在這里面了。@Overridepublic void addViewControllers(ViewControllerRegistry registry) {registry.addViewController("/").setViewName("login");}};return adapter;}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

將組件注冊在容器》這樣才能生效，相當于告訴springboot這個東西的存在。使用的是**@bean**注解。

最后運行：

依舊可以訪問到。

上面三種方法，推薦第三種，第三種相當于第二種的封裝，第一種的抽象。

最后給出MyMvcConfig的源碼：

package com.zout.config;import com.zout.component.MyLocaleResolver; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.LocaleResolver; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;/*** @Description: 自定義配置，必須繼承自動配置類* @Author: Zoutao* @Date: 2018/12/4*/ @Configuration public class MyMvcConfig extends WebMvcConfigurerAdapter{/*public void addViewControllers(ViewControllerRegistry registry){//瀏覽器發送 /請求來到loginregistry.addViewController("/").setViewName("login");}*//***告訴spring boot存在這個視圖解析的專門方法。* @return adapter 視圖解析對象*/@Beanpublic WebMvcConfigurerAdapter webMvcConfigurerAdapter(){WebMvcConfigurerAdapter adapter =new WebMvcConfigurerAdapter(){//重寫他的視圖映射方法-以后所有的視圖解析都可以寫在這里面了@Overridepublic void addViewControllers(ViewControllerRegistry registry) {registry.addViewController("/").setViewName("login");registry.addViewController("/index.html").setViewName("login");}};return adapter;} }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39

上面就是整個人事管理系統的登錄設計，主要是使用bootstarp來做一個登錄頁面效果，然后使用MyMvcConfig來自定義視圖解析器，做到URL請求和設置默認訪問的首頁效果。

總結

以上是生活随笔為你收集整理的Spring Boot实战系列《六》：人事管理系统的登录设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。