springboot~thymeleaf为vue传递模型

最新推荐文章于 2024-05-01 16:33:39 发布

Dale Lucy

最新推荐文章于 2024-05-01 16:33:39 发布

阅读量1.7k

点赞数

文章标签： java 程序人生学习 spring struts

本文链接：https://blog.csdn.net/m0_66876551/article/details/124425123

版权

在非前后端分离的项目中，本文介绍如何利用Thymeleaf作为后端页面引擎，结合Vue.js的MVVM思想，实现页面的交互增强。详细讲述了后端依赖设置、控制器编写及页面模板的配置，并提供了相关截图辅助理解。

摘要由CSDN通过智能技术生成

非前后分离项目，后端页面想使用前端vue的mvvm思想，想使用iview强大的交互性，这时，可以使用thymeleaf+vue来实现，thymeleaf提供了后端页面引擎，vue支持在html页面上直接编译执行。

后端依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Thymeleaf -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

后端控制器

@Controller
@RequestMapping("user")
public class UserController {
    @GetMapping("list")
    public String list(Model model) {
        List<UserVo> userVoList = new ArrayList<>();
        userVoList.add(UserVo.builder().name("zzl").age(38).address("beijing").date(Date.from(Instant.now())).build());
        userVoList.add(UserVo.builder().name("zhz").age(12).address("beijing").date(Date.from(Instant.now())).build());
        userVoList.add(UserVo.builder().name("zql").age(41).address("hebei").date(Date.from(Instant.now())).build());
        model.addAttribute("list", userVoList);
        return "user/list";
    }
}

/template/user/list.html页面

<div id="app">

    <i-layout>
        <i-content :style="{margin: '20px', minHeight: '220px'}">
            <div class="search">
                <Card @keydown.enter.native="handleSearch">
                    <Row>
                        <Form ref="searchForm"  inline :label-width="70">

                            <FormItem label="手机号" prop="mobile">
                                <Input
                                        type="text"