脚本宝典收集整理的这篇文章主要介绍了个人博客开发系列:文章实时保存,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前言
一般用来写东西的网站都会有一个编辑实时保存的功能。对于使用者来说是一个非常实用的功能。作为一个个人博客来说,虽然用处没那么明显,但是还是想实现一下这个功能,就当是练练手吧。
实现思路
- 使用
WebSocket
来进行浏览器与服务器的实时通信;
- 服务端使用
redis
来缓存实时编辑的文章(编辑时文章改动频繁,频繁读写数据库操作不是个好的方案);
- 服务端使用定时任务(如每天凌晨3点),将
Redis
缓存的数据存储到MySQL
数据库中;
- 浏览器端初次进入新增文章页面时,使用
WebSocket
从服务端获取数据(先从Redis
中查找,如果没有则再从MySQL
数据库中查找);
- 浏览器端初次进入编辑文章页面时,不需要从服务端获取数据;
- 使用
Vue.js
的watch来监听文章的变化,变化时使用WebSocket
向服务端传送数据。
- 文章保存时清空
Redis
和MySQL
中实时保存的数据。
源码
Talk is cheap. Show me the code.
说明
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';
@R_406_768@(VueSocketio, socketio('http://localhost:9000', {
path: '/testsocketiopath'
}));
5./src/pages/EdIT.vue
使用WebSocket
从服务端获取数据,并实时将数据传输到服务端进行保存。
总结
以上是脚本宝典为你收集整理的个人博客开发系列:文章实时保存全部内容,希望文章能够帮你解决个人博客开发系列:文章实时保存所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。