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. 将本地图片数据制作成内存对象数据集|tensorflow|手写数字制作成内存对象数据集|tf队列|线程

      样本说明: tensorflow经典实例之手写数字识别.MNIST数据集. 数据集dir名称 每个文件夹代表一个标签label,每个label中有820个手写数字的图片 标签label为0的文件夹 ...

  2. 精简Docker镜像的几个方法

    一.使用更精简的镜像 常用的Linux系统镜像一般有 Debian.Ubuntu.CentOS和Alpine,其中Alpine是面向安全的轻量级Linux发行版本.Docker的Alpine镜像仅有不 ...

  3. fiddler 暂停抓包

    或者点击左下角 capturing

  4. sql优化 分字段统计查询

    select count(1) from pd_xxx_origin_xxx_data where create_time like '2019-02-23%' and source='20036' ...

  5. PdgCntEditor系列教程一：基础知识

    一.PdgCntEditor是什么? 二.为什么要用PdgCntEditor? 三.怎么用PdgCntEditor? 一.PdgCntEditor是什么? 这是一个目录编辑器,可以创建.编辑PDF.D ...

  6. web编程非常实用的在线工具大全---转载

    代码对比/归并: http://www.matools.com/compare 正则表达式: http://www.matools.com/regex js/css压缩: http://www.mat ...

  7. 2019-3-1-win10-uwp-使用-LayoutTransformer

    title author date CreateTime categories win10 uwp 使用 LayoutTransformer lindexi 2019-03-01 09:24:32 + ...

  8. jvm主要组成部分及其作用

    1.类加载器(Class Loader):加载类文件到内存.Class loader只管加载,只要符合文件结构就加载,至于能否运行,它不负责,那是有Exectution Engine 负责的. 2.执 ...

  9. GCC -l选项：手动添加链接库

    链接器把多个二进制的目标文件(object file)链接成一个单独的可执行文件.在链接过程中,它必须把符号(变量名.函数名等一些列标识符)用对应的数据的内存地址(变量地址.函数地址等)替代,以完成程 ...

  10. window杀死端口

    获取端口的pid:netstat  -aon|findstr "8382" 杀死pid : taskkill /pid [] -t -f