SSM到Spring Boot 从零开发校园商铺平台11-7到11-12 添加平台账号体系讲解及代码的实现

最新推荐文章于 2024-09-20 12:57:33 发布

原创最新推荐文章于 2024-09-20 12:57:33 发布 · 767 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何设计和实现一个平台账号的绑定、修改密码及登录系统，包括DAO层、Service层、Controller层的代码实现，以及前端页面的设计与交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、添加平台账号dao层的开发
- 1.1dao层的LocalAuthDao的代码
- 1.2dao层的LocalAuthDao.xml的代码
二、添加平台账号service层的开发
三、添加平台账号controller层的开发
- 3.1LocalAuthController的代码及讲解
四、添加平台账号前端的实现

一、添加平台账号dao层的开发

1.1dao层的LocalAuthDao的代码

package com.imooc.o2o.dao;

import java.util.Date;

import org.apache.ibatis.annotations.Param;

import com.imooc.o2o.entity.LocalAuth;



public interface LocalAuthDao {

	/**
	 * 通过账号和密码查询对应信息，登录用
	 * @param userName
	 * @param password
	 * @return
	 */
	LocalAuth queryLocalByUserNameAndPwd(@Param("userName") String userName,
			@Param("password") String password);

	/**
	 * 通过用户id查询对应localauth
	 * @param userId
	 * @return
	 */
	LocalAuth queryLocalByUserId(@Param("userId") long userId);

	/**
	 * 添加平台账号
	 * @param localAuth
	 * @return
	 */
	int insertLocalAuth(LocalAuth localAuth);

	/**
	 * 通过userid，username，password更改密码
	 * @param localAuth
	 * @return
	 */
	int updateLocalAuth(@Param("userId") Long userId,
			@Param("userName") String userName,
			@Param("password") String password,
			@Param("newPassword") String newPassword,
			@Param("lastEditTime") Date lastEditTime);
}

1.2dao层的LocalAuthDao.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.imooc.o2o.dao.LocalAuthDao">
	<resultMap type="com.imooc.o2o.entity.LocalAuth" id="localAuthResultMap">
		<id property="localAuthId" column="local_auth_id"/>
		<result property="username" column="username"/>
		<result property="password" column="password"/>
		<result property="createTime" column="create_time"/>
		<result property="lastEditTime" column="last_edit_time"/>
		<association property="personInfo" column="user_id" javaType="com.imooc.o2o.entity.PersonInfo">
			<id property="userId" column="user_id"/>
			<result property="name" column="name"/>
			<result property="gender" column="gender"/>
			<result property="email" column="email"/>
			<result property="profileImg" column="profile_img"/>
			<result property="userType" column="user_type"/>
			<result property="createTime" column="create_time"/>
			<result property="lastEditTime" column="last_edit_time"/>
			<result property="enableStatus" column="enable_status"/>
		</association>
	</resultMap>
	<select id="queryLocalByUserNameAndPwd" parameterType="String" resultMap="localAuthResultMap">
    	SELECT l.local_auth_id,
    	l.username,
    	l.password,
    	l.create_time,
    	l.last_edit_time,
    	p.user_id,
    	p.name,
		p.gender,
		p.email,
		p.profile_img,
		p.user_type,
		p.create_time,
		p.last_edit_time,
		p.enable_status
		FROM tb_local_auth l 
		LEFT JOIN tb_person_info p ON l.user_id =p.user_id
		WHERE l.username =#{userName}
		AND l.password = #{password} 
		</select>
	<select id="queryLocalByUserId" parameterType="long" resultMap="localAuthResultMap">
		SELECT l.local_auth_id,
    	l.username,
    	l.password,
    	l.create_time,
    	l.last_edit_time,
    	p.user_id,
    	p.name,
		p.gender,
		p.email,
		p.profile_img,
		p.user_type,
		p.create_time,
		p.last_edit_time,
		p.enable_status
		FROM tb_local_auth l 
		LEFT JOIN tb_person_info p ON l.user_id =p.user_id
		where l.user_id=#{userId}
	</select>
	<insert id="insertLocalAuth" parameterType="com.imooc.o2o.entity.LocalAuth" 
	keyColumn="local_auth_id" keyProperty="localAuthId" useGeneratedKeys="true">
		INSERT INTO tb_local_auth(username,password,user_id,create_time,last_edit_time)
		VALUES(#{username},#{password},#{personInfo.userId},#{createTime},#{lastEditTime}) 
	</insert>
	<update id="updateLocalAuth">
	update tb_local_auth 
	<set>
	<if test="newPassword != null">password=#{newPassword},</if>
	<if test="lastEditTime != null">last_edit_time=#{lastEditTime}</if>
	</set>
	where user_id=#{userId} AND username=#{userName} AND
	password=#{password} 
	</update>
</mapper>

二、添加平台账号service层的开发

其中的exception和execution的代码就不讲解了，前面已经了解的非常清楚了

2.1接口LocalAuthService的代码及讲解

package com.imooc.o2o.service;

import com.imooc.o2o.dto.LocalAuthExecution;
import com.imooc.o2o.entity.LocalAuth;
import com.imooc.o2o.exceptions.LocalAuthOperationException;

public interface LocalAuthService {
	/**
	 * 通过账号密码获取平台账号信息
	 * @param userName
	 * @return
	 */
	LocalAuth getLocalAuthByUserNameAndPwd(String userName, String password);

	/**
	 * 通过userid获取平台账号信息
	 * @param userId
	 * @return
	 */
	LocalAuth getLocalAuthByUserId(long userId);
	/**
	 * 绑定微信，生成平台专属的账号
	 * @param localAuth
	 * @return
	 * @throws RuntimeException
	 */
	LocalAuthExecution bindLocalAuth(LocalAuth localAuth)
			throws LocalAuthOperationException;

	/**
	 * 修改平台账号的登录密码
	 * @param localAuthId
	 * @param username
	 * @param password
	 * @param newPassword
	 * @param lastEditTime
	 * @return
	 */
	LocalAuthExecution modifyLocalAuth(Long userId, String username,
			String password, String newPassword)
					throws LocalAuthOperationException;
}

2.2接口LocalAuthServiceImpl的代码及讲解

package com.imooc.o2o.service.impl;

import java.util.Date;

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

import com.imooc.o2o.dao.LocalAuthDao;
import com.imooc.o2o.dto.LocalAuthExecution;
import com.imooc.o2o.entity.LocalAuth;
import com.imooc.o2o.enums.LocalAuthStateEnum;
import com.imooc.o2o.exceptions.LocalAuthOperationException;
import com.imooc.o2o.service.LocalAuthService;
import com.imooc.o2o.util.MD5;

@Service
public class LocalAuthServiceImpl implements LocalAuthService {
	@Autowired
	private LocalAuthDao localAuthDao;

	@Override
	public LocalAuth getLocalAuthByUserNameAndPwd(String userName,
			String password) {
		return localAuthDao.queryLocalByUserNameAndPwd(userName, MD5.getMd5(password));
	}

	@Override
	public LocalAuth getLocalAuthByUserId(long userId) {
		return localAuthDao.queryLocalByUserId(userId);
	}
	@Override
	@Transactional
	public LocalAuthExecution bindLocalAuth(LocalAuth localAuth)
			throws LocalAuthOperationException {
		//空值判断，传入的localAuth账号密码，用户信息特别是userid不能为空，否则直接返回错误
		if (localAuth == null || localAuth.getPassword() == null
				|| localAuth.getUsername() == null
				|| localAuth.getPersonInfo() == null
				||localAuth.getPersonInfo().getUserId()==null) {
			return new LocalAuthExecution(LocalAuthStateEnum.NULL_AUTH_INFO);
		}
		//查询此用户是否已绑定过平台账号
		LocalAuth tempAuth = localAuthDao.queryLocalByUserId(localAuth
				.getPersonInfo().getUserId());
		if (tempAuth != null) {
			//如果绑定过则直接退出，以保证平台账号的唯一性
			return new LocalAuthExecution(LocalAuthStateEnum.ONLY_ONE_ACCOUNT);
		}
		try {
			//如果之前没有绑定过平台账号，则创建一个平台账号与该用户绑定
			localAuth.setCreateTime(new Date());
			localAuth.setLastEditTime(new Date());
			//对密码进行md5加密
			localAuth.setPassword(MD5.getMd5(localAuth.getPassword()));
			int effectedNum = localAuthDao.insertLocalAuth(localAuth);
			//判断创建是否成功
			if (effectedNum <= 0) {
				throw new LocalAuthOperationException("帐号绑定失败");
			} else {
				return new LocalAuthExecution(LocalAuthStateEnum.SUCCESS,
						localAuth);
			}
		} catch (Exception e) {
			throw new LocalAuthOperationException("insertLocalAuth error: "
					+ e.getMessage());
		}
	}

	@Override
	@Transactional
	public LocalAuthExecution modifyLocalAuth(Long userId, String userName,
			String password, String newPassword)throws LocalAuthOperationException {
		//非空判断，判断传入的用户id，账号，新旧密码是否为空，新旧密码是否相同
		//若不满足条件则返回错误信息
		if (userId != null && userName != null && password != null
				&& newPassword != null && !password.equals(newPassword)) {
			try {
				//更新密码，并对新密码进行md5加密
				int effectedNum = localAuthDao.updateLocalAuth(userId,
						userName, MD5.getMd5(password),
						MD5.getMd5(newPassword), new Date());
				//判断更新是否成功
				if (effectedNum <= 0) {
					throw new LocalAuthOperationException("更新密码失败");
				}
				return new LocalAuthExecution(LocalAuthStateEnum.SUCCESS);
			} catch (Exception e) {
				throw new LocalAuthOperationException("更新密码失败:" + e.toString());
			}
		} else {
			return new LocalAuthExecution(LocalAuthStateEnum.NULL_AUTH_INFO);
		}
	}

}

2.3MD5的加密

由于不能直接把密码暴露在数据库中和查询出来，所以要进行MD5的加密，使数据更加规范安全

package com.imooc.o2o.util;

import java.security.MessageDigest;

public class MD5 {
   /**
* 对传入的string进行MD5加密
* @param s
* @return
*/
public static final String getMd5(String s){
	//16进制数组
	char hexDigits[] = {
	    '5', '0', '5', '6', '2', '9', '6', '2', '5', 'q',
	'b', 'l', 'e', 's', 's', 'y'
	};
	try{
		char str[];
		//将传入的字符串转换成byte数组
		byte strTemp[] = s.getBytes();
		//获取md5加密对象
		MessageDigest mdTemp = MessageDigest.getInstance("MD5");
		//传入需要加密的目标数组
	    mdTemp.update(strTemp);
	    //获取加密后的数组
	    byte md[] = mdTemp.digest();
	    int j = md.length;
	    str = new char[j * 2];
	    int k = 0;
	    //将数组做位移
	    for (int i = 0; i < j; i++){
	        byte byte0 = md[i];
	        str[k++] = hexDigits[byte0 >>> 4 & 0xf];
	        str[k++] = hexDigits[byte0 & 0xf];
	    }
	    	//转换成string并返回
	    return new String(str);
      }catch(Exception e){
         return null;
      }
	}
	
	public static void main(String[] args) {
		System.out.println(MD5.getMd5("admin"));
			}

}

三、添加平台账号controller层的开发

3.1LocalAuthController的代码及讲解

package com.imooc.o2o.web.local;

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

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.imooc.o2o.dto.LocalAuthExecution;
import com.imooc.o2o.entity.LocalAuth;
import com.imooc.o2o.entity.PersonInfo;
import com.imooc.o2o.enums.LocalAuthStateEnum;
import com.imooc.o2o.service.LocalAuthService;
import com.imooc.o2o.util.CodeUtil;
import com.imooc.o2o.util.HttpServletRequestUtil;

@Controller
@RequestMapping(value="local",method={RequestMethod.GET,RequestMethod.POST})
public class LocalAuthController {
	@Autowired
	private LocalAuthService localAuthService;
	/**
	 * 将用户信息与平台账号绑定
	 * @param request
	 * @return
	 */
	@RequestMapping(value="/bindlocalauth",method=RequestMethod.POST)
	@ResponseBody
	private Map<String,Object> bindLocalAuth(HttpServletRequest request){
		Map<String,Object> modelMap=new HashMap<String,Object>();
		//验证码校验
		if(!CodeUtil.checkVerifyCode(request)){
			modelMap.put("success", false);
			modelMap.put("errmsg", "输入了错误的验证码");
			return modelMap;
		}
		//获取输入的账号
		String userName=HttpServletRequestUtil.getString(request, "userName");
		//获取输入的密码
		String password=HttpServletRequestUtil.getString(request, "password");
		//从session中获取当前用户信息，用户一旦通过微信登录之后，便能获取到用户的信息
		PersonInfo user=(PersonInfo)request.getSession().getAttribute("user");
		//非空判断，要求账号密码以及当前的用户session非空
		if (userName!=null&&password!=null&&user!=null&&user.getUserId()!=null){
			//创建LocalAuth对象并赋值
			LocalAuth localAuth=new LocalAuth();
			localAuth.setUsername(userName);
			localAuth.setPassword(password);
			localAuth.setPersonInfo(user);
			//绑定账号
			LocalAuthExecution le=localAuthService.bindLocalAuth(localAuth);
			if(le.getState()==LocalAuthStateEnum.SUCCESS.getState()){
				modelMap.put("success", true);
				
			}else{
				modelMap.put("success", false);
				modelMap.put("errmsg", le.getStateInfo());
			}
			
		}else{
			modelMap.put("success", false);
			modelMap.put("errmsg", "用户名和密码都不能为空");
		}
		return modelMap;
	}
	/**
	 * 修改密码
	 * @param request
	 * @return
	 */
	@RequestMapping(value="/changelocalpwd",method=RequestMethod.POST)
	@ResponseBody
	private Map<String,Object> changeLocalPwd(HttpServletRequest request){
		Map<String,Object> modelMap=new HashMap<String,Object>();
		//验证码校验
		if(!CodeUtil.checkVerifyCode(request)){
			modelMap.put("success", false);
			modelMap.put("errmsg", "输入了错误的验证码");
			return modelMap;
		}
		//获取账号
		String userName=HttpServletRequestUtil.getString(request, "userName");
		//获取密码
		String password=HttpServletRequestUtil.getString(request, "password");
		//获取新密码
		String newPassword=HttpServletRequestUtil.getString(request, "newPassword");
		//从session中获取当前用户信息，用户一旦通过微信登录之后，便能获取到用户的信息
		PersonInfo user=(PersonInfo)request.getSession().getAttribute("user");
		//非空判断，要求账号新旧密码以及当前的用户session非空，且新旧密码不相同
		if(userName!=null&&password!=null&&newPassword!=null&&user!=null&&user.getUserId()!=null
				&&!password.equals(newPassword)){
			try {
				//查看原先账号，看看与输入的账号是否一致，不一致则认为是非法操作
				LocalAuth localAuth=localAuthService.getLocalAuthByUserId(user.getUserId());
				if(localAuth==null||!localAuth.getUsername().equals(userName)){
					//不一致则直接退出
					modelMap.put("success", false);
					modelMap.put("errmsg", "输入的账号非本次登录的账号");
					return modelMap;
				}
				//修改平台账号的用户密码
				LocalAuthExecution le=localAuthService.modifyLocalAuth(user.getUserId(), 
						userName, password, newPassword);
				if(le.getState()==LocalAuthStateEnum.SUCCESS.getState()){
					modelMap.put("success", true);
					
				}else{
					modelMap.put("success", false);
					modelMap.put("errmsg", le.getStateInfo());
				}
			} catch (Exception e) {
				modelMap.put("success", false);
				modelMap.put("errmsg", e.toString());
				return modelMap;
			}
			
		}else{
			modelMap.put("success", false);
			modelMap.put("errmsg", "请输入密码");
		}
		return modelMap;
	}
	
	@RequestMapping(value="/logincheck",method=RequestMethod.POST)
	@ResponseBody
	private Map<String,Object> logincheck(HttpServletRequest request){
		Map<String,Object> modelMap=new HashMap<String,Object>();
		//获取是否需要进行验证码校验的标识符
		boolean needVerify=HttpServletRequestUtil.getBoolean(request, "needVerify");
		if(needVerify&&!CodeUtil.checkVerifyCode(request)){
			modelMap.put("success", false);
			modelMap.put("errmsg", "输入了错误的验证码");
			return modelMap;
		}
		//获取输入的账号
		String userName=HttpServletRequestUtil.getString(request, "userName");
		//获取输入的密码
		String password=HttpServletRequestUtil.getString(request, "password");
		//非空校验
		if(userName!=null &&password!=null){
			//传入账号和密码去获取平台账号信息
			LocalAuth localAuth=localAuthService.getLocalAuthByUserNameAndPwd(userName, password);
			if(localAuth!=null){
				//若能取到账号信息则登录成功
				modelMap.put("success", true);
				//同时在session里设置用户信息
				request.getSession().setAttribute("user", localAuth.getPersonInfo());
			}else{
				modelMap.put("success", false);
				modelMap.put("errmsg", "用户名或密码错误");
			}
		}else{
			modelMap.put("success", false);
			modelMap.put("errmsg", "用户名和密码均不能为空");
		}
		return modelMap;
	}
	/**
	 * 当用户点击登出按钮时注销session
	 * @param request
	 * @return
	 */
	@RequestMapping(value="logout",method=RequestMethod.POST)
	@ResponseBody
	private Map<String,Object> logout(HttpServletRequest request){
		Map<String,Object> modelMap=new HashMap<String,Object>();
		//将用户session置为空
		request.getSession().setAttribute("user", null);
		modelMap.put("success", true);
		return modelMap;
	}
}

四、添加平台账号前端的实现

4.1绑定微信页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>登录</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
</head>
<body>
	<header class="bar bar-nav">
		<h1 class="title">绑定微信</h1>
	</header>
	<div class="content">
		<div class="list-block">
			<ul>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-name"></i>
						</div>
						<div class="item-inner">
							<div class="item-input">
								<input type="text" id="username" placeholder="用户名">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-email"></i>
						</div>
						<div class="item-inner">
							<div class="item-input">
								<input type="password" id="psw" placeholder="密码">
							</div>
						</div>
					</div>
				</li>
				<li id="verifyPart">
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-email"></i>
						</div>
						<div class="item-inner">
							<label for="j_captcha" class="item-title label">验证码</label> <input
								id="j_captcha" name="j_captcha" type="text"
								class="form-control in" placeholder="验证码" />
							<div class="item-input">
								<img id="captcha_img" alt="点击更换" title="点击更换"
									"changeVerifyCode(this)" src="../Kaptcha" />
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="content-block">
			<div class="row">
				<div class="col-50">
					<a href="#" "javascript :history.back(-1);"
						class="button button-big button-fill button-danger">返回</a>
				</div>
				<div class="col-50">
					<a href="#" class="button button-big button-fill" id="submit">提交</a>
				</div>
			</div>
		</div>
	</div>

	<script type='text/javascript'
		src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='../resources/js/common/common.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='../resources/js/local/accountbind.js' charset='utf-8'></script>
</body>
</html>

js代码

$(function() {
	//绑定账号的controller URL
	var bindUrl = '/o2o/local/bindlocalauth';
	//从地址栏的URL里获取usertype
	//usertype=1则为前端展示系统，其余为店家管理系统
	var  usertype=getQueryString('usertype');
	$('#submit').click(function() {
		//获取输入的账号
		var userName = $('#username').val();
		//获取输入的密码
		var password = $('#psw').val();
		//获取输入的验证码
		var verifyCodeActual = $('#j_captcha').val();
		var needVerify = false;
		if (!verifyCodeActual) {
			$.toast('请输入验证码！');
			return;
		}
		//访问后台绑定账号
		$.ajax({
			url : bindUrl,
			async : false,
			cache : false,
			type : "post",
			dataType : 'json',
			data : {
				userName : userName,
				password : password,
				verifyCodeActual : verifyCodeActual
			},
			success : function(data) {
				if (data.success) {
					$.toast('绑定成功！');
					if(usertype==1){
						//若用户在前端展示系统页面则自动退回到前端展示系统首页
						window.location.href='/o2o/frontend/index';
					}else{
						//若用户在店家管理系统页面则自动退回到店家管理系统首页
						window.location.href='/o2o/shopadmin/shoplist';
					}
				} else {
				  $.toast('绑定失败！');
				  $('#captcha_img').click();
				}
			}
		});
	});
});

4.2修改密码页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>修改密码</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
</head>
<body>
	<header class="bar bar-nav">
		<h1 class="title">修改密码</h1>
	</header>
	<div class="content">
		<div class="list-block">
			<ul>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-name"></i>
						</div>
						<div class="item-inner">
							<div class="item-input">
								<input type="text" placeholder="用户名" id="userName">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-email"></i>
						</div>
						<div class="item-inner">
							<div class="item-input">
								<input type="password" placeholder="原密码" id="password">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-email"></i>
						</div>
						<div class="item-inner">
							<div class="item-input">
								<input type="password" placeholder="新密码" id="newPassword">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-email"></i>
						</div>
						<div class="item-inner">
							<div class="item-input">
								<input type="password" placeholder="确认密码" id="confirmPassword">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-email"></i>
						</div>
						<div class="item-inner">
							<label for="j_captcha" class="item-title label">验证码</label> <input
								id="j_captcha" name="j_captcha" type="text"
								class="form-control in" placeholder="验证码" />
							<div class="item-input">
								<img id="captcha_img" alt="点击更换" title="点击更换"
									"changeVerifyCode(this)" src="../Kaptcha" />
							</div>
						</div>
					</div>
				</li>

			</ul>
		</div>
		<div class="content-block">
			<div class="row">
				<div class="col-50">
					<a href="#" class="button button-big button-fill button-danger"
						id="back">返回登录</a>
				</div>
				<div class="col-50">
					<a href="#" class="button button-big button-fill" id="submit">提交</a>
				</div>
			</div>
		</div>
	</div>



	<script type='text/javascript'
		src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='../resources/js/common/common.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='../resources/js/local/changepsw.js'
		charset='utf-8'></script>
</body>
</html>

js代码

$(function() {
	//修改平台密码的controller  URL
	var url = '/o2o/local/changelocalpwd';
	//从地址栏的URL里获取usertype
	//usertype=1则为前端展示系统，其余为店家管理系统
	var  usertype=getQueryString('usertype');
	$('#submit').click(function() {
		//获取账号
		var userName = $('#userName').val();
		//获取原密码
		var password = $('#password').val();
		//获取新密码
		var newPassword = $('#newPassword').val();
		var confirmPassword=$('#confirmPassword').val();
		if(newPassword!=confirmPassword){
			$.toast('两次输入的新密码不一致');
			return;
		}
		//添加表单数据
		var formData = new FormData();
		formData.append('userName', userName);
		formData.append('password', password);
		formData.append('newPassword', newPassword);
		//获取验证码
		var verifyCodeActual = $('#j_captcha').val();
		if (!verifyCodeActual) {
			$.toast('请输入验证码！');
			return;
		}
		formData.append("verifyCodeActual", verifyCodeActual);
		//将参数post到后台去修改密码
		$.ajax({
			url : url,
			type : 'POST',
			data : formData,
			contentType : false,
			processData : false,
			cache : false,
			success : function(data) {
				if (data.success) {
					$.toast('绑定成功！');
					if(usertype==1){
						//若用户在前端展示系统页面则自动退回到前端展示系统首页
						window.location.href='/o2o/frontend/index';
					}else{
						//若用户在店家管理系统页面则自动退回到店家管理系统首页
						window.location.href='/o2o/shopadmin/shoplist';
					}
				} else {
					$.toast('提交失败！'+data.errMsg);
					$('#captcha_img').click();
				}
			}
		});
	});

	$('#back').click(function() {
		window.location.href = '/o2o/shopadmin/shoplist';
	});
});

4.3登录页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>登录</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
</head>
<body>
	<header class="bar bar-nav">
		<h1 class="title">登录</h1>
	</header>
	<div class="content">
		<div class="list-block">
			<ul>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-name"></i>
						</div>
						<div class="item-inner">
							<div class="item-input">
								<input type="text" id="username" placeholder="用户名">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-email"></i>
						</div>
						<div class="item-inner">
							<div class="item-input">
								<input type="password" id="psw" placeholder="密码">
							</div>
						</div>
					</div>
				</li>
				<li id="verifyPart" hidden="true">
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-email"></i>
						</div>
						<div class="item-inner">
							<label for="j_captcha" class="item-title label">验证码</label> <input
								id="j_captcha" name="j_captcha" type="text"
								class="form-control in" placeholder="验证码" />
							<div class="item-input">
								<img id="captcha_img" alt="点击更换" title="点击更换"
									"changeVerifyCode(this)" src="../Kaptcha" />
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="content-block">
			<div class="row">
				<div class="col-100">
					<a href="#" class="button button-big button-fill" id="submit">登录</a>
				</div>
			</div>
		</div>
	</div>

	<script type='text/javascript'
		src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='../resources/js/common/common.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='../resources/js/local/login.js' charset='utf-8'></script>
</body>
</html>

js代码

$(function() {
	//登录验证的controller URL
	var loginUrl='/o2o/local/logincheck';
	//从地址栏的URL里获取usertype
	//usertype=1则为customer其余为shopowner
	var usertype=getQueryString('usertype');
	//登录次数，累计登录三次失败之后，自动弹出验证码要求输入
	var loginCount=0;
	$('#submit').click(function(){
		//获取输入的账号
		var userName = $('#username').val();
		//获取输入的密码
		var password = $('#psw').val();
		//获取输入的验证码
		var verifyCodeActual = $('#j_captcha').val();
		//是否需要验证码验证，默认为false既不需要
		var needVerify = false;
		if(loginCount>=3){
			if (!verifyCodeActual) {
				$.toast('请输入验证码！');
				return;
			}else{
				needVerify=true;
			}
		}
		//访问后台绑定账号
		$.ajax({
			url : loginUrl,
			async : false,
			cache : false,
			type : "post",
			dataType : 'json',
			data : {
				userName : userName,
				password : password,
				verifyCodeActual : verifyCodeActual,
				//是否需要做验证码校验
				needVerify:needVerify
			},
			success:function(data){
				if(data.success){
					$.toast("登录成功！");
					if(usertype==1){
						window.location.href='/o2o/frontend/index';
					}else{
						window.location.href='/o2o/shopadmin/shoplist';
					}
				}else{
					$.toast('登录失败！'+data.errMsg);
					loginCount++;
					if(loginCount>=3){
						//登录失败三次，需要做验证码校验
						$('#verifyPart').show();
					}
				}
			}
		});
		
	});
});