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

最新推荐文章于 2024-02-06 09:51:18 发布

霸道流氓气质

最新推荐文章于 2024-02-06 09:51:18 发布

阅读量5.7k

点赞数 2

分类专栏： SpringBoot 文章标签： springboot

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/80966388

版权

SpringBoot 专栏收录该内容

200 篇文章 7 订阅

订阅专栏

开发环境：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>&nbsp;登录
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger" id="registerbtn">
<span class="glyphicon glyphicon-edit"></span>&nbsp;注册
</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

霸道流氓气质

关注

2
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
SpringBoot开发第一个Web入门级应用(超详细)

开发环境：SpringBoot+bootstrap+jquery+springMVC一.Myecplise下创建一个新的Maven项目命名为logintest,按照Maven项目的规范，在src/main/下新建一个名为resource的文件夹，并在此文件夹下再新建static和templete两个文件夹。修改前的项目目录结构：修改后的项目目录结构：二....
复制链接

扫一扫