• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

StudentWan/ashen-blog: 使用koa 2 + vue 2搭建自己的博客系统

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

StudentWan/ashen-blog

开源软件地址:

https://github.com/StudentWan/ashen-blog

开源编程语言:

Vue 41.4%

开源软件介绍:

Ashen Blog

v1.1

Ashen Blog Management System, developed with Koa2 and Vue2, easily build your own blog.

Ashen Blog 管理系统,采用 Koa2 和 Vue2 完成开发,帮助你轻松的搭建自己的博客。

介绍

Ashen Blog系统遵循ES6+的代码标准,前端采用了Vue 2.x作为开发框架,后端采用了Koa 2.x作为RESTful API 服务器开发框架,是一款的前后端分离并利用axios进行数据通信的单页面应用。

Client端展示博客,目前有:文章列表、文章详情、日期归档、标签归档、阅读列表和个人介绍。

Admin端管理博客,目前支持:Markdown编写博客、快捷按键及Tool bars、自动保存博客、批量标签管理、阅读列表管理、撰写个人介绍。

Server端作为RESTful API服务器,负责与Client/Admin端进行数据通信。

数据持久化方面使用Mysql作为数据库。

demo地址:

无火的余灰

client 客户端界面

admin 管理端界面

快速使用

下载好项目以后,首先安装依赖:

npm install

需要修改config文件:

# 修改baseUrl为你的服务器地址
vim admin/src/main.js

# 修改baseUrl为你的服务器地址
vim client/src/main.js

# 修改数据库配置db为你的数据库配置
vim server/config/index.js

Client 端

使用命令:

# 以开发模式运行Client 端
npm run dev-client

# 打包Client端
npm run build-client

Client端展示博客,目前有:文章列表、文章详情、日期归档、标签归档、阅读列表和个人介绍。

使用marked实现Markdown解析。

使用highlight.js实现代码高亮。

使用moment对显示日期进行格式化。

Admin 端

使用命令:

# 以开发模式运行Admin 端
npm run dev-admin

# 打包Admin端
npm run build-admin

Admin端管理博客,目前支持:Markdown编写博客、快捷按键及Tool bars、自动保存博客、批量标签管理、阅读列表管理、撰写个人介绍。

初始账号:admin

初始密码:1qaz@wsx

使用Simplemde实现Markdown编写,支持快捷键和自动保存,具体快捷键请查看相关文档:simple-markdown-editor

利用函数去抖及axios实现文章的自动保存。

Server 端

使用命令:

# 以开发模式运行Server 端
npm run dev-server

# 部署服务(请先全局安装pm2)
npm start

Server端作为RESTful API服务器,负责与Client/Admin端进行数据通信。

利用JWT实现鉴权系统。

利用Koa2及一些中间件和工具函数实现REST。

Contribute

欢迎提交issue。

欢迎提交pr,请fork dev分支,并在其上编写代码。

非常感谢!

致谢

Chuck Liu的Kov-Blog

License

MIT




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap