java版云笔记（二）

云笔记

　　基本的环境搭建好了，今天做些什么呢，第一是链接数据库（即搭建Spring-Batistas环境），第二是登录预注册。
注：这个项目的sql文件，需求文档，需要的html文件，jar包都可以去下载，下载地址为：http://download.csdn.net/download/liveor_die/9985846

搭建Spring-Batistas环境

　　搭建Spring-Batistas环境的基本流程如下图

这里写图片描述

　　　jar包和配置文件上节课已经添加好了，所一下来我们要配置spring配置文件。

配置spring配置文件

打开cloud_note/src/main/resources/conf/spring-mybatis.xml

这里写图片描述

在配置文件里添加如下代码

	<!-- 配置dbcp组件DataSource -->
	<bean id="dbcp" class="org.apache.commons.dbcp.BasicDataSource">
		<property name="username" value="root"></property>
		<property name="password" value="root"></property>
		<property name="driverClassName"
			value="com.mysql.jdbc.Driver">
		</property>
		<property name="url"
			value="jdbc:mysql://localhost:3306/cloud_note">
		</property>
	</bean>
	<!--配置sqlSessionFactory  -->
	<bean id="ssf" class="org.mybatis.spring.SqlSessionFactoryBean">
		<!-- 注入DataSource -->
		<property name="dataSource" ref="dbcp"></property>
		<!-- 注入映射文件位置 -->
		<property name="mapperLocations" value="classpath:mapper/*.xml"></property>
	</bean>

这些代码主要是链接数据库的，注意吧password的value值该为你自己的mysql密码。

注：也可以把链接数据库的信息写在 db.properties文件中
这个是链接oracle的信信

driver=oracle.jdbc.driver.OracleDriver
url=jdbc:oracle:thin:@localhost:1521:xe
user=system
pwd=root

在spring配置文件的配置

<!-- 配置DataSource -->
	<!-- 读取db.properties文件的内容 -->
	 <util:properties id="jdbc" location="classpath:db.properties"/>
	 <!-- 配置DataSource -->
 	<bean id="ds" class="org.apache.commons.dbcp.BasicDataSource"       
       destroy-method="close">       
 		 <property name="driverClassName" value="#{jdbc.driver}" />      
 		 <property name="url" value="#{jdbc.url}" />      
 		 <property name="username" value="#{jdbc.user}" />      
 		 <property name="password" value="#{jdbc.pwd}" />      
	</bean> 
	<!--配置sqlSessionFactory  -->
	....

登录与注册

这里写图片描述

发送Ajax请求

发送事件：注册按钮的单击
请求参数：用户名、昵称、密码
请求地址：/user/add.do,采用post

服务器端处理
/user/add.do
-->DispatcherServlet
-->HandlerMapping
-->UserRegistController.execute
-->UserService.addUser
-->UserDao.save-->cn_user(插入)
-->返回JSON结果
http://localhost:8080/cloud_note/user/add.do?name=demo&nick=DEMO&password=123456

Ajax回调处理
success成功：提示注册成功;进入登录界面
　　　　失败：提示错误信息
error异常：alert("注册失败");

工具类

在com.tedu.cloudnote.util包中创建工具类
对返回数据的格式化的工具类

public class NoteResult<T>{
	/**
	 * 序列化
	 */
	private static final long serialVersionUID = 1L;
	private int status;
	private String msg;
	private T data;
	//get ,set方法
	....
}

对密码和用户名进行加密的工具类

public class NoteUtil {

	public static String createId() {
		UUID uuid = UUID.randomUUID();
		String id = uuid.toString();
		id = id.replace("-", "");
		return id;
	}

	/**
	 * 密码加密处理（Md5）
	 * @param src 原密码
	 * @return 加密后内容
	 */
	public static String md5(String src) {
		try {
			MessageDigest md = MessageDigest.getInstance("MD5");
			byte[] output = md.digest(src.getBytes());
			// 将加密结果output利用base64转化为字符串
			String ret = Base64.encodeBase64String(output);
			return ret;

		} catch (Exception e) {
			throw new NoteException("密码加密失败", e);
		}
	}
}

异常抛出

public class NoteException extends RuntimeException {

	public NoteException(String msg, Throwable t) {
		super(msg, t);
	}

}

持久层/数据访问层

这里写图片描述

在com.tedu.cloudnote.entity包下创建User.java类
主要代码：

    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;

	//get,set方法
    .....

在com.tedu.cloudnote.dao创建UserDao接口

public interface UserDao {
	public User findByName(String name);

	public void save(User user);
}

业务层

在com.edu.cloudnote.service创建UserService.java接口

public interface UserService {
	// public NoteResult<T> 方法名（根据请求写参数)
	// 登录时的用户名和密码检测
	public NoteResult<User> checkLogin(String name, String password);
	//注册 执行用户名检测
	public NoteResult<Object> addUser(String name, String nick, String password);
}

在com.edu.cloudnote.service创建UserServiceImpl.java实现UserService.java接口

@Controller("userService")
public class UserServiceImpl implements UserService {
	@Resource
	private UserDao userDao;

	public NoteResult<User> checkLogin(String name, String password) {
		// 检测用户名和密码
		NoteResult<User> result = new NoteResult<User>();
		User user = userDao.findByName(name);
		if (user == null) {
			result.setStatus(1);
			result.setMsg("用户名错误");
			return result;
		}
		if (!user.getCn_user_password().equals(NoteUtil.md5(password))) {
			result.setStatus(2);
			result.setMsg("密码错误");
			return result;
		}
		result.setStatus(0);
		result.setMsg("登陆成功");
		result.setData(user);
		return result;
	}

	/**
	 * 注册
	 */
	public NoteResult<Object> addUser(String name, String nick, String password) {
		// 执行用户名检测
		NoteResult<Object> result = new NoteResult<Object>();
		User hasUser = userDao.findByName(name);
		if (hasUser != null) {
			result.setStatus(1);
			result.setMsg("用户名已占用");
			return result;
		}

		User user = new User();
		user.setCn_user_id(NoteUtil.createId());
		user.setCn_user_name(name);
		user.setCn_user_password(NoteUtil.md5(password));//md5加密
		user.setCn_user_nick(nick);
		userDao.save(user);

		result.setStatus(0);
		result.setMsg("注册成功");
		return result;
	}

}

控制层

登录　　/user/login.do
在com.tedu.cloudnote.controller.user创建UserLoginController.java

@Controller
@RequestMapping("/user")
public class UserLoginController {
	@Resource
	private UserService userService;

	@RequestMapping("/login.do")
	@ResponseBody // jsoc输出
	public NoteResult<User> execute(String name, String password) {
		NoteResult<User> result = userService.checkLogin(name, password);
		return result;
	}
}

注册　/user/add.do

@Controller
@RequestMapping("/user")
public class UserRegistController {
	@Resource
	private UserService userService;

	@RequestMapping("/add.do")
	@ResponseBody // json
	public NoteResult<Object> excute(String name, String password, String nick) {
		NoteResult<Object> result = userService.addUser(name, nick, password);
		return result;
	}
}

表现层

登录和注册都在log_in.html页面中，把对应的name改为对应的名字
即对页面的处理，让页面得到控制层给的数据，并表现在页面上，我们用ajax来出里数据
basevalue.js的代码

//改为对应的路径
var path="http://localhost:8090/cloud_note";

login.js的代码

/*
 * 主处理
 */
$(function(){
		//给登录按钮绑定单机事件
		$("#login").click(userLogin);
		//给注册按钮绑定单机事件
		$("#regist_button").click(userRegist);
	});


/**

 * 用户登录
 */
function userLogin(){
	//清除原有消息
	$("#count_span").html("");
	$("#password_span").html("")
	//获取请求
	var name=$("#count").val().trim();
	var password=$("#password").val().trim();
	//检测格式
	var ok=true;
	if(name==""){
		$("#count_span").html("用户名为空");
		ok=false;
	}
	if(password==""){
		$("#password_span").html("密码为空");
		ok=false;
	}
	//通过请求
	if(ok){
		$.ajax({
				url:path+"/user/login.do",
				type:"post",
				data:{"name":name,"password":password},
				dateType:"json",
				success:function(result){
					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("登录失败");
			}
		});
	}
}

function userRegist(){
	//清除提示信息
	$("#warning_1 span").html("");
	$("#warning_2 span").html("");
	$("#warning_3 span").html("");
	//获取请求参数
	var name=$("#regist_username").val().trim();
	var nick=$("#nickname").val().trim();
	var password=$('#regist_password').val().trim();
	var final_password=$("#final_password").val().trim();
	//检查格式
	var ok=true;
	if(name==""){
		$("#warning_1 span").html("用户名为空");
		$("#warning_1").show();
		ok=false;
	}
	if(password==""){
		$("#warning_2 span").html("密码不能为空");
		$("#warning_2").show();
		ok=false;
	}else {
		if(password.length>0 && password.length<6){
			$("#warning_2 span").html("密码长度过小");
			$("#warning_2").show();
			ok=false;
		}
	}
	if(final_password==""){
		$("#warning_3 span").html("确认密码为空");
		$("#warning_3").show();
		ok=false;
	}else if(final_password!=password){
		$("#warning_3 span").html("确认密码不一致");
		$("#warning_3").show();
		ok=false;
	}
	//通过检测
	if(ok==true){
		
		$.ajax({
			url:path+"/user/add.do",
			type:"post",
			data:{"name":name,"nick":nick,"password":password},
			dateType:"json",
			success:function(result){
				if(result.status==0){
					alert(result.msg);
					$("#back").click();
				}else{
					$("#warning_1 span").html(result.msg);
					$("#warning_1").show();
				}
			},
			error:function(){
			alert("注册失败");
			}
		});
	}
}

配置spring文件

打开cloud_note/src/main/resources/conf/spring-mvc.xml
添加如下代码

<!-- 配置handlermapping -->
	<mvc:annotation-driven/>
	<!-- 启动扫描controller -->
	<context:component-scan base-package="com.tedu.cloudnote"/>

配置mapper映射文件

在spring-mybatis.xml文件中添加配置mapper映射文件的位置的配置

<!-- 定义MapperScannerConfigurer -->
	<bean id="mapperScanner" 
class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<property name="basePackage"
			value="com.tedu.cloudnote.dao">
		</property>
		<!-- sqlSessionFactory可以省略不写 -->
		<property name="sqlSessionFactory" 
			ref="ssf">
		</property>
	</bean>

在/cloud_note/src/main/resources/mapper下新建UserMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN"      
 "http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">
<!-- UserDao接口，关于User表的数据库操作  -->
<mapper namespace="com.tedu.cloudnote.dao.UserDao">
    <!-- 根据用户名查找，返回User -->
	<select id="findByName" parameterType="string" resultType="com.tedu.cloudnote.entity.User">
	select * from cn_user
	where cn_user_name=#{name}
	</select>
	<!-- 插入一个用户 -->
	<insert id="save" parameterType="com.tedu.cloudnote.entity.User">
	insert into cn_user
		(cn_user_id,cn_user_name,
		cn_user_password,cn_user_token,
		cn_user_nick)
	values (#{cn_user_id},#{cn_user_name},
		#{cn_user_password},#{cn_user_token},
		#{cn_user_nick})
	</insert>
	
</mapper>

　　这里的jQuery代码比较简单，相信大家都能看懂就不说了，User,UserDao这个大家练习的都比较多都比较容易，大家看起来都容易，我感觉难点主要是json的收发和mapper.xml的书写，json的书写都是固定的模式，大家可以看下我写的关于ａｊａｘ的文章里面有具体的讲解。mapper.xml感觉难估计都是因为刚开始学和ｓｑｌ语句的书写，熟悉后就不存在这个问题了，没看懂的可以在下面留言。

posted @ 2017-09-18 17:12 杨洛平阅读(401) 评论(0) 收藏举报

刷新页面返回顶部

杨立果

我的csdn主页http://blog.csdn.net/Liveor_Die 大家多多指点

java版云笔记（二）

搭建Spring-Batistas环境

配置spring配置文件

登录与注册

工具类

持久层/数据访问层

业务层

控制层

表现层

配置spring文件

配置mapper映射文件

公告