您的位置: 首页  >  文章  >  【MyBatis】MyBatis+SpringMVC+EasyUI整合分页

【MyBatis】MyBatis+SpringMVC+EasyUI整合分页

分类: 文章 • 2024-10-04 08:57:16

一、介绍

环境：MyBatis 3.0.x+spring 3.0.x+EasyUI

采用SpringMVC+MyBatis框架整合的分页Demo，用的是首页这个：http://www.jeasyui.com/demo/main/index.PHP

Demo结构如下：

【MyBatis】MyBatis+SpringMVC+EasyUI整合分页

再看一下效果：

【MyBatis】MyBatis+SpringMVC+EasyUI整合分页


二、项目详解：

前提是首先把所有的jar包导入进入，不管是用Maven或者手动都可以。

1、首先建立javabean，User.Java：

[java] view plain copy
 print?
  1. package com.bee.po;  
  2.   
  3. public class User {  
  4.     private int id;  
  5.     private String name;  
  6.     private String password;  
  7.     private String sex;  
  8.     private int age;  
  9.     private String address;  
  10.       
  11.     @Override  
  12.     public String toString() {  
  13.         return "User [id=" + id + ", name=" + name + ", password=" + password  
  14.                 + ", sex=" + sex + ", age=" + age + ", address=" + address  
  15.                 + "]";  
  16.     }  
  17.     //省略setter和getter方法  
  18. }  
顺带着把数据库也建立了

2、然后建立dao层接口类，UserMapper以及UserMapper.xml（因为MyBatis是接口编程，只需要实现mapper而不用实现dao接口）

UserMapper.java：

[java] view plain copy
 print?
  1. package com.bee.dao;  
  2. import java.util.List;  
  3. import com.bee.po.User;  
  4.   
  5. public interface UserMapper {  
  6.     /** 
  7.      * 通过姓名查找用户 
  8.      * @param name 用户名 
  9.      * @return 返回用户对象 
  10.      */  
  11.     public User findUserByName(String name);  
  12.       
  13.     /** 
  14.      * 查询所有用户，显示列表 
  15.      */  
  16.     public List<User> findUsersList();  
  17.     /** 
  18.      * 根据页数和记录数，返回记录 
  19.      */  
  20.     public List<User> findUsersListByPage(int start,int end);  
  21.     /** 
  22.      * 添加用户 
  23.      */  
  24.     public void addUser(User user);  
  25.     /** 
  26.      * 修改用户 
  27.      */  
  28.     public void updateUser(User user);  
  29.     /** 
  30.      * 根据ID删除用户 
  31.      */  
  32.     public void deleteUser(int id);  
  33.     /** 
  34.      * 插入学生自动生成主键 
  35.      */  
  36.     public  String createStudentAutoKey(User user);  
  37.       
  38. }  

根据UserMapper接口，我们可以写出映射文件UserMapper.xml（直接写在Dao层了，这样写不是太好）：

[html] view plain copy
 print?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <!DOCTYPE mapper PUBLIC   
  3.     "-//mybatis.org//DTD Mapper 3.0//EN"  
  4.     "http://mybatis.org/dtd/mybatis-3-mapper.dtd">  
  5.   
  6. <mapper namespace="com.bee.dao.UserMapper">  
  7.     <!-- 用户列表List -->  
  8.     <resultMap type="User" id="resultListUser">  
  9.         <id column="id" property="id" />  
  10.         <result column="name" property="name" />  
  11.         <result column="password" property="password" />  
  12.         <result column="sex" property="sex" />  
  13.         <result column="address" property="address" />  
  14.     </resultMap>  
  15.       
  16.     <!-- 通过名称查找 -->  
  17.     <select id="findUserByName" parameterType="String" resultType="User">  
  18.         select *   
  19.         from user where name=#{name}  
  20.     </select>  
  21.       
  22.     <!-- 查找用户列表 -->  
  23.     <select id="findUsersList" resultMap="resultListUser">  
  24.         select * from user  
  25.     </select>  
  26.     <!-- 根据页数和记录数返回查找记录 -->  
  27.     <select id="findUsersListByPage"  resultMap="resultListUser">  
  28.         select * from user limit #{0},#{1}  
  29.     </select>  
  30.       
  31.     <!-- 添加用户 -->  
  32.     <insert id="addUser" parameterType="User" useGeneratedKeys="true"   
  33.         keyProperty="id">  
  34.         insert into user(name,password,sex,age,address)  
  35.             values(#{name},#{password},#{sex},#{age},#{address})      
  36.     </insert>  
  37.       
  38.     <!-- 更新用户 -->  
  39.     <update id="updateUser" parameterType="User">  
  40.         update user set   
  41.         <if test="name != null">  
  42.             name=#{name},  
  43.         </if>  
  44.         <if test="password != null">  
  45.             password=#{password},  
  46.         </if>  
  47.         <if test="sex != null">  
  48.             sex=#{sex},  
  49.         </if>  
  50.         <if test="age != null">  
  51.             age=#{age},  
  52.         </if>  
  53.         <if test="address != null">  
  54.             address=#{address}  
  55.         </if>  
  56.         where id=#{id}  
  57.     </update>  
  58.       
  59.     <!-- 删除用户 -->  
  60.     <delete id="deleteUser" parameterType="int">  
  61.         delete from user where id=#{id}  
  62.     </delete>  
  63.       
  64.     <!-- 插入学生，自动生成主键 -->  
  65.     <insert id="createStudentAutoKey" parameterType="User" keyProperty="id">    
  66.         <selectKey keyProperty="id" resultType="String" order="BEFORE">  
  67.             select user  
  68.         </selectKey>  
  69.         insert into user(id,name,password,sex,age,address)   
  70.         values(#{id},#{name},#{password},#{sex},#{age},#{address})  
  71.     </insert>  
  72. </mapper>  
接着配置MyBatis的配置文件：Configuration.xml直接写在src根下边了：

[html] view plain copy
 print?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <!DOCTYPE configuration     
  3.     PUBLIC "-//mybatis.org//DTD Config 3.0//EN"     
  4.     "http://mybatis.org/dtd/mybatis-3-config.dtd">  
  5. <configuration>  
  6.     <typeAliases>  
  7.         <!-- 给实体类起别名 -->  
  8.         <typeAlias type="com.bee.po.User" alias="User"/>  
  9.     </typeAliases>  
  10.   
  11.     <!--装载Mapper -->  
  12.     <mappers>  
  13.         <mapper resource="com/bee/dao/UserMapper.xml" />  
  14.     </mappers>  
  15. </configuration>  
MyBatis基本上已经配置结束

下边就是要把所有的资源添加到Spring容器中，在src根下配置applicationContext.xml文件：

[html] view plain copy
 print?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans  
  3.     xmlns="http://www.springframework.org/schema/beans"  
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  5.     xmlns:p="http://www.springframework.org/schema/p"  
  6.     xsi:schemaLocation="http://www.springframework.org/schema/beans   
  7.     http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">  
  8.       
  9.     <!-- 配置数据源 -->  
  10.     <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">  
  11.         <property name="driverClassName" value="com.mysql.jdbc.Driver"></property>  
  12.         <property name="url" value="jdbc:mysql://127.0.0.1:3306/test?characterEncoding=GBK"></property>  
  13.         <property name="username" value="root"></property>  
  14.         <property name="password" value="123456"></property>  
  15.         <property name="defaultAutoCommit" value="true"></property>  
  16.     </bean>  
  17.       
  18.     <!-- 配置SqlSessionFactory，注入数据源 -->  
  19.     <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">  
  20.         <property name="configLocation" value="classpath:configuration.xml" />  
  21.         <property name="dataSource" ref="dataSource"></property>  
  22.     </bean>  
  23.       
  24.     <!-- 配置Mapper，注入sqlSessionFactory -->  
  25.     <bean id="userMapper" class="org.mybatis.spring.MapperFactoryBean">  
  26.         <property name="mapperInterface" value="com.bee.dao.UserMapper"></property>  
  27.         <property name="sqlSessionFactory" ref="sqlSessionFactory"></property>  
  28.     </bean>  
  29.   
  30.     <!-- 配置Service -->  
  31.     <bean id="userService" class="com.bee.service.impl.UserServiceImpl">  
  32.         <property name="userMapper" ref="userMapper"></property>  
  33.     </bean>  
  34.       
  35. </beans>  
写一个测试类，检查下看有没有问题：

[java] view plain copy
 print?
  1. ClassPathXmlApplicationContext applicationContext = new ClassPathXmlApplicationContext("applicationContext.xml");  
  2.         UserService userService = (UserService) applicationContext.getBean("userService");  
  3.           
  4.         User user = userService.findUserByName("admin");  
  5.         System.out.println(user.getAddress());  


OK，没问题之后就开始配置web端了，首先配置web.xml：

[html] view plain copy
 print?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">  
  3.   <display-name>NewTestLogin</display-name>  
  4.   <welcome-file-list>  
  5.     <welcome-file>index.jsp</welcome-file>  
  6.   </welcome-file-list>  
  7.   <!-- Spring核心容器 -->  
  8.   <context-param>  
  9.     <param-name>contextConfigLocation</param-name>  
  10.     <param-value>classpath:applicationContext.xml</param-value>  
  11.   </context-param>  
  12.   <!-- 监听器，自动装配ApplicationContext配置信息 -->  
  13.   <listener>  
  14.     <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  
  15.   </listener>  
  16.   <!-- 设置拦截器，拦截.html类型的请求,并初始化SpringMVC容器 -->  
  17.   <servlet>  
  18.     <servlet-name>springDispatcherServlet</servlet-name>  
  19.     <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
  20.     <init-param>  
  21.         <param-name>contextConfigLocation</param-name>  
  22.         <param-value>classpath:applicationContext-mvc.xml</param-value>  
  23.     </init-param>  
  24.   </servlet>  
  25.   <servlet-mapping>  
  26.     <servlet-name>springDispatcherServlet</servlet-name>  
  27.     <url-pattern>*.html</url-pattern>  
  28.   </servlet-mapping>  
  29.   <!-- 增加了一个filter,设定UTF8,防止中文乱码 -->  
  30.     <filter>    
  31.         <filter-name>Set Character Encoding</filter-name>    
  32.         <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>    
  33.         <init-param>    
  34.             <param-name>encoding</param-name>    
  35.             <param-value>utf8</param-value>    
  36.         </init-param>    
  37.     </filter>    
  38.     <filter-mapping>    
  39.         <filter-name>Set Character Encoding</filter-name>    
  40.         <url-pattern>/*</url-pattern>    
  41.     </filter-mapping>    
  42. </web-app>  
配置applicationContext-mvc.xml：

[html] view plain copy
 print?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"  
  3.         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  4.         xmlns:context="http://www.springframework.org/schema/context"  
  5.         xmlns:mvc="http://www.springframework.org/schema/mvc"  
  6.         xsi:schemaLocation="  
  7.             http://www.springframework.org/schema/beans  
  8.             http://www.springframework.org/schema/beans/spring-beans-3.0.xsd  
  9.             http://www.springframework.org/schema/context   
  10.             http://www.springframework.org/schema/context/spring-context-3.0.xsd  
  11.             http://www.springframework.org/schema/mvc   
  12.             http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">  
  13.     <!-- 开启包自动扫描 -->  
  14.     <context:component-scan base-package="com.bee.action" />  
  15.     <!-- 开启注解支持 -->  
  16.     <mvc:annotation-driven />  
  17.     <!-- 配置viewResolver -->  
  18.     <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
  19.         <property name="prefix" value="/WEB-INF/" />  
  20.         <property name="suffix" value=".jsp" />  
  21.     </bean>  
  22. </beans>  
配置UserLoginAction.java：

[java] view plain copy
 print?
  1. package com.bee.action;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.UnsupportedEncodingException;  
  5. import java.util.List;  
  6.   
  7. import javax.servlet.http.HttpServletRequest;  
  8. import javax.servlet.http.HttpServletResponse;  
  9. import javax.servlet.http.HttpSession;  
  10.   
  11. import org.springframework.beans.factory.annotation.Autowired;  
  12. import org.springframework.stereotype.Controller;  
  13. import org.springframework.ui.Model;  
  14. import org.springframework.web.bind.annotation.RequestMapping;  
  15.   
  16. import com.bee.dao.UserMapper;  
  17. import com.bee.po.User;  
  18.   
  19. @Controller  
  20. @RequestMapping("/user")  
  21. public class UserLoginAction extends BaseAction{  
  22.     @Autowired  
  23.     private UserMapper userMapper;  
  24.     /** 
  25.      * 登录模块 
  26.      * @param request 
  27.      * @param model 
  28.      * @return 
  29.      */  
  30.     @RequestMapping("/login")  
  31.     public String userLogin(HttpServletRequest request,Model model){  
  32.         //获得前台传入数据  
  33.         String name = request.getParameter("username");  
  34.         String password = request.getParameter("password");  
  35.         String securityCode = request.getParameter("securityCode");  
  36.           
  37.         System.out.println("得到登录信息："+name+" "+password);  
  38.         //获得图片验证码  
  39.         HttpSession session = request.getSession();  
  40.         String value = session.getAttribute("ValidateCode").toString();  
  41.   
  42.         //根据用户名获得用户对象，通过判断密码、验证码是否正确返回相应视图  
  43.         User user = userMapper.findUserByName(name);  
  44.         if(user != null && user.getPassword().equals(password) && securityCode.equals(value)){  
  45.             return "main/main";  
  46.         }  
  47.         return "index/fail";  
  48.     }  
  49.     /** 
  50.      * 用户列表,根据当前页和记录数 
  51.      * @param page 当前页 
  52.      * @param rows 页面记录数 
  53.      * @param response  
  54.      * @param model 
  55.      * @throws IOException 
  56.      */  
  57.     @RequestMapping("/userList")  
  58.     public  void userList(int page,int rows,HttpServletResponse response,Model model) throws IOException{  
  59.         response.setContentType("application/json; charset=utf-8");  
  60.         //求得开始记录与结束记录  
  61.         int start = (page-1)*rows;  
  62.         int end = page * rows;  
  63.         //把总记录和当前记录写到前台  
  64.         int total = userMapper.findUsersList().size();  
  65.         List<User> uList = userMapper.findUsersListByPage(start, end);  
  66.         this.toBeJson(uList, total, response);  
  67.     }  
  68.     /** 
  69.      * 新建用户 
  70.      */  
  71.     @RequestMapping("/zengjiaUser")  
  72.     public void addUser(HttpServletRequest request,User user){  
  73.         System.out.println(user.getAddress());  
  74.         userMapper.addUser(user);  
  75.     }  
  76.     /** 
  77.      * 删除用户 
  78.      */  
  79.     @RequestMapping("/deleteUser")  
  80.     public void deleteUser(HttpServletRequest request){  
  81.         String id = request.getParameter("id");  
  82.         userMapper.deleteUser(Integer.parseInt(id));  
  83.     }  
  84.     /** 
  85.      * 编辑用户 
  86.      * @throws UnsupportedEncodingException  
  87.      */  
  88.     @RequestMapping("/updateUser")  
  89.     public void updateUser(HttpServletRequest request,User user) throws UnsupportedEncodingException{  
  90.         userMapper.updateUser(user);  
  91.     }  
  92. }  
然后在前台使用EasyUI的库：

[html] view plain copy
 print?
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>用户信息列表</title>  
  8. <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/default/easyui.css">  
  9. <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/icon.css">  
  10. <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/color.css">  
  11. <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/demo/demo.css">  
  12. <script type="text/javascript" src="<%=request.getContextPath() %>/easyui/jquery.min.js"></script>  
  13. <script type="text/javascript" src="<%=request.getContextPath() %>/easyui/jquery.easyui.min.js"></script>  
  14. <style type="text/css">  
  15.         #fm{  
  16.             margin:0;  
  17.             padding:10px 30px;  
  18.         }  
  19.         .ftitle{  
  20.             font-size:14px;  
  21.             font-weight:bold;  
  22.             padding:5px 0;  
  23.             margin-bottom:10px;  
  24.             border-bottom:1px solid #ccc;  
  25.         }  
  26.         .fitem{  
  27.             margin-bottom:5px;  
  28.         }  
  29.         .fitem label{  
  30.             display:inline-block;  
  31.             width:80px;  
  32.         }  
  33.         .fitem input{  
  34.             width:160px;  
  35.         }  
  36.     </style>  
  37. </head>  
  38. <body>  
  39.     <h2>用户信息列表</h2>  
  40.     <p>You can add User,or Edit_User、Delete_User if you selected an user</p>  
  41.     <table id="dg" title="用户操作" class="easyui-datagrid" style="width:700px;height:250px"  
  42.             url="<%=request.getContextPath()%>/user/userList.html"  
  43.             toolbar="#toolbar" pagination="true"  
  44.             rownumbers="true" fitColumns="true" singleSelect="true">  
  45.         <thead>  
  46.             <tr >  
  47.                 <th field="id" width="30" >用户ID</th>  
  48.                 <th field="name" width="50">姓名</th>  
  49.                 <th field="sex" width="30">性别</th>  
  50.                 <th field="age" width="30">年龄</th>  
  51.                 <th field="address" width="70">家庭住址</th>  
  52.             </tr>  
  53.         </thead>  
  54.     </table>  
  55.     <div id="toolbar">  
  56.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新建用户</a>  
  57.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>  
  58.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a>  
  59.     </div>  
  60.       
  61.     <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"  
  62.             closed="true" buttons="#dlg-buttons">  
  63.         <div class="ftitle">用户信息</div>  
  64.         <form id="fm" method="post" novalidate>  
  65.             <div class="fitem">  
  66.                 <label>用户ID:</label>  
  67.                 <input name="id" class="easyui-textbox" required="true" >  
  68.             </div>  
  69.             <div class="fitem">  
  70.                 <label>姓名:</label>  
  71.                 <input name="name" class="easyui-textbox" required="true">  
  72.             </div>  
  73.              <div class="fitem">  
  74.                 <label>密码:</label>  
  75.                 <input name="password" type="password" class="easyui-textbox" required="true">  
  76.             </div>  
  77.             <div class="fitem">  
  78.                 <label>性别:</label>  
  79.                 <input name="sex" class="easyui-textbox" required="true">  
  80.             </div>  
  81.             <div class="fitem">  
  82.                 <label>年龄:</label>  
  83.                 <input name="age" class="easyui-textbox" required="true">  
  84.             </div>  
  85.             <div class="fitem">  
  86.                 <label>家庭住址:</label>  
  87.                 <input name="address" class="easyui-textbox" required="true">  
  88.             </div>  
  89.         </form>  
  90.     </div>  
  91.     <div id="dlg-buttons">  
  92.         <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">保存</a>  
  93.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>  
  94.     </div>  
  95.     <script type="text/javascript">  
  96.         var url_pattern;  
  97.         function editUser(){  
  98.             var row = $('#dg').datagrid('getSelected');  
  99.             if (row){  
  100.                 $('#dlg').dialog('open').dialog('setTitle','Edit User');  
  101.                 $('#fm').form('load',row);  
  102.                 url_pattern = '<%=request.getContextPath()%>/user/updateUser.html';  
  103.             }  
  104.         }  
  105.         function newUser(){  
  106.             $('#dlg').dialog('open').dialog('setTitle','New User');  
  107.           //  $('#fm').form('clear');  
  108.             url_pattern = '<%=request.getContextPath()%>/user/zengjiaUser.html';  
  109.         }  
  110.         function saveUser(){  
  111.              $('#fm').form('submit',{  
  112.                 url: url_pattern,  
  113.                 onSubmit: function(){  
  114.                     return $(this).form('validate');  
  115.                 },  
  116.                 success: function(result){  
  117.                     $('#dlg').dialog('close');        // close the dialog  
  118.                     $('#dg').datagrid('reload');    // reload the user data  
  119.                 }  
  120.             });  
  121.         }  
  122.         function destroyUser(){  
  123.             var row = $('#dg').datagrid('getSelected');  
  124.             if (row){  
  125.                 $.messager.confirm('Confirm','确定要删除这个用户么？',function(r){  
  126.                     if (r){  
  127.                         $.post('<%=request.getContextPath()%>/user/deleteUser.html',{id:row.id},function(result){  
  128.                              $('#dg').datagrid('reload');  
  129.                         },'json');  
  130.                     }  
  131.                     $('#dg').datagrid('reload');  
  132.                 });  
  133.             }  
  134.         }  
  135.     </script>  
  136. </body>  
  137. </html>  




源代码地址：

http://download.****.NET/download/u010800530/8961287

相关推荐