pringBoot

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導致。

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

單數據提交是網站中比較常見的用戶交互行為，在html頁面中常見的是注冊表單，提交數據前，會檢查表單數據的完整性，是否出現漏填、誤填）。如果出現漏填、誤填會提示用戶提示用戶，確保填寫數據準確有效。在檢查表單數據數據一般都是使用php或者JavaScript，今天為大家介紹怎么使用html5新增元素制作用戶注冊頁面并進行檢查的數據檢查。

html5代碼如下:

頁面運行結果

分析

1、H5中的fieldset標簽

fieldset標簽用于表單中的元素組合起來，標簽會在相關表單元素周圍繪制邊框，大部分瀏覽器支持這個標簽，本實例中fieldset標簽把表單中所有的元素都包裹起來。

2、input標簽

input標簽用戶信息，type有不同的值，輸入字段有很多形式。比如說文本字段、復選框、按鈕（單選、復選），input不是html5新增的元素，html4也可以支持iuput標簽。只是h5新增加了一些新的input屬性，比如說本例中的required屬性，它告訴用戶輸入字段的值是必需的，不能為空，input的placeholder屬性用于幫助用戶填寫輸入字段的提示。input標簽的list屬性，表示輸入字段的預定義選項的 datalist 。

3、output標簽

output是h5中的新標簽，它定義不同類型的輸出。onforminput是input標簽的屬性，h5支持onforminput屬性，它表示戶輸入時運行的腳本。本例中是用戶輸入時運行“value=range1.value”。

4、datalist標簽

datelist定義選項列表，和input元素配合使用，input 元素的 list 屬性來綁定 datalist標簽，不能單獨使用。本例中的datelist標簽是提示輸入的個人主頁的示例列表。注意的是ie不支持datelist標簽這一點是需要注意的。

5、label標簽

label標簽不會向用戶呈現任何效果，如果在 label 元素內點擊文本，會觸發控件。它不是h5中的新標簽。

關于“html5新增元素制作用戶注冊頁面”先聊到這。每天學習一個知識點，每日寄語”每一個成功者都有一個開始。勇于開始，才能找到成功的路。”如轉載請標注出處。