SSM框架整合项目02 查询，新增功能的实现（分页查询、前端数据校验）

最新推荐文章于 2024-07-25 09:53:42 发布

GYQ1

最新推荐文章于 2024-07-25 09:53:42 发布

阅读量1k

点赞数 1

分类专栏： SSM框架-尚硅谷文章标签： SpringMVC MyBatis 框架 spring

本文链接：https://blog.csdn.net/qq_53157982/article/details/124594423

版权

SSM框架-尚硅谷专栏收录该内容

17 篇文章 1 订阅

订阅专栏

查询功能

分页查询员工数据

流程：访问index.jsp页面，发送出查询员工列表的请求，EmployeeController来接受请求，查出员工数据，来到list.jsp进行展示

引入依赖

        <!--pageHelper-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.0.0</version>
        </dependency>

在mybatis-config.xml中引入插件

    <plugins>
        <!--引入分页插件-->
        <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
    </plugins>

后端代码

EmployeeController

//处理员工CRUD请求
@Controller
public class EmployeeController {
    @Autowired
    EmployeeService employeeService;

    //查询员工数据(分页查询)
    @RequestMapping("/emps")
    public String getEmps(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
        //引入PageHelper分页插件
        //查询之前调用下面方法，传入页码和每页条数
        PageHelper.startPage(pn, 5);
        //startPage后面紧跟的查询就是一个分页查询
        List<Employee> emps = employeeService.getAll();
        //使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了
        //封装了详细的分页信息，包括查询出来的数据
        PageInfo page = new PageInfo(emps,5);
        model.addAttribute("pageInfo", page);
        return "list";
    }
}

EmployeeService

@Service
public class EmployeeService {
    @Autowired
    EmployeeMapper employeeMapper;

    public List<Employee> getAll() {
        return employeeMapper.selectByExampleWithDept(null);
    }
}

使用Spring测试模块提供的测试请求功能进行测试

@RunWith(SpringJUnit4ClassRunner.class)
@WebAppConfiguration
@ContextConfiguration(locations = {"classpath:applicationContext.xml", "file:src/main/webapp/WEB-INF/dispatcherServlet-servlet.xml"})
public class WhateverTest {
    //传入SpringMVC的ioc
    @Autowired
    WebApplicationContext context;
    //虚拟mvc请求，获取到处理结果
    MockMvc mockMvc;

    @Before
    public void initMockMVC() {
        mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
    }

    @Test
    public void test() throws Exception {
        //模拟请求拿到返回值
        MvcResult result = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn", "1")).andReturn();
        //请求成功以后，请求域中会有pageInfo
        MockHttpServletRequest request = result.getRequest();
        PageInfo pageInfo = (PageInfo) request.getAttribute("pageInfo");
        System.out.println("当前页码：" + pageInfo.getPageNum());
        System.out.println("总页码：" + pageInfo.getPages());
        System.out.println("总记录数" + pageInfo.getTotal());
        System.out.println("在页面上需要显示的页码" + Arrays.toString(pageInfo.getNavigatepageNums()));
        //获取员工数据
        List<Employee> list = pageInfo.getList();
        for (Employee employee : list) {
            System.out.println("id:" + employee.getEmpId()+" name:"+employee.getEmpName());
        }
    }
}

可以得到数据：

搭建前端页面（显示分页数据）

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<jsp:forward page="/emps"></jsp:forward>

list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>员工列表</title>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/favicon.ico">
</head>
<body>
<!--搭建显示页面-->
<div class="container">
    <!--标题行-->
    <div class="row">
        <div class="col-lg-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <!--按钮-->
    <div class="row">
        <div class="col-lg-4 col-lg-offset-8">
            <button type="button" class="btn btn-success">新增</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
    </div>
    <!--显示表格数据-->
    <div class="row">
        <div class="col-lg-12">
            <table class="table table-hover">
                <tr>
                    <th>#</th>
                    <th>empName</th>
                    <th>gender</th>
                    <th>email</th>
                    <th>deptName</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${pageInfo.list }" var="emp">
                    <tr>
                        <th>${emp.empId }</th>
                        <th>${emp.empName }</th>
                        <!--若存储的是M/F,使用emp.gender=="M"?"男":"女"-->
                        <th>${emp.gender }</th>
                        <th>${emp.email }</th>
                        <th>${emp.department.deptName}</th>
                        <th>
                            <button type="button" class="btn btn-success btn-sm">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                            </button>
                            <button type="button" class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
                            </button>
                        </th>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
    <!--显示分页信息-->
    <div class="row">
        <!--分页文件信息-->
        <div class="col-lg-6">
            当前第${pageInfo.pageNum}页,总共${pageInfo.pages}页,总记录数${pageInfo.total}
        </div>
        <!--分页条-->
        <div class="col-lg-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li><a href="${pageContext.request.contextPath}/emps?pn=1">首页</a></li>
                    <c:if test="${pageInfo.hasPreviousPage }">
                        <li>
                            <a href="${pageContext.request.contextPath}/emps?pn=${pageInfo.pageNum-1 }"
                               aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </c:if>

                    <c:forEach items="${pageInfo.navigatepageNums }" var="num">
                        <c:if test="${num==pageInfo.pageNum }">
                            <li class="active"><a href="#">${num }</a></li>
                        </c:if>
                        <c:if test="${num!=pageInfo.pageNum }">
                            <li><a href="${pageContext.request.contextPath}/emps?pn=${num }">${num }</a></li>
                        </c:if>
                    </c:forEach>

                    <c:if test="${pageInfo.hasNextPage }">
                        <li>
                            <a href="${pageContext.request.contextPath}/emps?pn=${pageInfo.pageNum+1 }"
                               aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </c:if>
                    <li><a href="${pageContext.request.contextPath}/emps?pn=${pageInfo.pages }">末页</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>

页面效果

使用json对象返回数据并通过dom增删改改变页面

适配其他客户端，不只是浏览器使用ajax

流程：index.jsp页面直接发送ajax请求进行员工分页数据的查询，服务器将查出的数据以json字符串的形式返回给浏览器，浏览器收到json字符串，可以使用js对json进行解析，使用js通过dom增删改改变页面。

需要先导入jackson包

        <!--jackson-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.1</version>
        </dependency>

后端代码

EmployeeController

//处理员工CRUD请求
@Controller
public class EmployeeController {
    @Autowired
    EmployeeService employeeService;

    //查询员工数据(分页查询)
    @ResponseBody
    @RequestMapping("/emps")
    public PageInfo getEmpsWithJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn) {
        //引入PageHelper分页插件
        //查询之前调用下面方法，传入页码和每页条数
        PageHelper.startPage(pn, 5);
        //startPage后面紧跟的查询就是一个分页查询
        List<Employee> emps = employeeService.getAll();
        //使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了
        //封装了详细的分页信息，包括查询出来的数据
        PageInfo page = new PageInfo(emps, 5);
        return page;
    }
}

EmployeeService

@Service
public class EmployeeService {
    @Autowired
    EmployeeMapper employeeMapper;

    public List<Employee> getAll() {
        return employeeMapper.selectByExampleWithDept(null);
    }
}

测试：

但是返回类型还应该包括请求是否成功等信息，定义一个通用返回json数据的类在bean包下

Msg类

public class Msg {
    //状态码 100:成功 200:失败
    private int code;
    //提示信息
    private String msg;
    //用户要返回给浏览器的数据
    private Map<String, Object> extend = new HashMap<>();

    public static Msg success() {
        Msg result = new Msg();
        result.setCode(100);
        result.setMsg("处理成功！");
        return result;
    }

    public static Msg fail() {
        Msg result = new Msg();
        result.setCode(200);
        result.setMsg("处理失败！");
        return result;
    }


    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Map<String, Object> getExtend() {
        return extend;
    }

    public void setExtend(Map<String, Object> extend) {
        this.extend = extend;
    }

    public Msg add(String key, Object value) {
        this.getExtend().put(key, value);
        return this;
    }
}

后端代码

EmployeeController

//处理员工CRUD请求
@Controller
public class EmployeeController {
    @Autowired
    EmployeeService employeeService;

    //查询员工数据(分页查询)
    @ResponseBody
    @RequestMapping("/emps")
    public Msg getEmpsWithJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn) {
        //引入PageHelper分页插件
        //查询之前调用下面方法，传入页码和每页条数
        PageHelper.startPage(pn, 5);
        //startPage后面紧跟的查询就是一个分页查询
        List<Employee> emps = employeeService.getAll();
        //使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了
        //封装了详细的分页信息，包括查询出来的数据
        PageInfo page = new PageInfo(emps, 5);
        return Msg.success().add("pageInfo", page);
    }
}

前端页面

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>index</title>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/favicon.ico">
</head>
<body>
<!--搭建显示页面-->
<div class="container">
    <!--标题行-->
    <div class="row">
        <div class="col-lg-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <!--按钮-->
    <div class="row">
        <div class="col-lg-4 col-lg-offset-8">
            <button type="button" class="btn btn-success">新增</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
    </div>
    <!--显示表格数据-->
    <div class="row">
        <div class="col-lg-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                <tr>
                    <th>#</th>
                    <th>empName</th>
                    <th>gender</th>
                    <th>email</th>
                    <th>deptName</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <!--显示分页信息-->
    <div class="row">
        <!--分页文件信息-->
        <div class="col-lg-6" id="page_info_area">

        </div>
        <!--分页条-->
        <div class="col-lg-6" id="page_nav_area">

        </div>
    </div>
</div>
<script type="text/javascript">
    //1.页面加载完成以后直接发送一个ajax请求，要到分页数据
    $(function () {
        to_page(1);
    });

    function to_page(pn) {
        $.ajax({
            url: "${pageContext.request.contextPath }/emps?",
            data: "pn=" + pn,
            type: "post",
            success: function (result) {
                //2.解析并显示员工数据
                build_emp_table(result);
                //3.解析并显示分页数据
                build_page_info(result);
                build_page_nav(result);
            }
        });
    }

    function build_emp_table(result) {
        //清空table
        $("#emps_table tbody").empty();
        var emps = result.extend.pageInfo.list;
        $.each(emps, function (index, item) {
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender);
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);
            var editBtn = $("<button></button>").addClass("btn btn-success btn-sm").append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm").append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
            var buttonTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
            $("<tr></tr>").append(empIdTd).append(empNameTd).append(genderTd).append(emailTd).append(deptNameTd).append(buttonTd).appendTo("#emps_table tbody");
        })
    }

    //解析显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        $("#page_info_area").append("当前第" + result.extend.pageInfo.pageNum + "页 , 总共" + result.extend.pageInfo.pages + "页 , 总记录数" + result.extend.pageInfo.total);
    }

    //解析显示分页条
    function build_page_nav(result) {
        $("#page_nav_area").empty();
        var navigatepageNums = result.extend.pageInfo.navigatepageNums;
        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);
        //遍历给ul中添加页码
        $.each(navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if (result.extend.pageInfo.pageNum == item) {
                numLi.addClass("active");
            } else {
                numLi.click(function () {
                    to_page(item);
                });
            }
            ul.append(numLi);
        });
        //添加下一页和末页
        ul.append(nextPageLi).append(lastPageLi);
        //把ul添加到nav元素中
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }
</script>
</body>
</html>

配置分页插件拦截器

解决在第一页点击上一页出现负的页码和在最后一页点击下一页出现不存在的页码并且无数据的问题。

mybatis-config.xml

新增功能

流程：在index.jsp页面点击新增，弹出新增对话框，去数据库查询部门列表显示在对话框中，用户输入数据，新增。

前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>index</title>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/favicon.ico">
</head>
<body>
<!--搭建显示页面-->
<div class="container">
    <!--标题行-->
    <div class="row">
        <div class="col-lg-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>

    <!--按钮-->
    <div class="row">
        <div class="col-lg-4 col-lg-offset-8">
            <button type="button" class="btn btn-success" id="emp_add_modal_btn">新增</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
    </div>

    <!--显示表格数据-->
    <div class="row">
        <div class="col-lg-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                <tr>
                    <th>#</th>
                    <th>empName</th>
                    <th>gender</th>
                    <th>email</th>
                    <th>deptName</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>

    <!--显示分页信息-->
    <div class="row">
        <!--分页文件信息-->
        <div class="col-lg-6" id="page_info_area">

        </div>
        <!--分页条-->
        <div class="col-lg-6" id="page_nav_area">

        </div>
    </div>

    <!-- 新增页面 -->
    <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加员工</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" name="empName" class="form-control" id="empName_add_input"
                                       placeholder="请输入员工姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="text" name="email" class="form-control" id="email_add_input"
                                       placeholder="请输入邮箱(例：xxx@gyq.com)">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender1_add_input" value="男"
                                           checked="checked"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2_add_input" value="女"> 女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">部门</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="dId" id="dept_add_select">

                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //1.页面加载完成以后直接发送一个ajax请求，要到分页数据
    $(function () {
        to_page(1);
    });

    function to_page(pn) {
        $.ajax({
            url: "${pageContext.request.contextPath }/emps?",
            data: "pn=" + pn,
            type: "post",
            success: function (result) {
                //2.解析并显示员工数据
                build_emp_table(result);
                //3.解析并显示分页数据
                build_page_info(result);
                build_page_nav(result);
            }
        });
    }

    function build_emp_table(result) {
        //清空table
        $("#emps_table tbody").empty();

        var emps = result.extend.pageInfo.list;
        $.each(emps, function (index, item) {
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender);
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);
            var editBtn = $("<button></button>").addClass("btn btn-success btn-sm").append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm").append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
            var buttonTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
            $("<tr></tr>").append(empIdTd).append(empNameTd).append(genderTd).append(emailTd).append(deptNameTd).append(buttonTd).appendTo("#emps_table tbody");
        })
    }

    //解析显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        $("#page_info_area").append("当前第" + result.extend.pageInfo.pageNum + "页 , 总共" + result.extend.pageInfo.pages + "页 , 总记录数" + result.extend.pageInfo.total);
    }

    //解析显示分页条
    function build_page_nav(result) {
        $("#page_nav_area").empty();
        var navigatepageNums = result.extend.pageInfo.navigatepageNums;
        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);
        //遍历给ul中添加页码
        $.each(navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if (result.extend.pageInfo.pageNum == item) {
                numLi.addClass("active");
            } else {
                numLi.click(function () {
                    to_page(item);
                });
            }
            ul.append(numLi);
        });
        //添加下一页和末页
        ul.append(nextPageLi).append(lastPageLi);
        //把ul添加到nav元素中
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    //点击新增打开新增页面
    $("#emp_add_modal_btn").click(function () {
        //发送ajax请求，查询部门信息，显示在部门下拉列表
        //清空上次输入的数据,表单样式
        $("#empAddModal form")[0].reset();
        $("#empAddModal form").find("*").removeClass("has-success has-error");
        $("#empAddModal form").find(".help-block").text("");
        getDepts();
        $("#empAddModal").modal({
            backdrop: "static"
        });
    });

    //查询部门信息
    function getDepts() {
        $.ajax({
            url: "${pageContext.request.contextPath }/depts",
            type: "get",
            success: function (result) {
                var depts = result.extend.depts;
                $.each(depts, function () {
                    var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId);
                    optionEle.appendTo("#dept_add_select");
                })
            }
        });
    }

    //给新增页面保存按钮增加单击事件
    $("#emp_save_btn").click(function () {
        //将表单中的数据提交到服务器进行保存
        //发送ajax请求
        $.ajax({
            url: "${pageContext.request.contextPath }/emp",
            type: "post",
            data: $("#empAddModal form").serialize(),
            success: function (result) {
                //员工保存成功，关闭新增框，查看新增数据(最后一页)
                $("#empAddModal").modal('hide');
                to_page(99999999);
            }
        })
    });
    
</script>
</body>
</html>

后端代码

DepartmentController

@Controller
public class DepartmentController {
    @Autowired
    DepartmentService departmentService;

    //返回所有部门信息
    @ResponseBody
    @RequestMapping("/depts")
    public Msg getDepts() {
        List<Department> list = departmentService.getDepts();
        return Msg.success().add("depts", list);
    }
}

DepartmentService

@Service
public class DepartmentService {
    @Autowired
    DepartmentMapper departmentMapper;

    public List<Department> getDepts() {
        List<Department> list = departmentMapper.selectByExample(null);
        return list;
    }
}

EmployeeController

//处理员工CRUD请求
@Controller
public class EmployeeController {
    @Autowired
    EmployeeService employeeService;

    //查询员工数据(分页查询)
    @ResponseBody
    @RequestMapping("/emps")
    public Msg getEmpsWithJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn) {
        //引入PageHelper分页插件
        //查询之前调用下面方法，传入页码和每页条数
        PageHelper.startPage(pn, 5);
        //startPage后面紧跟的查询就是一个分页查询
        List<Employee> emps = employeeService.getAll();
        //使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了
        //封装了详细的分页信息，包括查询出来的数据
        PageInfo page = new PageInfo(emps, 5);
        return Msg.success().add("pageInfo", page);
    }

    //保存员工的方法
    @ResponseBody
    @RequestMapping(value = "/emp", method = RequestMethod.POST)
    public Msg saveEmp(Employee employee) {
        employeeService.saveEmp(employee);
        return Msg.success();
    }
}

EmployeeService

@Service
public class EmployeeService {
    @Autowired
    EmployeeMapper employeeMapper;

    public List<Employee> getAll() {
        return employeeMapper.selectByExampleWithDept(null);
    }

    public void saveEmp(Employee employee) {
        employeeMapper.insertSelective(employee);
    }
}

正则表达式验证用户输入格式

对用户输入进行校验

表单部分代码

                       <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" name="empName" class="form-control" id="empName_add_input"
                                       placeholder="请输入员工姓名">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="text" name="email" class="form-control" id="email_add_input"
                                       placeholder="请输入邮箱(例：xxx@gyq.com)">
                                <span class="help-block"></span>
                            </div>
                        </div>

    //校验表单数据
    function validate_add_form() {
        //拿到要校验的数据，使用正则表达式
        var empName = $("#empName_add_input").val();
        //名字要求大小写字母下划线6-16位或者2-5个中文字符
        var regName = /(^[a-zA-Z0-9_]{6,16}$)|(^[\u2E80-\u9FFF]{2,5}$)/;
        if (!regName.test(empName)) {
            show_validate_msg("#empName_add_input", "error", "用户名可以是2-5位中文或6-16位数字字母下划线的组合！");
            return false;
        } else {
            show_validate_msg("#empName_add_input", "success", "");
        }
        //校验邮箱信息
        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            show_validate_msg("#email_add_input", "error", "邮箱格式不正确！");
            return false;
        } else {
            show_validate_msg("#email_add_input", "success", "");
        }
        return true;
    }

    function show_validate_msg(ele, status, msg) {
        //清除元素校验状态
        $(ele).parent().removeClass("has-error has-success");
        $(ele).next("span").text("");
        if ("success" == status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        } else if ("error" == status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }
    }


    //给新增页面保存按钮增加单击事件
    $("#emp_save_btn").click(function () {
        //对要提交给服务器的数据进行校验
        if (!validate_add_form()) {
            return false;
        }
        //将表单中的数据提交到服务器进行保存
        //发送ajax请求
        $.ajax({
            url: "${pageContext.request.contextPath }/emp",
            type: "post",
            data: $("#empAddModal form").serialize(),
            success: function (result) {
                //员工保存成功，关闭新增框，查看新增数据(最后一页)
                $("#empAddModal").modal('hide');
                to_page(99999999);
            }
        });
    });

ajax验证用户名是否重复

流程：用户名输入框内容改变，触发ajax请求，验证用户名是否重复，展示提示信息，若不重复才可以进行保存，进一步验证格式

EmployeeController

    //验证用户名是否重复的方法
    @ResponseBody
    @RequestMapping("/checkUser")
    public Msg checkUser((@RequestParam("empName") String empName) {
        //先判断用户名是否是合法的表达式
        String regx = "(^[a-zA-Z0-9_]{6,16}$)|(^[\u2E80-\u9FFF]{2,5}$)";
        if (!empName.matches(regx)) {
            return Msg.fail().add("va_msg", "昵称格式不正确！");
        }
        //判断用户名是否重复
        boolean b = employeeService.checkUser(empName);
        if (b)
            return Msg.success();
        else
            return Msg.fail().add("va_msg", "昵称已存在！");
    }

EmployeeService

public boolean checkUser(String empName) {
        EmployeeExample example = new EmployeeExample();
        example.createCriteria().andEmpNameEqualTo(empName);
        long count = employeeMapper.countByExample(example);
        return count == 0;
    }

前端代码

    //给员工姓名输入框绑定change事件
    $("#empName_add_input").change(function () {
        //发送ajax请求验证用户名是否可用
        var empName = this.value;
        $.ajax({
            url: "${pageContext.request.contextPath }/checkUser",
            type: "post",
            data: "empName=" + empName,
            success: function (result) {
                if (result.code == 100) {
                    show_validate_msg("#empName_add_input", "success", "用户名可用！");
                    $("#emp_save_btn").attr("ajax-va", "success");
                } else {
                    show_validate_msg("#empName_add_input", "error", result.extend.va_msg);
                    $("#emp_save_btn").attr("ajax-va", "error");
                }
            }
        })
    })

    //给新增页面保存按钮增加单击事件
    $("#emp_save_btn").click(function () {
        //对要提交给服务器的数据进行校验
        if (!validate_add_form()) {
            return false;
        }
        //将表单中的数据提交到服务器进行保存
        //发送请求前判断之前的ajax用户名校验是否成功，如果成功发送，否则不发
        if ($(this).attr("ajax-va") == "error") {
            return false;
        }
        //发送ajax请求
        $.ajax({
            url: "${pageContext.request.contextPath }/emp",
            type: "post",
            data: $("#empAddModal form").serialize(),
            success: function (result) {
                //员工保存成功，关闭新增框，查看新增数据(最后一页)
                $("#empAddModal").modal('hide');
                to_page(99999999);
            }
        });
    });

GYQ1

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
SSM框架整合项目02 查询，新增功能的实现（分页查询、前端数据校验）

查询功能分页查询员工数据流程：访问index.jsp页面，发送出查询员工列表的请求，EmployeeController来接受请求，查出员工数据，来到list.jsp进行展示引入依赖  <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pa
复制链接

扫一扫

专栏目录