序
好几年没写前端页面了，当时还是jQuery的天下，现在都是vue。基本上是能看懂，但是自己写不太会。现在决定重新学习下前端，也为以后一些小活做做准备。
今天主要是来跟大家分享下springBoot + thymeleaf + layui。

一、依赖引入

<!-- thymeleaf支持 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

二、layui引入

layui本月初决定退出江湖了，但是对于后端开发来说，要自己整点东西无疑还是最好最优秀的选择。现在layui的创始人贤心将layui项目放在了github和码云上，有其他爱好者自建了“官网”。要接入还是可以找到好多官网跟文档的，最新版本现在是2.6.8。
下载到的文件放在static目录下：
在这里插入图片描述

三、配置文件

thymeleaf配置

spring:
  thymeleaf:
    cache: false   #缓存，如果要热部署设置为false
    prefix: classpath:/templates/  #静态页面前置目录
    check-template-location: true  #本地模板检查
    suffix: .html  #页面后缀
    encoding: UTF-8  #页面编码
    servlet:
      content-type: text/html  #页面类型
    mode: HTML  #页面模式，其实可以设置为HTML5、LEGACYHTML5（非严格检查格式，这个还需要其他包引入）

下面就是静态资源配置，这里有2种方式，一种是配置文件，一种是配置类
配置文件

spring:
  mvc:
    static-path-pattern: /**  #静态资源父级路径
  web:
    resources:
      static-locations: classpath:/resources/,classpath:/static/  #静态资源映射目录

以上2个配置是配合使用，这样页面上引入css、js，只要文件是放在static目录下，就不会出现404。
替代方式，配置类
在MyWebMvcConfigurer类，实现 WebMvcConfigurer配置类，注意WebMvcConfigurerAdapter已过时、WebMvcConfigurationSupport不推荐，如果用继承WebMvcConfigurationSupport表示接管springBoot的Mvc配置，会导致配置都不生效。
重写方法addResourceHandlers

@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/templates/")
                .addResourceLocations("classpath:/static/")
                .addResourceLocations("classpath:/resources/");
        WebMvcConfigurer.super.addResourceHandlers(registry);
    }

这里唯一要说的是用配置、跟类的页面上面引入文件的路径可能不能ctrl 点击跳转进去。其实这跟项目设置了上下文有关，我这里因为想到后面方便nginx做配置，所以设置了项目的上下文。如果不设置这个，其实是没有影响的。

三、示例页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link rel="bookmark" th:href="@{/favicon.ico}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}"/>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>

    <script>
        //一般直接写在一个js文件中
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer
                , form = layui.form;

            layer.msg('Hello World');
        });

    </script>
</head>

<body>
    <div id="allmap"></div>
</body>
</html>

很多人可能会遇到idea这么牛逼的编辑器上还没有语法提示，其实是因为你的页面没有正确指定。

如果没有这个，所有th是不会有语法提示的，后面的一些取值、渲染肯定也不会有。 然后就是这引入文件的路径，常理按住ctrl点击css、js文件可以跳转，但是现在因为我这里的配置问题是不会点击进去的，但是页面上测试确实是没有路径问题的，可以试。

四、设置首页

还是在MyWebMvcConfigurer类，增加重写方法

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/").setViewName("forward:/index");
    registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
    WebMvcConfigurer.super.addViewControllers(registry);
}

注意registry.addViewController("/").setViewName(“forward:/index”);也可以写成registry.addViewController("/").setViewName(“forward:/index.html”);
写成上面那种需要再controller类写方法

/**
 * 首页
 *
 * @return
 */
@GetMapping("/index")
public ModelAndView index() {
    ModelAndView mv = new ModelAndView();
    mv.setViewName("index");
    return mv;
}

这个不需要我解释吧。。。。
然后再补充一个关于favicon.ico，这个是浏览器上显示的那个小图标。这里也需要将favicon.ico文件放到static目录，这个图片有好多网站可以在线制作。
页面上再head里加上下面2句就ok了

	<link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link rel="bookmark" th:href="@{/favicon.ico}"/>

五、看效果

在这里插入图片描述
页面上能出Hello Word，控制台没有css、js的404就是ok的了。剩下的就是可以拿layui的例子改改，然后套上接口，用thymeleaf语法取值，写页面交互，fly you self了。

Logo
智屏生态联盟

智屏生态联盟致力于大屏生态发展，利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐

taro 引用本地图片展示

import { Image } from ‘@tarojs/components’<引用标签>constructor(){super()this.state={img:require(’./case.png’)}}…

avatar 智屏生态联盟

Weex

Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。快速开始高性能Weex 使用原生组件和原生模块，来最大化利用原生渲染的性能优势以及平台能力，所有的组件和模块都是可插拔、可扩展的。跨平台你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现，但是它们都提供了相同的...

avatar 智屏生态联盟

Taro写小程序总结

1.首先需要在『微信公众平台』注册帐号，我一直很困惑为啥，微信公众平台不能和微信开放平台整合，而且账号不能通用~https://mp.weixin.qq.com2.在微信公从平台里的->开发->服务器域名,可以配置小程序中可以访问的接口的域名3.在『成员管理』中可以添加开发者、体验者等成员。方便协作办工Taro的一些例子：1.转发在render中写&...

avatar 智屏生态联盟