java版云笔记(二)

来源:互联网 发布:linux服务器编程 知乎 编辑:程序博客网 时间:2024/06/09 23:33

云笔记

  基本的环境搭建好了,今天做些什么呢,第一是链接数据库(即搭建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.OracleDriverurl=jdbc:oracle:thin:@localhost:1521:xeuser=systempwd=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的书写都是固定的模式,大家可以看下我写的关于ajax的文章里面有具体的讲解。mapper.xml感觉难估计都是因为刚开始学和sql语句的书写,熟悉后就不存在这个问题了,没看懂的可以在下面留言。