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. select的限制与poll的使用

    select的限制 select的并发数受到两个限制:1.一个进程能打开的最大描述符数量;2.select中fd_set集合容量的限制(FD_SETSIZE) 关于进程的最大描述符数量: ulimit ...

  2. springCloud的使用07-----消息总线（spring cloud bus）

    spring cloud bus 将分布式的节点用轻量的消息代理连接起来.可用于广播配置文件的更改或服务之间的通讯,也可以用于监控. spring cloud bus 默认只支持rabbitmq和ka ...

  3. C#base使用笔记

    一,base继承使用 using System; using System.Collections.Generic; using System.Linq; using System.Text; nam ...

  4. C的基本数据类型小结

    代码 /** * 基本数据类型 */ #include <stdio.h> #include <limits.h> /* 定义 32 位时的 long 与 unsigned l ...

  5. Centos7下编译安装php扩展redis5.0.2

    安装环境:centos7 + php 7.2.191. 下载地址:http://pecl.php.net/get/redis-5.0.2.tgz .tgz http://pecl.php.net/ge ...

  6. face_recognition人脸识别框架

    一.环境搭建 1．系统环境 Ubuntu 17.04 Python 2.7.14 pycharm 开发工具 2.开发环境,安装各种系统包 人脸检测基于dlib,dlib依赖Boost和cmake $ ...

  7. Dev常用控件

    GridControl TreeView DEV GridControl小结.. https://blog.csdn.net/happy09li/article/details/7186829 Dev ...

  8. 【week8 in ricoh】 Learning CNN

    week8:5.27 1.做CNN practical[1]里的example1,了解CNN模块中的每一个部分 (1)卷积层的卷积过程,输入输出维度变化(2)ReLU(3)Pooling层(4)Nor ...

  9. docker 安装 jenkins 笔记

    前提: 已安装好 docker-ce,可运行 docker 命令 命令: sudo docker pull jenkins mkdir -p ~/dockers/jenkins cd ~/docker ...

  10. JavaSE---IO体系

    1.BIO 1.1 Block IO,同步阻塞IO: 1.2 eg:java.io   包下的      InputStream . OutputStream.  Writer.Reader... j ...