SpringBoot08——Web03视图解析与模板引擎

BUZHIDAO52

已于 2023-04-13 02:37:57 修改

阅读量154

点赞数

分类专栏： SpringBoot2 文章标签： servlet

于 2023-04-11 18:23:56 首次发布

本文链接：https://blog.csdn.net/BUZHIDAO52/article/details/130074924

版权

SpringBoot2 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

什么是视图解析

简单来说视图解析就是处理视图的一种手段

处理手段就是处理视图的方式

所以为了我们的数据能渲染到页面是上，我们需要视图解析

怎么样进行视图解析

我们需要模板引擎来进行视图解析，但是springBoot不支持jsp模板引擎，所以在这边我们使用thymelea

thymelea是一个现代化的服务端的java模板引擎，对于后端开发人员，语法比较简单

如何使用thymelea

方法：非常的简单，以下面这个例子

th：text就是把我们后台获取到的msg.headers.name，渲染到这个标签上，如果成功获取了，就渲染，没获取成功就用原来的

基础的使用语法

使用thymelea进行测试（在springboot01项目进行测试）

1.引入依赖

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

2.底层是如何进行 thymelea自动配置的

放入模板引擎解析器

什么有前缀有后缀的

但是这些也都是从配置文件中进行绑定的

还放入了模板引擎

还放入了视图解析器

我们看到上面很多都使用了preperties，这个东西其实就是配置文件，是已经被写死的

里面也规定了页面放到哪里，也规定了使用的后缀为.html，所以的页面都会跳转到xxx.html

3.开始测试

按照配置文件的要求，建立文件夹

按照官方模板，引入thymeleaf的名称空间

现在我们写th就有提示了

前端从路径发起/LALALA请求，后端使用这个方法进行处理，并且传入一个model对象，model对象在请求域中放入值，最后跳转到success页面

注意：为什么我们不写全success.html，因为在源码里会自动给我们添加.html后缀

然后就会去templates目录下找success.html页面

@Controller
public class ViewTestController {

    @GetMapping("/LALALA")
    public String LALALA(Model model){
        model.addAttribute("msg","你好：LALALA");
        return "success";
    }
}

现在我们只要在标签中获取请求域中名称为msg的值就会自动把hhhhhhh渲染覆盖，但是如果单独拿出来这个前端页面，显示的只是hhhhhh，只有在服务器上运行才可以

<body>
<h1 th:text="${msg}">hhhhhhhh</h1>
</body><body>

现在放文本文件时th：text，我们也可以放入超链接

不同的是之前我们是修改文本的值，现在要修改a标签中href属性的值

但是之前不是说超连接要放在@{}里面吗？

我们添加一个试试

我们发现第一个可以，第二个不行了

查看网页发现

我们第一个真正的解析了link的值，第二个只是把link当成了一个字符串地址去访问

也就是说第二个使用超链接的意思是想访问我们的项目路径

而且它还会根据需求自动拼装，如果我们给项目加了统一的请求路径

它也自动的给我们加了/world

使用thymeleaf快速构建后台管理系统

新建一个项目

把前端需要的静态资源放入static文件夹中

把登录页面放入templates文件夹中

我们项目一旦进来（访问根路径）肯定需要展示的就是登陆页面，要写controller喽

注意包的路径

@Controller
//登录的controller
public class IndexController {
    
    //来登录页
    //处理请求，路径为/或者/login都可以跳转到login.html
    @GetMapping(value = {"/","/login"})
    public String loginPage(){

        //跳转到login.html
        return "login";
    }
}

现在可以成功的进入登录页面了

现在我们的地址是这个/login，只要我们在这个/login用表单提交了账号和密码，我们就可以到首页（index.html）

所以我们带着表单提交应该是post请求，而且表单的acction应该是/login

引入名称空间

<form class="form-signin" action="http://view.jqueryfuns.com/2014/4/10/7_df25ceea231ba5f44f0fc060c943cdae/index.html" method="post" th:action="@{/login}">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">登录</h1>
            <img src="images/login-logo.png" alt=""/>
        </div>

此时就会以post的方式拼接路径/login来发送请求，因为我们前面的进入登录页面也有/login，但是那个方式是get，现在我们使用post进行区分和提交表单

//从登录页面提交账号密码到主页
    @PostMapping("/login")
    public String main(String username,String password){
        return "index";
    }

此时就可以进入主界面了

但是现在有一个问题，我们在主界面的每一次刷新现在相当于都在对表单进行重复提交，有没有解决方法？

有的，我们现在只是经过了一次跳转，我们可以把登录成功之后设置为重定向，自己再定义一个get请求用于接收，这样子就不会造成表单的重复提交

中间通过main.html这个中转重定向把post请求转换为了get请求

//从登录页面提交账号密码到主页
    @PostMapping("/login")
    public String main(String username,String password){
        //登录成功重定向到main页面
        return "redirect:/main.html";
    }

    //解决表单重复提交，现在是真正的要跳转到main页面
    @GetMapping("/main.html")
    public String mainPage(){
        return "main";
    }

现在我们的表单只会提交一次了

现在我们如果一直刷新，刷新的只是这个请求，解决了重复提交

但是现在又出现一个问题，现在所有的浏览器只要访问我们的地址就可以访问到我们的主界面，但是我们想只有登录之后才可以访问到我们的主界面，有没有办法解决？

我们先模拟好用户对象，里面有账号名称和密码

@Data
public class user {
    private String userName;
    private String password;
}

在外面前端的表单里也填写好对应的名称

<input type="text" name="userName" class="form-control" placeholder="用户名" autofocus>
<input type="password" name="password" class="form-control" placeholder="密码">

后端接收post请求时，直接传入user对象，在方法中进行判断（现在简单的判断方法就是账号和密码（密码要为123546）有内容就可以登录了）

传入session，我们可以把可以登录的用户存储到session里面

我们也可以传入一个model，用于如果账号和密码都没有填写，我们再让它转发到登录页面（使用get请求的login）并且提示（放入model），账号密码错误

现在只有输入正确的账号密码才能进入主界面了

但是怎么防止别人输入路径就能访问主界面呢？

我们之前把可以登录的用户放到session里面了

我们在真正的去main页面的方法里对于session里面有没有用户进行判断就可以了

//解决表单重复提交，现在是真正的要跳转到main页面
    @GetMapping("/main.html")
    public String mainPage(HttpSession session){
         Object loginUser = session.getAttribute("loginUser");
         if (loginUser!=null){
             //如果可登录的用户不为空，说明此时可以登录
             return "main";
         }else {
             //否则还是回到初始的登录页面
             //跳转到login.html
             return "login";
         }


    }

并且传入一个model信息给用户提示当前没有登录

//解决表单重复提交，现在是真正的要跳转到main页面
    @GetMapping("/main.html")
    public String mainPage(HttpSession session,Model model){
         Object loginUser = session.getAttribute("loginUser");
         if (loginUser!=null){
             //如果可登录的用户不为空，说明此时可以登录
             return "main";
         }else {
             //给用户提示
             model.addAttribute("msg","请重新登录");
             
             //否则还是回到初始的登录页面
             //跳转到login.html
             return "login";
         }


    }

实现给用户提示（我们的提示都放到model的msg里面了）

在前端表单上面添加内容

<label style="color: red" th:text="${msg}"></label>

<input type="text" name="userName" class="form-control" placeholder="用户名" autofocus>
<input type="password" name="password" class="form-control" placeholder="密码">

测试：

直接访问路径(需要更换浏览器或者先清理缓存)

现在登录的问题大部分解决了，但是我们想登录之后在右上角实时显示登录的账号，可以吗？

可以，先找到前端所在的位置

找到对应的代码

但是我们之前的thymeleaf都是在标签里写的，这玩意没有标签

可以使用thymeleaf的行内写法

我们之前把登录成功的人的登录信息都存放到loginuser里面了，所以现在直接拿出来用就可以了

我们已经完成了登录的基本流程，但是我们如果想点击其他的页面，还是会404，想办法把其他页面搞进来（以DataTables为例子）

把我们的静态页面放进来（我们的后台管理系统很大，所以我们可以新建一个文件夹，专门放table的文件）

并且给这几个新加的页面都添上thymeleaf名称空间

书写table的controller

@Controller
public class TableController {

    @GetMapping("/basic_table")
    public String basic_table(){
        return "tables/basic_table";
    }

    @GetMapping("/dynamic_table")
    public String dynamic_table(){
        return "tables/dynamic_table";
    }

    @GetMapping("/responsive_table")
    public String responsive_table(){
        return "tables/responsive_table";
    }

    @GetMapping("/editable_table")
    public String editable_table(){
        return "tables/editable_table";
    }


}

注意：为什么现在我们的return跳转需要加/tables呢?

因为我们之前源码里写了，只会找以templates目录下的，以.html结尾的文件，现在我们多了tables目录，所以需要自己加

我们现在的前端文件，超链接标签里的href一定也要改成和我们请求相互对应的（不能加.html）

例如

现在都可以进来了

但是现在有一个问题，我们如果进入了一个table，我们在这里面切换其他的table会404

这是因为我们table里面的html里面的a标签的herf还是给我们加了.html，我们把这四个table里面的.html去掉就可以了

但是我们在去掉的时候发现一个问题，我们现在的四个table，他们的左边和上面部分其实都是一样的，我们可不可以把公共的这一部分提取出来？

首先观察重合的部分

1.引入的js文件

2.引入的部分css文件

3..左侧导航栏部分

4.头部内容信息

我们写一个公共的页面进行抽取

抽取公共的js

抽取公共的css

抽取公共的左侧导航栏和头部内容

现在我们已经对公共内容进行了抽取，如何应用？

首先加入thymeleaf名称空间

把我们的链接都使用thymeleaf包装起来

如何使用正确的语法进行抽取

下面这个例子我们的footer就是我们的公共内容

把公共的部分使用th:fragement=自己起的名字进行标注

使用的时候使用th：insert=~{公共内容页面的名字：：自己起的名字}进行引用

或者直接th：insert=公共内容页面的名字：：自己起的名字也可以

或者我们可以使用选择器

自己设置一个id

使用的时候对应好自己的id，但是多一个#

现在对于我们的公共内容进行声明

我们的使用方式也有好几种

insert会把我们的内容放在我们的div中

replace会把我们写的div给替换掉

include会把我们公共内容外面的标签给去掉，直接把内容放在div中

现在就可以真正的进行替换了

对于main

CSS

注意现在是选择器

左菜单

头部分内容

现在的main.html是成功的

那么我们对于其他四个页面全部都修改了

经过所有的替换，都是正常的

几个小bug

我们希望点击右上角的DashBoard，就跳转回主页

找到这个对于的超链接标签修改就可以了

我们现在的页面右上角又是不会动的了

说明我们的公共页面没有成功引入

现在可以了

我们还想点击退出就退到登录页

可以了

现在我们完成了一些想要的功能，但是如果我们想遍历的把我们想加的数据加入先进的表如何做？

先制作一些假数据

把现在的假数据放入请求域中

@GetMapping("/dynamic_table")
    public String dynamic_table(Model model){
        //表格内容的遍历
        List<User> users = Arrays.asList(new User("adasdad", "458613"),
                new User("adS", "458613"),
                new User("kuj", "458613"),
                new User("adastrsyhdad", "458613"),
                new User("vbcxcvb", "458613"));
        model.addAttribute("users",users);

        return "tables/dynamic_table";
    }

找到前端的表单，把请求域中的东西进行遍历

修改表头