1. 程式人生 > >一步步實現web程式資訊管理系統之二--後臺框架實現跳轉登陸頁面

一步步實現web程式資訊管理系統之二--後臺框架實現跳轉登陸頁面

SpringBoot

springboot的目的是為了簡化spring應用的開發搭建以及開發過程。內部使用了特殊的處理,使得開發人員不需要進行額外繁鎖的xml檔案配置的編寫,其內部包含很多模組的配置只需要新增maven依賴即可使用,這項功能可謂對開發人員提供了大大的好處。使用springboot只需要簡單配置一下就可以完成之前複雜的配置過程。可以到https://start.spring.io/此網站上,下載一個最簡單的springboot應用,然後一步一步實現自已的應用。

 

 

可以看出當前的穩定版本為2.1.0,點選Generate Project 按鈕,即可下載一個可用的springboot應用。

 

 

這個是我下載下來後,雙擊後出來的。可以看出以工程是一個基於maven的專案。你可以將其解壓到任何一個目錄下,通過eclipse或其他IDE進行匯入後執行,eclipse匯入流程為File->import->maven->existing maven projects,查詢到自己的專案目錄。也可以基於此工程來建立自已的maven專案。

下面以建立自己的maven專案

建立自己的springboot專案

  • 建立工程

在建立專案時,可以建立一個多模組聚合專案,即在建立專案時選中

 

 

選擇為pom。

建立後的工程結構為

 

 

 

 

  • jar包依賴
  • 開啟從springboot官網中下載下來的工程目錄,開啟pom.xml檔案
<parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>2.1.0.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>
 </properties>

將此段程式碼複製到 spring-boot-study工程中的pom檔案中

將下面的依賴複製到spring-boot-web工程中的pom檔案中

<dependencies>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter</artifactId>
 </dependency>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-test</artifactId>
 <scope>test</scope>
 </dependency>
 </dependencies>
 <build>
 <plugins>
 <plugin>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-maven-plugin</artifactId>
 </plugin>
 </plugins>
 </build>

eclipse自動完成專案工程的配置。完成後專案中所有需要依賴的jar包自動配置完成。

  • 程式碼編寫
  • 將application.properties檔案拷貝到spring-boot-study專案的resources目錄下。檔案中的內容暫時先不要管,編寫以下程式碼
@SpringBootApplication
@RestController
public class WebApplication {
 @RequestMapping("/hello")
 public String helloWorld() {
 return "Hello World";
 }
 
 public static void main(String[] args) {
 SpringApplication.run(WebApplication.class, args);
 }
 
}

HelloWold就已經完成後。可以在瀏覽器中輸入localhost:8080/hello即可看到效果

 

 

springboot預設啟動後的埠為8080,但可以在application.properties檔案中進行修改。

server.port=9001

將埠修改為9001,重新啟動專案後,在瀏覽器中輸入入localhost:9001/hello同樣可以看到相同的結果。

  • 整合login介面
  • 現在後臺已經有轉發功能,具備web瀏覽功能。但我們需要訪問URL為“/”時跳轉到登陸介面,即建立好的登陸介面。本人也是在學習過程中,在網上學習好久才發現使用html的話就使用thymeleaf模板就好了。下面就詳細來說說如何使用thymeleaf開發html。
  • 在spring-boot-web專案中的pom檔案中加上thymeleaf的依賴。
<!-- 加入thymeleaf的支援 -->
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>

但在Spring Boot專案中,一般src/main/resources/static目錄用於存放各類靜態資原始檔,例如css、js和image等。src/main/resources/templates用於存放頁面檔案,例如html,jsp等。所以在spring-boot-web中的resources目錄下建立static目錄與templates目錄,並將相應的資原始檔放置在各自的目錄下。

配置thymeleaf

#thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.cache=false

html檔案修改,增加xmlns:th="http://www.thymeleaf.org" 屬性,資原始檔的引入要修改。

<link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet" />
<link href="../static/css/login.css" th:href="@{/css/login.css}" rel="stylesheet" />

然後編寫 java程式碼

@Controller
public class IndexController {
 @RequestMapping("/")
 public String index() {
 return "login";
 }
 
}

重新啟動程式,訪問localhost:9001/就可成功跳轉至login.html登陸介面上。

注:thymeleaf對html標籤要求很嚴格,每一個標籤都需要成對出現。

除錯過程中遇到下面異常資訊

org.thymeleaf.exceptions.TemplateInputException: Error resolving template [login], template might not exist or might not be accessible by any of the configured Template Resolvers
 at org.thymeleaf.engine.TemplateManager.resolveTemplate(TemplateManager.java:869) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
 at org.thymeleaf.engine.TemplateManager.parseAndProcess(TemplateManager.java:607) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
 at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1098) [thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
 at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1072) [thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
 at org.thymeleaf.spring5.view.ThymeleafView.renderFragment(ThymeleafView.java:362) [thymeleaf-spring5-。。。。。。。。。。。

因為錯將templates寫成templatse導致。

至此實現從後端服務訪問到登陸介面的搭建,還沒有具體登陸邏輯實現。

有興趣可以加一下854630135這個群去交流一下噢