配置环境
数据库配置
作为一个文本编辑器,首先得有个数据库,一个文章基本内容:标题和文本内容,因此建表语句为
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文件夹

打开_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>
|

主要的就是红框标注的,其他的冗余的,但我懒得删。
源文件编写
主页
后端
mapper
用过都知道,Mybatis Plus虽然香,但是没有listObjs()方法获取全部记录,所以得自己写SQL语句
PageMapper.java1 2 3 4 5 6
| @Mapper @Repository public interface PageMapper extends BaseMapper<Page> { @Select({"select * from page"}) List <Page> listObjs(); }
|
controller
WebController1 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.ftl1 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">
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>
<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.ftl1 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样式是为了实现表格的实线边框
还有一个删除按钮。
完成
测试






