导读

前言 For what

本专栏为广大开发者量身打造，带你进行一次 Spring Boot + MyBatis + Vue + Element 全栈工程师的项目开发实战，选用当下主流的技术，带你从零开始实现一个完整的云笔记应用，实现前端、后端、数据库设计与开发流程。

本专栏的每篇文章都有对应的完整代码，在 GitHub 上托管。大家可以参考项目的代码风格规范自己的书写习惯，可以从中学习到合适的技术知识和设计思想，也可以基于此项目开发自己的系统和应用。

由于我们期望将更多的干货和完整的项目开发流程带给大家，在专栏中涉及到的一些基础知识我们将不再一一赘述，因此我们来做一个约定：

• 假定你懂得 Java 基础语法、JDK 安装方法
• 假定你懂得 SQL 基础语法、MySQL 安装方法
• 假定你懂得 HTML、CSS、JavaScript 基础语法

在专栏中涉及到这些内容，我不会再讲一遍 JDK 如何安装、MySQL 如何配置、某个 HTML 标签是什么意思等等类似的问题。如果有不懂的，欢迎沟通，我会及时为大家解答疑惑。

专栏介绍 What is it

本专栏精心选择了一个简单易用的云笔记项目，将专栏重点放在项目设计思想和通用的硬核代码设计上。从项目需求分析、架构选择、数据库设计、接口文档设计，到功能实现、页面效果设计前后端联调，能让你掌握完整的项目分析、设计、优化能力。

前端分别使用 Vue.js 和 Element UI 作为 核心框架和 UI 框架，使用 HBuilderX 作为开发工具；后端使用 Spring Boot + MyBatis 作为核心框架，数据库选用 MySQL，向前端提供标准的 RESTful 接口。主流的技术、大众化的开发工具，让你在使用中带有亲切感，收获满满。

本专栏中完成的项目，界面简洁大方、代码清晰优雅、注释完善简明、基础功能完备。后端代码扩展性强，可轻松升级为分布式架构和 Spring Cloud 微服务架构，从而满足各种用户量级的并发需求。

技术栈 What can you learn

前端

开发环境：HBuilderX，核心架构：Vue.js + Element UI，涉及到的 Vue.js 插件如下：

• vue-cli：Vue.js 脚手架，快速搭建标准的 Vue.js 项目
• vue-router：Vue.js 路由管理，实现清晰明了的页面访问
• axios：轻巧简便地实现 Http 访问
• echarts：以图表的形式将数据可视化展现
• base64：在适当的时候对 HTTP 请求传输的数据进行加密
• vuedraggable：实现页面元素的拖拽功能
• wangeditor：轻量级的富文本编辑器
• mavon-editor：简洁灵活的 MarkDown 编辑器
• file-saver + xlsx：实现将页面数据保存为 Excel 文件的功能

后端

开发环境：IntelliJ IDEA，核心架构：Spring Boot + MyBatis，项目管理工具：Maven，主要用到的依赖包有：

• spring-boot-starter-web：Spring Boot 支持 RESTful 的包
• mybatis-spring-boot-starte：Spring Boot 整合 MyBatis 的依赖包
• mysql-connector-java：MySQL 驱动包
• javax.mail：Java 发送邮件依赖包
• fastjson：处理 JSON 数据的 fastjson 包
• thumbnailator：处理图片压缩和图片解析的依赖包
• jjwt：封装解析 JWT 的依赖包
• spring-boot-starter-amqp：Spring Boot 整合 RabbitMQ 的依赖包
• spring-boot-starter-data-redis：Spring Boot 封装的 Redis 的驱动包

数据库

• MySQL：关系型数据库，用来做数据的存储
• Redis：非关系型数据库，用来做缓存和临时存储

专栏目录 Let's preview

本专栏分为 7 个部分，由浅入深，循序渐进，带你一步步开发出完整完善的属于自己的项目。

第 1 部分 项目简介

介绍专栏内容及专栏内的项目内容，完成项目需求分析，正式立项。

• 第 1 篇：导读，对本专栏要讲述的内容做简单说明

• 第 2 篇：需求分析，明确项目目标及产品功能树，作为后续项目开发的依据

第 2 部分 项目前期准备

进行项目正式开发前的所备工作：架构选择、数据库设计、接口文档设计等，以严谨的思想和正式的开发流程对待我们的项目，保证整个项目开发过程有法可依、有据可查。

• 第 3 篇：数据库设计，透过现象看本质，从一款产品的界面中分析出它底层的数据结构，并将其整理成文档

• 第 4 篇：接口文档设计，从不同的角度对功能树进行分析，将其拆分成接口，并整理成文档，作为前后端分离开发的依据

• 第 5 篇：前端结构设计，选择 Vue.js + Element UI 做为项目的前端架构，完成前端项目搭建，并保证功能的可用性

• 第 6 篇：后端结构设计，选择 Spring Boot + MyBatis 做为项目的后端架构，完成后端项目搭建，选择 Postman 做为 RestFul 接口测试工具，完成测试接口的测试工作

第 3 部分 核心功能开发

进行云笔记项目后端核心功能的开发，以登录注册功能为引，将项目后端的基石打牢，为后续的快速开发做准备。在这一部分的学习中，你会对 Java 深入了解，自己动手设计安全易用的服务端架构、发送邮件、开发通用工具、存取文件、压缩图像……

• 第 7 篇：MyBatis 通用 Mapper，利用 Java 反射机制、泛型机制完成轻量级 MyBatis 工具的开发，使后续的开发免除手写 SQL 的烦恼

• 第 8 篇：MyBatis 自动建表，利用 Java 自定义注解，在 通用 Mapper 的基础上完成自动建表，后续开发过程中不用再手动创建数据表

• 第 9 篇：统一的 HTTP 应答格式，按照接口文档要求，定义统一的应答格式，避免多人协作及前后端分离开发过程中数据格式的不统一引起的沟通成本

• 第 10 篇：统一的 HTTP 请求处理，通过对 HttpServletRequest 的深度解析及 RestTemplate 的灵活运用，实现 HTTP 请求的统一解析和转处理，为后端接口布置上天然屏障

• 第 11 篇：注册 1，在 Spring Boot 中使用 JavaMail 发送邮件验证码，完成注册接口开发

• 第 12 篇：注册 2，在 Vue 中，使用 Element UI 进行页面布局，并使用 axios 发送 HTTP 请求，完成注册功能

• 第 13 篇：登录 1，在 Spring Boot 中使用 JWT 做为用户身份认证机制，完成登录接口的开发

• 第 14 篇：登录 2，生成 HTTPS 证书，并在 Spring Boot、Vue 及 Postman 中进行配置，使其均支持 HTTPS，保证 JWT 在网络传输过程中的安全性；同时在 Vue 中完成登录功能

• 第 15 篇：用户名片1，在 Spring Boot 中实现图片的上传及压缩功能，用来保存用户头像原图和缩略图，完成用户头像上传和名片设置与读取接口

• 第 16 篇：用户名片 2，通过搭建 Nginx 文件服务器来为前端提供文件服务，使 Spring Boot 免受文件访问的压力；同时补充图片元数据解析与定位图片拍摄地点的知识，形成完整的图片处理知识体系

• 第 17 篇：用户名片 3，在 Vue 项目中，完成用户名片设置和头像上传功能

• 第 18 篇：修改密码，梳理用户修改密码的两种场景和三种方式，使用 JavaMail 配合 JWT 通过发送重置密码链接邮件的方式修改密码

第 4 部分 业务功能开发

这一部分重点讲述云笔记项目前端页面的设计，完成云笔记项目的业务功能，带你对 Vue.js 深入了解，掌握 Vue 路由配置、组件化开发、灵活运用各种开源组件。

• 第 19 篇：笔记本列表，在 Spring Boot 中快速实现笔记本相关接口，在 Vue 中通过组件化的思想来展示用户的笔记本列表

• 第 20 篇：笔记列表，在 Spring Boot 中快速实现笔记相关接口，在 Vue 中使用 vuedraggable 组件实现笔记列表的拖拽排序功能

• 第 21 篇：富文本笔记 1，使用 wangeditor 组件实现富文本笔记的保存和编辑功能

• 第 22 篇：富文本笔记 2，使用 base64 对笔记内容进行加密，以保证在传输过程中不会出现乱码

• 第 23 篇：MarkDown 笔记 1，使用 mavon-editor 组件实现 MarkDown 笔记的编辑和展示功能

• 第 24 篇：MarkDown 笔记 2，对 HTTP 传输大小和速率进行分析，通过对保存和获取笔记内容的接口进行改造来支持足够长的笔记内容

第 5 部分 后台管理功能开发

这部分介绍云笔记项目的后台管理功能，从功能设计到前后端功能实现，带你完成一个完整的后台管理系统。

• 第 25 篇：用户管理 1，在 Spring Boot 中快速开发出用户管理接口，使用 Element UI 搭建起经典的后台管理功能能界面，实现用户管理功能

• 第 26 篇：用户管理 2，使用 file-saver + xlsx 组件实现将用户数据导出到 Excel 中

• 第 27 篇：用户统计 1，在 Spring Boot 中添加用户注册日志和登录日志，形成用户统计的数据源，并实现新增用户数、活跃用户数等用户统计接口

• 第 28 篇：用户统计 2，在 Vue 中，使用 echarts 组件生成直观的日增长用户曲线图、活跃用户直方图等，将数据可视化

• 第 29 篇：权限管理，在 Spring Boot 和 Vue 项目中添加完整的权限控制逻辑，实现权限管理功能

第 6 部分 项目升级

这一部分介绍如何将该项目改造能支撑起千万级的用户量大型分布式项目，通过这部分的学习，让你对大数据和高并发产生亲近感：原来你就在这里。

• 第 30 篇：分布式部署，通过 Sping Cloud 的使用，将云笔记项目快速修改为微服务架构，实现分布式部署，从而使系统支撑起庞大的访问量

• 第 31 篇：缓存，在系统分布式部署的基础上使用 Redis 做为缓存，并对数据库进行分库、分表等优化设计，从而使数据库面对庞大的用户群而毫无压力

• 第 32 篇：异步请求，为面对庞大的用户群体，对系统内部进行优化，使用 RabbitMQ 将日志记录等非核心业务做异步请求处理，缩短单个业务的系统响应时间

第 7 部分 总结

对本专栏的学习内容总结与回顾，查漏补缺，深入思考，同时也是一个项目完成后对项目进行中的经验与教训的总结。

• 第 33 篇：对整个专栏内容进行回顾和总结