当前位置：首页 > news >正文

基于Thymeleaf、bootstrap、layUI 混合前端应用

news 来源：原创 2024/9/18 17:49:17

1、项目结构

2、pom依赖导入

3、页面加载机制

4、前端案例

4.1、加载公共页面及静态文件

4.2、Bootstrap col-md栅栏

4.3、BootStrap Table表格加载

4.4、Layui select下拉项加载

4.5、Layui radio 单选项加载

4.6、Ajax Post请求

以下代码基于Spring boot + Thymeleaf框架，

前端采用BootstrapV3.3.7 LayUIV2.9.13 版本

1、项目结构

html文件存放 resources/templates 目录

静态资源存放 resources/static 目录

2、pom依赖导入

<shiro.version>1.13.0</shiro.version><spring-boot.version>2.5.13</spring-boot.version><thymeleaf.extras.shiro.version>2.1.0</thymeleaf.extras.shiro.version><!-- 对外服务必须引入 boot-starter、web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><!-- SpringBoot Web容器 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- SpringBoot 拦截器 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId></dependency><!--模板引擎--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!-- Shiro核心框架 --><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-core</artifactId><version>${shiro.version}</version></dependency><!-- Shiro使用Spring框架 --><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-spring</artifactId><version>${shiro.version}</version></dependency><!-- Shiro使用EhCache缓存框架 --><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-ehcache</artifactId><version>${shiro.version}</version></dependency><!-- thymeleaf模板引擎和shiro框架的整合 --><dependency><groupId>com.github.theborakompanioni</groupId><artifactId>thymeleaf-extras-shiro</artifactId><version>${thymeleaf.extras.shiro.version}</version></dependency>

3、页面加载机制

由于使用Thymeleaf框架，需要将html页面代码，经过服务端进行模板渲染

页面访问需要与后端交互。

访问需要通过HTTP.GET请求，后端返回html页面相对地址【字符串类型】

针对如下代码示例中，请求的地址最终为 /test/add

返回页面路径为 resources/templates/test/add.html

@Controller
@RequestMapping("/test")
public class TestController {private String prefix = "test";@GetMapping("/add")public String add() {return prefix + "/add";}}

4、前端案例

4.1、加载公共页面及静态文件

1）th:include 表示加载 /template/include.html 页面内容，并替换内容，不是以iframe内容加载。

::header 表示加载内部中的指定子模块

2）th:href 表示加载指定路径下文件，避免多层级下的文件，减少 ../ 方式查找的复杂度

<head><th:block th:include="include :: header('我的标题')" /><link type="text/css" rel="stylesheet" th:href="@{/ajax/libs/layui/css/layui.css}"/><link type="text/css" rel="stylesheet" th:href="@{/ajax/libs/ckplayer/css/ckplayer.css}"/>
</head>

4.2、Bootstrap col-md栅栏

参考全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网

<div class="layui-container" style="width: 98%;padding-top: 20px"><div class="layui-row"><div class="layui-col-md2">....</div><div class="layui-col-md10">....</div></div>
</div>

总单位12栏使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统

4.3、BootStrap Table表格加载

依赖 ry-ui.js 文件【若依框架】

必须使用div 包裹 table、且定义class=“select-table”

以下代码中 $.table 为ry-ui.js 框架对bootstrap的封装

<div class="select-table" ><table id="anno-table"></table>
</div>

function initAnnoTable(){var options = {id: "anno-table",elem: '#anno-table',// 禁止右上方按钮栏showSearch: false,showPageGo: false,showRefresh: false,showColumns: false,showToggle: false,// 禁止分页pagination: false,columns: [{title: '序号',width: 100,formatter: function (text, record, index) {return (index + 1);}},{field: 'startTime',title: '开始时间',},{field: 'endTime',title: '结束时间',},{field: 'emoDesc',title: '标签结果',},{align: 'center',title: '操作',formatter: function(value, row, index) {var actions = [];actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="editAnno(\'' + index + '\')"><i class="fa fa-edit"></i>编辑</a> ');return actions.join('');}},],data: [],};$.table.init(options);}

表格数据动态刷新

$.table.refreshOptions({id: 'anno-table',data: annoList
})

4.4、Layui select下拉项加载

<div class="layui-form layui-row"><select lay-filter="task-select-filter" id="taskSelect"></select></div>

var form = layui.form;// select 事件form.on('select(task-select-filter)', function(data){var value = data.value; // 获得被选中的值selectTask = {taskId: value,taskName: this.innerHTML}});

// 动态加载下拉选项$.get(prefix + '/list', function(result) {var list = result.data;let _html = '';_html += '<option  value="">--请选择--</option>';for(var item of list){_html += '<option  value="'+item.taskId+'" >' + item.taskName + '</option>';}console.log(_html)$('#taskSelect').append(_html)form.render()});

4.5、Layui radio 单选项加载

<div class="layui-form" ><div class="layui-form-item"><input type="radio" name="emotion" value="anger"   lay-filter="emotion-radio-filter" title="愤怒"><input type="radio" name="emotion" value="disgust"  lay-filter="emotion-radio-filter" title="恐惧"><input type="radio" name="emotion" value="hate"  lay-filter="emotion-radio-filter" title="害怕"><input type="radio" name="emotion" value="happy"  lay-filter="emotion-radio-filter" title="高兴"><input type="radio" name="emotion" value="neutral"  lay-filter="emotion-radio-filter" title="平静" checked><input type="radio" name="emotion" value="sad"  lay-filter="emotion-radio-filter" title="悲伤"><input type="radio" name="emotion" value="surprised"  lay-filter="emotion-radio-filter" title="惊讶"><button class="layui-btn" lay-submit lay-filter="emotion-radio-submit" >添加</button></div>
</div>

选中事件

// radio 事件form.on('radio(emotion-radio-filter)', function(data){console.log(data.value);});

动态切换选中

var myValue = 'sad';
if ($(item).val() == myValue) {//更改选中value值 $(item).prop('checked', true);//重新渲染layui.use('form', function () {var form = layui.form;form.render();});
}

4.6、Ajax Post请求

使用contentType + JSON.stringify 将传输 json格式的请求

如果不声明使用，则传入 form 表单数据

$.ajax({url: 'your-api-url',type: 'POST',dataType: 'json',contentType: 'application/json',data: JSON.stringify({ key1: 'value1', key2: 'value2' }),success: function(response) {console.log(response);},error: function(err) {console.error(err);}
});

参考文章：

前端手册 | RuoYi