利用Spring boot如何創(chuàng)建簡(jiǎn)單的web交互應(yīng)用
關(guān)于頁(yè)面渲染
其實(shí)在工作中,一直都是前后端分離,也就是說(shuō),我的工作從來(lái)都是提供接口,而不寫 html css js 之類的,所以在這方面也沒有經(jīng)驗(yàn)。
這里為了給大家介紹下模板引擎,我將會(huì)寫個(gè)非常非常簡(jiǎn)單的頁(yè)面,如果不好看,請(qǐng)見諒~
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)成功,重定向到蘋果列表頁(yè)面
快速開始
添加依賴文件
創(chuàng)建一個(gè) quick-thymeleaf 項(xiàng)目,創(chuàng)建方式參見上一篇文章 Springboot 入門。
創(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; /** * 制造蘋果,這里生成 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類為我們提供一些蘋果,在用戶登錄成功后展示。
其中 generateApples 方法用到了 Java8 的新特性 函數(shù)式編程,這樣代碼會(huì)少很多,看起來(lái)很舒服。
關(guān)于 Java8 函數(shù)式編程 ,有時(shí)間的話,我會(huì)專門開一個(gè)系列來(lái)和大家聊聊,敬請(qǐng)期待。
lombok 注解
簡(jiǎn)單說(shuō)明一下 lombok 注解
@Data:為所有屬性增加 getter setter 方法,并且自動(dòng)重寫 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)到蘋果列表頁(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)擊鏈接下載
接下來(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ò)程中,讓我覺得還是提供接口簡(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)證,我們是寫死了的,下一章將整合 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ì)腳本之家的支持。
相關(guān)文章
詳解使用spring cloud config來(lái)統(tǒng)一管理配置文件
這篇文章主要介紹了詳解使用spring cloud config來(lái)統(tǒng)一管理配置文件,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12java如何將實(shí)體類轉(zhuǎn)換成json并在控制臺(tái)輸出
這篇文章主要介紹了java如何將實(shí)體類轉(zhuǎn)換成json并在控制臺(tái)輸出問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11mybatis?foreach傳兩個(gè)參數(shù)批量刪除
這篇文章主要介紹了mybatis?foreach?批量刪除傳兩個(gè)參數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04java 裝飾模式(Decorator Pattern)詳解及實(shí)例代碼
裝飾器模式(Decorator Pattern)允許向一個(gè)現(xiàn)有的對(duì)象添加新的功能,同時(shí)又不改變其結(jié)構(gòu)。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式,它是作為現(xiàn)有的類的一個(gè)包裝2016-10-10Java設(shè)計(jì)模式之共享模式/享元模式(Flyweight模式)介紹
這篇文章主要介紹了Java設(shè)計(jì)模式之共享模式/享元模式(Flyweight模式)介紹,本文講解了為什么使用共享模式/享元模式、如何使用共享模式/享元模式、Flyweight模式在XML等數(shù)據(jù)源中應(yīng)用等內(nèi)容,需要的朋友可以參考下2015-03-03