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感觉难估计都是因为刚开始学和ｓｑｌ语句的书写，熟悉后就不存在这个问题了，没看懂的可以在下面留言。