note_cloud--登录功能

登录功能

一、自定义的工具类

将返回结果封装成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 -->
<scri
4000
pt 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("登录失败");}
});
}
}

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

界面如下：