當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
Spring Boot中实现简单表单提交(登录功能)
生活随笔
收集整理的這篇文章主要介紹了
Spring Boot中实现简单表单提交(登录功能)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
?
原理
源碼
?
原理
使用@PostMapping可以得到前端Post的Mapping!
@RequestParam可以獲取詳細的參數信息;
程序運行截圖如下(登錄成功):
?
程序運行截圖如下(登錄失敗):
?
源碼
程序結構如下:
源碼如下:
MyMvcConfig.java
package firstlogindemo.demo.config;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;@Configuration public class MyMvcConfig extends WebMvcConfigurerAdapter {@Beanpublic WebMvcConfigurerAdapter webMvcConfigurerAdapter(){WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {@Overridepublic void addViewControllers(ViewControllerRegistry registry) {registry.addViewController("/").setViewName("index");registry.addViewController("index.html").setViewName("index");}};return adapter;} }LoginController.java
package firstlogindemo.demo.controller;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.thymeleaf.util.StringUtils;import java.util.Map;@Controller public class LoginController {//@DeleteMapping//@PutMapping//@GetMapping//@RequestMapping(value = "/usr/login", method = RequestMethod.POST)@PostMapping(value = "/user/login")public String login(@RequestParam("username") String username,@RequestParam("password") String password,Map<String, Object> map){if(!StringUtils.isEmpty(username) && "123456".equals(password)){return "success";}map.put("msg", "用戶名密碼錯誤");return "index";} }index.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><form th:action="@{/user/login}" method="post"><p>用戶名:<input name="username" type="text" placeholder="userName"></p><p>密 碼:<input name="password" type="password" placeholder="Password"></p><button type="submit">提交</button> </form></body> </html>success.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><h1>成功</h1></body> </html>porm.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><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.19.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.loginWebDemo</groupId><artifactId>demo</artifactId><version>0.0.1-SNAPSHOT</version><name>loginWeb</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version><thymeleaf.version>3.0.9.RELEASE</thymeleaf.version><thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></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>?
總結
以上是生活随笔為你收集整理的Spring Boot中实现简单表单提交(登录功能)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: QML工作笔记-界面登录框设置(方便其他
- 下一篇: 前端笔记-Vue中缺少router-vi