SpringBoot+Thymeleaf+iView

最新推荐文章于 2024-11-10 00:27:52 发布

weixin_34323858

最新推荐文章于 2024-11-10 00:27:52 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/kibana/p/10236585.html

本文介绍如何在SpringBoot项目中使用Thymeleaf模板引擎，包括Controller配置、页面编写及Vue.js与iView组件库的集成。通过示例代码展示了如何在页面中展示数据并调用RESTful API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SpringBoot+Thymeleaf参考：
https://www.cnblogs.com/kibana/p/10236187.html

1、Controller：

package cn.mmweikt.es.controller;

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

@Controller
public class IndexController {
    @GetMapping("/index")
    public String indexPage(Model model) {
        model.addAttribute("name", "es_project.");
        return "index";
    }

    @GetMapping("/vueResource")
    @ResponseBody
    public String vueResource() {
        return "Hello vue-resource.";
    }
}

2、index.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import stylesheet -->
    <link rel="stylesheet" type="text/css" th:href="@{http://unpkg.com/iview/dist/styles/iview.css}">
    <!-- import Vue.js -->
    <script type="text/javascript" th:src="@{http://vuejs.org/js/vue.min.js}"></script>
    <!-- import iView -->
    <script type="text/javascript" th:src="@{http://unpkg.com/iview/dist/iview.min.js}"></script>
    <!-- import vue-resource -->
    <script th:src="@{https://cdn.jsdelivr.net/npm/vue-resource@1.5.1}"></script>
</head>
<body>
    <div>
        <span th:text="${name}"></span>
    </div>
    <div id="app">
        <i-button @click="show">Click me!</i-button>
        <Modal v-model="visible" title="Welcome">{{text}}</Modal>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                visible: false,
                text: "Welcome to iView!"
            },
            methods: {
                show: function () {
                    this.visible = true;
                    this.$http.get('/vueResource').then(function (response) {
                        this.text = response.bodyText;
                    });
                }
            }
        })
    </script>
</body>
</html>

3、效果：