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环境改成productionexport 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目录下,然后就能直接会使用了。
作者:黑暗中的孤影
链接:https://www.jianshu.com/p/c4a0c0e0e25b