當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

SpringBoot开发第一个Web入门级应用(超详细)

發布時間：2025/3/19 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>

②添加的第二部分代碼（位置在dependencies下）?

? <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>

③完整的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><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><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><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>  <div class="container">  <div class="row">  <div class="page-header"> <h2>用戶登錄</h2>  <form class="form-horizontal" action="login" method="post" id="loginform"> <div class="form-group">  <div class="input-group col-md-4">  <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">  <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><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><script src="../../assets/js/vendor/holder.min.js"></script><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