云笔记

标签：技术分享   word   博客   哪些   http   pass   blog   调用   pre   

项目简介

笔记管理系统,用户可以管理笔记信息,可以查看
其他用户分享的笔记.

主要功能如下

• 用户模块：登录、注册、修改密码、退出
• 笔记本模块：创建、删除、更新、查看
• 笔记模块：创建、删除、更新、查看、转移
• 分享和收藏模块：分享、收藏、查看、搜索分享
• 回收站模块：查看、彻底删除、恢复
• 活动模块：查看活动、参加活动等

项目整体设计

使用的主要技术

jQuery、Ajax、SpringMVC、IOC、AOP、MyBatis

• jQuery:简化前端javascript和ajax编程
• Ajax:页面局部处理;提升用户体验和性能
• SpringMVC:负责接收请求,调用业务组件处理,
  将结果生成JSON响应输出
• SpringIOC:负责管理Controller,Service,Dao；维护这些组件对象之间的关系
• MyBatis:负责实现数据库操作,实现Dao
• SpringAOP:负责事务和异常日志功能切入。
  （不用修改原有组件代码，就可以追加功能）

项目整体规范

-所有请求采用Ajax方式交互
（使用$.ajax()函数）
-系统页面全部采用HTML
（替代JSP+JSTL+EL）
-所有请求服务器处理完返回的JSON结果格式
如下

{"status":xx,"msg":xxx,"data":xxx}

　　表现层--》控制层--》业务层--》持久层/数据访问层
　　HTML(ajax)-->Controller-->Service-->Dao

响应流程

Ajax+SpringMVC+Spring(IOC/AOP)+MyBatis
Ajax-->SpringMVC-->返回JSON结果

JSP响应流程

请求-->DispatcherServlet--> HandlerMapping--> Controller-- 返回ModelAndView/String--> ViewResolver--> JSP -->响应

JSON响应流程

请求-->DispatcherServlet--> HandlerMapping--> Controller--> 返回数据对象(int,User,List,Map)--> 引入jackson包,在Controller方法前添加@ResponseBody标记--> JSON响应

搭建环境

创建mysql数据库，名字为：cloud_note，编码格式为utf-8

数据库文件下载地址：

mysql常用数据库语句

• show databases;//查看有哪些库
• use 库名;//使用某个库
• show tables;//查看库里有哪些表
• desc 表名;//查看表结构
• source sql文件;//导入sql文件
• 导入项目数据库步骤

-set names utf8;

-source D:\cloud_note.sql;

详细的关于mysql的sql可以看我的关于mysql的博客。

创建maven web项目

项目名字为：cloud_note

需要引入的包

• spring-webmvc包
• mybatis包
• dbcp包+MySQL驱动包
• jackson包
• mybatis-spring.jar
• junit包

搭建Spring-Batistas环境

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

登录与注册

发送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("注册失败");

持久层/数据访问层

表现层

登录和注册都在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("注册失败");
            }
        });
    }
}

云笔记

标签：技术分享   word   博客   哪些   http   pass   blog   调用   pre   

原文地址：http://www.cnblogs.com/anstoner/p/7580922.html