springboot+jpa+thymeleaf实现信息修改功能

程序员文章站 2022-05-05 11:44:14

...

页面效果

前端页面 springboot+jpa+thymeleaf实现信息修改功能
编辑效果

环境介绍

jdk：1.8以及上
前端：thymeleaf
后端：springboot+jpa
数据库：5.6及以上
如果你在运行这个代码的过程中有遇到问题，请加小编vi信xxf960513，我拉你进对应学习群！！帮助你快速掌握这个功能代码！

核心代码

pox.xml

<!--Spring Data JPA 依赖 :: 数据持久层框架-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <!--h2 数据源连接驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!-- 模板引擎 Thymeleaf 依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

创表语句

DROP TABLE IF EXISTS `demo`;
CREATE TABLE `demo` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `create_time` datetime DEFAULT NULL,
  `des` longtext,
  `modify_time` datetime DEFAULT NULL,
  `name` varchar(50) DEFAULT NULL,
  `remark` varchar(1024) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of demo
-- ----------------------------
BEGIN;
INSERT INTO `demo` VALUES (1, '2020-05-13 23:27:34', 'java是第一语言', '2020-05-13 23:28:14', 'java', '跟阿牛学java');
INSERT INTO `demo` VALUES (2, '2020-05-13 23:27:34', 'javaee', '2020-05-13 23:28:14', '开发必备', '跟阿牛学java');
INSERT INTO `demo` VALUES (3, '2020-05-13 23:27:34', 'javaee', '2020-05-13 23:28:14', '开发必备', '跟阿牛学java');
INSERT INTO `demo` VALUES (6, '2020-05-13 23:27:34', 'javaee', '2020-05-13 23:28:14', '开发必备', '跟阿牛学java');
INSERT INTO `demo` VALUES (10, '2020-05-13 23:27:34', 'javaee', '2020-05-13 23:28:14', '开发必备', '跟阿牛学java');
INSERT INTO `demo` VALUES (11, '2020-05-13 23:27:34', 'javaee', '2020-05-13 23:28:14', '开发必备', '跟阿牛学java');
INSERT INTO `demo` VALUES (13, '2020-05-13 23:27:34', 'javaee', '2020-05-13 23:28:14', '开发必备', '跟阿牛学java');
COMMIT;

application.yml

server:
  port: 9080
spring:
  servlet:
    multipart:
      max-file-size: 100MB
      max-request-size: 100MB
  datasource:
    driverClassName: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost/tests?characterEncoding=UTF8&useSSL=false
    username: root
    password: asdf678987
  jpa:
    database: MySQL
    show-sql: true
    hibernate:
      ddl-auto: update
    database-platform: org.hibernate.dialect.MySQL5InnoDBDialect
    open-in-view: false
  thymeleaf:
    cache: false
    prefix: classpath:/templates/
    suffix: .html
    servlet:
      content-type: text/html
    mode: HTML5
    encoding: UTF-8
    resources:
      chain:
        strategy:
          content:
            enabled: true
            paths: /**

TestController.java

package com.feige.tymeleaf.controller;
import com.feige.tymeleaf.entity.Test;
import com.feige.tymeleaf.service.TestService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.util.Map;

@RestController
@RequestMapping("")
public class TestController {

    @Autowired
    TestService testServiceImpl;

    @RequestMapping(value="/save",method = RequestMethod.POST)
    public ModelAndView save(@RequestParam Map<String,String> map) throws Exception {
        ModelAndView mv = new ModelAndView("index");
        try{
            testServiceImpl.save(map);
            mv.addObject("Result","修改成功！");
        }catch (Exception e){
            mv.addObject("Result","修改失败！");
        }
        return mv;
    }
}

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common::head('测试')">
<meta charset="UTF-8">
</head>
<body>
<div class="table-responsive">
    <table class="table table-striped" style="text-align: center;table-layout:fixed;" id="tableOne">
        <thead>
        <tr class="table_tr">
            <th style="width:45px;text-align: center;">序号</th>
            <th style="width:50px;text-align: center;">课程名称</th>
            <th style="width:120px;text-align: center;">课程简介</th>
            <th style="width:80px;text-align: center;">备注</th>
            <th style="width:80px;text-align: center;">发布时间</th>
            <th style="width:80px;text-align: center;">修改时间</th>
            <th style="width:80px;text-align: center;">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="tm,tmStat:${listAll}">
            <td th:text="${tmStat.count}"></td>
            <td class="yin" th:text="${tm.name}"></td>
            <td class="yin" th:text="${tm.des}"></td>
            <td class="yin dates" th:text="${tm.remark}"></td>
            <td class="yin dates" th:text="${#strings.substring(tm.createTime,0,10)}"></td>
            <td class="yin dates" th:text="${#strings.substring(tm.modifyTime,0,10)}"></td>
            <td class="text footable-visible footable-last-column">
                <div class="btn-group group-btns" style="margin-left: 42px;">
                    <a th:id="${tm.id}" class="btn btn-primary btn-xs editBtn" data-target="#edit" data-toggle="modal" style="margin-right:5px;">编辑</a>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <!--分页-->
    <div th:replace="common::btn_pager"></div>
</div>
<div style="text-align: center;margin-top:60px;">
    <h2 id="blink" style="line-height: 60px">关注微信公众号【web项目开发】获取更多案例源码<br>牛哥带你飞</h2>
    <img th:src="@{/ins/js/f96d489a85ea6e9fb533e08d9454e0f.jpg}">
</div>
<!-- 模态弹框-->
<div th:replace="model/editModel::editModel"></div>
<!-- 模态弹框 结束-->
<!-- 隐藏域 -->
<input id="result" type="hidden" th:value="${Result}">
<!-- 隐藏域 结束 -->
<div th:replace="common::scripts"></div>
<script language="javascript">
    function changeColor(){
        var color="#f00|容#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
        color=color.split("|");
        document.getElementById("blink").style.color=color[parseInt(Math.random() * color.length)];
    }
    setInterval("changeColor()",200);

    //时间选择器
    $.fn.datepicker.dates['cn'] = {
        days : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ],
        daysShort : [ "周日", "周一", "周二", "周三", "周四", "周五", "周六" ],
        daysMin : [ "日", "一", "二", "三", "四", "五", "六" ],
        months : [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月",
            "11月", "12月" ],
        monthsShort : [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
            "11", "12" ],
        today : "今天",
        clear : "清除",
        format : "yyyy-mm-dd",

        titleFormat : "yyyy MM", /* Leverages same syntax as 'format' */
        weekStart : 1
    };

    // 引入时间选择器
    $('.date1').datepicker({
        format: 'yyyy-mm-dd',
        language: 'cn',
        keyboardNavigation: false,
        forceParse: false,
        autoclose: true
    });

    if($("#result").val() != "查询成功！"){
        alert($("#result").val())
        location.href = "/"
    }
    //点击编辑按钮将行的值传入列表
    $(".editBtn").click(function(){
        var tr = $(this).parent().parent().parent();
        $("input[name='id']").val($(this).attr("id"));
        tr.children("td").each(function(index){
            if(index == 1){
                $("input[name='name']").val($(this).text())
            }else if(index == 2){
                $("input[name='des']").val($(this).text())
            }else if(index == 3){
                $("input[name='remark']").val($(this).text())
            }else if(index == 4){
                $("input[name='createTime']").val($(this).text())
            }
        })
    })
</script>
</body>
</html>

–完--
源码获取地址：https://github.com/ZengANiu1996/anli4.git

springboot+jpa+thymeleaf实现信息修改功能

页面效果

环境介绍

核心代码

Android编程实现捕获程序异常退出时的错误log信息功能详解

Python的Tornado框架实现图片上传及图片大小修改功能

Android编程实现捕获程序异常退出时的错误log信息功能详解

Python的Tornado框架实现图片上传及图片大小修改功能

一条SQL语句修改多表多字段的信息的具体实现

HTML5实现获取地理位置信息并定位功能

Python实现的读取电脑硬件信息功能示例

Android实现打开手机淘宝并自动识别淘宝口令弹出商品信息功能

Android使用AlertDialog实现的信息列表单选、多选对话框功能

微信小程序实现左滑修改、删除功能