idea中ssm使用ajax,idea-ssm-crud项目实战（三）

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

最终效果：

页面布局

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

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

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

看代码class="container">                    

                        

            div>        div>                    

            

            div>        div>                    

                        

            div>                            

                            div>        div>    div>

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

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

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

     添加button>div>

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

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

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

在内容区域直接输入以下代码,由于表格的tbody区域都是使用ajax来加载的所以只需要一个table的架子即可。class="table table-hover">                         员工IDth>            员工名称th>            员工性别th>            员工邮箱th>            所属部门th>            操作th>        tr>     thead>        tbody>

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 Mapmaps = 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代码

控制器代码@RequestMapping("/list")    @ResponseBody    public Message list(@RequestParam(value = "pageIndex",defaultValue = "1")                                   Integer pageIndex) throws Exception {        PageHelper.startPage(pageIndex, pageSize);        Listemployees = employeeService.findALL(null);        //用PageInfo对结果进行包装,每次连续显示为5页        PageInfopageInfo = 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 = $("");            //将下面的td全部都添加到tr中            $("").append(item.empId).appendTo(tr);            $("").append(item.empName).appendTo(tr);            $("").append(item.gender).appendTo(tr);            $("").append(item.email).appendTo(tr);            $("").append(item.department.deptName).appendTo(tr);            //创建修改和删除按钮            var btn_eidt_employee = $('修改');            var btn_del_employee = $('删除');            $("").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);});

本文标题：idea-ssm-crud项目实战(三)

本文链接：https://www.toobug.cn/post/592.html

作者授权：除特别说明外，本文由 toobug 原创编译并授权 TOOBUG信息安全网 刊载发布。

版权声明：本文不使用任何协议授权，您可以任何形式自由转载或使用。

用TOOBUG官方小程序阅览更加简洁