NBA球星管理系统(Spring+SpringMVC+Mybatis) 2.0版本

我的NBA球星管理系统2.0版本主要用到的技术：

1.基础框架—ssm(SpringMVC+Spring+MyBatis)
2. 数据库-MySQL
3.前端框架-bootstrap快速搭建简洁美观的界面
4.项目的依赖管理-Maven
5.分页-pagehelper
6.逆向工程-MyBatis Generator

功能点：

1.分页
2.使用的是ajax(查询、新增、修改、删除)
3. 支持Rest风格的URL

---

首先是项目结构：

---

下面直接上功能：
登录(做的一个权限登录)

普通用户功能模块：

1.注册

2.球员信息查询及分页显示

部分代码：

$(function () {
            to_page(1);
        });
        $("td,th").addClass("text-center");
        function to_page(pn) {
            $(function () {
                $.ajax({
                    url:"emps",
                    data:"pn="+pn,
                    type:"POST",
                    success:function (result) {
                        // alert(result);
                        //1.解析并显示数据
                        build_emps_table(result);
                        //2.解析并显示分页信息
                        build_page_info(result);
                        //3.解析显示分页条数据
                        buid_page_nav(result);
                    }
                });
            });
        }
        function build_emps_table(result) {
            //清空table表格
            $("#emps_table tbody").empty();
            //
            var emps = result.extend.pageInfo.list;
            $.each(emps,function (index,item) {
                var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                var empQiudb =$("<td></td>").append(item.nqiudb);
                var empPlayer =$("<td></td>").append(item.nplayer);
                var empTeam =$("<td></td>").append(item.nteam);
                var empChangc =$("<td></td>").append(item.nchangc);
                var empXianf =$("<td></td>").append(item.nxianf);
                var empZhug =$("<td></td>").append(item.nzhug);
                var empMinute =$("<td></td>").append(item.nminute);
                var empThreep =$("<td></td>").append(item.nthreepiont);
                var empFaq =$("<td></td>").append(item.nfaq);
                var empQiangd =$("<td></td>").append(item.nqiangd);
                var empError =$("<td></td>").append(item.nerror);

                var addBtn = $("<button></button>").addClass("btn btn-success btn-sm add_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-heart").append("喜欢"));
                addBtn.attr("edit-id",item.nqiudb);
                var seleBtn = $("<button></button>").addClass("btn btn-info btn-sm sel_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-option-vertical").append("详情"));
                var updateBtn = $("<button></button>").addClass("btn btn-danger btn-sm upd_btn disabled")
                    .append($("<span></span>").addClass("glyphicon glyphicon-edit").append("修改"));
                var deletBtn = $("<button></button>").addClass("btn btn-warning btn-sm del_btn disabled")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash").append("删除"));

                seleBtn.attr("sele-id",item.nqiudb);

                var btnAdd = $("<td></td>").append(addBtn);
                var btnSel = $("<td></td>").append(seleBtn);
                var btnUpd = $("<td></td>").append(updateBtn);
                var btnDel = $("<td></td>").append(deletBtn);

                $("<tr></tr>").append(checkBoxTd)
                    .append(empQiudb)
                    .append(empPlayer)
                    .append(empTeam)
                    .append(empChangc)
                    .append(empXianf)
                    .append(empZhug)
                    .append(empMinute)
                    .append(empThreep)
                    .append(empFaq)
                    .append(empQiangd)
                    .append(empError)
                    .append(btnAdd)
                    .append(btnSel)
                    .append(btnUpd)
                    .append(btnDel)
                    .addClass("text-center")
                    // .css({"bgcolor":"pink"})
                    .css('background-color','#F0F8FF')
                    .appendTo("#emps_table tbody");

            });
        }
        //解析显示分页信息
        function build_page_info(result) {
            //清空分页信息
            $("#page_info_area").empty();
            // #("#page_info_area")
            $("#page_info_area").append("当前 "+result.extend.pageInfo.pageNum+"  页，总 "+
                result.extend.pageInfo.pages+"  页，总共 "+result.extend.pageInfo.total +"  条记录")
                .css({"color":"red","font-size":"20px","font-weight":"bold"})
            // $("page_info_area").style.color("black");
            totalRecord = result.extend.pageInfo.total;
            currentPage = result.extend.pageInfo.pageNum;
        }
        //解析显示分页条
        function buid_page_nav(result) {
            //清空导航区
            $("#page_nav_area").empty();
            //page_nav_area
            var ul = $("<ul></ul>").addClass("pagination");

            //构建元素
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            if (result.extend.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            } else{
                //为元素添加点击翻页的事件
                //首页
                firstPageLi.click(function () {
                   to_page(1);
                });
                //上一页
                prePageLi.click(function () {
                   to_page(result.extend.pageInfo.pageNum-1);
                });
            }


            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));

            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
            if (result.extend.pageInfo.hasNextPage == false){
                nextPageLi.addClass("disabled");
               lastPageLi.addClass("disabled");
            } else{
                //下一页
                nextPageLi.click(function () {
                   to_page(result.extend.pageInfo.pageNum+1);
                });
                //末页
                lastPageLi.click(function () {
                    to_page(result.extend.pageInfo.pages);
                });
            }

            //添加首页和前一页的提示
            ul.append(firstPageLi).append(prePageLi);
            $.each(result.extend.pageInfo.navigatepageNums,function (index,item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                if (result.extend.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                numLi.click(function () {
                   to_page(item);
                });
                ul.append(numLi);
            });
            //添加下一页和末页的提示
            ul.append(nextPageLi).append(lastPageLi);
            //把ul添加到nav元素中
            var navEle = $("<nav></nav>").append(ul);

            //把整个nav添加到导航条中
            navEle.appendTo("#page_nav_area");

        }

主要是使用ajax方式发异步请求然后以json的方式返回，拿到数据之后通过jquery来渲染出表格以及数据的显示都是通过这种方式实现的，分页的展示也是如此，点击每个数据页码实质就是在发ajax请求，去对区间进行查询然后以json形式返回！

3.球队信息
开发中…
4.我的收藏

5.个人中心

管理员功能模块

1.管理员首页

2.球员信息修改

3.添加/删除用户

4.球队历史重写
开发中…