關(guān)于頁(yè)面渲染

其實(shí)在工作中，一直都是前后端分離，也就是說(shuō)，我的工作從來(lái)都是提供接口，而不寫(xiě) html css js 之類的，所以在這方面也沒(méi)有經(jīng)驗(yàn)。

這里為了給大家介紹下模板引擎，我將會(huì)寫(xiě)個(gè)非常非常簡(jiǎn)單的頁(yè)面，如果不好看，請(qǐng)見(jiàn)諒~

Spring Boot 官方推薦的模板引擎是 Thymeleaf ，點(diǎn)擊可以進(jìn)入其官網(wǎng)了解詳情。

本章目標(biāo)

• 讓 Spring Boot 應(yīng)用可以訪問(wèn)到靜態(tài)資源文件
• 創(chuàng)建用戶登錄表單，并對(duì)用戶名、密碼進(jìn)行校驗(yàn)
• 校驗(yàn)失敗，將返回登錄頁(yè)，并展示錯(cuò)誤信息
• 校驗(yàn)成功，重定向到蘋(píng)果列表頁(yè)面
  

快速開(kāi)始

添加依賴文件

創(chuàng)建一個(gè) quick-thymeleaf 項(xiàng)目，創(chuàng)建方式參見(jiàn)上一篇文章 Springboot 入門(mén)。

創(chuàng)建好之后，修改我們的 POM 文件，添加 Thymeleaf 依賴，這里我們同時(shí)用到了 lombok 注解。

<!-- 模板 -->
<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- 引入 lombok ,用于注解 Model -->
<dependency>
 <groupId>org.projectlombok</groupId>
 <artifactId>lombok</artifactId>
 <version>1.12.6</version>
</dependency>

創(chuàng)建 Model 類

依賴添加完畢后，創(chuàng)建需要用到的類，這里需要用到兩個(gè)，一個(gè) User 用于用戶登錄，一個(gè) Apple 用于展示作用。

User.java

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
 @NotEmpty(message = "用戶名不能為空")
 @Length(min = 5, message = "用戶名長(zhǎng)度不能小于5位")
 private String username;
 @NotEmpty(message = "密碼不能為空")
 @Length(min = 6, message = "密碼長(zhǎng)度不能小于6位")
 private String password;
 /**
 * 校驗(yàn)是否合法用戶
 *
 * @param user
 * @return
 */
 public static boolean isUserValid(User user) {
 return "admin".equals(user.getUsername()) && "123456".equals(user.getPassword());
 }
}

Apple.java

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Apple {
 private Float price;
 private String color;
 /**
 * 制造蘋(píng)果,這里生成 9 只
 *
 * @return
 */
 public static List<Apple> generateApples() {
 List<Float> prices = Arrays.asList(2.5f, 1.3f, 3.2f);
 List<String> colors = Arrays.asList("red", "green", "black");
 return prices.stream().flatMap(
 p -> colors.stream().map(c -> new Apple(p, c))).collect(toList());
 }
 
}

java8 新特性

Apple類為我們提供一些蘋(píng)果，在用戶登錄成功后展示。

其中 generateApples 方法用到了 Java8 的新特性 函數(shù)式編程，這樣代碼會(huì)少很多，看起來(lái)很舒服。

關(guān)于 Java8 函數(shù)式編程 ，有時(shí)間的話，我會(huì)專門(mén)開(kāi)一個(gè)系列來(lái)和大家聊聊，敬請(qǐng)期待。

lombok 注解

簡(jiǎn)單說(shuō)明一下 lombok 注解

@Data:為所有屬性增加 getter setter 方法，并且自動(dòng)重寫(xiě) toString hashCode 方法，并且以所有非空的字段創(chuàng)建了構(gòu)造方法。

@NoArgsConstructor:生成無(wú)參構(gòu)造方法。

AllArgsConstructor:包含所有參數(shù)的構(gòu)造方法。

該類中其他的注解大家應(yīng)該常用就不說(shuō)明了。

創(chuàng)建控制器

Model 創(chuàng)建完畢，接著創(chuàng)建一個(gè)UserController 控制器。

該控制器包含三個(gè)方法

• 在瀏覽器訪問(wèn)主頁(yè)的時(shí)候，我們希望進(jìn)入到登錄頁(yè)面，所以含有一個(gè) toLoginForm 方法
• 用戶在登錄頁(yè)面輸入用戶名、密碼之后，需要進(jìn)行登錄操作，所以包含一個(gè) login 方法
• 登錄成功后，將跳轉(zhuǎn)到蘋(píng)果列表頁(yè)面，需要一個(gè) apples方法
  

UserController.java

@Controller
@RequestMapping("/user") // 在類中定義,表示該類中的所有方法都將以這個(gè)路徑作為前綴
public class UserController {
 @GetMapping // 4.3 版本后的新特性
 public ModelAndView toLoginForm(@ModelAttribute("errorMsg") String errorMsg, @ModelAttribute("user") User user) {
 // 返回 templates/login.html 頁(yè)面, html 可以省略
 return new ModelAndView("/login");
 }
 @PostMapping("/login") // 4.3 版本后的新特性
 public ModelAndView login(HttpServletRequest request, @Valid User user, BindingResult result,
  RedirectAttributes redirect) {
 // 如果 user 的字段不符合要求,則返回到登錄頁(yè)面,并將 valid error 信息傳入登錄頁(yè)面
 if (result.hasErrors())
 return new ModelAndView("/login", "formErrors", result.getAllErrors());
 // 用戶名或密碼不正確
 if (!User.isUserValid(user)) {
 // 添加錯(cuò)誤消息,該消息將一起帶到重定向后的頁(yè)面,
 // 瀏覽器刷新后,該數(shù)據(jù)將消失
 redirect.addFlashAttribute("errorMsg", "登錄失敗,用戶名或密碼錯(cuò)誤");
 // 重定向到 login.html 頁(yè)面
 return new ModelAndView("redirect:/user");
 }
 // 將用戶登錄信息添加到 session 中
 request.getSession().setAttribute("userLogin", true);
 return new ModelAndView("redirect:/user/apples");
 }
 @GetMapping("/apples")
 public ModelAndView apples(HttpServletRequest request) {
 Boolean userLogin = (Boolean) request.getSession().getAttribute("userLogin");
 if (userLogin != null && userLogin) {
 List<Apple> apples = Apple.generateApples();
 // 登錄成功,進(jìn)入 apple 頁(yè)面,并展示 apples
 ModelAndView modelAndView = new ModelAndView("/apple");
 modelAndView.addObject("apples", apples);
 return modelAndView;
 }
 return new ModelAndView("redirect:/user");
 }
}

類中已作了簡(jiǎn)單的解釋，所以不再贅述，如果有疑問(wèn)的，可以自己搜索相關(guān)資料，或者留言。

創(chuàng)建并訪問(wèn)資源文件

在控制器中，我們的兩個(gè)方法都響應(yīng)了不同的頁(yè)面，那么現(xiàn)在就需要?jiǎng)?chuàng)建對(duì)應(yīng)的頁(yè)面。

在 Spring Boot 中，應(yīng)用的資源文件默認(rèn)處于 resources 資源文件夾下，其中靜態(tài)文件默認(rèn)在 resources/static 目錄下，模板文件在 resources/templates 目錄下，我們創(chuàng)建對(duì)應(yīng)的目錄結(jié)構(gòu)

按照?qǐng)D示創(chuàng)建好之后，再在對(duì)應(yīng)的目錄中添加 css、js 文件。

然后創(chuàng)建 HTML 文件，這里由于代碼量太多，就不展示了，有興趣的可以點(diǎn)擊鏈接下載

apple.html

login.html

layout.html

接下來(lái)在 resources 根目錄下創(chuàng)建 Spring Boot 的配置文件 application.yml

推薦使用 yml 格式作為配置文件格式，看上去很直觀

application.yml

server:
 # 指定服務(wù)器端口號(hào)
 port: 8088
spring:
 thymeleaf:
 # 禁止瀏覽器緩存
 cache: false
 mode: HTML5

啟動(dòng)項(xiàng)目

一切準(zhǔn)備就緒，接下來(lái)我們啟動(dòng)項(xiàng)目，和上一章不同的是，這次我們把啟動(dòng)類單獨(dú)移出，以免和業(yè)務(wù)類混在一起。

在控制器所在包的上一層，我們創(chuàng)建

Application.java

@SpringBootApplication
public class Application extends WebMvcConfigurerAdapter {
 public static void main(String[] args) {
 SpringApplication.run(Application.class, args);
 }
}

效果預(yù)覽

運(yùn)行 main 方法，在瀏覽器中訪問(wèn)

http://localhost:8088/user

當(dāng)用戶名少于 5 位，密碼少于 6 位時(shí)

當(dāng)用戶名密碼不正確時(shí)

最后，登錄成功

至此，一個(gè)簡(jiǎn)單的 web 交互做好了，當(dāng)然這里面肯定存在些問(wèn)題，我也是第一次接觸 Spring ，也是第一次以非 JSON 的格式傳遞數(shù)據(jù)，在實(shí)現(xiàn)這個(gè)的過(guò)程中，讓我覺(jué)得還是提供接口簡(jiǎn)單方便點(diǎn)，哈哈。

接下來(lái)要了解的

本章我們快速了解了下 Spring Boot 創(chuàng)建 web 應(yīng)用。

但是在我們實(shí)現(xiàn)的過(guò)程中，每當(dāng)改了類或者資源文件的時(shí)候，要想看到效果，只得重新啟動(dòng)項(xiàng)目，這太麻煩了，下一節(jié)了解下 Spring Boot 熱部署。

并且在本章中，對(duì)于用戶的驗(yàn)證，我們是寫(xiě)死了的，下一章將整合 Mybatis。

代碼已同步到 GitHub, 項(xiàng)目地址 github:sboot-learn，大家也可以通過(guò)本地進(jìn)行下載，點(diǎn)擊這里下載

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論