CKEditor5 + SpringBoot实战(二):SpringBoot 环境搭建
csdh11 2024-12-25 10:52 3 浏览
在本系列的文章中,我将介绍如何在Spring Boot Application中使用CKEditor编辑器。介绍的内容包括基本环境的搭建,文件上传,SpringData JPA数据持久化,CKEditor5的安装,CKEditor图片上传,CKEditor插入视频,获取/设置CKEditor内容等。
项目源码
本系列文章的项目源码同步更新至码云 和 Github ,你可以任选其一下载源码到本地。项目地址如下:
- 码云:https://gitee.com/ramostear/CKEditor5-SpringBoot
- 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
需求分析
需求分析是项目开始的第一步,经过分析和思考,才能明确我们的设计目标。在本项目中,我们有如下的需求:
- 使用CKEditor5 Web编辑器在线编辑内容
- 在需要的时候,可以在编辑的内容中插入图片素材
- 除了能插入图片,还需要有插入视频的功能
- 将编辑好的内容保存到数据库
- 在需要的时候,可再次对数据库中存储的内容进行二次编辑
- 能在线浏览数据库中的内容
- 在必要的时候,需要对数据库中存储的内容进行删除(包括上传的图片)
经过整理,我们可提炼出这样几个核心功能:添加内容,编辑内容,删除内容,查询内容,上传图片,插入视频和删除图片。下面是项目的用例图,用例图能更直观的帮助我们理解项目需求。
项目依赖
通过分析,我们已经明确项目所要实现的功能。接下来,需要考虑项目的类型以及所需要的第三方依赖包和依赖包的管理方式。
首先,我们可以确定该项目是一个Web项目,第三方的依赖包可以通过Maven来进行管理。然后是确定项目所需的依赖包:
- Web项目,需要Spring MVC依赖包;
- 视图展现,需要Freemarker依赖包;
- 在线编辑内容,使用CKEditor5实现(JavaScript第三方库);
- 连接MySQL数据库,需要MySQL数据库驱动依赖包;
- 数据持久化,需要SpringData JPA依赖包;
- 数据库连接池管理,需要Alibaba Druid依赖包;
- 文件上传,需要commons-fileupload依赖包;
- 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的读者提供一个参考。你可以访问下面的地址,下载该项目的所有源代码:
- 码云:https://gitee.com/ramostear/CKEditor5-SpringBoot
- Github:https://github.com/ramostear/CKEditor5-SpringBoot
在下一章节中,我将介绍内容实体,持久化接口,业务逻辑接口及其实现类,和控制器的设计和实现过程。
相关推荐
- 全新AI富文本编辑器 AiEditor 富文本编辑器实现
-
AiEditor是面向AI时代的新型富文本编辑器,兼容多种前端框架如Layui、Vue、React、Angular和Svelte,适用于PC和移动端。它提供了亮色和暗色主题,并且具备高...
- CKEditor 5 + SpringBoot实战(五):SpringBoot & Freemarker整合
-
在本系列的文章中,我将介绍如何在SpringBootApplication中使用CKEditor编辑器。介绍的内容包括基本环境的搭建,文件上传,SpringDataJPA数据持久化,CKEdit...
- 私有化的中文笔记工具,极空间Docker部署中文版『Trilium Notes』
-
一个私有化的中文笔记工具&个人知识库,极空间Docker部署中文版『TriliumNotes』哈喽小伙伴们好,我是Stark-C~...
- 比较好的网页里面的 html 编辑器 推荐
-
如果您正在寻找嵌入到网页中的HTML编辑器,以便用户可以直接在网页上编辑HTML内容,以下是几个备受推荐的:CKEditor:CKEditor是一个功能强大的、开源的富文本编辑器,可以嵌入到...
- 网页设计HTML零基础入门 html5网页设计教程
-
一、Html概述Html是HyperTextMark-upLanguage的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标...
- 所见即所得,网站页面的文本编辑器
-
所见即所得,不是很熟悉这个词吗?所见即所得代表什么,你看到的就是你得到这通常意味着一个编辑应用程序使用,以说明正在编辑的内容将完全一样的最终结果。与其他文本编辑器相比,“所见即所得”文本编辑器非常友...
- 推荐五个优秀的富文本编辑器 富文本编辑器app
-
富文本编辑器是一种可嵌入浏览器网页中,所见即所得的文本编辑器。对于许多从事前端开发的小伙伴来说并不算陌生,它的应用场景非常广泛,平时发个评论、写篇博客文章等都能见到它的身影。...
- CKEditor5 + SpringBoot实战(二):SpringBoot 环境搭建
-
在本系列的文章中,我将介绍如何在SpringBootApplication中使用CKEditor编辑器。介绍的内容包括基本环境的搭建,文件上传,SpringDataJPA数据持久化,CKEdit...
- 分享一个AiEditor富文本编辑器,一款自带AI属性的文本编辑神器
-
引言最近天天写文章老是在记事本和各种公众号平台之间来回切换格式感觉挺麻烦的,今天搜索到了一个叫AiEditor的富文本编辑器,试用了一下感觉还不错,所以也想分享给大家试一下。它是一款开源的文本编辑器,...
- Django后台管理系统(admin)的使用
-
Django自带的admin系统...
- 推荐13个又热门又实用的Vue开源宝典库
-
大家好,我是Echa。最近有不少的老铁们私信我,怎么学Vue,有啥秘诀吗?其实没啥秘诀的。今天来推荐13个又热门又实用的Vue.js宝典库,用心看完跟着这Vue宝典来实战操作,不出半个月,开发项...
- 主流富文本编辑器推荐,网站编辑器排名不分先后及特点
-
富文本编辑器(RichTextEditor,简称RTE)是一种提供类似于MicrosoftWord编辑功能的工具,在后台处理文章编辑时,深受不会编写HTML但又需要设置各种文本格式的用户喜爱,但...
- 为何强烈推荐基于 CKEditor 的 AlloyEditor 富文本编辑器?
-
大家好,很高兴又见面了,我是"高级前端?进阶...
- CKEditor 5 v22发布,URL插入图像和新列表样式
-
CKEditor5v22.0.0发布了。此版本能够通过URL插入图像,带来了新的列表样式和Markdown插件。导出到PDF和Word的功能已稳定发布,并且即将推出新的分页功能。...
- 一周热门
-
-
IDC机房服务器托管可提供的服务
-
一文看懂mysql时间函数now()、current_timestamp() 和sysdate()
-
详解PostgreSQL 如何获取当前日期时间
-
一款全能的看图软件,速度快、功能强、免费用
-
PhotoShop通道
-
Boston Dynamics Founder to Attend the 2024 T-EDGE Conference
-
一文读懂关于MySQL Datetime字段允许插入0000-00-00无效日期
-
Serv-u 提权
-
新版腾讯QQ更新Windows 9.9.7、Mac 6.9.25、Linux 3.2.5版本
-
流星蝴蝶剑:76邵氏精华版,强化了流星,消失了蝴蝶
-
- 最近发表
-
- 全新AI富文本编辑器 AiEditor 富文本编辑器实现
- CKEditor 5 + SpringBoot实战(五):SpringBoot & Freemarker整合
- 私有化的中文笔记工具,极空间Docker部署中文版『Trilium Notes』
- 比较好的网页里面的 html 编辑器 推荐
- 打造Flutter高性能富文本编辑器——协议篇
- 网页设计HTML零基础入门 html5网页设计教程
- 所见即所得,网站页面的文本编辑器
- 推荐五个优秀的富文本编辑器 富文本编辑器app
- CKEditor5 + SpringBoot实战(二):SpringBoot 环境搭建
- 分享一个AiEditor富文本编辑器,一款自带AI属性的文本编辑神器
- 标签列表
-
- serv-u 破解版 (19)
- huaweiupdateextractor (27)
- thinkphp6下载 (25)
- mysql 时间索引 (31)
- mydisktest_v298 (34)
- sql 日期比较 (26)
- document.appendchild (35)
- 头像打包下载 (61)
- oppoa5专用解锁工具包 (23)
- acmecadconverter_8.52绿色版 (39)
- oracle timestamp比较大小 (28)
- f12019破解 (20)
- np++ (18)
- 魔兽模型 (18)
- unity shader入门精要pdf (22)
- word文档批量处理大师破解版 (36)
- pk10牛牛 (22)
- server2016安装密钥 (33)
- mysql 昨天的日期 (37)
- 加密与解密第四版pdf (30)
- pcm文件下载 (23)
- jemeter官网 (31)
- parsevideo (33)
- 个人网站源码 (37)
- ckeditor4中文文档 (27)