我是这样使用SpringBoot(WEB服务)

目录

前面完成了API服务(虽然这个API没什么用)。接下去来个WEB服务，在前面项目中加上个页面。这章目标是通过访问一个URL展示一个界面，从服务端传递参数值到界面中展示动态数据。这里还会涉及到webjars的应用。

目录与文件

在项目src/main/resources目录下创建两个目录，分别是templates各static，templates 存放模板文件，static 存放静态文件。

目录

在static目录放入一张图片，图片名称为001.jpg，启动项目。打开浏览器访问http://localhost/001.jpg

访问资源

spring boot会默认从static查找静态资源，在这里还可以放css，js，html等文件，都可以直接访问到。但是，这里的html文件只能是静态页面，服务端不能传值到界面中。
templates中加入一个index.html，内容如下

    
    


    

        
这是首页
    

重启服务，浏览器中访问http://localhost/index.html

404

找不到页面，如果index.html放到static目录中是可以访问的。templates目录中的文件是不能直接访问。下面讲到这么访问templates中的文件。
当前目录

目录

使用模板

访问templates文件，首先要引入模板引擎。这里使用thymeleaf，在pom.xml文件中包含thymeleaf组件。

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

如图

thymeleaf

增加package：com.biboheart.demos.web，在package中创建class：PageController

package com.biboheart.demos.web;

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

@Controller
public class PageController {

    @RequestMapping(value = {"/", "/home"})
    public String home() {
        return "index";
    }
}

@Controller表示这是一个SpringMVC的控制器
@RequestMapping(value = {"/", "/home"}) 表示访问路径"/"或"/home"都指向home函数，home返回"index"页面，即templates/index.html模板生成的页面。
重新启动服务，在浏览器中访问 http://localhost/home

home页面

这时候，页面展示的是index.html的内容。

向页面传值

这里用Model对象传值到模板中
调整controller的实现

package com.biboheart.demos.web;

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

@Controller
public class PageController {

    @RequestMapping(value = {"/", "/home"})
    public String home(Model model, String name) {
        model.addAttribute("name", name);
        return "index";
    }
}

在函数中增加两个参数，Model model用于向模板传递值，name用于接收请求参数。model.addAttribute("name", name);将接收到的值通过model传递到模板中。
模板文件index.html中接收并显示name的值。

    
    


    

        
这是首页
        
欢迎你：
    

重新启动服务，在浏览器中访问http://localhost/home?name=biboheart

参数

index.html中的，展示Model中的name的值。

使用webjars

在pom.xml中包含webjars，并且包含jquery，bootstrap

        
            org.webjars
            webjars-locator
            0.34
        

        
            org.webjars
            jquery
            3.3.1
        

        
            org.webjars
            bootstrap
            3.3.7-1
        

界面中使用bootstrap

    
    
    
    
    


    

        

            
欢迎你：
            
这是首页
        
    

重新启动项目，在浏览器中访问http://localhost/home?name=biboheart

bootstrap效果

模板中包含静态资源

将静态资源001.jpg图片在模板中显示，修改后index.html文件如下

    
    
    
    
    


    

        

            
欢迎你：
            
这是首页
        
        
    

显示图片