0%

Spring Boot与Ueditor实现文章发布浏览功能

此Demo没有实现文件上传/图片上传功能,若想实现,可以参照《基于hAdmin的酒店管理系统》一文中的文件上传部分完成,还有这篇文章,前端页面的美化可以自己在网上搜索,套一下模板。

上传到gitee的源码已经完成图片上传部分。

配置环境

数据库配置

作为一个文本编辑器,首先得有个数据库,一个文章基本内容:标题和文本内容,因此建表语句为

1
2
3
4
5
6
7
8
9
DROP TABLE IF EXISTS `page`;
CREATE TABLE `page` (
`id` int(0) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT "自增id",
`title` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT "标题",
`content` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL COMMENT "内容",
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

项目配置

这一项我们已经弄过很多次了,参照《基于hAdmin的酒店管理系统》一文中的以下内容

  • 配置项目
  • 添加依赖
  • 配置文件
  • 代码生成器

我们要用到Mybatis Plus这个包,引入lombok依赖,帮助生成entity和mapper,具体可以查看Mybatis Plus的官方文档。

我们先下载UEditor的源码

UEditor

UEditor - 下载

作为一条懒狗,我直接下载了完整源码,解压后把所有东西塞进statics文件夹

image-20200503124501980

打开_example文件夹双击index.html慢慢分析,发现编辑器的页面有个Demo: completeDemo.html,在idea里面修改一下

1
2
+     <script type="text/javascript" charset="utf-8" src="../_examples/editor_api.js"></script>
- <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>

因为这个本来是指向同目录下的editor_api.j,但是在Springboot中要把它完整路径弄出来。

JQuery

老办法,直接把hAdmin那个项目里面的jQuery那些东西复制过来,后续如果要完成文件上传也要把webuploader复制过来,当然也可以在官网下载对应的js。然后在用到JQuery的<head>里添加

1
<script type="text/javascript" src="../js/jquery.min.js"></script>

image-20200503131204863

主要的就是红框标注的,其他的冗余的,但我懒得删。

源文件编写

主页

后端

mapper

用过都知道,Mybatis Plus虽然香,但是没有listObjs()方法获取全部记录,所以得自己写SQL语句

PageMapper.java
1
2
3
4
5
6
@Mapper
@Repository
public interface PageMapper extends BaseMapper<Page> {
@Select({"select * from page"})
List <Page> listObjs();
}

controller

WebController
1
2
3
4
5
6
7
8
9
10
11
12
@Controller
public class WebController {
@Autowired
PageMapper pageMapper;

@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView index() {
ModelAndView modelAndView = new ModelAndView("index");
modelAndView.addObject("pages", pageMapper.listObjs());
return modelAndView;
}
}

前端

最简单的前端就是列出标题就行了:

注意这个是ftl页面,得放在template目录下

index.ftl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<style>
.title{
text-align: center;
}
</style>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
</head>
<body>
<div class="title"><h1>主页</h1></div>
<button onclick="post()"
style="background: rgb(0, 142, 173); padding: 7px 10px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold;">
写文章
</button>
<hr size="10px" color="purple">
<div class="main">
<#list pages as page>
<a href="/read?id=${page.id}"><h2 class="title">${page.title}</h2></a>
<hr size="2px" color="purple" style= "border:1px dashed #000">
</#list>
</div>
<script>
function post() {
window.location.replace("/post")
}
</script>
</body>
</html>

我添加了个按钮,是为了跳转到写文章界面的

编写文章页面

后端

直接返回静态页面,还有处理提交请求

1
2
3
4
5
6
7
8
9
10
11
12
@RequestMapping(value = "/post", method = RequestMethod.GET)
public String post() {
return "_examples/completeDemo.html";
}

@ResponseBody
@RequestMapping(value = "/doPost", method = RequestMethod.POST)
public String doPost(Page page) {
System.out.println(page);
pageMapper.insert(page);
return "上传成功";
}

前端

修改completeDemo.html,阅读源码,使用JQuery传递生成的html语言给后端:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
...
</head>
<body>
<input id="title" type="text" placeholder="请输入标题">
<div>
...
</div>
<div id="btns">
<div>

<!--添加上传按钮-->
<button onclick="doPost()"
style="background: rgb(0, 142, 173); padding: 7px 10px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold;">
上传
</button>


...
</div>
<div>
...
</div>

</div>
...

<script type="text/javascript">

//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');

//添加以下下内容
function doPost() {
$.post("/doPost", {"content": UE.getEditor('editor').getContent(),"title":$("#title").val()}, function (data) {
alert(data);
window.location.replace("/");
})
}

...
</script>
<!--以下为自定义CSS,可选-->
<style>
#title{
outline-style: none ;
border: 1px solid #ccc;
border-radius: 3px;
padding: 13px 14px;
width: 620px;
font-size: 14px;
font-weight: 700;
font-family: "Microsoft soft";
}
input:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
</style>

</body>

</html>

编写阅读页面

后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@RequestMapping(value = "/read", method = RequestMethod.GET)
public ModelAndView read(int id) {

ModelAndView modelAndView = new ModelAndView("read");
modelAndView.addObject("page",pageMapper.selectById(id));
return modelAndView;
}

@ResponseBody
@RequestMapping(value = "/delete", method = RequestMethod.POST)
public String delete(int id) {
pageMapper.deleteById(id);
return "删除成功";
}

实现删除功能

前端

read.ftl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${page.title}</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<h1>${page.title}</h1>
${page.content}

<button onclick="deleteById()"
style="background: rgb(0, 142, 173); padding: 7px 10px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold;">
删除
</button>

<script type="text/javascript">
function deleteById() {
$.post("/delete",{"id":${page.id}});
window.location.href="/";
}
</script>
<style>
table, th, td{
border: solid #2E2D3C 2px;
border-collapse:collapse;
}
</style>
</body>
</html>

添加的CSS样式是为了实现表格的实线边框

还有一个删除按钮。

完成

测试

002

004

005

003

picture1picture2

picture3

-----------看到底线啦 感谢您的阅读-------------