若依记录Thymeleaf

已于 2023-10-27 17:30:05 修改
阅读量259 收藏
点赞数
分类专栏： 前端 文章标签： java
于 2023-10-19 16:06:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58746619/article/details/133926669
版权

新增

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增学生')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-student-add">
            <div class="form-group">
                <label class="col-sm-3 control-label">学生姓名：</label>
                <div class="col-sm-8">
                    <input name="studentName" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">学号：</label>
                <div class="col-sm-8">
                    <input name="studentNum" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">地址：</label>
                <div class="col-sm-8">
                    <textarea name="address" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">年龄：</label>
                <div class="col-sm-8">
                    <input name="studentAge" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">性别：</label>
                <div class="col-sm-8">
                    <input type="radio" value="1" name="studentSex" checked="checked"/>男&nbsp;&nbsp;
                    <input type="radio" value="0" name="studentSex" />女
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">生日：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="studentBirthday" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <textarea name="remark" class="form-control"></textarea>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "develop/student"
        $("#form-student-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-student-add').serialize());
            }
        }

        $("input[name='studentBirthday']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

    </script>
</body>
</html>

修改

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改学生')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-student-edit" th:object="${student}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label">学生姓名：</label>
                <div class="col-sm-8">
                    <input name="studentName" th:field="*{studentName}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">学号：</label>
                <div class="col-sm-8">
                    <input name="studentNum" th:field="*{studentNum}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">地址：</label>
                <div class="col-sm-8">
                    <textarea name="address" class="form-control">[[*{address}]]</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">年龄：</label>
                <div class="col-sm-8">
                    <input name="studentAge" th:field="*{studentAge}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">性别：</label>
                <!--<input type="text" id="studentSexId" th:field="*{studentSex}" class="form-control" style="display: none;"/>-->
                <div class="col-sm-8">
                    <input type="radio" value="1" name="studentSex" th:field="*{studentSex}"/>男&nbsp;&nbsp;
                    <input type="radio" value="0" name="studentSex" th:field="*{studentSex}"/>女
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">生日：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="studentBirthday" th:value="${#dates.format(student.studentBirthday, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <textarea name="remark" class="form-control">[[*{remark}]]</textarea>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "develop/student";
        $("#form-student-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-student-edit').serialize());
            }
        }

        $("input[name='studentBirthday']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        // 回显Radio值
        // var studentSexId = $('#studentSexId').val();
        // $(':radio[name="studentSex"][value="'+ studentSexId +'"]').prop("checked","checked");

    </script>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('学生列表')" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>学生姓名：</label>
                                <input type="text" name="studentName"/>
                            </li>
                            <li>
                                <label>学号：</label>
                                <input type="text" name="studentNum"/>
                            </li>
                            <li>
                                <label>年龄：</label>
                                <input type="text" name="studentAge"/>
                            </li>
                            <li>
                                <label>生日：</label>
                                <input type="text" class="time-input" placeholder="请选择生日" name="studentBirthday"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:student:add">
                    <i class="fa fa-plus"></i> 添加
                </a>
                <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="system:student:edit">
                    <i class="fa fa-edit"></i> 修改
                </a>
                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:student:remove">
                    <i class="fa fa-remove"></i> 删除
                </a>
                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:student:export">
                    <i class="fa fa-download"></i> 导出
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('system:student:edit')}]];
        var removeFlag = [[${@permission.hasPermi('system:student:remove')}]];
        var prefix = ctx + "develop/student";

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "学生",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'id',
                    title: '主键id',
                    visible: false
                },
                {
                    field: 'studentName',
                    title: '学生姓名'
                },
                {
                    field: 'studentNum',
                    title: '学号'
                },
                {
                    field: 'address',
                    title: '地址'
                },
                {
                    field: 'studentAge',
                    title: '年龄'
                },
                {
                    field: 'studentSex',
                    title: '性别',
                    formatter: function(value, row, index) {
                        if(row.studentSex == '1'){
                            value='男'
                        }else{
                            value='女'
                        }
                        return value;
                    }
                },
                {
                    field: 'studentBirthday',
                    title: '生日'
                },
                {
                    field: 'remark',
                    title: '备注'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });
    </script>
</body>
</html>

惜惜然
关注
专栏目录
若依同时集成jsp和thymeleaf解决方案
猿小白的博客
04-22 1401
对应目前来说，新项目一般很少会使用jsp这项技术，但是老项目可能是有jsp开发的，这时候可能就会有这么一个需求，就是将老项目的代码移植到新框架上。本篇教程主要介绍，如何整合jsp和thymeleaf同时存在。经过测试，已完美整合。 若依版本：<version>4.7.3</version> 一、添加jsp依赖 在ruoyi-framework/pom.xml文件中添加jsp依赖 <!--jsp--> <dependency>..
若依如何使用(基本环境的配置)
weixin_54048131的博客
08-12 1816
本文章转载于公众号：王清江唷,仅用于学习和讨论，如有侵权请联系QQ交流群：298405437本人QQ：4206359。
jQuery的serialize方法
wqr111的博客
12-15 767
jQuery ajax - serialize() 方法+bootstrap的$.operate.save(url,data)使用 $.operate.save(url,$('#表格id').serialize());
若依springboot + thymeleaf版本+前后台服务分离时的分页功能实现
weixin_42741254的博客
11-24 1181
若依springboot + thymeleaf版本+前后台服务分离时的分页功能实现
若依学习笔记10——Thymeleaf
qq_45311457的博客
10-10 1338
Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP，Velocity，FreeMaker 等模板引擎类似，也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比，Thymeleaf 最大的特点是，即使不启动 Web 应用，也可以直接在浏览器中打开并正确显示模板页面。相较与其他的模板引擎，它有如下三个极吸引人的特点。类似的模板引擎，它可以完全替代。
40、springboot 整合 Thymeleaf（Thymeleaf 的自动配置和基本语法及整合）
最新发布
Java 领域技术分享
08-29 4834
Thymeleaf的自动配置和基本语法、springboot 整合 Thymeleaf
若依平台开发文档word版本
04-14
### 若依平台开发文档知识点概览 #### 一、后端技术栈与核心功能 **1. 技术栈概述** - **系统环境**: Java EE 8, Servlet 3.0, Apache Maven 3 - **主框架**: Spring Boot 2.0, Spring Framework 5.0, Apache ...
thymeleaf-jar包
04-17
8. `slf4j-log4j12-1.7.25.jar`：这是一个SLF4J的具体实现，它桥接了SLF4J API与Log4j框架，让Thymeleaf可以通过SLF4J接口使用Log4j进行日志记录。 对于初学者来说，找到并理解这些依赖关系可能会有些困难，特别是...
RuoYi:使用shiro mybatis springmvc thymeleaf引导程序的RuoYi框架
05-18
为何选择若依 是一个完全响应式，基于Bootstrap3.3.6最新版本开发的主题。 她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA。 拥有良好的代码结构，层次结构清晰。内置一系列基础功能。 ...
thymeleaf循环遍历集合并呈现在表格中
12-14
`Commander`类通常会与数据库中的表结构相对应，每个对象代表表中的一行记录。 以下是一个典型的后台处理代码示例： ```java @Controller public class HelloController { @Autowired CommanderDao commanderDao...
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面
04-21
在本项目中，我们利用Spring Boot、Thymeleaf和Bootstrap三大技术栈构建了一个简易的后台管理系统界面。...开发者可以根据需求进一步扩展功能，比如添加权限控制、日志记录、数据统计等模块，以满足更复杂的业务场景。
ruoyi使用心得（二）thymeleaf使用笔记
qq_41057655的博客
03-09 1842
ruoyi框架内部自己封装了thymeleaf模板，使用方法和thymeleaf官网一致 <textarea name="goodsDetail" class="form-control">[[*{goodsDetail}]]</textarea> <input name="goodsName" th:field="*{goodsName}" class="for...
实现数据库存入html代码，并在前端就页面返回。
梵高的向日葵
12-11 2310
获取页面代码的方法，并保存到后端 function submitHandler() { //获取html代码 var html=$('#table').html(); //提交到后台，基于若依框架 $.operate.save(prefix + "/add", {html:html}); } 上面的save方法实现 save: function(url, data, callback) {
多附件上传下载删除（表格形式展示）
weixin_42599079的博客
02-10 850
HTML 代码 <form class="form-horizontal m" id="form-blacklist-add"> <div class="form-group"> <label class="col-sm-3 control-label" style="padding-top: 10px;">附件： </labe...
若依/RuoYi框架（Thymeleaf模板引擎）前端遍历list显示select下拉框，根据选择option动态加载内容
BUG设计师
01-12 1万+
一、前端遍历list显示select下拉框 后台代码： @GetMapping("/addPets/{id}") public String addPets(@PathVariable("id") Long id, ModelMap mmap) { Users users = usersService.selectUsersById(id); ...
表单特殊输入处理收集
ξσ Dicky's Blog σξ
01-26 2017
只能是写限定的东西 代码如下:ENTER键可以让光标移到下一个输入框 只能是中文 只能是英文和数字.屏蔽了输入法 只能输入英文和数字 只能是数字只能显示，不能修改的文本框只能是数字,判断按键 代码如下:function  onlyNum(){if(!((event.keyCode>=48&&event.keyCode=96&&event.keyCodeevent.returnValu
若依ruoyi——手把手教你制作自己的管理系统【二、修改样式】
热门推荐
Start_Simple的博客
02-14 2万+
若依ruoyi修改样式
前端根据后端信息动态拼接html
overturn的博客
11-16 1040
1.表结构 sys_name varchar 列名 sys_title varchar 列的中文名 sys_group varchar 配置分组 sys_type varchar 文本框的类型 sys_value text 列的值 sys_options text 列的可选值 sys_tips varchar 该条记录的提示 2.html写法 <!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org..
bootstrap tab 组合表头
狼魂之力
04-09 315
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('客户进度列表')"/> </head> <body class="gray-bg"> <.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值