【CSDN】Spring+Spring MVC+Mybatis实战项目之云笔记项目

【CSDN】Spring+Spring MVC+Mybatis实战项目之云笔记项目----mind_programmonkey

这是一篇在mind_programmonkey云笔记项目基础上的自学笔记

项目说明与源码出自原作者

项目说明

【实战】Spring+Spring MVC+Mybatis实战项目之云笔记项目

一、项目简介

img

1. 项目概述

云笔记，是tmocc上的一个子项目，用于客户进行在线学习记录，分享，收藏笔记，以及参与社区活动。

2. 模块划分

用户模块：登录、注册、修改密码、退出

笔记本模块:创建、删除、更新、查看

笔记模块：创建、删除、更新、查看、转义

分享/收藏模块：分享、收藏、查看、搜索

回收模块：查看、彻底删除、恢复

活动模块：查看活动、参加活动

3. 设计思想

MVC设计思想

表现层：html+css+Jquery+ajax

控制层：springmvc

业务层;service组件

持久层：Dao组件

4. 技术架构

（1）开发环境：windows10+tomcat+mysql

（2）采用技术：java+jquery+ajax+springmvc

IOC+AOP+mybatis

java：开发核心技术

jquery：简化前端JavaScript（$对象和API）

ajax：局处理页面，提升用户体验度

springmvc：负责接收请求，调用业务组件处理，生成json响应

spring(IOC/AOP):管理相关组件

IOC:负责管理Controller/service/dao，维护它们之间的关系

AOP：面向切面编程，不修改原有的代码，给系统增加新的功能

5. 整体规范

-所有的请求ajax方法访问

-前端页面采用HTML

-请求结果进行JSON相应

{status:,“msg”:,“data”：}

 

二、数据库构建

1. 常用命令

show databases;//查看有哪些数据库

create database cloud_note;//创建数据库

drop database cloud_note;删除数据库

use 数据库名 ;连接数据库

show tables;查看有哪些表

source ;导入sql文件

2. 数据表联系

数据库表联系

三、项目流程

SSM框架：springMVC+spring+Mybatis

 

 

（一）创建云笔记项目环境

1.**导包**

img

2.**添加配置文件**

img

+

web.xml

3. 划分包结构

-com.lcz.cloud_note.dao：接口层

-com.lcz.cloud_note.service：服务层

-com.lcz.cloud_note.controller：控制层

-com.lcz.cloud_note.entity:实体层

-com.lcz.cloud_note.util:工具层

-com.lcz.cloud_note.aspect:切面层

4. 将html目录下的内容拷贝到webapp下

 

 

 

四、功能实现

（一）、登录功能

img

 

1. 发送ajax请求

事件绑定

获取参数

$.ajax发送请求

2. 服务器处理

请求

-->DispatcherServlet->HandlerMapping->Controller.execute()->Service->Dao->cn_user->返回数据

3.ajax 回调处理

成功：edit.html

失败：提示信息，重新登录

 

（二）、注册功能

img

1. 发送ajax请求

-发送事件：注册按钮的点击

-获取的参数：用户名 昵称 密码

-请求地址： /user/register.do

2. 服务器处理

请求

-->DispatcherServlet->

HandlerMapping->

Controller.execute()->

Service(addUser)->

//检查用户

user=findByNam(name)

user!=null

result

//添加用户

处理password

user.set()

save(user)

//设置result

Dao->cn_user(insert)->json响应

3.ajax 回调处理

success:

注册成功

注册失败

error(异常):

 

知识点：

UUID：是一个生成字符串算法，用于生成数据库主键

生成主键有两种方式：在应用服务器端生成主键；在数据库端生成主键

 

 

（三）、笔记本列表显示功能

img

1. 发送ajax请求

发送事件：进入到edit.html发送请求

请求参数：userId

请求地址:/book/loadBooks.do

2. 服务器处理

/book/loadBooks.do

-->LoadBooksController.execute

-->BookService.LoadUserBooks

1.BookService接口 loadUserBooks

2.实现类里面调用dao.findByUserId

3.实现类中构建Result结果

-->BookDao.findByUserId

1.dao接口定义findByUserId

2.配置BookMapper.xml

-->cn_notebook

-->JSON响应

3.ajax 回调处理

解析JSON数据。循环生成笔记本列表项（li）

知识点：

事件绑定：

静态绑定---> 元素.click(function(){})

动态绑定---> 父元素.on("click","li",fn)

 

（四）、笔记列表显示

img

1. 发送ajax请求

-发送事件：笔记本li的点击

-请求的参数：笔记本的ID

-请求地址：/note/loadnote.do

2. 服务器的处理

/note/loadnote.do

->LoadNoteController.execute

 

->NoteService.loadBookNotes

//定义接口文件NoteService->loadBookNotes(bookId)

//实现类中重写抽象方法

noteDao.findByBookId();

//构建Result-->set方法

setData=List<Map>

->NoteDao.findByBookId(bookId)

//接口文件定义方法

//配置mapper文件

//TestNoteDao

->cn_note(select-bookId&cn_note_status_id="1")

 

3.ajax 回调的处理

success:解析json数据。生成笔记Li,添加到笔记列表中

error：提示alert("笔记加载失败")

 

知识点：

Dao接口的传值特点：mybatis中Dao方法要么没有参数，要么一个参数。

//获取笔记信息

var notes=result.data;//(List集合中存储)

//清除原来的列表信息

$("#note_ul").empty();

 

（五）、显示笔记数据

img

1 、发送ajax请求

#发送事件：笔记列表li元素的单击事件(动态绑定)

#请求参数:笔记ID（noteId）

#请求地址：/note/load.do

2. 服务器处理

-Controller：LoadNoteController.execute(String noteId)

-Service：NoteService.loadNote(String noteId)

-Dao：NoteDao.findByNoteId(Strign noteId)

-cn_note(查询):

-json响应

 

3.ajax 回调处理

-succes:

-设置笔记标题(title)

-设置笔记内容(body)

um.setContent(“str”);

um.getContent（“str”）;

-error：alert（“笔记信息加载失败”）

知识点：UEdit

用js开发的开源组件

为什么？

通过js代码实现表单功能的增强

如何用？

1. 引用脚本

<!-- Ueditor编辑器JS -->

<script type="text/javascript" charset="utf-8" src="scripts/common/ue/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/common/ue/umeditor.min.js"></script>
<script type="text/javascript"

src="scripts/common/ue/lang/zh-cn.js"></script>

2. 实例化

//实例化Ueditor编辑器

var um = UM.getEditor('myEditor');

3. 通过script

<!--- 输入框 --->

<script type="text/plain" id="myEditor" style="width:100%;height:400px;">

</script>

<!--- 输入框 --->

4. 设置

um.setContent(“str”);

um.getContent（“str”）;

 

 

 

六、更新笔记信息即保存笔记信息

img

1. 发送ajax请求

#发送事件：“保存笔记”按钮点击事件（静态）

#请求参数：笔记ID（id）、标题（title）、内容（body）

请求地址：/note/update.do

2. 服务器处理

-UpdateNoteController(id,title,body)-->

-NoteService.updateNote(Note)

-NoteDao.uodateNote(Note)

-cn_note(更新处理)

3.ajax 回调处理

success:对被更新的笔记名称进行更新

<li><a class="checked"></a></li>

var $li=$(“#note_ul a.checked”).parent

 

知识点：alert的使用

如何显示？

-通过load()，加载html

-显示show()背景

 

七、创建一个新的笔记本

img

1.ajax 请求

-发送事件：对话框中的“创建”按钮的单击（动态）

-请求参数: 用户ID 笔记本名称

-请求地址：/book/add.do

2. 服务器处理

-AddBookController.execute

-BookService.addBook(book)

-BookDao.save(Book book)

-cn_notebook(insert)

--json响应

3.ajax 回调处理

success:

-关闭对话框

-添加一个笔记本li

-提示创建笔记本的成功

error:

提示创建笔记本失败

 

八、创建一个新的笔记

img

1.ajax 请求

-发送事件：对话框中的“创建”按钮的单击（动态）

-请求参数:笔记名称 笔记本ID 用户ID

-请求地址：/note/add.do

2. 服务器处理

-AddNoteController.execute

-NoteService.addBook(book)

-NoteDao.save(Book book)

-cn_notebook(insert)

--json响应

3.ajax 回调处理

success:

-关闭对话框（可以省略）

-解析JSON数据。生成一个li元素添加到笔记列表中

1.获取title

2.获取noteId

-提示创建笔记的成功

error:

提示创建笔记失败

 

九、显示笔记下拉菜单

img

1.通过点击“箭头”按钮显示三个菜单项

-获取div对象 slideDown();

2.、下拉菜单的分享功能

img

#发送请求

-发送事件：点击“分享”按钮

-请求参数：noteId

-请求地址:/share/add.do

#服务器处理

-创建Share类

-Controller

-Service

-Dao-insert

-cn_share

#回调处理

success:提示分享成功 增加图标处理<i class=”fa fa-sitemao”>

error:提示分享失败

3.、下拉菜单的删除功能

img

//约定1-normal 2-delete

 

note.setCn_note_status_id("1");

//约定1-normal 2-favor 3-share

note.setCn_note_type_id("1");

4.、下拉菜单的移动功能

img

十：模糊查询分享笔记

img

功能描述：用户输入搜索关键词，然后点回车，触发查询

可以多行显示，可以点击，然后显示具体信息

1. 发送ajax事件

发送事件：输入关键词后，点回车

$(“Input_id”).keydown(function(event){

var code=event.keyCode;

if(code==13){

发送ajax请求

}

})

2. 服务器处理

-Controller

-Service

-Dao(select)

-cn_share

select * from cn_share like %关键词%

3.ajax 回调处理

success:显示搜索笔记结果列表

error：搜索笔记失败

 

十一、修改密码及退出登录操作

img

 

十二、Spring AOP的应用

 

AuditBean：性能审计用来查看执行各个业务需要的时间

ExceptionBean：保存异常信息到日志中

LoggerBean：封装打桩操作逻辑

结构

控制层：controller @Controller

业务层：service @Service

持久层：Repository @Repository

表现层：html+css+Jquery+ajax

-com.lcz.cloud_note.dao：接口层 --------持久层

-com.lcz.cloud_note.service：服务层--------业务层

-com.lcz.cloud_note.controller：控制层--------控制层

-com.lcz.cloud_note.entity:实体层

-com.lcz.cloud_note.util:工具层

-com.lcz.cloud_note.aspect:切面层

代码梳理

导入源码之后，就要一点点的看源码了

注册登录

从界面出发：

image-20200329213919596

 

function register() {
    // 取值
    var userName = $("#regist_username").val();
    var password = $("#regist_password").val();
    var password2 = $("#final_password").val();
    var nickname = $("#nickname").val();
    // 校验用户名格式
    var reg = /^\w{3,20}$/;
    if(!reg.test(userName)) {
        $("#warning_1").text("3-20位的英文、数字、下划线.").show();
        return;
    } else {
        $("#warning_1").hide();
    }
    //校验密码
    if(password.length<6 || password != password2) {
        return;
    }
    //进行注册
    var user = {
        "cn_user_name":userName,
        "cn_user_password":password,
        "cn_user_desc":nickname
    };
    $.ajax({
        type:"post",
        url:basePath+"user/register.do",
        dataType:"json",
        data:user,
        success:function(result) {
            if(result.status==0) {
                if(result.data) {
                    alert("注册成功.");
                    $("#zc").attr("class","sig sig_out");
                    $("#dl").attr("class","log log_in");
                } else {
                    $("#warning_1").text("用户名已存在.").show();
                }
            } else {
                alert(result.message);
            }
        },
        error:function(xhr,status,error) {
            alert("请求失败.");
        }
    });
}

url:basePath+"user/register.do"与之前的的html+script+json+servlet相似，

web.xml文件中设置功能选择器，接收来自表现层的请求：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>SpringMvcMybatis</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>
  
  <servlet>
    <servlet-name>SpringMVC</servlet-name>
    <servlet-class>
        org.springframework.web.servlet.DispatcherServlet
    </servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>
            classpath:applicationContext.xml
      </param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>SpringMVC</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
  
  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>
        org.springframework.web.filter.CharacterEncodingFilter
    </filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>*.do</url-pattern>
  </filter-mapping>
</web-app>

告诉表示层要用什么方式请求，去哪里请求

image-20200329215652667

凡是以xxx.do方式请求都发送到了controller

image-20200329220940989

 

controller接收这个请求：

@Controller
@RequestMapping("/user")//匹配请求
public class UserRegisterController {
    @Resource
    private UserService userService;
    
    @RequestMapping("/add.do")
    @ResponseBody//以json数据格式返回数据
    public NoteResult<Object> execute(String name,String password,String nick) {
        //调用userService处理注册请求
        NoteResult<Object> result = userService.addUser(name, password, nick);
        System.out.println(result);
        return result;
    }
}

UserService用户操作类，在service包里定义了该接口

public interface UserService {
    //查找登录的账户名  返回查找到的用户名对象(登录方法)
    public NoteResult<User> checkLogin(String name,String password);
    //保存一个用户名，输入类型为User(注册方法)
    public NoteResult<Object> addUser(String name,String password,String nick);
    //修改用户名密码
    public NoteResult<Object> changeUser(String userName,String last_password,String final_password);
}

  1. 查找

  2. 保存(这里被用到)

  3. 修改

实现上面的接口：

public NoteResult<Object> addUser(String name, String password, String nick) {
        //接受结果数据
        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_name(name);
        //设置密码,密码存储需加密
        String md5Password = NoteUtil.md5(password);
        user.setCn_user_password(md5Password);
        //设置昵称
        user.setCn_user_nick(nick);
        //设置主键id
        String id = NoteUtil.createId();
        user.setCn_user_id(id);
        //执行保存操作
        userDao.save(user);
        //构建返回结果
        result.setStatus(0);
        result.setMsg("注册成功");
        return result;
    }

注册阶段主要是执行上面的userDao.save(user);把用户信息保存数据库去。

userDao是接口，它能创建引用。用mapper的配置实现类的方法

mapper数据库与java对象的映射关系

配置数据库参数的时候SqlSessionFactory找到mapper的位置（mapper里有多个描述对象与数据库列对应关系的xml文件）。

配置mapper扫描，就是把上面所提到的所有mapper的xml配置文件都集中映射到dao

如下：

<!-- 配置数据库连接参数及连接池 -->
    <bean id="dbcp" class="org.apache.commons.dbcp.BasicDataSource">
        <property name="username" value="root"/>
        <property name="password" value="root"/>
        <property name="driverClassName" value="com.mysql.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql://localhost:3306/mysql"/>
    </bean>
    <!-- 配置SqlSessionFactory -->
    <bean id="ssf" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dbcp"/>
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>
    </bean>
    
    <!-- 配置mapper扫描 -->
    <bean id="mapperScanner" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.lcz.cloud_note.dao"/>
    </bean>

image-20200330193930628

Dao包中每个类对应这mapper中的每个xml，类中的每个方法对应着xml中的每个id

这样save（user）就与下面的sql对应了：

<insert id="save" parameterType="com.lcz.cloud_note.entity.User">
        insert into 
        cn_user(cn_user_id,cn_user_name,cn_user_password,cn_user_nick,cn_user_token) 
        values(#{cn_user_id},#{cn_user_name},#{cn_user_password},#{cn_user_nick},#{cn_user_token})
    </insert>

这样就完成了新用户的添加

整理出来的项目结构是：

image-20200330201703550

 （未完）

posted @ 2020-03-30 21:13  GIGCH  阅读(490)  评论(0)    收藏  举报