SpringBoot跳转渲染HTML页面（详解）（五）

雨点打透心脏的1/2处 2022-04-22 08:59 1662阅读 0赞

本文的实例代码也会放在文末免费分享给大家的。正文开始：

**目录**

一、直接访问

1、新建一个SpringBoot的项目

2、实现页面跳转

（1） 新建 HTML 文件

（2） 新建Controller包

（3） 添加 thymeleaf 的依赖

3、实现跳转

二、 间接访问

1、 变更位置

2、 强制访问

三、关于静态资源访问

1、 规则

2、 示例

四、 页面渲染

1、 如何渲染页面？

2、 Freemarker

（1） 原理

（2） 实际应用

--------------------

# 一、直接访问 #

直接访问说白了就是访问html页面的地址前面是没有文件夹的。如下图

![20181103205113338.png][]

## 1、新建一个SpringBoot的项目 ##

这个不是本文的目的，这里不细讲。请见文章：[https://blog.csdn.net/qq\_41647999/article/details/83214100][https_blog.csdn.net_qq_41647999_article_details_83214100]

## 2、实现页面跳转 ##

### （1） 新建 HTML 文件 ###

这里只是展示一个简单的实例，所以新建HTML文件。

### （2） 新建Controller包 ###

如何新建Controller的包？右击com.demo.demo 创建包。如下图

![20181103205558430.png][]

在这个包下新建一个Java Class 代码为：

//如果这个包报错，请更改一下com.demo.demo.Controller这个路径
    package com.demo.demo.Controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    
    @Controller
    public class TestController {
    	//value的值为访问的URL
        @RequestMapping(value = "/index",method = RequestMethod.GET)
        public String index(){  return "index";}}

### （3） 添加 thymeleaf 的依赖 ###

通过 thymeleaf 来实现页面跳转。

在pom.xml的文件中加入thymelaf的依赖文件。

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

## 3、实现跳转 ##

访问地址http://localhost:8080/index

如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70][]

我这里使用的是一个后台的登录页面，你发现两个问题：

1、 上面的注解为什么使用的是注解为@Contoller而不是@RestContoller？

很多朋友都遇到这个问题而没有实现页面的跳转，这个坑我单独在这里写出来以提示大家。

解释：@RestController注解表示该类中的所有方法都会返回json格式。

@Controller返回的是字符格式，实现页面跳转。

2、 我的页面为什么没有被渲染 ？

解释：正如第一个问题回答的，返回的字符格式是不能够渲染页面的。那怎样才能够渲染页面？请继续阅读到Freeworker。

# 二、 间接访问 #

间接访问就是如何访问自定义的文件夹的问题。  
更明确的目的就是我现在需要解决的问题是访问下图中admin里面的index.html，如下图：

![20181103211100789.png][]

可能朋友你也发现了，达到这个目的有两种方案：

## 1、 变更位置 ##

将admin文件夹里面的全部文件移动到templetes下，不就解决问题了吗。

## 2、 强制访问 ##

就是我不更改admin文件夹里面的内容，就要达到跳转访问的问题。

解决方案：将Controller的跳转代码修改为在template下面的代码：return “admin/index”。

# 三、关于静态资源访问 #

## 1、 规则 ##

在讲页面渲染之前，先了解一下静态资源 （访问js、css、图片）。一般我们在做项目都会涉及到动静分离的问题。在传统的项目里面静态资源是放在webapp下的，在SpringBoot里面没有webapp而是classpath，但classpath不是文件夹。

classpath目录名需符合如下规则：

(1)/static  (2) /public  (3) /resources   (4)/META-INF/resources

## 2、 示例 ##

我们可以在src/main/resources/目录下创建static，在该位置放一张图片，启动程序后尝试访问http://localhost:8080/图片名.jpg。若能成功显示，则配置成功。

# 四、 页面渲染 #

## 1、 如何渲染页面？ ##

这里需要用到Freemarker或者thymeleaf 。

## 2、 Freemarker ##

### （1） 原理 ###

原理的话，给大家推荐一篇文章：[https://blog.csdn.net/mdpmw/article/details/11933059][https_blog.csdn.net_mdpmw_article_details_11933059]。

### （2） 实际应用 ###

使用Freemarker模板引擎渲染web视图。

**引入依赖包**

在pom.xml插入以下代码

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-freemarker</artifactId>
    </dependency>

**访问ftl文件**

在src/main/resources/下创建一个templates文件夹，后缀为\*.ftl。这个路径是可以改的，但不建议修改。创建如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 1][]

运行结果：

![2018110321265878.png][]

到这里，怎么还没有解决渲染页面的问题？

其实，已经解决了页面渲染的问题，请将hello.ftl的代码修改成动态的页面代码，如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 2][]

运行效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 3][]

感谢您的阅读！

源码直通车：[https://pan.baidu.com/s/1X1IJJxuU1QflVIf-wVMFZg][https_pan.baidu.com_s_1X1IJJxuU1QflVIf-wVMFZg]  提取码：xo39

[20181103205113338.png]: /images/20220422/f1e1ee5352f44280b6612f157a902bc8.png
[https_blog.csdn.net_qq_41647999_article_details_83214100]: https://blog.csdn.net/qq_41647999/article/details/83214100
[20181103205558430.png]: /images/20220422/e2e4a433ddee45ab9f24615b33e771de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70]: /images/20220422/1406a5a9777e49e0adf7770ca26d61bb.png
[20181103211100789.png]: /images/20220422/c3c47d19e456472d9792467313303654.png
[https_blog.csdn.net_mdpmw_article_details_11933059]: https://blog.csdn.net/mdpmw/article/details/11933059
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 1]: /images/20220422/c0cc361c412d484da3e6811db586ce69.png
[2018110321265878.png]: /images/20220422/b584d2fc106249f893eb6c5cb8cdd153.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 2]: /images/20220422/1b4e7158475f4db09f79f40098f2aaa4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 3]: /images/20220422/2d80e6ed153446df90f44a9283df0cb7.png
[https_pan.baidu.com_s_1X1IJJxuU1QflVIf-wVMFZg]: https://pan.baidu.com/s/1X1IJJxuU1QflVIf-wVMFZg