基于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这个文件，将development的baseUrl改成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或者直接联系我，还希望有大神多多指导。