javascript
SpringBoot开发第一个Web入门级应用(超详细)
開發環境:SpringBoot+bootstrap+jquery+springMVC
一.Myecplise下創建一個新的Maven項目
命名為logintest,按照Maven項目的規范,在src/main/下新建一個名為resource的文件夾,并在此文件夾下再新建static和templete兩個文件夾。
? ? 修改前的項目目錄結構:
????修改后的項目目錄結構:
二.修改pom.xml文件
①添加的第一部分代碼(位置在url標簽后)?
?<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.0.RELEASE</version> <relativePath/>?</parent><!-- ?? spring-boot-starter-parent是Spring Boot的核心啟動器, 包含了自動配置、日志和YAML等大量默認的配置,大大簡化了我們的開發。 引入之后相關的starter引入就不需要添加version配置,spring boot會自動選擇最合適的版本進行添加。-->②添加的第二部分代碼(位置在dependencies下)?
? <!-- 添加spring-boot-starter-web模塊依賴 --><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency><!-- 添加spring-boot-starter-thymeleaf模塊依賴 --><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>③完整的pom.xml代碼
<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><groupId>org.fkit</groupId><artifactId>logintest</artifactId><version>0.0.1-SNAPSHOT</version><packaging>jar</packaging><name>logintest</name><url>http://maven.apache.org</url><!-- ?? spring-boot-starter-parent是Spring Boot的核心啟動器, 包含了自動配置、日志和YAML等大量默認的配置,大大簡化了我們的開發。 引入之后相關的starter引入就不需要添加version配置,spring boot會自動選擇最合適的版本進行添加。 --><parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.0.RELEASE</version> <relativePath/>? </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><dependencies><!-- 添加spring-boot-starter-web模塊依賴 --><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency><!-- 添加spring-boot-starter-thymeleaf模塊依賴 --><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency><dependency><groupId>junit</groupId><artifactId>junit</artifactId><scope>test</scope></dependency></dependencies></project>三.引入靜態文件
bootstrap官網:https://v3.bootcss.com/,下載后目錄:
?
將Bootstrap的腳本樣式放在src/main/resource/static下
在src/main/resources/templates下新建一個index.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"></meta> <title>Spring Boot Web開發測試</title> <link rel="stylesheet" th:href="@{css/bootstrap.min.css}" /> <link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/> <script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script> <script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script> <script type="text/javascript"> $(function(){ $("#loginbtn").click(function(){ var loginName = $("#loginName"); var password = $("#password"); var msg = ""; if(loginName.val() == ""){ msg = "登錄名不能為空!"; loginName.focus(); }else if(password.val() == ""){ msg = "密碼不能為空!"; password.focus(); } if(msg != ""){ alert(msg); }else{ $("#loginform").submit(); }? }) }) </script> </head> <body> <!-- .container 類用于固定寬度并支持響應式布局的容器。 --> <div class="container"> <!-- 柵格系統用于通過一系列的行(row)與列(column)的組合來創建頁面布局 --> <div class="row"> <!-- 頁面標題 --> <div class="page-header"> <h2>用戶登錄</h2> <!--?.form-control:所有設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性為 width: 100%;?.form-horizontal:表單添加 .form-horizontal 類,并聯合使用 Bootstrap 預置的柵格類,可以將 label 標簽和控件組水平并排布局。.form-inline:多個控件可以排列在同一行,水平--> <form class="form-horizontal" action="login" method="post" id="loginform"> <div class="form-group"> <!-- input-group用于將圖片和控件放在一組 ?--> <div class="input-group col-md-4"> <!-- 額外的內容(圖片)放在 input-group-addon中--> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input class="form-control" placeholder="用戶名/郵箱" type="text" name="loginName" id="loginName" /> </div> </div> <div class="form-group"> <div class="input-group col-md-4"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input class="form-control" placeholder="密碼" type="password" name="password" id="password" /> </div> </div> <div class="form-group"> <div class="col-md-4"> <!--btn-group-justified 能夠讓按鈕組根據父容器尺寸來設定各自相同的尺寸,采用響應式布局技術從而有利于移動端的用戶體驗。--> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-success" id="loginbtn"> <span class="glyphicon glyphicon-log-in"></span> 登錄 </button> </div> <div class="btn-group"> <button type="button" class="btn btn-danger" id="registerbtn"> <span class="glyphicon glyphicon-edit"></span> 注冊 </button> </div> </div> </div> </div> </form> </div> </div> </div> </body></html>再在此目錄下新建main.html:此處是引用bootstrap官網實例后臺模板:
要使用這個控制臺模板,還要將其css樣式文件引入到css文件夾中:
?
?
代碼:
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"></meta> <link rel="stylesheet" th:href="@{css/bootstrap.min.css}" /> <link rel="stylesheet" th:href="@{css/dashboard.css}" /> <link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/> <script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script> <script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script> <title>網站首頁</title> </head><body><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Project name</a></div><div id="navbar" class="navbar-collapse collapse"><ul class="nav navbar-nav navbar-right"><li><a href="#">Dashboard</a></li><li><a href="#">Settings</a></li><li><a href="#">Profile</a></li><li><a href="#">Help</a></li></ul><form class="navbar-form navbar-right"><input type="text" class="form-control" placeholder="Search..."></form></div></div></nav><div class="container-fluid"><div class="row"><div class="col-sm-3 col-md-2 sidebar"><ul class="nav nav-sidebar"><li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li><li><a href="#">Reports</a></li><li><a href="#">Analytics</a></li><li><a href="#">Export</a></li></ul><ul class="nav nav-sidebar"><li><a href="">Nav item</a></li><li><a href="">Nav item again</a></li><li><a href="">One more nav</a></li><li><a href="">Another nav item</a></li><li><a href="">More navigation</a></li></ul><ul class="nav nav-sidebar"><li><a href="">Nav item again</a></li><li><a href="">One more nav</a></li><li><a href="">Another nav item</a></li></ul></div><div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"><h1 class="page-header">Dashboard</h1><div class="row placeholders"><div class="col-xs-6 col-sm-3 placeholder"><img src="https://img-blog.csdnimg.cn/2022010619090954616.gif" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"><h4>Label</h4><span class="text-muted">Something else</span></div><div class="col-xs-6 col-sm-3 placeholder"><img src="https://img-blog.csdnimg.cn/2022010619090954616.gif" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"><h4>Label</h4><span class="text-muted">Something else</span></div><div class="col-xs-6 col-sm-3 placeholder"><img src="https://img-blog.csdnimg.cn/2022010619090954616.gif" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"><h4>Label</h4><span class="text-muted">Something else</span></div><div class="col-xs-6 col-sm-3 placeholder"><img src="https://img-blog.csdnimg.cn/2022010619090954616.gif" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"><h4>Label</h4><span class="text-muted">Something else</span></div></div><h2 class="sub-header">Section title</h2><div class="table-responsive"><table class="table table-striped"><thead><tr><th>#</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr></thead><tbody><tr><td>1,001</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td></tr><tr><td>1,002</td><td>amet</td><td>consectetur</td><td>adipiscing</td><td>elit</td></tr><tr><td>1,003</td><td>Integer</td><td>nec</td><td>odio</td><td>Praesent</td></tr><tr><td>1,003</td><td>libero</td><td>Sed</td><td>cursus</td><td>ante</td></tr><tr><td>1,004</td><td>dapibus</td><td>diam</td><td>Sed</td><td>nisi</td></tr><tr><td>1,005</td><td>Nulla</td><td>quis</td><td>sem</td><td>at</td></tr><tr><td>1,006</td><td>nibh</td><td>elementum</td><td>imperdiet</td><td>Duis</td></tr><tr><td>1,007</td><td>sagittis</td><td>ipsum</td><td>Praesent</td><td>mauris</td></tr><tr><td>1,008</td><td>Fusce</td><td>nec</td><td>tellus</td><td>sed</td></tr><tr><td>1,009</td><td>augue</td><td>semper</td><td>porta</td><td>Mauris</td></tr><tr><td>1,010</td><td>massa</td><td>Vestibulum</td><td>lacinia</td><td>arcu</td></tr><tr><td>1,011</td><td>eget</td><td>nulla</td><td>Class</td><td>aptent</td></tr><tr><td>1,012</td><td>taciti</td><td>sociosqu</td><td>ad</td><td>litora</td></tr><tr><td>1,013</td><td>torquent</td><td>per</td><td>conubia</td><td>nostra</td></tr><tr><td>1,014</td><td>per</td><td>inceptos</td><td>himenaeos</td><td>Curabitur</td></tr><tr><td>1,015</td><td>sodales</td><td>ligula</td><td>in</td><td>libero</td></tr></tbody></table></div></div></div></div><!-- Bootstrap core JavaScript================================================== --><!-- Placed at the end of the document so the pages load faster --><script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!-- Just to make our placeholder images work. Don't actually copy the next line! --><script src="../../assets/js/vendor/holder.min.js"></script><!-- IE10 viewport hack for Surface/desktop Windows 8 bug --><script src="../../assets/js/ie10-viewport-bug-workaround.js"></script></body></html>四.編寫處理請求的控制器類
新建controller包在com.ysh.logintest下,并在此包下編寫IndexController、LoginController、MainController
代碼:
IndexController.java:
package com.ysh.logintest.controller;import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping;// Controller注解用于指示該類是一個控制器 @Controller public class IndexController {// 映射"/"請求 @RequestMapping("/") public String index(Model model){ System.out.println("IndexController index方法被調用......"); // 根據Thymeleaf默認模板,將返回resources/templates/index.html return "index"; }}LoginController.java:
package com.ysh.logintest.controller;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.servlet.ModelAndView;@Controller public class LoginController {@PostMapping("login") public ModelAndView login( @RequestParam("loginName") String loginName, @RequestParam("password") String password, ModelAndView mv){ System.out.println("LoginController login方法被調用......"); System.out.println("LoginController 登錄名:"+loginName + " 密碼:" + password); // 重定向到到main請求 mv.setViewName("redirect:/main"); return mv; }}?
MainController.java:
?
package com.ysh.logintest.controller;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping;@Controller public class MainController {@RequestMapping(value="/main") public String main(){ System.out.println("MainController main方法被調用......"); // 根據Thymeleaf默認模板,將返回resources/templates/main.html return "main"; }}五.測試應用
右擊項目,run as ?Spring ?Boot App
當控制臺成功出現如下則運行成功:
此時打開瀏覽器:輸入 ?http://localhost:8080/
點擊登錄后會跳轉到main.html:
?
?
附錄:
項目源碼:
https://download.csdn.net/download/badao_liumang_qizhi/10529922
?
bootstrap控制臺模板+css樣式:
https://download.csdn.net/download/badao_liumang_qizhi/10529931
?
?
?
?
總結
以上是生活随笔為你收集整理的SpringBoot开发第一个Web入门级应用(超详细)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: spring boot创建应用 端口冲突
- 下一篇: SpringBoot中使用Thymele