码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-08-05 13:04:19      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:spring mvc   mybatis   easyui   分页   

一、介绍

环境:MyBatis 3.0.x+Spring 3.0.x+EasyUI

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

Demo结构如下:

技术分享

再看一下效果:

技术分享


二、项目详解:

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

1、首先建立javabean,User.java:

package com.bee.po;

public class User {
	private int id;
	private String name;
	private String password;
	private String sex;
	private int age;
	private String address;
	
	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", password=" + password
				+ ", sex=" + sex + ", age=" + age + ", address=" + address
				+ "]";
	}
	//省略setter和getter方法
}
顺带着把数据库也建立了

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

UserMapper.java:

package com.bee.dao;
import java.util.List;
import com.bee.po.User;

public interface UserMapper {
	/**
	 * 通过姓名查找用户
	 * @param name 用户名
	 * @return 返回用户对象
	 */
	public User findUserByName(String name);
	
	/**
	 * 查询所有用户,显示列表
	 */
	public List<User> findUsersList();
	/**
	 * 根据页数和记录数,返回记录
	 */
	public List<User> findUsersListByPage(int start,int end);
	/**
	 * 添加用户
	 */
	public void addUser(User user);
	/**
	 * 修改用户
	 */
	public void updateUser(User user);
	/**
	 * 根据ID删除用户
	 */
	public void deleteUser(int id);
	/**
	 * 插入学生自动生成主键
	 */
	public 	String createStudentAutoKey(User user);
	
}

根据UserMapper接口,我们可以写出映射文件UserMapper.xml(直接写在Dao层了,这样写不是太好):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC 
    "-//mybatis.org//DTD Mapper 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.bee.dao.UserMapper">
	<!-- 用户列表List -->
	<resultMap type="User" id="resultListUser">
		<id column="id" property="id" />
		<result column="name" property="name" />
		<result column="password" property="password" />
		<result column="sex" property="sex" />
		<result column="address" property="address" />
	</resultMap>
	
	<!-- 通过名称查找 -->
	<select id="findUserByName" parameterType="String" resultType="User">
		select * 
		from user where name=#{name}
	</select>
	
	<!-- 查找用户列表 -->
	<select id="findUsersList" resultMap="resultListUser">
		select * from user
	</select>
	<!-- 根据页数和记录数返回查找记录 -->
	<select id="findUsersListByPage"  resultMap="resultListUser">
		select * from user limit #{0},#{1}
	</select>
	
	<!-- 添加用户 -->
	<insert id="addUser" parameterType="User" useGeneratedKeys="true" 
		keyProperty="id">
		insert into user(name,password,sex,age,address)
			values(#{name},#{password},#{sex},#{age},#{address})	
	</insert>
	
	<!-- 更新用户 -->
	<update id="updateUser" parameterType="User">
		update user set 
		<if test="name != null">
			name=#{name},
		</if>
		<if test="password != null">
			password=#{password},
		</if>
		<if test="sex != null">
			sex=#{sex},
		</if>
		<if test="age != null">
			age=#{age},
		</if>
		<if test="address != null">
			address=#{address}
		</if>
		where id=#{id}
	</update>
	
	<!-- 删除用户 -->
	<delete id="deleteUser" parameterType="int">
		delete from user where id=#{id}
	</delete>
	
	<!-- 插入学生,自动生成主键 -->
	<insert id="createStudentAutoKey" parameterType="User" keyProperty="id">  
		<selectKey keyProperty="id" resultType="String" order="BEFORE">
			select user
		</selectKey>
		insert into user(id,name,password,sex,age,address) 
		values(#{id},#{name},#{password},#{sex},#{age},#{address})
	</insert>
</mapper>
接着配置MyBatis的配置文件:Configuration.xml直接写在src根下边了:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration   
    PUBLIC "-//mybatis.org//DTD Config 3.0//EN"   
    "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<typeAliases>
		<!-- 给实体类起别名 -->
		<typeAlias type="com.bee.po.User" alias="User"/>
	</typeAliases>

	<!--装载Mapper -->
	<mappers>
		<mapper resource="com/bee/dao/UserMapper.xml" />
	</mappers>
</configuration>
MyBatis基本上已经配置结束

下边就是要把所有的资源添加到Spring容器中,在src根下配置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:p="http://www.springframework.org/schema/p"
	xsi:schemaLocation="http://www.springframework.org/schema/beans 
	http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">
	
	<!-- 配置数据源 -->
	<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
		<property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
		<property name="url" value="jdbc:mysql://127.0.0.1:3306/test?characterEncoding=GBK"></property>
		<property name="username" value="root"></property>
		<property name="password" value="123456"></property>
		<property name="defaultAutoCommit" value="true"></property>
	</bean>
	
	<!-- 配置SqlSessionFactory,注入数据源 -->
	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="configLocation" value="classpath:configuration.xml" />
		<property name="dataSource" ref="dataSource"></property>
	</bean>
	
	<!-- 配置Mapper,注入sqlSessionFactory -->
	<bean id="userMapper" class="org.mybatis.spring.MapperFactoryBean">
		<property name="mapperInterface" value="com.bee.dao.UserMapper"></property>
		<property name="sqlSessionFactory" ref="sqlSessionFactory"></property>
	</bean>

	<!-- 配置Service -->
	<bean id="userService" class="com.bee.service.impl.UserServiceImpl">
		<property name="userMapper" ref="userMapper"></property>
	</bean>
	
</beans>
写一个测试类,检查下看有没有问题:

ClassPathXmlApplicationContext applicationContext = new ClassPathXmlApplicationContext("applicationContext.xml");
		UserService userService = (UserService) applicationContext.getBean("userService");
		
		User user = userService.findUserByName("admin");
		System.out.println(user.getAddress());


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

<?xml version="1.0" encoding="UTF-8"?>
<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">
  <display-name>NewTestLogin</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <!-- Spring核心容器 -->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>
  <!-- 监听器,自动装配ApplicationContext配置信息 -->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <!-- 设置拦截器,拦截.html类型的请求,并初始化SpringMVC容器 -->
  <servlet>
  	<servlet-name>springDispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      	<param-name>contextConfigLocation</param-name>
      	<param-value>classpath:applicationContext-mvc.xml</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>springDispatcherServlet</servlet-name>
    <url-pattern>*.html</url-pattern>
  </servlet-mapping>
  <!-- 增加了一个filter,设定UTF8,防止中文乱码 -->
  	<filter>  
  		<filter-name>Set Character Encoding</filter-name>  
  		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>  
  		<init-param>  
  			<param-name>encoding</param-name>  
  			<param-value>utf8</param-value>  
  		</init-param>  
  	</filter>  
 	<filter-mapping>  
  		<filter-name>Set Character Encoding</filter-name>  
  		<url-pattern>/*</url-pattern>  
 	</filter-mapping>  
</web-app>
配置applicationContext-mvc.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:mvc="http://www.springframework.org/schema/mvc"
		xsi:schemaLocation="
			http://www.springframework.org/schema/beans
			http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
			http://www.springframework.org/schema/context 
			http://www.springframework.org/schema/context/spring-context-3.0.xsd
			http://www.springframework.org/schema/mvc 
			http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
	<!-- 开启包自动扫描 -->
	<context:component-scan base-package="com.bee.action" />
	<!-- 开启注解支持 -->
	<mvc:annotation-driven />
	<!-- 配置viewResolver -->
	<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/" />
		<property name="suffix" value=".jsp" />
	</bean>
</beans>
配置UserLoginAction.java:

package com.bee.action;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.bee.dao.UserMapper;
import com.bee.po.User;

@Controller
@RequestMapping("/user")
public class UserLoginAction extends BaseAction{
	@Autowired
	private UserMapper userMapper;
	/**
	 * 登录模块
	 * @param request
	 * @param model
	 * @return
	 */
	@RequestMapping("/login")
	public String userLogin(HttpServletRequest request,Model model){
		//获得前台传入数据
		String name = request.getParameter("username");
		String password = request.getParameter("password");
		String securityCode = request.getParameter("securityCode");
		
		System.out.println("得到登录信息:"+name+" "+password);
		//获得图片验证码
		HttpSession session = request.getSession();
		String value = session.getAttribute("ValidateCode").toString();

		//根据用户名获得用户对象,通过判断密码、验证码是否正确返回相应视图
		User user = userMapper.findUserByName(name);
		if(user != null && user.getPassword().equals(password) && securityCode.equals(value)){
			return "main/main";
		}
		return "index/fail";
	}
	/**
	 * 用户列表,根据当前页和记录数
	 * @param page 当前页
	 * @param rows 页面记录数
	 * @param response 
	 * @param model
	 * @throws IOException
	 */
	@RequestMapping("/userList")
	public  void userList(int page,int rows,HttpServletResponse response,Model model) throws IOException{
		response.setContentType("application/json; charset=utf-8");
		//求得开始记录与结束记录
		int start = (page-1)*rows;
		int end = page * rows;
		//把总记录和当前记录写到前台
		int total = userMapper.findUsersList().size();
		List<User> uList = userMapper.findUsersListByPage(start, end);
		this.toBeJson(uList, total, response);
	}
	/**
	 * 新建用户
	 */
	@RequestMapping("/zengjiaUser")
	public void addUser(HttpServletRequest request,User user){
		System.out.println(user.getAddress());
		userMapper.addUser(user);
	}
	/**
	 * 删除用户
	 */
	@RequestMapping("/deleteUser")
	public void deleteUser(HttpServletRequest request){
		String id = request.getParameter("id");
		userMapper.deleteUser(Integer.parseInt(id));
	}
	/**
	 * 编辑用户
	 * @throws UnsupportedEncodingException 
	 */
	@RequestMapping("/updateUser")
	public void updateUser(HttpServletRequest request,User user) throws UnsupportedEncodingException{
		userMapper.updateUser(user);
	}
}

然后在前台使用EasyUI的库:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户信息列表</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/demo/demo.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/easyui/jquery.easyui.min.js"></script>
<style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        .fitem input{
            width:160px;
        }
    </style>
</head>
<body>
    <h2>用户信息列表</h2>
    <p>You can add User,or Edit_User、Delete_User if you selected an user</p>
    <table id="dg" title="用户操作" class="easyui-datagrid" style="width:700px;height:250px"
           	url="<%=request.getContextPath()%>/user/userList.html"
            toolbar="#toolbar" pagination="true"
            rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <tr >
                <th field="id" width="30" >用户ID</th>
                <th field="name" width="50">姓名</th>
                <th field="sex" width="30">性别</th>
                <th field="age" width="30">年龄</th>
				<th field="address" width="70">家庭住址</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新建用户</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a>
    </div>
    
    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle">用户信息</div>
        <form id="fm" method="post" novalidate>
            <div class="fitem">
                <label>用户ID:</label>
                <input name="id" class="easyui-textbox" required="true" >
            </div>
            <div class="fitem">
                <label>姓名:</label>
                <input name="name" class="easyui-textbox" required="true">
            </div>
             <div class="fitem">
                <label>密码:</label>
                <input name="password" type="password" class="easyui-textbox" required="true">
            </div>
            <div class="fitem">
                <label>性别:</label>
                <input name="sex" class="easyui-textbox" required="true">
            </div>
            <div class="fitem">
                <label>年龄:</label>
                <input name="age" class="easyui-textbox" required="true">
            </div>
			<div class="fitem">
                <label>家庭住址:</label>
                <input name="address" class="easyui-textbox" required="true">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
    </div>
    <script type="text/javascript">
        var url_pattern;
        function editUser(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                $('#dlg').dialog('open').dialog('setTitle','Edit User');
                $('#fm').form('load',row);
                url_pattern = '<%=request.getContextPath()%>/user/updateUser.html';
            }
        }
        function newUser(){
            $('#dlg').dialog('open').dialog('setTitle','New User');
          //  $('#fm').form('clear');
            url_pattern = '<%=request.getContextPath()%>/user/zengjiaUser.html';
        }
        function saveUser(){
        	 $('#fm').form('submit',{
                url: url_pattern,
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                	$('#dlg').dialog('close');        // close the dialog
                    $('#dg').datagrid('reload');    // reload the user data
                }
            });
        }
        function destroyUser(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                $.messager.confirm('Confirm','确定要删除这个用户么?',function(r){
                    if (r){
                        $.post('<%=request.getContextPath()%>/user/deleteUser.html',{id:row.id},function(result){
                        	 $('#dg').datagrid('reload');
                        },'json');
                    }
                    $('#dg').datagrid('reload');
                });
            }
        }
    </script>
</body>
</html>




源代码地址:















版权声明:本文为博主原创文章,未经博主允许不得转载。

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

标签:spring mvc   mybatis   easyui   分页   

原文地址:http://blog.csdn.net/u010800530/article/details/47291253

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!