SpringBoot（二）编写HTML页面

学习内容

1. 使用Thymeleaf编写一个HTML页面
2. 访问静态资源
3. 如何传递参数给HTML页面
4. 模拟登录验证过程

构建项目

上一节已经说过如何构建一个SpringBoot项目，SpringBoot（一）Hello World 。由于本文采用了Thymeleaf模板引擎，因此需要添加Thymeleaf依赖，pom.xml如下所示

    
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

编写HTML页面

新建LoginController，代码如下

package com.example.springbootchapter2;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * Created by lzc
 * 2019/4/6 21:27
 */

@Controller
public class LoginController {
    /**
     * 登录页面
     * @return
     */
    @GetMapping("/login")
    public String login() {
        // 这里返回的login指的是src/main/resources/templates目录下的login.html
        // 因此，我们需要在src/main/resources/templates目录下新建一个login.html
        // 当我们通过浏览器访问localhost:8080/login时即可访问到我们编写的login.html
        return "login";
    }
}

src/main/resources/templates/login.html

    
    


    
登录页面
    

        账号: 

        密码: 

        
    

启动项目，效果如下

访问静态资源

编写网站的时候我们经常会用到css、js、图片这些静态资源。SpringBoot访问静态资源的默认路径为src/main/resources/static，如果你的src/main/resources/目录下没有static文件夹可以自己新建一个。
以图片为例，我在src/main/resources/static下存放了一张图片，文件名为 lzc.jpg，在浏览器输入localhost:8080/lzc.jpg 即可访问到这张图片。HTML代码访问图片的方式如下

传递参数给HTML页面

上面我们已经学会了如何编写一个HTML页面，下面将介绍如何传递参数给HTML页面以及如何在HTML页面中接收参数。以上面的登录页面为例，传递两个参数到登录页面，LoginController代码修改如下：

package com.example.springbootchapter2;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * Created by lzc
 * 2019/4/6 21:27
 */

@Controller
public class LoginController {
    /**
     * 登录页面
     * @return
     */
    @GetMapping("/login")
    public String login(Model model) {
        model.addAttribute("data1","传递给登录页面的第一个参数");
        model.addAttribute("data2","传递给登录页面的第二个参数");
        // 这里返回的login指的是src/main/resources/templates目录下的login.html
        // 因此，我们需要在src/main/resources/templates目录下新建一个login.html
        // 当我们通过浏览器访问localhost:8080/login时即可访问到我们编写的login.html
        return "login";
    }
}

我们可以看到login方法参数多了Model这个对象，使用Model对象传递了两个参数到登录页面。下面贴出登录页面是如何接收参数的

    
    


    
登录页面
    

        账号: 

        密码: 

        
    
    

    

这里需要注意的是，由于使用了Thymeleaf标签，因此需要引用命名空间 ，在html中引入此命名空间，可避免编辑器出现html验证错误，虽然加不加命名空间对Thymeleaf的功能没有任何影响。T这里只是展示了如何接收字符串的使用，其他用法请自行上网查找。

启动项目，效果如下

模拟登录验证过程

在LoginController中新增一个验证登录的方法，代码如下

package com.example.springbootchapter2;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

/**
 * Created by lzc
 * 2019/4/6 21:27
 */

@Controller
public class LoginController {
    /**
     * 登录页面
     * @return
     */
    @GetMapping("/login")
    public String login(Model model) {
        model.addAttribute("data1","传递给登录页面的第一个参数");
        model.addAttribute("data2","传递给登录页面的第二个参数");
        // 这里返回的login指的是src/main/resources/templates目录下的login.html
        // 因此，我们需要在src/main/resources/templates目录下新建一个login.html
        // 当我们通过浏览器访问localhost:8080/login时即可访问到我们编写的login.html
        return "login";
    }

    /**
     * 登录验证，注意该方法的请求方式为POST
     * @return
     */
    @PostMapping("/dologin")
    public String dologin(@RequestParam(name = "username")String username,@RequestParam(name="password")String password,Model model) {
        // 假设用户名为admin，密码为admin
        if (username.equals("admin") && password.equals("admin")) {
            // 登录成功，返回到home.html
            model.addAttribute("message","登录成功");
            return "home";
        } else {
            // 登录失败，error.html
            model.addAttribute("message","账号或密码输入错误！");
            return "error";
        }
    }
}

修改登录页面的代码，在form中添加method="post"和action="/dologin"

    
    


    
登录页面
    

        账号: 

        密码: 

        
    

    

    

home.html代码

error.html代码

启动项目

输入正确的用户名和密码

输入错误的用户名和密码

代码地址：https://github.com/923226145/SpringBoot-learning/tree/master/springboot-chapter2