note_cloud--登录功能

最新推荐文章于 2017-08-15 15:17:03 发布

荒--

最新推荐文章于 2017-08-15 15:17:03 发布

阅读量1.5k

点赞数

分类专栏：项目cloud_note

本文链接：https://blog.csdn.net/wangqing84411433/article/details/76075586

版权

项目cloud_note 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

登录功能

一、自定义的工具类

将返回结果封装成NoteResult

package cn.tedu.cloud_note.util;

import java.io.Serializable;

public class NoteResult<T> implements Serializable{
	/**
	 * 状态属性:0表示成功
	 * 1或其他值表示失败
	 */
	private int status;
	/**
	 * 返回提示信息
	 */
	private String msg;
	/**
	 * 服务器处理成功,返回JSON数据
	 */
	private T data;
	public int getStatus() {
		return status;
	}
	public void setStatus(int status) {
		this.status = status;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	public T getData() {
		return data;
	}
	public void setData(T data) {
		this.data = data;
	}
	@Override
	public String toString() {
		return "NoteResult [status=" + status + ", msg=" + msg + ", data=" + data + "]";
	}
	
}

------------------------------------------------------------------------------------------------------------------------

加密处理密码

package cn.tedu.cloud_note.util;

import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.UUID;

import org.apache.commons.codec.binary.Base64;

public class NoteUtil {
	public static String md5(String src){
		try {
			//获取MD5对象
			MessageDigest md = MessageDigest.getInstance("MD5");
			//加密处理
			byte[] output = md.digest(src.getBytes());
			//利用Base64转换成字符串结果
			String str = Base64.encodeBase64String(output);
			return str;
		} catch (NoSuchAlgorithmException e) {
			e.printStackTrace();
			throw new RuntimeException("加密失败",e);
		}
	}
	
	/**
	 * 生成UUID
	 * java中的UUID为36位不重复字符串(32位+4个"-"号)
	 * 数据库中也有UUID为362位不重复字符串
	 * 一般用于主键
	 */
	public static String createId(){
		UUID uuid = UUID.randomUUID();
		return uuid.toString();
	}
	
	//测试
	public static void main(String[] args) {
		System.out.println("密码123456加密后:"+md5("123456"));
		System.out.println(md5("123456").length());
		System.out.println("自动生成UUID主键:"+createId());
		System.out.println(createId().length());
	}
}

---------------------------------------------------------------------------------------------------------------------------------

实体类

package cn.tedu.cloud_note.entity;

import java.io.Serializable;
/**
 * 类属性和类型与数据库中表cn_user字段名以及数据类型保持一致 
 *
 */
public class User implements Serializable {
	private String cn_user_id; 
	private String cn_user_name; 
	private String cn_user_password; 
	private String cn_user_token; 
	private String cn_user_nick;
	public String getCn_user_id() {
		return cn_user_id;
	}
	public void setCn_user_id(String cn_user_id) {
		this.cn_user_id = cn_user_id;
	}
	public String getCn_user_name() {
		return cn_user_name;
	}
	public void setCn_user_name(String cn_user_name) {
		this.cn_user_name = cn_user_name;
	}
	public String getCn_user_password() {
		return cn_user_password;
	}
	public void setCn_user_password(String cn_user_password) {
		this.cn_user_password = cn_user_password;
	}
	public String getCn_user_token() {
		return cn_user_token;
	}
	public void setCn_user_token(String cn_user_token) {
		this.cn_user_token = cn_user_token;
	}
	public String getCn_user_nick() {
		return cn_user_nick;
	}
	public void setCn_user_nick(String cn_user_nick) {
		this.cn_user_nick = cn_user_nick;
	}
	@Override
	public String toString() {
		return "User [cn_user_id=" + cn_user_id + ", cn_user_name=" + cn_user_name + ", cn_user_password="
				+ cn_user_password + ", cn_user_token=" + cn_user_token + ", cn_user_nick=" + cn_user_nick + "]";
	}
	
}

---------------------------------------------------------------------------------------------------------------------------------

dao接口（映射器）

package cn.tedu.cloud_note.dao;

import org.springframework.stereotype.Repository;

import cn.tedu.cloud_note.entity.User;

@Repository
public interface UserDao {
	public User findByName(String name);
}

---------------------------------------------------------------------------------------------------------------------------------

业务层接口

package cn.tedu.cloud_note.service;

import cn.tedu.cloud_note.entity.User;
import cn.tedu.cloud_note.util.NoteResult;

public interface UserService {
	//检登录验证
	public NoteResult<User> checkLogin(String name,String pasword);
}

业务层实现类

package cn.tedu.cloud_note.service;

import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import cn.tedu.cloud_note.dao.UserDao;
import cn.tedu.cloud_note.entity.User;
import cn.tedu.cloud_note.util.NoteResult;
import cn.tedu.cloud_note.util.NoteUtil;
@Service("userService")
public class UserServiceImpl implements UserService {
	
	@Resource(name="userDao")
	private UserDao userDao;
	
	//检登录验证
	public NoteResult<User> checkLogin(String name, String password) {
		//接收结果数据,并封装数据库返回的结果
		NoteResult<User> result = new NoteResult<User>();
		//按照参数name查询数据库
		User user = userDao.findByName(name);
		//用户名检测
		if(user == null){//用户名不存在
			result.setStatus(1);
			result.setMsg("用户名不存在");
			return result;
		}
		//用户名存在,检测密码
		String md5Password = NoteUtil.md5(password);//加密
		if(!user.getCn_user_password().equals(md5Password)){//密码不正确
			result.setStatus(2);
			result.setMsg("密码错误");
			return result;
		}
		//用户名和密码都正确
		result.setStatus(0);
		result.setMsg("登录成功");
		result.setData(user);
		return result;
	}
	
}

---------------------------------------------------------------------------------------------------------------------------------

控制层

package cn.tedu.cloud_note.controller;

import javax.annotation.Resource;

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

import cn.tedu.cloud_note.entity.User;
import cn.tedu.cloud_note.service.UserService;
import cn.tedu.cloud_note.util.NoteResult;

@Controller
@RequestMapping("/user")//匹配请求路径
public class UserLoginController {
	@Resource(name="userService")
	private UserService service;
	
	@RequestMapping("/login.do")//匹配请求路径
	@ResponseBody//JSON输出
	public NoteResult<User> execute(String name,String password){
		NoteResult<User> result = service.checkLogin(name, password);
		return result;
	}
	//测试Controller使用localhost:8080/cloud_note/user/login.do?name=demo&password=123456
}

=============================================================================

登录页面极其js引用

登录页面html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles/login.css" />
<!-- 引入jQuery -->
<script type="text/javascript" src="scripts/jquery.min.js"></script> <!-- jQuery -->
<script type="text/javascript" src="scripts/basevalue.js"></script>  <!-- 路径path -->
<script type="text/javascript" src="scripts/cookie_util.js"></script><!-- cookie -->
<script type="text/javascript" src="scripts/login.js"></script>      <!-- 登录 -->
<script type="text/javascript">
  //主处理
  $(function(){//加载完body后调用该函数
	  //处理登录
	  $("#login").click(userLogin);
  });


</script>
</head>
<body>
	<div class="global">
		<div class="log log_in" tabindex='-1' id='dl'>
			<dl>
				<dt>
					<div class='header'>
						<h3>登 录</h3>
					</div>
				</dt>
				<dt></dt>
				<dt>
					<div class='letter'>
						用户名: <input type="text" name="" id="count" tabindex='1' />
						<span id="count_span"></span>
					</div>
				</dt>
				<dt>
					<div class='letter'>
						密   码: <input type="password" name=""
							id="password" tabindex='2' />
						<span id="password_span"></span>
					</div>
				</dt>
				<dt>
					<div>
						<input type="button" name="" id="login" 
							value=' 登 录 ' tabindex='3' /> 
						<input type="button" name="" id="sig_in" 
							value=' 注 册 ' tabindex='4' />
					</div>
				</dt>
			</dl>
		</div>
		<div class="sig sig_out" tabindex='-1' id='zc'
			style='visibility: hidden;'>
			<dl>
				<dt>
					<div class='header'>
						<h3>注 册</h3>
					</div>
				</dt>
				<dt></dt>
				<dt>
					<div class='letter'>
						用户名: <input type="text" name="" id="regist_username" tabindex='5' />
						<div class='warning' id='warning_1'>
							<span>该用户名不可用</span>
						</div>
					</div>
				</dt>
				<dt>
					<div class='letter'>
						昵   称: <input type="text" name=""
							id="nickname" tabindex='6' />
					</div>
				</dt>
				<dt>
					<div class='letter'>
						密   码: <input type="password" name=""
							id="regist_password" tabindex='7' />
						<div class='warning' id='warning_2'>
							<span>密码长度过短</span>
						</div>
					</div>
				</dt>
				<dt>
					<div class='password'>
						   确认密码: <input type="password" name=""
							id="final_password" tabindex='8' />
						<div class='warning' id='warning_3'>
							<span>密码输入不一致</span>
						</div>
					</div>
				</dt>
				<dt>
					<div>
						<input type="button" name="" id="regist_button"
							value=' 注 册 ' tabindex='9' /> <input type="button"
							name="" id="back" value=' 返 回 ' tabindex='10' />
						<script type="text/javascript">
							function get(e) {
								return document.getElementById(e);
							}
							get('sig_in').onclick = function() {
								get('dl').className = 'log log_out';
								get('zc').className = 'sig sig_in';
							}
							get('back').onclick = function() {
								get('zc').className = 'sig sig_out';
								get('dl').className = 'log log_in';
							}
							window.onload = function() {
								var t = setTimeout(
										"get('zc').style.visibility='visible'",
										800);
								get('final_password').onblur = function() {
									var npassword = get('regist_password').value;
									var fpassword = get('final_password').value;
									if (npassword != fpassword) {
										get('warning_3').style.display = 'block';
									}
								}
								get('regist_password').onblur = function() {
									var npassword = get('regist_password').value.length;
									if (npassword<6&&npassword>0) {
										get('warning_2').style.display = 'block';
									}
								}
								get('regist_password').onfocus = function() {
									get('warning_2').style.display = 'none';
								}
								get('final_password').onfocus = function() {
									get('warning_3').style.display = 'none';
								}
							}
						</script>
					</div>
				</dt>
			</dl>
		</div>
	</div>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------

引入的js代码

basevalue.js

var path = "http://localhost:8080/cloud_note";

---------------------------------------------------------------------------------------------------------------------------------

cookie_util.js

//objValue对应cn_user_id
function addCookie(objName,objValue,objHours){      //添加cookie

    var str = objName + "=" + escape(objValue);		//escape用来编码字符串

    if(objHours > 0){                               //为时不设定过期时间，浏览器关闭时cookie自动消失
        var date = new Date();
        var ms = objHours*3600*1000;
        date.setTime(date.getTime() + ms);
        str += "; expires=" + date.toGMTString();	//expires:期满
        /*
        toGMTString()函数用于以字符串的形式返回一个日期。该字符串的格式基于格林尼治标准时间(GMT);
		该函数属于Date对象，所有主流浏览器均支持该函数
        */
   }
   document.cookie = str;
}

---------------------------------------------------------------------------------------------------------------------------------
login.js

//登录的js代码
function userLogin(){
	  // 获取用户名和密码
	  var name = $("#count").val().trim();
	  var password = $("#password").val().trim();
	  // 清空span里面的内容
	  $("#count_span").html("");
	  $("#password_span").html("");
	  // 格式检测
	  var ok = true;
	  if(name==""){
		  $("#count_span").html("用户名不能为空");
		  ok = false;
	  }
	  if(password==""){
		  $("#password_span").html("密码不能为空");
		  ok = false;
	  }
	  // 检测格式通过-发送ajax请求--path由js引入
	  if(ok){
		  $.ajax({
			  url:path + "/user/login.do",
		  type:"post",
		  data:{"name":name,"password":password},
		  dataType:"json",
		  success:function(result){
			  // result是服务器返回的JSON结果
			  if(result.status == 0){// 登陆成功,将用户信息保存到cookie
				  var userId = result.data.cn_user_id;
			  
			  addCookie("userId", userId, 2);
			  window.location.href = "edit.html";
			  }else if(result.status == 1){
				  $("#count_span").html(result.msg);
			  }else if(result.status == 2){
				  $("#password_span").html(result.msg);
			  }
		  },
		  error:function(){alert("登录失败");}
			  });
	  }
  }

------------------------------------------------------------------------------------

界面如下：

荒--

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
note_cloud--登录功能

登录功能一、自定义的工具类将返回结果封装成NoteResultpackage cn.tedu.cloud_note.util;import java.io.Serializable;public class NoteResult implements Serializable{ /** * 状态属性:0表示成功 * 1或其他值表示失败 */ private
复制链接

扫一扫