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、效果：

SpringBoot+Thymeleaf+iView的更多相关文章

  1. org.springframework.expression.spel.SpelEvaluationException: EL1004E: Method call: Method service() cannot be found on com.my.blog.springboot.thymeleaf.util.MethodTest type

    前言 本文中提到的解决方案,源码地址在:springboot-thymeleaf,希望可以帮你解决问题. 至于为什么已经写了一篇文章thymeleaf模板引擎调用java类中的方法,又多此一举的单独整 ...

  2. springboot+thymeleaf+pageHelper带条件分页查询

    html层 <div> <a class="num"><b th:text="'共 '+ ${result.resultMap['pages ...

  3. springboot+thymeleaf简单使用

    关于springboot想必很多人都在使用,由于公司项目一直使用的是SpringMVC,所以自己抽空体验了一下springboot的简单使用. 环境搭建 springbooot的环境搭建可以说很灵活, ...

  4. SpringBoot thymeleaf使用方法，thymeleaf模板迭代

    SpringBoot thymeleaf使用方法,thymeleaf模板迭代 SpringBoot thymeleaf 循环List.Map ============================= ...

  5. SpringBoot thymeleaf模板页面没提示，SpringBoot thymeleaf模板插件安装

    SpringBoot thymeleaf模板插件安装 SpringBoot thymeleaf模板Html页面没提示 SpringBoot  thymeleaf模板页面没提示 SpringBoot t ...

  6. SpringBoot thymeleaf模板版本，thymeleaf模板更换版本

    SpringBoot thymeleaf模板版本 thymeleaf模板更换版本 修改thymeleaf模板版本 ================================ ©Copyright ...

  7. Springboot+Thymeleaf框架的button错误

    ---恢复内容开始--- 在做公司项目时,遇到了一个Springboot+Thymeleaf框架问题: 使用框架写网站时,没有标明type类型的button默认成了‘submit’类型,每次点击按钮都 ...

  8. layui表格数据渲染SpringBoot+Thymeleaf返回的数据时报错（Caused by: org.attoparser.ParseException: Could not parse as expression: ")

    layui table渲染数据时报错(Caused by: org.attoparser.ParseException: Could not parse as expression: ") ...

  9. 不要再学 JSP 了，学 SpringBoot + Thymeleaf + Vue吧

    老读者就请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题. 读 ...

随机推荐

  1. DOM操作 、js获取id的内容 和修改原来的内容（innerHTML）

    js获取id的内容(getElementById) 和修改原来的内容(innerHTML) 1.通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的 ...

  2. struct和class的相同点与不同点

    struct是c语言中常用来定义结构体时使用的 class是c++中用来定义类时所使用的 相同 struct(结构体)和class(类)内均可有不同个数.不同类型的数据 定义时 都必须在前面加上str ...

  3. python发送邮件，文件后缀变成了bin

    问题:在用python做自动化测试时,将html测试报告在邮件中添加文件发送的过程中,发现发送成功后,文件的后缀为.bin 解决方法: 加一行代码 msg_att["Content-Disp ...

  4. 【学习总结】Python-3-多个变量赋值

    菜鸟教程-Python3-基本数据类型 同时为多个变量赋值的两种格式: 连等:看起来可能错误但事实上Python可以这样的.... 一团变量对应一团值:比较常见又省事的格式 END

  5. js非布尔值的与(&&)与或(||)运算

    /** * 非布尔值的与(&&)与或(||)运算 * 1.先将其转换成布尔值再做运算,并且返回原值 * 2.与(&&)运算: * a.如果第一个值为true,则返回第二 ...

  6. javascript基础六（事件对象）

    1.事件驱动     js控制页面的行为是由事件驱动的.          什么是事件?(怎么发生的)     事件就是js侦测到用户的操作或是页面上的一些行为       事件源(发生在谁身上)   ...

  7. spring 事物（一）—— 事物详解

    事务概念回顾 什么是事务? 事务是逻辑上的一组操作,要么都执行,要么都不执行. 事物的特性(ACID): 事务的特性 原子性: 事务是最小的执行单位,不允许分割.事务的原子性确保动作要么全部完成,要么 ...

  8. 七、Null、空以及0的区别

    一.Null的区别 create database scort use scort create table emp ( empno int primary key, ename ), sal int ...

  9. linux-java

    查看Java进程耗内存线程 top -Hp pid printf '%x\n' pid ->jid(java thread) 查看time值最大 jstack pid | grep jid 查看 ...

  10. 【虚拟机】:"该虚拟机似乎正在使用中。 如果该虚拟机未在使用，请按“获取所有权(T)”按钮获取它的所有权。否则，请按“取消(C)”按钮以防损坏。"

    1.可能是由于上次使用虚拟机,没有正常关闭出现了这种情况,于是把问题复制粘贴搜了一下. 2.出现了如下可行的解决方法:把后缀名为.vmdk.lck的都删除掉. 3.然后再打开虚拟机就可以了.