基于VUE2.x和Node.js的完整开源博客解决方案--ZOE Blog

ZOE Blog

好久没写iOS的文章了,但这次来点不一样的,利用下班等业余时间撸了一个完整的开源博客解决方案,后端使用的是Mysql存储数据,服务器开发使用Node.js的Koa2框架,前端使用Vue2.x和ElementUI。 整个项目从数据库设计到前端展示全部功能由自己把控。项目地址是ZOE blog

更新,目前网站和接口全面启用HTTPS,域名改成了bqbbq.com

Demo地址和使用

https://bqbbq.com/#/
测试号1: test1 密码: 123456
测试号2: test2 密码: 123456
博客后台管理登录
https://bqbbq.com/#/manage
测试号1: admin密码: 123456
(请大家不要做修改密码(已更新,测试账号密码不能修改),删除里面的文章等操作,另外,管理员只能同时存在一个人登录,因为要做登录验证,后台图片也不要删除)

功能

  • 注册账号,登录
  • 搜索文章,作者,分类功能
  • 文章分类和标签功能
  • 响应式布局,适配手机端
  • 富文本编辑和MarkDown编辑模式自由切换
  • 评论文章和其他人的评论
  • 用户修改个性设计
  • 后台管理员登录
  • 侧边栏
  • 喜欢和收藏功能
  • 加入了私信聊天功能

先上效果图

主页面
主页面文章列表
搜索结果
我的文章标签和分类
写文章
聊天功能
修改设置
后台管理

上面的图片只展示一小部分功能。里面还有更多的内容让读者挖掘

如何使用

  • 1.Clone项目 git clone https://github.com/DuckDeck/blog.git
  • 2.进入项目根目录使用npm安装模块 cd blog 后再 npm install
  • 3 在config文件夹下新建文件imgPathConfig.js文件,在里面输入以下内容
  • 3 更新,不再使用imgPathConfig,使用pathConfig文件,按照你的需要,把里面的Path改成自己的域名
export let imgPath = isProduction?"https://yourDomainAPI.com/": "http://localhost:3000/"

export let emailPath = isProduction? "https://yourDomain.com":"http://localhost:8088/"
配置路径

注意要将自己Server的NODE环境改成production
export NODE_ENV = production

  • 3.在server/sqlhelp/mysql.js文件里面配置数据库连接
var pool  = mysql.createPool({  
  connectionLimit : 10,  
  host            : 'localhost',   //主机
  user            : 'test',          /用户名
  password        : '????????', // 密码
  database        : 'blog' , //数据库名
});  

注意,配置好后要在Mysql数据库里新建一个叫blog的数据库,如果你觉得用命令操作数据库麻烦可以使用MySQL Workbench来管理Mysql还是非常方便的。

  • 4.如果你是使用Visual Studio Code来写代码的话,那么直接使用按F5就能启动server端,如果是其他IDE,可以用命令来启动node start.js来启动服务器端,启动后,Node程序会在你的数据库里新建Blog所需要的表格和视图。
  • 5.建好表格后,这个时侯数据库还没有数据。如果你想使用自己的数据库,那么可以用我写的小爬虫程序可来爬取数据。它位于根目录的crawler下,其中jianchumy.js可以爬取我在简书发的文章。然后保存到数据库里。它还可以插入两个用户和一些文章分类。所以建议读者在这里运行这个文件node jianchumy.js 来生成一些数据。
  • 6.如果你不会配置Mysql的话也可以使用我server的数据,只需要修改src/config/env.js这个文件,将developmentbaseUrl改成https://api.bqbbq.com/api/即可。
  • 7.再用命令启动前端即可,在项目根目录里使用命令npm run dev
  • 8.浏览器会自动启动并打开localhiost:8088并打开Blog主页面。
  • 9.如果想发布,使用命令npm run build即可,生成的文件在dist目录下,然后就能直接会使用了。

完成项目的感想

从3月到现在,断断续续三个多月的时间利用业余时间完成了这个项目。感觉使用Node+Vue这套技术栈来开发这种中小型项目真的很快,而且使用了前后端分离的方式开发,以后如果要开发APP的话,直接可以使用同一套接口,可以说是非常方便。另外作为一个iOS开发者,我目前还在用手写代码的方式来开发UI,再加上传统的MVC框架,使得iOS的Controller臃肿得不能再臃肿了。而且开发效率也是极低。接下来我将探讨MVVM在iOS上的实现,尝试一下新的开发方式。

感谢

此项目仅为前端开发者学习使用。如果你觉得我的文章和项目对你有帮助,请给个star,地址->ZOE blog.如果有什么问题,请发一个issue或者直接联系我,还希望有大神多多指导。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 197,000评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,825评论 2 374
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 144,055评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,766评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,639评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,453评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,860评论 3 388
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,492评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,783评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,817评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,624评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,439评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,872评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,075评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,372评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,868评论 2 343
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,075评论 2 338

推荐阅读更多精彩内容