SSM框架整合的逆向工程（练习）

最新推荐文章于 2021-10-14 08:30:00 发布

Enjoy-小安

最新推荐文章于 2021-10-14 08:30:00 发布

阅读量838

点赞数

本文链接：https://blog.csdn.net/qq_43247515/article/details/84562607

版权

练习需求(代码中有些命名不一致，需根据情况修改)

一：ResutFul风格操作CRUD

表：tbl_emp AND tbl_dept
需要用的技能点

框架：Spring+springMVC+Mybatis
前端：jquery+bootStra+ajax
后台验证：JSR303
插件：pageHelper
逆向工程：mybatis-generator

操作步骤：

①新建maven工程，加入依赖

在新建maven工程时候引入setting.xml需要注意

 <!-- 阿里云仓库 -->
         <mirror>
              <id>alimaven</id>
              <mirrorOf>central</mirrorOf>
             <name>aliyun maven</name>
             <url>http://maven.aliyun.com/nexus/content/repositories/central/</url>
         </mirror>

加入依赖
①加入spring相关依赖4.3.7
spring webmvc
spring aspect
spring jdbc
②：mybatis相关
mybatis
mybatis-spring
junit servlet-api jstl
c3p0 mysql pageHelper mybatis-generator

<dependencies>
    <!--mysql-->
    <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.38</version>
    </dependency>

    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.41</version>
    </dependency>

    <!--逆向工程-->
    <!-- https://mvnrepository.com/artifact/org.mybatis.generator/mybatis-generator-core -->
    <dependency>
      <groupId>org.mybatis.generator</groupId>
      <artifactId>mybatis-generator-core</artifactId>
      <version>1.3.5</version>
    </dependency>

    <!--pageHelper-->
    <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.2</version>
    </dependency>

    <!--c3p0-->
    <!-- https://mvnrepository.com/artifact/com.mchange/c3p0 -->
    <dependency>
      <groupId>com.mchange</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.2.1</version>
    </dependency>

    <!--jstl-->

    <!-- https://mvnrepository.com/artifact/javax.servlet.jsp.jstl/jstl -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <!--servlet-spi-->
    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>

    <!--mybatis相关配置-->

    <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.2</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.4.2</version>
    </dependency>

    <!--spring相关的依赖-->
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>4.3.7.RELEASE</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>4.3.7.RELEASE</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.springframework/spring-aspects -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>4.3.7.RELEASE</version>
    </dependency>
    
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
  </dependencies>

配置文件的编写

web.xml

 <!--spring容器，将我们写的内容加入springioc容器中-->
    <context-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:applicationContext.xml</param-value>
    </context-param>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  
  <!--将springMvc在总配置文件中注册-->
  <servlet>
    <servlet-name>springDispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>springDispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
  
  <!--配置乱码拦截器，需要在所有的拦截器之前配置-->
  <filter>
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>utf-8</param-value>
    </init-param>
  <init-param>
    <param-name>forceRequestEncoding</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>forceResponseEncoding</param-name>
    <param-value>true</param-value>
  </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  
  <!--配置转换PUT   Post Delete的配置-->
  <filter>
    <filter-name>HiddenHttpMethodFilter</filter-name>
    <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>HiddenHttpMethodFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

配置springDispatcherServlet-servlet.xml文件
在web-inf下新建springDispatcherServlet-servlet.xml

<!--扫描包，只扫描有@Controller注解的类,将默认行为去掉-->
      <context:component-scan base-package="cn.kgc" use-default-filters="false">
          <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
      </context:component-scan>

      <!--配置视图解析器-->
      <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
          <property name="prefix" value="/WEB-INF/views/"/>
          <property name="suffix" value=".jsp"/>
      </bean>

      <!--配置其他的两个注解-->
      <!--将mvc不能处理的请求交给tomcat-->
      <mvc:default-servlet-handler/>

      <!--增加mvc功能的配置，c3p0,jsr303...等映射请求-->
      <mvc:annotation-driven/>

因为有了扫描的包，写此文件的时候可以同时将包新建出来

在resources文件夹下新建applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">

    <!--配置扫描除controller之外的包-->
    <context:component-scan base-package="cn.xiaoan">
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>


    <!--1.配置数据库相关-->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="com.mysql.jdbc.Driver"/>
        <property name="jdbcUrl" value="jdbc:mysql://localhost:3306/damo"/>
        <property name="user" value="root"/>
        <property name="password" value="abc123"/>
    </bean>

    <!--2.配置sqlSessionFactory-->
    <bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
    </bean>

    <!--3.配置映射文件-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="cn.xiaoan.crud.dao"/>
    </bean>

    <!--4.配置事务管理器-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"></property>
    </bean>

    <!--5.事务增强aop,多数情况下适用xml形式加入事务-->
    <aop:config>
        <aop:pointcut id="txPoint" expression="execution(* cn.xiaoan.crud.service..*(..))"/>
        <aop:advisor advice-ref="txAdvice" pointcut-ref="txPoint"/>
    </aop:config>
    <tx:advice id="txAdvice" transaction-manager="transactionManager">
        <tx:attributes>
            <!--匹配所有的方法都有事务-->
            <tx:method name="*"/>
            <!--将方法名以get开头的方法设置为只读方式-->
            <tx:method name="get*" read-only="true"/>
        </tx:attributes>
    </tx:advice>


</beans>

②建表

**
！表结构

需要加入逆向工程的依赖
在项目名下新建 mbg.xml

在网址的左侧找到 XML Configuration File Reference 复制里面的配置加以修改

mybatis-generator官网

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>

    <context id="DB2Tables" targetRuntime="MyBatis3">
        <!--连接数据库相关-->
        <jdbcConnection driverClass="com.mysql.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/ssm_crud"
                        userId="root"
                        password="abc123">
        </jdbcConnection>

        <javaTypeResolver >
            <property name="forceBigDecimals" value="false" />
        </javaTypeResolver>

        <!--指定生成javaBean的位置-->
        <javaModelGenerator
                targetPackage="cn.kgc.crud.bean"
                targetProject=".\src\main\java"><!--点：表示当前项目-->
            <property name="enableSubPackages" value="true" />
            <property name="trimStrings" value="true" />
        </javaModelGenerator>
            <!--指定映射文件生成的位置-->
        <sqlMapGenerator
                targetPackage="mapper"
                targetProject=".\src\main\resources">
            <property name="enableSubPackages" value="true" />
        </sqlMapGenerator>

        <!--生成的dao指定位置-->
        <javaClientGenerator type="XMLMAPPER"
                             targetPackage="cn.kgc.crud.dao"
                             targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true" />
        </javaClientGenerator>

        <!--生成表策略-->
        <table tableName="tbl_emp" domainObjectName="Employee"/>
        <table tableName="tbl_dept" domainObjectName="Department"/>

    </context>
</generatorConfiguration>

逆向工程

测试：在网站左侧找到 Running MyBatis Generator

 List<String> warnings = new ArrayList<String>();
        boolean overwrite = true;
        File configFile = new File("mbg.xml");    //将文件名改为自己的文件名
        ConfigurationParser cp = new ConfigurationParser(warnings);
        Configuration config = cp.parseConfiguration(configFile);
        DefaultShellCallback callback = new DefaultShellCallback(overwrite);
        MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, callback, warnings);
        myBatisGenerator.generate(null);

在对应的文件目录下能够生产实体类 dao文件和mapper文件即成功

针对Employee

private Department department;
getter   /  setter

到EmployeeMapper.java

/*带部门信息的查询*/
List<Employee> selectByExampleWithDept(EmployeeExample example);
Employee selectByPrimaryKeyWithDept(Integer empId);

EmployeeMapper.xml文件中

<resultMap id="WithDeptResultMap" type="cn.kgc.crud.bean.Employee">

    <id column="emp_id" jdbcType="INTEGER" property="empId" />
    <result column="emp_name" jdbcType="VARCHAR" property="empName" />
    <result column="gender" jdbcType="CHAR" property="gender" />
    <result column="email" jdbcType="VARCHAR" property="email" />
    <result column="d_id" jdbcType="INTEGER" property="dId" />
    <association property="department" javaType="cn.kgc.crud.bean.Department">
        <id column="dept_id" property="deptId"/>
        <result column="dept_name" property="deptName"/>
    </association>
  </resultMap>


  <sql id="WithDept_Column_List">

    e.emp_id, e.emp_name, e.gender, e.email, e.d_id,d.dept_id,d.dept_name
  </sql>
<!--带部门信息的查询sql-->

  <select id="selectByExampleWithDept" parameterType="cn.kgc.crud.bean.EmployeeExample" resultMap="WithDeptResultMap">

    select
    <if test="distinct">
      distinct
    </if>
    <include refid="WithDept_Column_List" />
    from tbl_emp e
    LEFT  JOIN  tbl_dept d
    on e.d_id=d.dept_id
    <if test="_parameter != null">
      <include refid="Example_Where_Clause" />
    </if>
    <if test="orderByClause != null">
      order by ${orderByClause}
    </if>
  </select>
  <select id="selectByPrimaryKeyWithDept" parameterType="java.lang.Integer" resultMap="WithDeptResultMap">

    select
    <include refid="WithDept_Column_List" />
    from tbl_emp e
    LEFT  JOIN  tbl_dept d
    on e.d_id=d.dept_id
    where emp_id = #{empId,jdbcType=INTEGER}
  </select>

测试Mapper

 ApplicationContext ct = new ClassPathXmlApplicationContext("applicationContext.xml");
        //System.out.println(ct.toString());
      /*   DepartmentMapper mapper = ct.getBean(DepartmentMapper.class);

       Department dept = new Department(null,"HR");
        mapper.insert(dept);*/

        EmployeeMapper mapper = ct.getBean(EmployeeMapper.class);

        mapper.insertSelective(new Employee(null,null,"zhangsan","m","zhangsan@qq.com",13));

上面的测试增加数据都是一条一条增加的是，为了分页方便，我们可以批量增加数据

步骤：在ApplicationContext.xml中增加配置

<!--做批量插入时需要的配置-->
    <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
        <constructor-arg name="sqlSessionFactory" ref="sessionFactory"/>
        <constructor-arg name="executorType" value="BATCH"/>
    </bean>

最好是放在<!--2.配置sqlSessionFactory-->后面

加入BootStrap

官网：http://www.bootcss.com/ 下载文件

在webapp 文件夹下新建 static 文件夹，并将 bootStrap文件以及jquery文件拷贝到 static文件下

在页面中引用

<link href="../static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../static/js/jquery-1.7.2.js"></script>
    <script src="../static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

在页面中显示数据

思路：
index.jsp 转发到 EmployeeController.java
查询到相关数据之后 return “list”
编写EmployeeService.java

  @Autowired
    private EmployeeMapper employeeMapper;

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

pageHelper加入配置：在mybaits-config.xml
网址： https://github.com/pagehelper/pagehelper-spring-boot

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

编写EmployeeController.java

@Controller
public class EmployeeController {

    @Autowired(required=true)
    private EmployeeService employeeService;

    @RequestMapping("/emps")
    public String getEmps(@RequestParam(value="pn",defaultValue = "1") Integer pn,Model model){

        //startPage(当前页，pageSize)
        PageHelper.startPage(pn,5);

        List<Employee> emps = employeeService.getAll();

        PageInfo pageInfo = new PageInfo(emps);

        model.addAttribute("pageInfo",pageInfo);
        return "list";
    }

list.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/11/28 0028
  Time: 下午 2:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link href="../static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../static/js/jquery-1.7.2.js"></script>
    <script src="../static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container">

        <%--标题--%>
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>

        <%--按钮--%>
            <div class="row">
                <div class="col-md-4 col-md-offset-8">
                    <button class="btn btn-success">增加</button>
                    <button class="btn btn-danger">删除</button>
                </div>
            </div>

        <%--显示数据--%>
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-hover">
                        <tr>
                            <td>#</td>
                            <td>lastName</td>
                            <td>email</td>
                            <td>gender</td>
                            <td>deptName</td>
                            <td>操作</td>
                        </tr>
                        <c:forEach items="${pageInfo.list}" var="emps">
                            <tr>
                                <td>${emps.empId}</td>
                                <td>${emps.empName}</td>
                                <td>${emps.email}</td>
                                <td>${emps.gender=="m"?"男":"女"}</td>
                                <td>${emps.department.deptName}</td>
                                <td>
                                    <button  class="btn btn-success btn-sm">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"/>
                                        增加
                                    </button>
                                    <button class="btn btn-danger btn-sm">
                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"/>
                                        删除
                                    </button>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>
                </div>
            </div>
        <%--分页--%>
            <div class="row">
                <%--分页描述--%>
                <div class="col-md-4">
                    当前第${pageInfo.pageNum}页，总${pageInfo.pages}页，总${pageInfo.total}记录
                </div>

                <%--分页按钮--%>
                    <div class="col-md-8">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li><a href="emps?pn=1">首页</a></li>
                                <c:if test="${pageInfo.hasPreviousPage}">
                                    <li>
                                        <a href="emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                </c:if>
                                <c:forEach items="${pageInfo.navigatepageNums}" var="page_num">
                                    <c:if test="${page_num==pageInfo.pageNum}">
                                         <li class="active"><a href="#">${page_num}</a></li>
                                    </c:if>
                                    <c:if test="${page_num!=pageInfo.pageNum}">
                                        <li><a href="emps?pn=${page_num}">${page_num}</a></li>
                                    </c:if>
                                </c:forEach>

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

Ajax查询

从index.jsp中发送ajax请求返回结果

从控制层返回ajax数据

将原有的方法改为

     //下面的这样已经可以在页面显示数据，但是为了能更通用的返回显示的提示给页面，那么可以在bean包下面新建Msg类
        /**
         * 如果需要使用  @ResponseBody   需要加入jaskson的依赖 2.8.8
         * @param pn
         * @return
         */
       /* @RequestMapping("/emps")
        @ResponseBody
        public PageInfo getEmps(@RequestParam(value="pn",defaultValue = "1") Integer pn){
            //startPage(当前页，pageSize)
            PageHelper.startPage(pn,5);
    
            List<Employee> emps = employeeService.getAll();
    
            PageInfo pageInfo = new PageInfo(emps);
    
            return pageInfo;
        }*/

像上面这样写法已经可以拿到数据，但是返回数据的时候不够通用，在bean包下面新建Msg.java

     //表示状态  100  成功     200 失败
        private int code;
        //显示的信息
        private String msg;
    
        private Map<String,Object> extend = new HashMap<String,Object>();
    
    
    		getter   /   sertter
    		
    		 /**
         * 设置成功or失败的信息
         * @return
         */
        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  Msg add(String key,Object value){
            this.getExtend().put(key,value);
            return this;
        }

利用Msg.java类在controller中使用

    @RequestMapping("/emps")
        @ResponseBody
        public Msg getEmps(@RequestParam(value="pn",defaultValue = "1") Integer pn){
            //startPage(当前页，pageSize)
            PageHelper.startPage(pn,5);
    
            List<Employee> emps = employeeService.getAll();
    
            PageInfo pageInfo = new PageInfo(emps);
    
            return Msg.success().add("pageInfo",pageInfo);
        }

到目前为止，已经能够给前台返回json数据了，我们现在讲原来的list页面中的内容复制到index.jsp中

并将遍历数据中的forEach标签中内容删除，且删除分页数字和分页条的信息

在body下面编写ajax信息

     <script type="text/javascript">
                $(function(){
                    $.ajax({
                        url:"/emps",
                        data:"pn=1",
                        type:"GET",
                        success:function (result) {
                            console.log(result);  //测试在控制台是否能显示数据，如果可以进行下一步
                        }
                    })
                })
    
    
            </script>
  



新建函数，分别将显示数据的内容，显示分页数字的内容，显示分页信息的内容放在不同的函数中

   ```java
     success:function (result) {
                           // console.log(result);
                        /*    $.each(result.extend.pageInfo.list,function (index,item) {  //index  下标  item: 元素
                                alert(item.empName);
    
                            })*/
                        //显示表格中的数据
                            build_emps_table(result);
    
                            //显示分页中的数字
                            build_page_info(result);
                            //显示分页条信息
                            build_page_nav(result);
                        }

显示表格中的数据

     //显示表格中的数据
     function  build_emps_table(result) {
    
                    //emps_table
                    $.each(result.extend.pageInfo.list,function (index,item) {  //index  下标  item: 元素
                        var empIdTd=$("<td></td>").append(item.empId);
                        var empNameTd=$("<td></td>").append(item.empName);
                        var emailTd=$("<td></td>").append(item.email);
                        var genderTd=$("<td></td>").append(item.gender=="m"?"男":"女");
                        var departmentTd=$("<td></td>").append(item.department.deptName);
    
                      /*  <button  class="btn btn-success btn-sm">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"/>
                            编辑
                            </button>*/
    
                      var editBtn=$("<td></td>").append($("<button></button>").addClass("btn btn-success btn-sm")
                          .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑"));
                        var delBtn=$("<td></td>").append($("<button></button>").addClass("btn btn-danger btn-sm")
                            .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除"));
    
                        var btntd=$("<td></td>").append(editBtn).append(" ").append(delBtn);
    
    
                        $("<tr></tr>").append(empIdTd)
                            .append(empNameTd)
                            .append(emailTd)
                            .append(genderTd)
                            .append(departmentTd)
                            .append(btntd)
                            .appendTo($("#emps_table tbody"));
    
    
    
                    })
    
    
                }

显示分页条数的数据

      function  build_page_info(result) {
                        //emps_page_info
                    $("#emps_page_info").append("当前第"+result.extend.pageInfo.pageNum+"页，共"+result.extend.pageInfo.pages+"页，共"+result.extend.pageInfo.total+"记录");
                }