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

    技术2024-06-03  76

    我的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.球队历史重写 开发中…

    Processed: 0.016, SQL: 9