idea-ssm-crud项目实战(三)

前面已经搭建好了ssm框架了,这一章节就写一下员工的crud了,都是一步步来操作,前台页面使用的Bootstrap来操作。如果idea中搭建ssm不会的可以去看一下《idea-ssm-crud项目实战(二)》好了现在开始了。

最终效果:

页面布局

使用bootstrap布局很简单,使用bootstrap的栅格系统、按钮、表格以及分页插件就好了。

这个布局很简单了就是分为上中下3行就可以了,这个直接使用bootstrap的栅格系统,由于这个很简单直接在代码中写上注释.

首先使用bootstrap的栅格系统https://v3.bootcss.com/css/#grid,如图

看代码

<div class="container">
            <%--按钮--%>
        <div class="row">
            <%--站4格偏移8格--%>
            <div class="col-md-4 col-md-offset-8">
            </div>
        </div>
            <%--内容--%>
        <div class="row">
            <div class="col-md-12">
            </div>
        </div>
            <%--分页--%>
        <div class="row">
            <%--显示前面--%>
            <div class="col-md-6">

            </div>
                <%--分页显示--%>
            <div class="col-md-6">
                
            </div>
        </div>
    </div>

以上代码很简单了,就是分为了上中下3行,现在开始填代码了。

1.在按钮注释的div中添加一个按钮,这个按钮也在bootstrap官方文档中找如图:

找到自己觉得合适的按钮然后复制代码到按钮的div部分

<%--站4格偏移8格--%>
<div class="col-md-4 col-md-offset-8">
     <button type="button" class="btn btn-primary">添加</button>
</div>

声明一下栅格系统是宽度总共是12个格子,现在来解释一下col-md-4 clo-md-offset-8。

这2个样式是该div占4个格子,偏移8个格子,也就是说从第五个格子开始占位。

2.在内容的div中添加一个表格,这个按钮也在bootstrap官方文档中找如图:

在内容区域直接输入以下代码,由于表格的tbody区域都是使用ajax来加载的所以只需要一个table的架子即可。

<table class="table table-hover">
     <thead>
        <tr>
            <th>员工ID</th>
            <th>员工名称</th>
            <th>员工性别</th>
            <th>员工邮箱</th>
            <th>所属部门</th>
            <th>操作</th>
        </tr>
     </thead>
     <tbody>
    </tbody>
</table>

3.分页显示位置填上分页插件的代码,这个分页插件也在bootstrap官方文档中找如图:

直接复制以上代码到分页显示的div就可以了,这里都需要使用ajax来获取真实数据来加载所以就先不粘贴了。好了差不多这里已经布局玩了,添加后续在加。

查询所有员工数据

这个查询员工所有数据上一章节已经测试通过了,这里就不再赘述了,现在稍微改造几个地方。

1.为了spring结构更加清晰,将applicationContext.xml分为2个文件,一个是applicationContext-dao.xml和applicationContext-service.xml,代码几乎都没有改变,具体查看github源码。

2.所有ajax返回数据都应该为json格式返回,这样有利于其它平台调用,为了使用返回json方便,统一创建一个message类来返回。

message类代码:

public class Message {
    /**
     * code=200成功代码,其它代码可以自定义
     */
    private int code;
    /**
     * 表示成功还是错误
     */
    private boolean isSuccess;
    /**
     * 返回信息
     */
    private String msg;
    /**
     * 返回前台数据源
     */
    private Map<String,Object> maps = new HashMap<>();

    getter和setter省略.......
    
    /**
     * 成功返回
     * @return
     */
    public static Message getSuccess() {
        Message message = new Message();
        message.setCode(200);
        message.isSuccess = true;
        message.setMsg("操作成功");
        return message;
    }
    /**
     * 错误返回
     * @return
     */
    public static Message getError() {
        Message message = new Message();
        message.setCode(100);
        message.isSuccess = false;
        message.setMsg("操作失败");
        return message;
    }
    /**
     * 数据源添加数据
     * @param key
     * @param value
     * @return
     */
    public Message addAttribute(String key,Object value) {
        maps.put(key,value);
        return this;
    }
}

好了现在可以写前后台交互的代码了,前台使用ajax交互后台的/employyee/list对应的控制器方法。

1.封装一个pageload方法加载员工信息,由于要分页所以封装的方法需要一个页码参数

2.首先需要在页面加载之后加载数据需要使用到$(function(){});

查看前端js代码

<script type="text/javascript">
    /**
     * 1.封装一个pageload方法加载员工信息,由于要分页所以封装的方法需要一个页码参数
     * 2.首先需要在页面加载之后加载数据需要使用到$(function(){});
     */
    $(function(){
        //默认获取第一页
        pageload(1);
    });
    
    function pageload(pageIndex) {
        $.ajax({
            url:"${pagePath}/employee/list",
            data:{
                pageIndex : pageIndex,
                time : new Date().getDate()
            },
            type:"GET",
            success : function (result) {
                console.log(result)
            }
        });
    }
</script>

控制器代码

   @RequestMapping("/list")
    @ResponseBody
    public Message list(@RequestParam(value = "pageIndex",defaultValue = "1")
                                   Integer pageIndex) throws Exception {
        PageHelper.startPage(pageIndex, pageSize);
        List<EmployeePoJo> employees = employeeService.findALL(null);
        //用PageInfo对结果进行包装,每次连续显示为5页
        PageInfo<EmployeePoJo> pageInfo = new PageInfo<>(employees,5);
        return Message.getSuccess().addAttribute("pageInfo",pageInfo);
    }

web.xml的配置就不用多说了,如果需要的可以直接github地址上查看代码,现在运行结果。

从上图可以看出数据获取到前端了,并且非常详细,分页信息,数据源,多少页,多少记录数等等都显示出来了。现在就直接可以拼接前端的标签代码了。

前台显示

前台页面显示需要以下几个方法:

1.显示table内容的方法

function loadTable(employeeList) {
        //给table加上一个id,这里好获取对象
        var employeeTable = $("#employeeTable");
        $.each(employeeList,function (index, item) {
            var tr = $("<tr></tr>");
            //将下面的td全部都添加到tr中
            $("<td></td>").append(item.empId).appendTo(tr);
            $("<td></td>").append(item.empName).appendTo(tr);
            $("<td></td>").append(item.gender).appendTo(tr);
            $("<td></td>").append(item.email).appendTo(tr);
            $("<td></td>").append(item.department.deptName).appendTo(tr);
            //创建修改和删除按钮
            var btn_eidt_employee = $('<button type="button" class="btn btn-primary eidt_employee">修改</button>');
            var btn_del_employee = $('<button type="button" class="btn btn-danger del_employee">删除</button>');
            $("<td></td>").append(btn_eidt_employee).append(btn_del_employee).appendTo(tr);
            //在将tr添加到tbody中
            employeeTable.append(tr);
        });
    }

2.显示分页的方法,我将分页绑定插件的方法分拆了多个方法,上一页,下一页,首页,尾页,和中间页码的一共5个方法

/**
 * 显示分页详细信息
 */
function page_info_show(pageInfo) {
    var page_info_area = $("#page_info_area");
    page_info_area.empty();
    page_info_area.append("当前"+pageInfo.pageNum+"页,总"+
        pageInfo.pages+"页,总"+
        pageInfo.total+"条记录");
    pages = pageInfo.pages;
    pageIndex = pageInfo.pageNum;
}
/**
 * 分页方法
 */
function paginationFun(pageInfo) {
    //添加时都需要先清空一下
    pagination.empty();

    //首页
    firstPageFun();

    //将上一页控件添加到分页ul中
    previousPageFun();

    //分页插件中间部分
    page_lis(pageInfo);

    //下一页
    nextPageFun();

    //尾页
    lastPageFun();
}

最后的显示结果

分页的事件

每个页码绑定事件就很简单了。在写pageload方法当时就只是传入一个pageIndex页码就可以了,现在也就是只需要为页号绑定个事件。

现在就需要给页码的li上加上class="page_li" pageIndex="'+item+'",为了后期绑定事件使用,在用jquery事件绑定一下就可以了,看代码。

pagination = $("#pagination");
/**
 * 页码绑定事件
 */
pagination.on("click",".page_li",function () {
    pageIndex = $(this).attr("pageIndex");
    pageload(pageIndex);
});

首页,尾页,上一页,下一页也类似,看看代码吧。

/**
 * 首页事件绑定
 */
pagination.on("click",".firstPage",function () {
    pageload(1);
});
/**
 * 上一页
 */
pagination.on("click",".previous",function () {
    if(pageIndex > 1) {
        pageload(pageIndex - 1);
    }
});
/**
 * 下一页
 */
pagination.on("click",".next",function () {
    if(pageIndex < pages) {
        pageload(pageIndex + 1);
    }
});
/**
 * 尾页事件绑定
 */
pagination.on("click",".lastPage",function () {
    pageload(pages);
});

现在分页的是事件就全部绑定成功了,应该很简单吧,好了先写到这里吧,应该有很多人都知道后面该怎么写了吧。

END

原文发布于微信公众号 - Java研发军团(ityuancheng)

原文发表时间:2018-08-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券