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. 初识redis基础

    一.redis 的五大数据类型: 1.String(字符串): 2.List(列表): 3.Set(集合): 4.Hash(哈希,类似于Java里的Map); 5.Zset(sorted set:有序 ...

  2. Oracle基础数据类型与运算符

    Oracle基础数据类型: 1. 字符型:字符串 char(最大2000), nchar(最大1000, 支持                           Unicode)--->固定长 ...

  3. 洛谷 P1522 牛的旅行 Cow Tours——暴力枚举+最短路

    先上一波题目  https://www.luogu.org/problem/P1522 这道题其实就是给你几个相互独立的连通图 问找一条新的路把其中的两个连通图连接起来后使得新的图中距离最远的两个点之 ...

  4. ThinkPHP3.2.3 目录介绍

    ThinkPHP3.2.3 目录介绍,在开发中主要操作的目录就是在入口文件www/index.php中定义的www/application/文件目录了. www  WEB部署目录 ├─index.ph ...

  5. WebSocket 网页聊天室

    先给大家开一个原始的websocket的连接使用范例 <?php /* * recv是从套接口接收数据,也就是拿过来,但是不知道是什么 * read是读取拿过来的数据,就是要知道recv过来的是 ...

  6. [心得]Ubuntu無法ssh登入

    裝好ssh後,發覺無法用root登入,可是sshd_config接正確. 後來發現原因在於,Ubuntu沒有root帳號,但是可以透過sudo -s拿到root權限. su root 密碼怎樣打也行不 ...

  7. SpringMVC学习（2）：经典的HelloWorld实现

    前一篇简单介绍了Spring MVC的一些知识,下面就要开始学习如何把Spring MVC运用到具体的项目中去. 首先还是从一个简单的Hello World项目说起: 我机器的开发环境为: Ubunt ...

  8. python学习笔记--类（一）

    # 类是为了代码重用 class First: #类 pass #实例 = 类名() obj = First() # 类是一种产生实例的工厂# 类和模块的差异在于,内存中特定的模块只有一个实例(所以我 ...

  9. db2 load命令装载数据时定位错误出现的位置

    使用如下命令装载数据(注意CPU_PARALLELISM 1): db2 load from filename.del of del replace into tab_name  CPU_PARALL ...

  10. Centos 7 安装openjdk8

    一.使用yum命令搜索支持jdk版本 yum search java|grep jdk 二.使用yum安装jdk8 yum install -y java--openjdk 三.检查是否成功 java ...