头发收集屋

欢迎来到我的秋秋空间~

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

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