您的位置：首页 > Web前端 > JQuery

spring+springmvc+mybatis+jQuery easyUI案例

2015-03-06 14:49 411 查看

spring+springmvc+mybatis+jQuery easyUI案例

项目运行的截图：

下面是今天做的一个小的登录测试程序：目的是练习如何添加验证码和jQuery easyUI中的数据表格（datagrid）以及spring+springmvc+mybatis的整合
用到的技术：spring+springmvc+mybatis+jQuery easyUI

下面就让我们来看看如何给登录添加验证码验证以及数据表格的使用：
1、首先创建一个web工程，其工程的目录结构如图所示：

项目需要用到的jar如图所示：

2、由于用到了jQuery easyUI所以需要用到easyUI插件：可以到官网上下载http://www.jeasyui.net/download/；下载之后将其解压，把解压后的文件放到工程对应的目录下面，这里我是放在js包下

3、创建数据库 tb_user：这里就不在说明了。想必大家都会建表把。这里附上一张表的截图

***注意这里我用的是MySQL数据库
配置文件相关目录结构：

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>easyUI</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <!-- 加载Spring容器配置 -->  
    <listener>  
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  
    </listener>  
    <!-- 设置Spring容器加载配置文件路径 -->  
    <context-param>  
        <param-name>contextConfigLocation</param-name>  
        <param-value>classpath:spring/applicationContext-*.xml</param-value>  
    </context-param>  
    <!-- 配置Spring核心控制器 -->  
    <servlet>  
        <servlet-name>dispatcher</servlet-name>  
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
        <init-param>  
            <param-name>contextConfigLocation</param-name>  
            <param-value>classpath:spring/applicationContext-mvc.xml</param-value>  
        </init-param>  
        <load-on-startup>1</load-on-startup>  
    </servlet>  
    <!-- 拦截匹配规则 -->  
    <servlet-mapping>  
        <servlet-name>dispatcher</servlet-name>  
        <url-pattern>/</url-pattern>  
    </servlet-mapping>  
    <servlet-mapping>
     <servlet-name>default</servlet-name>
     <url-pattern>*.css</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.gif</url-pattern>

 </servlet-mapping>
    
 <servlet-mapping>
     <servlet-name>default</servlet-name>
     <url-pattern>*.png</url-pattern>
 </servlet-mapping>
    
 <servlet-mapping>
     <servlet-name>default</servlet-name>
     <url-pattern>*.js</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.jpg</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>forceEncoding</param-name>      
            <param-value>true</param-value>      
        </init-param>  
    </filter>  
    <filter-mapping>  
        <filter-name>characterEncodingFilter</filter-name>  
        <url-pattern>/*</url-pattern>  
    </filter-mapping>  
</web-app>

4、spring和mybatis整合的配置文件：applicationContext-common.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"  
    xmlns:aop="http://www.springframework.org/schema/aop"   
    xmlns:tx="http://www.springframework.org/schema/tx"  
    xmlns:context="http://www.springframework.org/schema/context"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    xsi:schemaLocation="http://www.springframework.org/schema/beans   
    http://www.springframework.org/schema/beans/spring-beans.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   
    http://www.springframework.org/schema/context    
    http://www.springframework.org/schema/context/spring-context.xsd">  
      
    <context:property-placeholder location="classpath:mybatis/jdbc.properties"/>    
    <!--创建数据源 -->    
    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="com.mysql.jdbc.Driver"/>
		<property name="username" value="root"/>
		<property name="password" value="smilelife"/>
		<property name="url" value="jdbc:mysql://localhost:3306/test?Unicode=true&characterEncoding=UTF-8"/>
	</bean>
	
    <!-- 配置SqlSessionFactoryBean -->  
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">  
        <property name="dataSource" ref="dataSource"/>  
        <property name="configLocation" value="classpath:mybatis/config.xml"/>  
        <property name="mapperLocations" value="classpath:com/easyui/model/*.xml">  
         <!--    <list>  
                <value>classpath:com/easyui/model/*.xml</value>  
            </list>   -->
        </property>  
    </bean>  
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">  
        <property name="basePackage" value="com.easyui.mapper"/>  
        <property name="markerInterface" value="com.easyui.mapper.BaseMapper"/>  
    </bean>  
</beans>

5、spring与springmvc整合的配置文件: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:p="http://www.springframework.org/schema/p"  
    xmlns:context="http://www.springframework.org/schema/context"  
    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">  
    <!-- 自动扫描的包名,扫描springmvc的注解 -->  
    <context:component-scan base-package="com.easyui"/>  
    <!-- annotation默认的方法映射适配器 -->  
    <bean id="handlerMapping" class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping"/>  
    <bean id="handlerAdapter" class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">    
        <property name="messageConverters">    
          <list>    
            <ref bean="jsonHttpMessageConverter"/>    
          </list>    
        </property>    
    </bean>  
    <!-- json转换，需配置编码格式，否则乱码 -->  
    <bean id="jsonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">      
        <property name="supportedMediaTypes">      
            <list>      
                <value>text/html;charset=UTF-8</value>      
            </list>      
        </property>      
    </bean>  
    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">      
        <property name="prefix" value="/jsp/"/>      
        <property name="suffix" value=".jsp"/>      
        <property name="contentType" value="text/html; charset=utf-8"/>      
    </bean>   
</beans>

applicationContext-bean..xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"  
    xmlns:context="http://www.springframework.org/schema/context"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    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">  
      
    <!-- 自动扫描 -->  
    <context:component-scan base-package="com.easyui.controller"/>  
    <context:component-scan base-package="com.easyui.service"/>  
    <!-- <context:component-scan base-package="com.easyui.dao"/>   -->
    <context:component-scan base-package="com.easyui.mapper" />
      
      
</beans>

config.xml

<?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>  
    <settings>  
        <setting name="cacheEnabled" value="true"/>    
        <setting name="lazyLoadingEnabled" value="true"/>    
        <setting name="multipleResultSetsEnabled" value="true"/>    
        <setting name="useColumnLabel" value="true"/>    
        <setting name="useGeneratedKeys" value="true"/>    
        <setting name="defaultExecutorType" value="SIMPLE"/>    
        <setting name="defaultStatementTimeout" value="25000"/>    
    </settings>  
    <typeAliases>  
        <typeAlias type="com.easyui.model.User" alias="User" />  
    </typeAliases>  
</configuration>

jdbc.properties

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBehavior=convertToNull
username=root
password=smilelife

6、配置文件创建完成之后，需要在项目中创建表对应的实体类、接口文件、实体类的映射文件

这里我把实体类和映射文件都放在了com.easyui.model包下了：

User.java

package com.easyui.model;
import java.util.Date;

public class User {
	private Integer userId;
	private String loginname;
	private String username;
	private String password;
	private String rights;
	private Integer status;
	private Integer roleId;
	private Date lastLogin;
	
	
	private Date lastLoginStart;
	private Date lastLoginEnd;
	
	public Integer getUserId() {
		return userId;
	}
	public void setUserId(Integer userId) {
		this.userId = userId;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public Integer getStatus() {
		return status;
	}
	public void setStatus(Integer status) {
		this.status = status;
	}
	public String getRights() {
		return rights;
	}
	public void setRights(String rights) {
		this.rights = rights;
	}
	public String getLoginname() {
		return loginname;
	}
	public void setLoginname(String loginname) {
		this.loginname = loginname;
	}
	
	public Integer getRoleId() {
		return roleId;
	}
	public void setRoleId(Integer roleId) {
		this.roleId = roleId;
	}
	public Date getLastLogin() {
		return lastLogin;
	}
	public void setLastLogin(Date lastLogin) {
		this.lastLogin = lastLogin;
	}
	public Date getLastLoginStart() {
		return lastLoginStart;
	}
	public void setLastLoginStart(Date lastLoginStart) {
		this.lastLoginStart = lastLoginStart;
	}
	public Date getLastLoginEnd() {
		return lastLoginEnd;
	}
	public void setLastLoginEnd(Date lastLoginEnd) {
		this.lastLoginEnd = lastLoginEnd;
	}
	
}

UserMapper.xml

<?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.easyui.mapper.UserMapper" >  
    <resultMap id="userResultMap" type="com.easyui.model.User">  
      <id column="user_id" property="userId"/>
		<result column="loginname" property="loginname"/>
		<result column="username" property="username"/>
		<result column="password" property="password"/>
		<result column="user_rights" property="rights"/>
		<result column="status" property="status"/>
		<result column="role_id" property="roleId"/>
		<result column="last_login" property="lastLogin"/>
    </resultMap>  
    <select id="selAllUser" resultMap="userResultMap">  
        select * from tb_user
    </select>  
    <!-- 查询用户列表数量 -->
    <select id="selAllUserNum" resultType="java.lang.Integer">
		select count(*) from tb_user 

	</select>
	<select id="selUser" parameterType="User" resultMap="userResultMap">
	select  * from tb_user where 1=1
	<if test="loginname!=null and password!=null">
	and loginname=#{loginname} and password=#{password}
	</if>
	</select>
</mapper>

UserMapper.java

package com.easyui.mapper;

import java.util.List;
import java.util.Map;

import com.easyui.model.User;

public interface UserMapper extends BaseMapper{
	//查询所有用户
	 List<User> selAllUser();
	//查询所有用户数量
	public int selAllUserNum();
	//根据根据用户名和密码来判断该用户是否存在
	public User selUser(User user);
	

}

BaseMapper.java 里面不声明任何方法

7、这些建完之后，需要创建业务层service
UserService.java

package com.easyui.service;

import java.util.List;
import java.util.Map;

import com.easyui.model.User;

public interface UserService {
	//用户列表
		public List<User> selAllUser();
		//根据用户名和密码来查询该用户
		public User selUser(String loginname,String password);

}

UserServiceImpl.java

package com.easyui.service.impl;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.easyui.mapper.UserMapper;
import com.easyui.model.User;
import com.easyui.service.UserService;

@Service
public class UserServiceImpl implements UserService {
	@Autowired
	private UserMapper userMapper;

	@Override
	public List<User> selAllUser() {
		
		return userMapper.selAllUser();
	}

	@Override
	public User selUser(String loginname, String password) {
		User user=new User();
		user.setLoginname(loginname);
		user.setPassword(password);
		return userMapper.selUser(user);
	}
	

}

8、下面就是控制层controller
①、首先是控制登录的LoginController.java

package com.easyui.controller;

import java.util.Date;
import java.util.List;

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 org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.easyui.model.User;
import com.easyui.service.UserService;
import com.easyui.util.Const;

@Controller
public class LoginController {

	@Autowired
	private UserService userService;
	
	/**
	 * 访问登录页
	 * @return
	 */
	@RequestMapping(value="/login",method=RequestMethod.GET)
	public String loginGet(){
		return "login";
	}
	/*@RequestMapping(value="/login")
	public ModelAndView login(){
		ModelAndView mv=new ModelAndView();
		mv.setViewName("login");
		return mv;
	}*/
	
	/**
	 * 请求登录，验证用户
	 * @param session
	 * @param loginname
	 * @param password
	 * @param code
	 * @return
	 */
	@RequestMapping(value="/login",method=RequestMethod.POST)
	public ModelAndView loginPost(HttpSession session,@RequestParam String loginname,@RequestParam String password,@RequestParam String code){
		String sessionCode = (String)session.getAttribute(Const.SESSION_SECURITY_CODE);
		ModelAndView mv = new ModelAndView();
		
		String errInfo = "";
		if(sessionCode.equalsIgnoreCase(code)){
			User user = userService.selUser(loginname, password);
			if(user!=null && password.equals(user.getPassword())){
				
				session.removeAttribute(Const.SESSION_SECURITY_CODE);
				
				
			}else{
				errInfo = "用户名或密码有误！";
			}
		}else{
			errInfo = "验证码输入有误！";
		}
		if(null==errInfo || "".equals(errInfo) ||"null".equals(errInfo)){
			mv.setViewName("users");
		}
		else{
			mv.addObject("errInfo", errInfo);
			mv.addObject("loginname",loginname);
			mv.addObject("password",password);
			mv.setViewName("login");
		}
		
		return mv;
	}
	
	
}

其中String sessionCode = (String)session.getAttribute(Const.SESSION_SECURITY_CODE);这句代码是来获取验证码的
②、验证码相关代码：SecCodeController.java

package com.easyui.controller;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.font.FontRenderContext;
import java.awt.geom.Rectangle2D;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.easyui.util.Const;

/**
 * @author Administrator
 * 验证码生成类
 */
@Controller
@RequestMapping("/code")
public class SecCodeController {

	@RequestMapping
	public void generate(HttpSession session,HttpServletResponse response){
		ByteArrayOutputStream output = new ByteArrayOutputStream();
		String code = drawImg(output);
		session.setAttribute(Const.SESSION_SECURITY_CODE, code); //放入session
		//System.out.println(session.getAttribute(Const.SESSION_SECURITY_CODE));
		try {
			ServletOutputStream out = response.getOutputStream();
			output.writeTo(out);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	private String drawImg(ByteArrayOutputStream output){
		String code = "";
		for(int i=0; i<4; i++){
			code += randomChar();
		}
		int width = 70;
		int height = 25;
		BufferedImage bi = new BufferedImage(width,height,BufferedImage.TYPE_3BYTE_BGR);
		Font font = new Font("Times New Roman",Font.PLAIN,20);
		Graphics2D g = bi.createGraphics();
		g.setFont(font);
		Color color = new Color(66,2,82);
		g.setColor(color);
		g.setBackground(new Color(226,226,240));
		g.clearRect(0, 0, width, height);
		FontRenderContext context = g.getFontRenderContext();
		Rectangle2D bounds = font.getStringBounds(code, context);
		double x = (width - bounds.getWidth()) / 2;
		double y = (height - bounds.getHeight()) / 2;
		double ascent = bounds.getY();
		double baseY = y - ascent;
		g.drawString(code, (int)x, (int)baseY);
		g.dispose();
		try {
			ImageIO.write(bi, "jpg", output);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return code;
	}
	
	private char randomChar(){
		Random r = new Random();
		String s = "ABCDEFGHJKLMNPRSTUVWXYZ0123456789";
		return s.charAt(r.nextInt(s.length()));
	}
}

其中用到了一个工具类：Const.java

package com.easyui.util;

import org.springframework.context.ApplicationContext;

public class Const {
	public static final String SESSION_SECURITY_CODE = "sessionSecCode";
}

③、UserController.java

package com.easyui.controller;

import java.util.List;
import java.util.Map;

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 org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.easyui.model.User;
import com.easyui.service.UserService;

@Controller
@RequestMapping(value="/easyui")
public class UserController {
	@Autowired
	private UserService userService;
	
	/*@RequestMapping(value="/main")
	public ModelAndView main(){
		ModelAndView mv=new ModelAndView();
		mv.setViewName("users");
		return mv;
		
	}
	@RequestMapping(value="/list.do")
	@ResponseBody
	 public Map<String, Object> selectAllUser(@RequestParam String page,@RequestParam String rows){
	    	return userService.selAllUser(page, rows);
	    }*/
	@RequestMapping(value="/list")
	@ResponseBody
	public Object selectAllUser(Model model){
		List<User> listUser=userService.selAllUser();
		return listUser;
	}

}

9、下面就是创建视图：

用到就是红色框框出来的部分：其他的没有用到
login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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>
<style type="text/css">
	body{margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;background-color: #ccccff;}
	.header{width:100%;height:41px;background: url(images/login-top-bg.gif) repeat-x;}
	.center{width:100%;height:532px;background: url(images/login_bg.jpg) repeat-x;}
	.login_right{float:right;width:50%;height:100%;background: url(images/login-wel.gif) bottom no-repeat;}
	.login_left{float:right;width:295px;height:100%;background: url(images/login-content-bg.gif) no-repeat;}
	.login_title{margin-left:35px;font-family: Arial, Helvetica, sans-serif;font-size: 14px;height:36px;line-height: 36px;color: #666666;font-weight: bold;}
	.login_info{margin-left:35px;font-family: Arial, Helvetica, sans-serif;font-size: 12px;height:36px;line-height: 36px;color: #333333;}
	.login_input{width:150px;height:20px;margin-left:30px;border:1px solid #7F9DB9;vertical-align: middle;}
	.login_code{width:70px;height:20px;margin-left:30px;border:1px solid #7F9DB9;vertical-align: middle;}
	.btn{width:60px;height:25px;border-width:0px;background-image: url(images/btn-bg2.gif);letter-spacing: 3px;margin-right:70px;cursor: pointer;}
	.login_info img{vertical-align: middle;cursor: pointer;}
	
	.errInfo{display:none;color:red;}
	
	.logo{width:100%;height:68px;background: url(images/logo.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo2.png';)}
	.left_txt{font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 25px;color: #666666;}
	
	.bottom{width:100%;height:auto;text-align:center;font-family: Arial, Helvetica, sans-serif;font-size: 10px;color: #ABCAD3;text-decoration: none;line-height: 20px;}
</style>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
</head>
<body>
<div style="width:100%;height:645px;position: absolute;top:50%;left:50%;margin-top:-320px;margin-left:-50%;">
	<div class="header"></div>
	<div class="center">
		<div class="login_right">
			<div style="width:100%;height:auto;margin-top:150px;">
			<form action="login" method="post" name="loginForm" onsubmit="return check();">
				<div class="login_title">
					管理员登录
				</div>
				<div class="login_info">
					<label>用户名：</label><input type="text" name="loginname" id="loginname" class="login_input" value="${loginname }"/>
					 <span id="nameerr" class="errInfo"></span>
				</div>
				<div class="login_info">
					<label>密　码：</label><input type="password" name="password" id="password" class="login_input" value="${password }"/>
					 <span id="pwderr" class="errInfo"></span>
				</div>
				<div class="login_info">
					<label>验证码：</label><input type="text" name="code" id="code" class="login_code"/>  
					<img id="codeImg" alt="点击更换" title="点击更换" src=""/>
					 <span id="codeerr" class="errInfo"></span>
				</div>
				<div class="login_info">
					<input type="submit" name="loginBtn" value="登录" class="btn"/>
					<input type="reset" name="cancelBtn" value="取消" class="btn"/>
				</div>
			</form>
			</div>
		</div>
		<div class="login_left">
			<div style="width:100%;height:auto;margin-top:150px;">
				<div style="margin-top:200px;" class="logo"></div>
				<!-- <div class="left_txt">
					1.aaaaaaaaaaaaaaaaaa<br/>
					2.bbbbbbbbbbbbb<br/>
					3.cccccccccccccccccc<br/>
				</div> -->
			</div>
		</div>
	</div>
	<div class="bottom">
	Copyright © 2011 xxx
	</div>
</div>
	<script type="text/javascript">
		var errInfo = "${errInfo}";
		$(document).ready(function(){
			changeCode();
			$("#codeImg").bind("click",changeCode);
			if(errInfo!=""){
				if(errInfo.indexOf("验证码")>-1){
					$("#codeerr").show();
					$("#codeerr").html(errInfo);
					$("#code").focus();
				}else{
					$("#nameerr").show();
					$("#nameerr").html(errInfo);
				}
			}
			$("#loginname").focus();
		});
	
		function genTimestamp(){
			var time = new Date();
			return time.getTime();
		}
	
		function changeCode(){
			$("#codeImg").attr("src","code.html?t="+genTimestamp());
		}
		
		/* function resetErr(){
			$("#nameerr").hide();
			$("#nameerr").html("");
			$("#pwderr").hide();
			$("#pwderr").html("");
			$("#codeerr").hide();
			$("#codeerr").html("");
		}
		
		function check(){
			resetErr();
			if($("#loginname").val()==""){
				$("#nameerr").show();
				$("#nameerr").html("用户名不得为空！");
				$("#loginname").focus();
				return false;
			}
			if($("#password").val()==""){
				$("#pwderr").show();
				$("#pwderr").html("密码不得为空！");
				$("#password").focus();
				return false;
			}
			if($("#code").val()==""){
				$("#codeerr").show();
				$("#codeerr").html("验证码不得为空！");
				$("#code").focus();
				return false;
			}
			return true;
		} */
	</script>
</body>
</html>

users.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"  
    pageEncoding="UTF-8"%>  
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<%  
    String path = request.getContextPath();  
    String basePath = request.getScheme() + "://"  
            + request.getServerName() + ":" + request.getServerPort()  
            + path ;  
%>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>用户列表</title>  
<link rel="stylesheet" type="text/css" href="<c:url value='js/jquery-easyui-1.4.1/themes/gray/easyui.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='js/jquery-easyui-1.4.1/themes/icon.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='js/jquery-easyui-1.4.1/demo/demo.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='js/jquery-easyui-1.4.1/themes/default/easyui.css'/>"/>
<script type="text/javascript" src="<c:url value='js/jquery-easyui-1.4.1/jquery.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='js/jquery-easyui-1.4.1/jquery.easyui.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='js/jquery-easyui-1.4.1/easyloader.js'/>"></script>
<script>  
var page,rows,total
$(function(){  
    $('#dg').datagrid({  
        url:'<%=path%>/easyui/list',  
        columns:[[  
            {field:'userId',title:'用户id',width:100},  
            {field:'loginname',title:'登录名',width:100},  
            {field:'password',title:'密码',width:100},
            {field:'username',title:'用户名',width:100},
            {field:'rights',title:'权限',width:100},
            {field:'status',title:'用户状态',width:100},
            {field:'roleId',title:'角色ID',width:100},
            {field:'lastLogin',title:'最后一次登录的时间',width:100},
        ]],  
        onLoadSuccess:function(data){  
        }  
    });  
});  
<%-- //初始化父datagrid
function initFdataGrid(){
			$("#datalist").datagrid({
				rownumbers:true,
				pagination:true,
				singleSelect:true,
				loadMsg:'数据加载中，请稍等...',
				columns:[[  
				            {field:'userId',title:'用户id',width:100},  
				            {field:'loginname',title:'登录名',width:100},  
				            {field:'password',title:'密码',width:100},
				            {field:'username',title:'用户名',width:100},
				            {field:'rights',title:'权限',width:100},
				            {field:'status',title:'用户状态',width:100},
				            {field:'roleId',title:'角色ID',width:100},
				            {field:'lastLogin',title:'最后一次登录的时间',width:100},
				        ]]
				});
		}
//查询列表页面数据
function getData(){
	var loginname=$("#loginname").val();
	
	$.ajax({
		url:"<%=path%>/easyui/list.do",
		type:"POST",
		async:false,
		data:{"loginname":loginname,"page":page,"rows":rows},
		success:function (rtdata){
			total = rtdata.total;//返回数据总数
			updateJson(rtdata.rows);
			$("#datalist").datagrid("loadData",rtdata);
			
		},
		error:function(){
			$.messager.alert("信息","程序出现未知异常！","error");
		}
	});
}
//查询
function searchUser(){
	page = 1;
	getData();
	initPage();
}

//页面加载完成后，初始化页面
$(function(){
	//初始化datagrid
	initFdataGrid();
	//初始化分页参数
	page = '1';
	rows = '10';
	getData();
	//修改DataGrid分页默认样式
	initPage();
});
//修改DataGrid分页默认样式
function initPage(){
	var pager = $("#datalist").datagrid("getPager");
	pager.pagination({
		total:total,
		pageSize:rows,
		pageNumber:page,
		pageList:[10,20,30,40,50],
		beforePageText:"第",
		afterPageText:"页    共{pages}页",
		displayMsg:"当前显示{from} - {to}条记录     共{total}条记录",
		onSelectPage:function (pageNum,pageSize){
			page = pageNum;
			rows = pageSize;
			//获取数据
			getData();
		},
		onChangePageSize:function(pageSize){
			rows = pageSize;
			//获取数据
			getData();
		}
	});
} --%>

      
</script>  
</head>  
<body>  
    <table id="dg"></table>
    
</body>  
</html>

至此该简单的spring+springmvc+mybatis+jQuery easyUI小项目就完成了，按照上面的步骤，就可以实现。写的不好还请多多担待，如有什么问题，希望大家能够指出来。大家互相学习。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航