乐趣区

CKEditor-5-SpringBoot实战二SpringBoot-Application-环境搭建

jiezi

在本系列的文章中，我将介绍如何在 Spring Boot Application 中使用 CKEditor 编辑器。介绍的内容包括基本环境的搭建，文件上传，SpringData JPA 数据持久化，CKEditor5 的安装，CKEditor 图片上传，CKEditor 插入视频，获取 / 设置 CKEditor 内容等。

项目源码

本系列文章的项目源码同步更新至码云 和 Github，你可以任选其一下载源码到本地。项目地址如下：

  1. 码云：https://gitee.com/ramostear/CKEditor5-SpringBoot
  2. Github：https://github.com/ramostear/CKEditor5-SpringBoot

你也可以通过 Git 命令行工具下载项目源码，命令如下 (二者任选其一)：

git clone https://gitee.com/ramostear/CKEditor5-SpringBoot.git
git clone https://github.com/ramostear/CKEditor5-SpringBoot.git

需求分析

需求分析是项目开始的第一步，经过分析和思考，才能明确我们的设计目标。在本项目中，我们有如下的需求：

  1. 使用 CKEditor5 Web 编辑器在线编辑内容
  2. 在需要的时候，可以在编辑的内容中插入图片素材
  3. 除了能插入图片，还需要有插入视频的功能
  4. 将编辑好的内容保存到数据库
  5. 在需要的时候，可再次对数据库中存储的内容进行二次编辑
  6. 能在线浏览数据库中的内容
  7. 在必要的时候，需要对数据库中存储的内容进行删除 (包括上传的图片)

经过整理，我们可提炼出这样几个核心功能：添加内容，编辑内容，删除内容，查询内容，上传图片，插入视频和删除图片。下面是项目的用例图，用例图能更直观的帮助我们理解项目需求。

项目依赖

通过分析，我们已经明确项目所要实现的功能。接下来，需要考虑项目的类型以及所需要的第三方依赖包和依赖包的管理方式。

首先，我们可以确定该项目是一个 Web 项目，第三方的依赖包可以通过 Maven 来进行管理。然后是确定项目所需的依赖包：

  1. Web 项目，需要 Spring MVC 依赖包；
  2. 视图展现，需要 Freemarker 依赖包；
  3. 在线编辑内容，使用 CKEditor5 实现 (JavaScript 第三方库)；
  4. 连接 MySQL 数据库，需要 MySQL 数据库驱动依赖包；
  5. 数据持久化，需要 SpringData JPA 依赖包；
  6. 数据库连接池管理，需要 Alibaba Druid 依赖包；
  7. 文件上传，需要 commons-fileupload 依赖包；
  8. JSON 数据转换，需要 Alibaba FastJSON 依赖包。

提示：

在编码的过程中，为了防止一次性导入所有依赖包导致依赖包下载慢或下载失败，可根据开发进度，按需加入相关的依赖包。

创建项目

在开始创建项目之前，我默认你已经在本地机器上安装并配置好了 JDK、Maven 和 MySQL。创建并初始化一个 Java Web 项目的最好方式是使用 SpringBoot，我将使用 IntelliJ IDEA 提供的 Spring Initializr 创建 SpringBoot 应用程序。关于 IDE 的选择，在此不再赘述，IntelliJ IDEA 或 Eclipse 创建 SpringBoot 应用程序的步骤大致相同。

IntelliJ IDEA 创建 SpringBoot Application

启动 IntelliJ IDEA，依次点击 File > New > Project…按钮，如下图：

在弹出的 New Project 对话框中，选择“Spring Initializr”选项，然后将“Project SDK”修改为本机安装的 SDK，接着点击“Next”进入项目元数据配置对话框。

紧接着，我们需要对项目的元数据进行设置，具体参数可更具自身情况进行调整，也可以与本教程保持一致，元数据设置完毕后，点击“Next”进入依赖配置对话框。

为了快速完成项目项目的创建和初始化工作，在一开始，我们只勾选 Spring Web 依赖，并将 Spring Boot 的版本调整到 2.2.8，然后点击“Next”进入项目信息确认对话框。

在项目信息确认无误后，点击“Finish”按钮完成项目的创建。

最后，IntelliJ IDEA 会弹出一个询问框，你可以选择在当前窗口或新窗口打开项目，根据个人习惯进行选择。选择完毕后，稍等片刻，IntelliJ IDEA 将自动从 Spring 上下载项目基础源码包，并完成项目初始化工作。

打开项目后，请在 Settings 中找到 Maven 配置项，并检查其配置是否为本地安装的 Maven，如下图：

设置完成后，点击窗口右下角弹框中的“Enable Auto Import”链接，让 Maven 重新导入项目的依赖 (若已设置好 Maven，请忽略该步骤)，如下图：

下面是初始化完成后的项目工程结构：

至此，整个项目的创建和初始化工作已完成。Ckeditor5SpringBootApplication.java 为项目的主类，接下来，我们将通过改类来启动项目，验证项目是否正常可用。

启动项目

在“com.ramostear.ckeditor”包中找到并打开 Ckeditor5SpringbootApplication.java 类，我们将通过此类来启动项目。

如上图所示，在代码编辑界面中，你可以选择点击①、②和 ③处其中任意一个三角图标来启动项目。当项目启动成功后，会在控制台输出如下信息：

你可以在上图① 处看到，应用的端口号为“8080”（默认端口号）。最后，我们在浏览器中输入如下地址，以验证 SpringBoot Application 是否正常可用。

http://localhost:8080

如上图所示，若初始化的项目无任何问题，访问 http://localhost:8080，SpringBoot Application 将返回一个“Whitelable Error Page”页面。至此，SpringBoot Application 环境搭建工作完成。

本章小结

本章详细介绍了在 IntelliJ IDEA 中创建并初始化一个 SpringBoot Application 的详细过程。为初识 IntelliJ IDEA 和 SpringBoot 的读者提供一个参考。你可以访问下面的地址，下载该项目的所有源代码：

  1. 码云：https://gitee.com/ramostear/CKEditor5-SpringBoot
  2. Github：https://github.com/ramostear/CKEditor5-SpringBoot

在下一章节中，我将介绍内容实体，持久化接口，业务逻辑接口及其实现类，和控制器的设计和实现过程。

退出移动版