如何仿数据库添加修改删除

最新推荐文章于 2023-06-14 19:51:15 发布

天空海的眼·

最新推荐文章于 2023-06-14 19:51:15 发布

阅读量1.2k

点赞数

分类专栏： Java 随手小程序文章标签：仿数据库 java SSM 开发

“Read three minutes a day, getting better and better.”

本文链接：https://blog.csdn.net/chijiandi/article/details/79128103

版权

Java 同时被 2 个专栏收录

79 篇文章 2 订阅

订阅专栏

随手小程序

9 篇文章 3 订阅

订阅专栏

前言

做这样一个小Demo是在做一个C/S水印需要一个小后端进行控制的情况下，
因为嫌添加删除都要加页面嫌麻烦，就想出了仿数据库的模式写出来这么一个页面，效果图如下：
这里写图片描述
这样就实现了仿数据库模式的操作。

实现思路

主要实现语句在从后端返回list的时候加入这样的一句：

    @RequestMapping(value = "/getData")
    @ResponseBody
    public List<Mark> getData() {
        List list = new ArrayList();
        Mark mark = new Mark();
        mark.setId(MyUtils.uuid());
        list.add(mark);
        list.addAll(markMapper.selectAll());
        return list;
    }

这就实现了前端界面表格第一行是一条有一个UUID的空数据，这样我们对它进行修改时，判断如果修改的行索引为第一行，则执行添加操作，否则执行修改操作。

通过这样的方式就可以避免小数据操作时要新建添加删除的页面的繁琐操作。
简单地做这么一个Demo，下面放一下我的页面和控制器代码。

<html>
<head>
    <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@include file="/WEB-INF/head/head.jsp" %>
    <%@include file="/WEB-INF/head/head2.jsp" %>
    <title>姓名管理</title>
</head>
<body>
<table id="change_list" class="easyui-datagrid" title="姓名管理"
       data-options="singleSelect:true,toolbar:'#change_toolbar',
        loadMsg: '数据正在加载,请耐心的等待...',url:'/ssm/change/getData'
        ,method:'post',fit:true,striped:true,fitColumns:true,onAfterEdit:function (index,row,changes) {
                $.ajax({
                    type:'post',
                    data:{id:row.id,name:row.name,area:row.area,master:row.master},
                    url:'/ssm/change/setData',
                    success:function(data){$('#change_list').datagrid('reload');}
                });
              $('.change_btn').linkbutton({text:'确认修改',plain:true,iconCls:'fi-pencil'});
              }
              ,onLoadSuccess:function (data) {
                        $('.change_btn').linkbutton({text:'确认修改',plain:true,iconCls:'fi-pencil'});
                    }
            ">
    <thead>

    <tr>
        <th data-options="field:'area',width:'17%',align:'id',editor:{type:'textbox'}">地区</th>
        <th data-options="field:'master',width:'17%',align:'id',editor:{type:'textbox'}">主机ID</th>
        <th data-options="field:'name',width:'17%',align:'center',editor:{type:'textbox'}">姓名</th>
        <th data-options="field:'a',width:'26%',align:'center',formatter:operation">操作</th>
    </tr>
    </thead>
</table>

<div id="change_toolbar">
    <a onclick="change_del();" href="javascript:void(0);"
       class="easyui-linkbutton" data-options="plain:true,iconCls:'fi-x '">删除</a>
</div>

</body>
<script>
    function operation(val, row, index) {
        var operation = '';
        operation += '<a class="change_btn" href="javascript:void(0);" onclick="endEdit(\'' + index + '\');">确定</a>';
        return operation;
    }

    function endEdit(index) {
        $('#change_list').datagrid('endEdit', index);
    }

    $('#change_list').datagrid({
        onDblClickCell: function (index, field, value) {
            $(this).datagrid('beginEdit', index);
            var ed = $(this).datagrid('getEditor', {index: index, field: field});
            $(ed.target).focus();
        }
    });

    function change_del() {
        var row = $('#change_list').datagrid('getSelected');
        $.messager.confirm('删除', '确认要删除吗？', function (r) {
            if (r) {
                $.ajax({
                    type: 'POST',
                    data: {
                        id: row.id
                    },
                    url: '/ssm/change/del',
                    success: function (data) {
                        $('#change_list').datagrid('reload');
                        $.messager.show({
                            title: '提示',
                            msg: '删除成功'
                        });
                    }
                })
            }
        });
    }
</script>
</html>

做的比较j简易，很多细节没太考虑，include中导入了easyui的包和c标签等

package com.cjd.ssm.controller;

import com.cjd.ssm.base.Result;
import com.cjd.ssm.mapper.MarkMapper;
import com.cjd.ssm.pojo.Mark;
import com.cjd.ssm.utils.MyUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

/**
 * @author : cjd
 * @Description : 仿数据库Demo控制器
 * @create : 2018-01-18 16:57
 **/
@Controller
@RequestMapping(value = "/change")
public class ChangeController {

    @Autowired
    private MarkMapper markMapper;

    @RequestMapping(value = "/getData")
    @ResponseBody
    public List<Mark> getData() {
        List list = new ArrayList();
        Mark mark = new Mark();
        mark.setId(MyUtils.uuid());
        list.add(mark);
        list.addAll(markMapper.selectAll());
        return list;
    }

    @RequestMapping(value = "/setData", method = RequestMethod.POST)
    @ResponseBody
    public Result setData(Mark mark) {
        Result result = new Result();
        boolean find = false;
        List<Mark> list = markMapper.selectAll();
        for (Mark mark1 : list) {
            if (mark1.getId().equals(mark.getId())) {
                find = true;
                break;
            }
        }
        if (find) {
            markMapper.updateByMark(mark);
            result.setMsg("更新成功");
        } else {
            markMapper.insertMark(mark);
            result.setMsg("新增成功");
        }
        return result;
    }

    @RequestMapping(value = "/del")
    @ResponseBody
    public String del(Mark mark) {
        markMapper.deleteById(mark);
        return "删除成功";
    }
}

天空海的眼·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何仿数据库添加修改删除

前言做这样一个小Demo是在做一个C/S水印需要一个小后端进行控制的情况下，因为嫌添加删除都要加页面嫌麻烦，就想出了仿数据库的模式写出来这么一个页面，效果图如下：这样就实现了仿数据库模式的操作。实现思路主要实现语句在从后端返回list的时候加入这样的一句： @RequestMapping(value = "/getData") @ResponseBod
复制链接

扫一扫