云笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了云笔记相关的知识,希望对你有一定的参考价值。

项目简介

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

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

项目整体设计

使用的主要技术

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



























以上是关于云笔记的主要内容,如果未能解决你的问题,请参考以下文章

[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段

JAVA如何往有道云笔记里写入笔记

sh bash片段 - 这些片段大多只是我自己的笔记;我找到了一些,有些我已经找到了

.NET 云原生架构师训练营(权限系统 代码实现 WebApplication)--学习笔记

Java笔记---通过nginx和FileZilla部署代码到云服务器

尝试获取 Firebase 云数据库数据并将其显示在 RecyclerView 中的片段中