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

女爷i 2023-10-17 22:19 36阅读 0赞

开发环境：SpringBoot+bootstrap+jquery+springMVC

一.Myecplise下创建一个新的Maven项目

命名为logintest,按照Maven项目的规范，在src/main/下新建一个名为resource的文件夹，并在此文件夹下再新建static和templete两个文件夹。

修改前的项目目录结构：

![70][]

修改后的项目目录结构：

![70 1][]

二.修改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/，下载后目录：

![70 2][]

将Bootstrap的脚本样式放在src/main/resource/static下

![70 3][]

在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文件夹中：

![70 4][]

![70 5][]

代码：

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

![70 6][]

代码：

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

当控制台成功出现如下则运行成功：

![70 7][]

此时打开浏览器：输入 http://localhost:8080/

![70 8][]

点击登录后会跳转到main.html:

![70 9][]

附录：

项目源码：

https://download.csdn.net/download/badao\_liumang\_qizhi/10529922

bootstrap控制台模板+css样式：

https://download.csdn.net/download/badao\_liumang\_qizhi/10529931

[70]: https://img-blog.csdn.net/20180709103138555?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180709103339542?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180709104302966?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20180709104359694?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/20180709105505751?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: https://img-blog.csdn.net/20180709105223782?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: https://img-blog.csdn.net/2018070910585123?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 7]: https://img-blog.csdn.net/20180709110501819?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 8]: https://img-blog.csdn.net/20180709110633185?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 9]: https://img-blog.csdn.net/20180709110714932?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70