个人博客开发系列:文章实时保存
前言
一般用来写东西的网站都会有一个编辑实时保存的功能。对于使用者来说是一个非常实用的功能。作为一个个人博客来说,虽然用处没那么明显,但是还是想实现一下这个功能,就当是练练手吧。
实现思路
- 使用
WebSocket
来进行浏览器与服务器的实时通信; - 服务端使用
Redis
来缓存实时编辑的文章(编辑时文章改动频繁,频繁读写数据库操作不是个好的方案); - 服务端使用定时任务(如每天凌晨3点),将
Redis
缓存的数据存储到MySQL
数据库中; - 浏览器端初次进入新增文章页面时,使用
WebSocket
从服务端获取数据(先从Redis
中查找,如果没有则再从MySQL
数据库中查找); - 浏览器端初次进入编辑文章页面时,不需要从服务端获取数据;
- 使用
Vue.js
的watch来监听文章的变化,变化时使用WebSocket
向服务端传送数据。 - 文章保存时清空
Redis
和MySQL
中实时保存的数据。
源码
Talk is cheap. Show me the code.
说明
- 本功能只是个人博客后台使用,没有多账户体系,所以
Redis
和MySQL
中都是保存一条记录。如果需要按不同用户来保存的话,需要自行开发。- 代码比较多,具体的代码就不贴了,有兴趣的可以去
我的GitHub
上查看源码。这里只说明一下各个文件中代码的用处。
1. /server/util/draft-socketio.js
服务端WebSocket
服务,使用了socket.io
库。
2./server/util/draft-redis.js
Redis
的set
和get
的公共方法。
3./server/util/redis-mysql.js
-
redisToMysqlTask
:定时同步Redis
数据到MySQL
数据的方法,使用了node-schedule
库。 -
getDraftPostFromMysql
:Redis
中不存在数据时,在MySQL
中查询数据。 -
clearDraftPostOfMysql
:从MySQL
中删除数据(文章保存后操作)。
4. /src/main.js
浏览器端先引入socket.io
,使用了vue-socket.io
和socket.io-client
库。
import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client';
Vue.use(VueSocketio, socketio('http://localhost:9000', {
path: '/testsocketiopath'
}));
5./src/pages/Edit.vue
使用WebSocket
从服务端获取数据,并实时将数据传输到服务端进行保存。
总结
DON的前端分享
前端开发,也了解一些后端的开发。分享个人项目和开发经验。
906 声望
42 粉丝
推荐阅读
如何让Element UI的Message消息提示每次只弹出一个
Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示,但是公司的测试人员在进行测试时会一直点,然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况(毕...
TDon赞 46阅读 33.1k评论 31
Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...
款冬赞 27阅读 13.4k评论 7
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...
熊的猫赞 19阅读 2.6k
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等
似曾相识赞 17阅读 29.1k评论 7
刨根问底 Redis, 面试过程真好使
充满寒气的互联网如何在面试中脱颖而出,平时积累很重要,八股文更不能少!下面带来的这篇 Redis 问答希望能够在你的 offer 上增添一把🔥。
菜农曰赞 17阅读 973
一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]
jigsaw赞 16阅读 8.4k评论 3
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!
熊的猫赞 14阅读 1.7k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。