其他分享
首页 > 其他分享> > 使用layui做基础的VCD管理系统+JSON数据的封装

使用layui做基础的VCD管理系统+JSON数据的封装

作者:互联网

 

在数据库中,确定数据库的字段为vcdID,vcdName,vcdTotal(vcd藏量),vcdLendOut(借出的vcd数量),InputDate(置入日期)

使用mybatis的逆向工程文件生成vcd的实体和mapper

当然数据库查询的语句和方法也有其他的,这篇文章的主要侧重在layui的学习和应用。

 

主要的页面主要分为两个,一个是用作展示数据表格的首页,另外一个是用来添加vcd的添加页面。

 

其中待完成的页面是 编辑页面和搜索功能(用reload就能实现)。

我们先看前端的html页面,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>草莓vcd管理系统</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <!--    //最好使用它本地的这种目录结构-->
    <link rel="stylesheet" href="css/index.css">
    <script src="layui/layui.js"></script>
    <script src="js/index.js"></script>
</head>
<body>

<!-- 你的HTML代码 -->

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">草莓vcd管理系统</div>
        <!-- 头部区域(可配合layui已有的水平导航) -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="images/logo.png" class="layui-nav-img">
                    柳biubiu
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退出</a></li>
        </ul>
    </div>
</div>

<br>
<br>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"> 搜索条件:   </label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入vcd名称" class="layui-input" id="demoReload">
            </div>
        </div>

        <div class="layui-inline">
            <a class="layui-btn layui-btn-blg" onclick="search()" id="search">搜索</a>
        </div>
    </div>


</form>


<!--<div id = "test1"   style="height:80px;width:80px;background-color: #00FF00 " onclick="f()">-->


<!--</div>-->

<!--<div id ="test2">-->
<!--    <img src="images/logo.png"/>-->
<!--</div>-->


<!--<div class="layui-btn-container">-->
<!--    <button class="layui-btn layui-btn-sm" id="getCheckData">获取选中行数据</button>-->
<!--</div>-->

<table class="layui-hide" id="biu" lay-filter="test"></table>

<script type="text/html" id="barDemo">
   <!--    //使用script默认是不显示的,到时候引入进去就可以-->
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
   <!--   //使用添加按钮添加 弹窗层-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="batchdel">批量删除</a>
    <a class="layui-btn layui-btn-xs" onclick="tips()" id="zz">添加tips</a>
    <a class="layui-btn layui-btn-xs"  lay-event="refresh" id="refresh">刷新</a>
</script>

<script type="text/html" id="cellbarDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
</html>

 

其中渲染table的代码是

<table class="layui-hide" id="biu" lay-filter="test"></table>

这句话指定了table的id和事件过滤器(用于事件的精准匹配),可以忽略前面的导航栏的代码,在body里头直接写table的代码和后面置入的script 的代码(这里我们放到js文件中)

然后在JS中渲染这个table,

index.js

layui.use(['layer', 'form','table','jquery'], function(){                                               //用之前一定要先定义
    var layer = layui.layer
        ,form = layui.form,table = layui.table,$=layui.jquery;

    layer.msg('Hello World');

    var tableIns = table.render({                                                                       //获取table的实例,后面用来做表格的刷新
        elem: '#biu '
        ,url:'vcd/listData'                    //数据接口
        ,toolbar:'#barDemo'                                                                             //表格左上角的功能可以自定义
        // ,defaultToolbar:['filter','print','']                                                        //表格右上方的三个按钮(导出、打印、筛选)不能编辑,只能选择是否显示
        ,limit:20                                                                                       //每一行的最多可以显示的数量
        ,page:true                                                                                      //是否开启分页
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
        ,cols: [
            [
                {type:'checkbox',width:120}
                ,{field:'vcdId', width:200, title: 'ID', sort: true}
                ,{field:'vcdName', width:335, title: 'VCD名',edit:"true"}                                   //注意这个edit:true,表示可以被编辑
                ,{field:'total', width:180, title: '总量'}
                ,{field:'lendout', width:180, title: '借出'}
                ,{field:'inputdate', width:200, title: '入货日期'}
                ,{width:150,title:'操作',toolbar:'#cellbarDemo'}                                              //用toolbar引入操作按钮
            ]
        ]
    });

    $("#getCheckData").click(function () {                                                                //要写在use layui里头
        var checkStatus = table.checkStatus('biu');                                                       //获得当前选中行的状态
        layer.alert(JSON.stringify(checkStatus.data));                                                    //将选中行的数据显示出来并显示出来
    });

    $("#reload").click(function () {    //刷新这个表格,用到reload方法
        //tableIns.reload();
        var id =10005;
        tableIns.reload({
            where: { //设定异步数据接口的额外参数,任意设
                id:id
            }
        });
    });


    $("#refresh").click(function () {    //刷新这个表格,用到reload方法
        //tableIns.reload();
        var id =10005;
        tableIns.reload({
            where: { //设定异步数据接口的额外参数,任意设
                id:id
            }
        });
    });

    //监听table的事件
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'add':
                // layer.msg('添加');
                layer.open({
                    type:2,
                    title:'添加VCD信息',
                    area:["600px","600px"],
                    content:"vcd/Create"
                });
                break;
            case 'batchdel':
                layer.msg('删除');
                var checkStatus = table.checkStatus('biu');
                if(checkStatus.data.length>0){
                    layer.msg("您选中");
                }else{
                    layer.msg("请选择一条数据");
                }
                break;
        };
    });

    //监听单元行的事件
    table.on('tool(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
        var tr = obj.tr; //获得当前行 tr 的DOM对象

        if(layEvent === 'del'){ //删除
            layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                layer.close(index);
                //向服务端发送删除指令
            });
        } else if(layEvent === 'edit'){ //编辑
            layer.msg("更新");

            //同步更新缓存对应的值
            obj.update({
                username: '123'
                ,city: '北京'
            });
        }
    });

});



function f() {
    layer.msg("nihao");
}

function tips() {
    layer.tips("这是个弹出的tips","#zz",{tips:1})
}

主要分三部分的内容,分别是显示表格的内容点击添加按钮出现添加vcd的具体页面以及监听行事件

显示表格的话,遇到的难点是

1、返回数据必须是官方要求的code、msg、count、data的方式

2、数据表格的cols的写法

 

我从后台返回的是原始的关于vcd的list,而不是像他这样的形式,确定你的data可以传到controller之后,你就需要将json的东西进行一下封装,这里我后台的controller是这样写的。

vcdController.java

    @RequestMapping("/listData")
    @ResponseBody
    public Map<String,Object> getVCDList() throws JSONException {
        Map<String,Object> map = new HashMap<String, Object>();
        List<Vcd> allList = vcdService.getVcdAll();
        if (allList != null) {
            map.put("code", 0);
            map.put("msg", "");
            map.put("count",allList.size());
            map.put("data", allList);
            return map;
        }
        return  null;

    }

通过这样的方法,allList被转化为我们具有特定格式的Json数据

这个格式的数据就是可以被前台的捕捉的,我们在前端直接写

  var tableIns = table.render({                                                                       //获取table的实例,后面用来做表格的刷新
        elem: '#biu '
        ,url:'vcd/listData'                    //数据接口
        ,toolbar:'#barDemo'                                                                             //表格左上角的功能可以自定义
        // ,defaultToolbar:['filter','print','']                                                        //表格右上方的三个按钮(导出、打印、筛选)不能编辑,只能选择是否显示
        ,limit:20                                                                                       //每一行的最多可以显示的数量
        ,page:true                                                                                      //是否开启分页
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
        ,cols: [
              [

              ]
               ]
});

就可以获取到后台数据库中的值展示在前台。

点击添加按钮,增加一列数据,这个和传统的写法比较像,首先,添加按钮后面增加了属性layevent=add,js中捕捉这个事件使用了layer.open,用弹窗的方式打开了另外一个html,具体代码如下,

 var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'add':
                // layer.msg('添加');
                layer.open({
                    type:2,
                    title:'添加VCD信息',
                    area:["600px","600px"],
                    content:"vcd/Create"
                });
                break;



           // .......

}

这个content指向的是一个拦截请求/vcd/Create,这个拦截请求是我们在vcdController中写的,在里面没有写其他的内容,单单返回了一个页面。

@RequestMapping("/Create")
//这里不写responsebody

public String  CreateVcd(){

       return  "create.html";

}

这样子,我们就可以成功的在前端弹出这个创建vcd的框了。

添加vcd的页面使用的是layui的表单,提交到/AddVcd的请求底下,使用mybatis的insertSelective,当然请求插入之前,要先判断该vcd是否存在,如果不存在,插入才有意义。

    @RequestMapping("/AddVcd")
    @ResponseBody
    public int addVcd(Vcd vcd, @Param("vcdName")String vcdName, @Param("amount")String amount, @Param("price") String price, @Param("inputDate")Date inputDate){
        //找寻相关的 字段并且插入数据库
        Vcd vcd1 = vcdService.getVcd(vcdName);
        if(vcd1 == null){
            int result = vcdService.insertVcd(vcd);
            return  result;
        }
        return 0;
    }

实现完上面的功能,显示表格的内容点击添加按钮出现添加vcd的具体页面   就完成了,还有监听行事件的功能,它是用在编辑按钮上的。

 

 

我理了一下逻辑,应该是先监听选中的数据是哪一条,然后点击编辑按钮之后,打开一个编辑页面 ,表格中的值传入预先填入表格,然后用户修改数据,提交(等于再插入一次),然后就可以成功更新值了。

另外还有一种思路,layui-table有一个属性叫edit,edit=true表示这个数据可以被编辑(点击表格上显示的值就可以修改),然后改完之后监听行事件,更新到数据库中。

这个我还在更新。等等鸭

 

标签:layer,vcd,表格,layui,JSON,table,var,VCD
来源: https://blog.csdn.net/qq_34093082/article/details/93868535