layui+SSM的数据表的增删改实例(利用弹框添加、修改)

站长资源 2025/11/2 佚名

70 1538 70

DDR爱好者之家 Design By 杰米

本人前端知识相当于小白，初学SSM时，了解了layui前端框架，所以开始研究了数据表的增删改查，由于js、ajax知识不是很好，所以百度了相关ajax操作，用以借鉴。希望能帮助有需要的初学者，不喜勿喷，另外有相关不足，希望大家可以指出，谢谢！

注：以下前端代码都是利用layui的框架，后台是SSM

前端：

<%--
 Created by IntelliJ IDEA.
 User: SL
 Date: 2019/2/26
 Time: 14:03
 To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>layui在线调试</title>
 <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css" rel="external nofollow" media="all">
 <script src="/UploadFiles/2021-04-02/jquery-3.3.1.js">

后台：


package com.sl.controller;

import com.sl.model.NewsDetail;
import com.sl.service.NewsDetailService;
import com.sl.util.DateUtil;
import org.codehaus.jackson.map.ObjectMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.time.format.DateTimeFormatter;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


@Controller
@RequestMapping("/news")
public class NewsDetailController {

 /*注入NewsDetailService*/
 /**
  *
  */
 @Autowired
 private NewsDetailService newsDetailService;

 @RequestMapping("/main")
 @ResponseBody
 private Map<String, Object> queryAll() {
  Map<String, Object> map = new HashMap<>();
  List<NewsDetail> list = newsDetailService.queryAll();
  int count = newsDetailService.queryAllCount();
  map.put("data", list);
  map.put("code", 0);
  map.put("count", count);

  return map;
 }


 @RequestMapping(value = "/delete", method = RequestMethod.POST, produces = "application/json")
 @ResponseBody
 private Map<String, Object> deleteById(@RequestBody HashMap<String, String> map2) {
  Map<String, Object> map = new HashMap<>();
  int id = Integer.parseInt(map2.get("id"));
  int row = newsDetailService.deleteById(id);
  if (row == 1) {
   List<NewsDetail> list = newsDetailService.queryAll();
   int count = newsDetailService.queryAllCount();
   map.put("data", list);
   map.put("returnCode", "200");
   map.put("count", count);
   map.put("code", 0);
   return map;
  } else {
   map.put("code", 1);
   return map;
  }
 }

 @RequestMapping(value = "/mulDelete", method = RequestMethod.POST, produces = "application/json")
 @ResponseBody
 public Map<String, Object> mulDelete(@RequestBody HashMap<String, String> map2){
  Map<String, Object> map = new HashMap<>();

  String ids = map2.get("ids");
  String mulid[] = ids.split(",");
  int row = 0;
  for(int i=0; i<mulid.length; i++){
   row = newsDetailService.mulDelete(mulid[i]);
  }

  if(row != 0){
   List<NewsDetail> list = newsDetailService.queryAll();
   int count = newsDetailService.queryAllCount();
   map.put("code", 0);
   map.put("data", list);
   map.put("count", count);
   map.put("returnCode", "200");
   return map;
  } else {
   map.put("code", -1);
   return map;
  }
 }

 @RequestMapping(value = "/update", method = RequestMethod.POST, produces = "application/json")
 @ResponseBody
 public Map<String, Object> updateById(@RequestBody HashMap<String, String> map2) throws IOException {
  Map<String, Object> map = new HashMap<>();

  int id = Integer.parseInt(map2.get("id"));
  String title = map2.get("newtitle");
  String summary = map2.get("newsummary");
  String author = map2.get("newauthor");
  /*System.out.println(id+" "+title +" "+summary+" "+author);
  System.out.println(1);
  System.out.println(new Date());
  System.out.println(DateUtil.getCurrentDateString());
  System.out.println(2);*/
  NewsDetail newsDetail = new NewsDetail();
  newsDetail.setId(id);
  newsDetail.setTitle(title);
  newsDetail.setSummary(summary);
  newsDetail.setAuthor(author);
  newsDetail.setCreateDate(DateUtil.formatDate(new Date(), "yyyy-MM-dd HH-mm-ss"));
  /*System.out.println(newsDetail.getCreateDate());
  System.out.println(DateUtil.formatDate(new Date(), "yyyy-MM-dd HH-mm-ss"));*/

  int row = newsDetailService.updateById(newsDetail);
  if (row == 1) {
   List<NewsDetail> list = newsDetailService.queryAll();
   int count = newsDetailService.queryAllCount();
   map.put("data", list);
   map.put("count", count);
   map.put("code", 0);
   map.put("returnCode", "200");
   return map;
  } else {
   map.put("code", 1);
   return map;
  }
 }

 @RequestMapping("/update2")
 @ResponseBody
 public Map<String, Object> update2(NewsDetail newsDetail) {
  Map<String, Object> map = new HashMap<>();
  /*newsDetail.setCreateDate(new Date());*/
  int row = newsDetailService.updateById(newsDetail);
  if (row == 1) {
   List<NewsDetail> list = newsDetailService.queryAll();
   int count = newsDetailService.queryAllCount();
   map.put("data", list);
   map.put("count", count);
   map.put("code", 0);
   return map;
  } else {
   map.put("code", 1);
   return map;
  }

 }

 @RequestMapping("/add")
 @ResponseBody
 public Map<String, Object> add(@RequestBody HashMap<String, String> map2) {
  Map<String, Object> map = new HashMap<>();
  String title = map2.get("newtitle");
  String summary = map2.get("newsummary");
  String author = map2.get("newauthor");
  NewsDetail newsDetail = new NewsDetail();
  newsDetail.setTitle(title);
  newsDetail.setSummary(summary);
  newsDetail.setAuthor(author);
  newsDetail.setCreateDate(DateUtil.formatDate(new Date(), "yyyy-MM-dd HH-mm-ss"));
  boolean row = newsDetailService.addNews(newsDetail);
  if (row) {
   List<NewsDetail> list = newsDetailService.queryAll();
   int count = newsDetailService.queryAllCount();
   map.put("data", list);
   map.put("count", count);
   map.put("returnCode", "200");
   map.put("code", 0);
   return map;
  } else {
   map.put("code", 1);
   return map;
  }
 }

}





亲测有效，希望大家提出不足！谢谢！另外后台里面有一个时间转换的类（DateUtil.formatDate（）），前端有一个例如url: '${ctx}/news/update/'，其中的${cxt}是一个指定的路径，后台写了一个类，这些有需要的，可以看我的博客，谢谢！
以上这篇layui+SSM的数据表的增删改实例(利用弹框添加、修改)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

layui,SSM,数据表,增删改

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“layui+SSM的数据表的增删改实例(利用弹框添加、修改)”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年11月02日

layui+SSM的数据表的增删改实例(利用弹框添加、修改)

在SSM框架下用laypage和ajax实现分页和数据交互的方法

vue实现在线翻译功能

评论“layui+SSM的数据表的增删改实例(利用弹框添加、修改)”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接