点击上方 web项目开发,选择 设为星标
优质文章,及时送达
效果图
前端页面

编辑效果

环境介绍
jdk:1.8
数据库:mysql
前端:tymeleaf
后端:springboot+jpa
完整源码获取

扫码关注回复【信息修改代码】获取源码
如果你在运行这个代码的过程中有遇到问题,请加小编微信xxf960513,我拉你进对应微信学习群!!帮助你快速掌握这个功能代码!
核心代码介绍
pox.xml
<dependency> <groupId>org.springframework.bootgroupId> <artifactId>spring-boot-starter-data-jpaartifactId> dependency> <dependency> <groupId>mysqlgroupId> <artifactId>mysql-connector-javaartifactId> <scope>runtimescope> dependency> <dependency> <groupId>org.springframework.bootgroupId> <artifactId>spring-boot-starter-thymeleafartifactId> dependency>mysql
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: 9080spring: 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 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
<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>--完--
如果你觉得这个案例以及我们的分享思路不错,对你有帮助,请分享给身边更多需要学习的朋友。别忘了《留言+点在看》给作者一个鼓励哦!
推荐案例1、springboot+mybatis+vue前后端分离实现用户登陆注册功能
2、SpringBoot+Vue前后分离实现邮件发送功能
3、SpringBoot+Spring Data JPA+Vue前后端分离实现分页功能
4、SpringBoot+Spring Data JPA+Vue前后端分离实现Excel导出功能
5、Spring Boot + Vue前后端分离实现图片上传功能
6、springboot+jpa+tymeleaf实现分页功能
温暖提示为了方便大家更好的学习,本公众号经常分享一些完整的单个功能案例代码给大家去练习,如果本公众号没有你要学习的功能案例,你可以联系小编(微信:xxf960513)提供你的小需求给我,我安排我们这边的开发团队免费帮你完成你的案例。注意:只能提单个功能的需求不能要求功能太多,比如要求用什么技术,有几个页面,页面要求怎么样?


被折叠的 条评论
为什么被折叠?



