分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
发布于 9 个月前 作者 liangfengbo 10279 次浏览 最后一次编辑是 3 个月前 来自 分享

img

一、这是个什么的项目?

基于 Node.js Koa2 实战开发的一套完整的博客项目网站,使用 Koa2 二次开发一套适合多端的 RESTful API,同时配套完整的后台管理系统,且前端展示既有基于 ejs 服务端渲染,也有基于 Vue.js 前后端分离的 2 套前端网站。

博客线上地址是:https://www.boblog.com

二、项目包含什么功能?

koa koa-router sequelize mysql2

2.1.Node.js Koa2服务端 RESTful API

  • 管理员与权限控制接口
  • 文章管理接口
  • 评论/回复功能接口
  • 分类接口
  • 广告接口

2.2.博客前端展示网站

  • ejs 服务端渲染
  • Vue.js 前后端分离

2.2.后台管理系统

  • [x] 使用 Vue.js iviewui design 搭建的后台管理系统

2.3.优势

  • 使用精小而强大的 Node.js Koa2 框架做服务端 API 接口。
  • 前端既有服务端渲染,也有前后端分离,且做了大量的优化工作,前端展示网站打开快。
  • 性能优化方面的工作:
    • 服务端使用了缓存机制,减少服务器的请求压力,如Redis 缓存,HTTP缓存
    • 使用了 CND 加速,静态文件存储在七牛服务器上
    • ejs 服务端渲染尽量减少文件的引入,减少对 DOM的操作,且封装使用了图片懒加载,事件防抖和节流控制浏览器滚动监听事件。
    • Vue.js 项目使用了模块按需加载,使用浏览器缓存机制减少对服务器请求的压力

2.4.知识点

  • 服务端:Node.js, Koa, MySQL, Sequelize, Redis
  • 前端服务端渲染:ejs, jQuery, Bootstrap, 体验网址:www.boblog.com
  • 前后端分离:Vue.js, iviewui, 体验网址:vue.boblog.com
  • 后端管理系统:Vue.js, iviewui
  • 性能优化
  • 非常适合想用 Node.js Koa2 做网站的朋友,相信你一定能学到知识。

三、如何学习?

3.1.数据库

启动项目前一定要在创建好 boblog 数据库,以下是执行数据库命令:

# 登录数据库
$ mysql -uroot -p密码

# 创建 wxapp 数据库
$ CREATE DATABASE IF NOT EXISTS boblog DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

3.2.修改 Koa2 项目数据库配置

请在根目录下的 |——config/config.js 文件下修改您本地的数据库名字(boblog)和数据库密码 ( password )。

3.3.克隆项目

首先使克隆项目,然后进入项目根目录使用命令安装包,最后命令启动项目,代码会根据模型自动创建数据库表的。

根目录都是 Node.js + Koa2 API 开发源代码,重点是 app 文件夹下的 api 开发;根目录下的 view 文件夹是 ejs 渲染项目;web 文件夹下都是前端网站项目源代码;根目录下的 admin 文件夹下都是后台管理系统的源代码。

以下是启动服务端项目的操作命令:

# 克隆项目代码
$ git clone https://github.com/LFB/nodejs-koa-blog.git

# 进入项目根目录
$ cd nodejs-koa-blog

# 安装依赖包
$ npm install

# 启动 Node.js Koa2 项目
$ npm run dev

打开浏览器输入回车:http://localhost:3000 可以看到服务端渲染的前端网站,当然可能该网站是个空数据网站,可以查看目录下的 ./app/api/v1 下的接口或者看 doc 目录下的 markdown 接口文档,在 postman 测试接口。

以下是启动后台管理系统的操作命令:

# 启动后台管理系统
1. 在根目录下进入admin项目:cd admin,
2. 安装包,执行: npm install 命令,
3. 启动服务: npm run dev; 浏览器打开:http://localhost:8083/ 即可以访问。

以下启动 Vue.js 前端项目

# 启动 Vue.js 前端项目
1. 在根目录下进入web项目:cd web,
2. 安装依赖包,执行: yarn install 或者 npm install 命令,
3. 启动项目: yarn serve 或者 npm run serve; 浏览器打开:http://localhost:8080/ 即可以访问。

四、接口说明(重要)

项目的所有接口文档都这里,可以逐个文档看。

五、FAQ

  1. 没有yarn环境,npm 可以吗?

答:可以的,建议使用 yarn,yarn 比 npm 速度快,主要是安装版本统一。

  1. 启动 Koa2 项目报错,请问原因?

答:首先,请检查一下使用 npm 或 yarn 安装依赖包没。然后,再请检查一下确保安装好数据库,新建好数据库:boblog,请看上面的数据库配置。最后看下启动打印日志是否有报错的信息。

  1. … 更多问题请到 Issues查阅,或者有问题请到 Issues 提问

License

项目已实现管理员、权限管理、文章、分类、评论等接口,前端模板网站和后台管理系统。自己可以根据项目代码学习,可以到 postman 软件中测试API或学习。

喜欢或对你有帮助的话,请你点一个星星 <strong style=‘color:red;’>star</strong> 鼓励我,或者您有更好的建议和意见,请提出来告知我,可以留言 Issues。希望能够帮助到你学习!Thanks!共勉!

MIT, by 梁凤波

48 回复

666.我一直想开发,但是懒癌晚期。最终开发了个半成品

我喜欢你的域名 有空可以弄个https

@tzbcf 做这个项目,坚持维护了一年,大大小小的修改,最近学习了更多的nodejs知识和总结工作的项目经验,再次更新完善了,欢迎指点,O(∩_∩)O谢谢

@weizhuanhua 好的,谢谢,我也很喜欢这个域名,有空我再上SSL

正好缺练手项目不错

@OXOYO 在这社区里这么多大佬,我还不到大佬的级别啊,让大佬见笑了,共勉。

@Ansel-T 嘻嘻,多谢,这项目坚持了一年了,我花了挺多心思去重构的,现在加了参数验证器,分层开发,中间件处理身份验证,全局错误处理,数据库表设计等等,也使用了七牛的CDN回源,体验打开网站的速度应该很快的,欢迎指点,共勉!:)

666,最近打算学习node,刚好可以参考你的项目,学习学习~

这blog样式也很赞啊

博主,我拿你的前端项目做自己的个人博客可以吗

最近正好想自己做博客,此时看见楼主帖子,太棒了

@heguangda 可以啊,也可以一起优化做好~

我最近也搞了一下blog,不过用的是Thinkjs、参考了很多东西,大半成品吧。直接结果分享给大家吧。blog.shengchao.top

koa2 怎么接收axios post的 json数据? 前端post

axios.post(’/api/test’, {‘value’:100}).then(res => { console.log(res.data); });

后端打印 ctx.request.body 为空 查看 ctx.request是

‘content-type’: ‘application/json; charset=UTF-8’, ‘x-requested-with’: ‘XMLHttpRequest’, ‘content-length’: ‘13’, connection: ‘keep-alive’,

@yakczh 首先你检查一下是否发送正确吧,一般接收的对象分为这几种:

body: ctx.request.body,
query: ctx.request.query,
path: ctx.params,
header: ctx.request.header

今天更新迭代了,优化了查询接口方法,提高性能,同时新增了专栏,回复等功能,欢迎一起学习,共勉!

做一个拦截器 将admin 接口拦截掉 限制访问 同在广州 交流下 我qq 605214875

建议加上SSR

@gawinwu 谢谢建议,如果选择SSR技术方案,我可能偏向于Koa2 ejs模板渲染,做这个开源项目的目的是为了帮助更多人一起学习进步,做一个参考学习,当然,有更多朋友的建议会让项目更加完善,谢谢你哦~

3秒的时候我就关闭了网页,后来测试一下8秒打开,你确定博客用Vue开发好吗?

@yuedun 你好,我刚才优化了一下,你可以再测试一下,是否打开速度快多了?

@liangfengbo 现在是快了,1秒打开。

@yuedun 嗯嗯,谢谢你哦~

小白问个问题,就是我项目跑起来后,密码登录的时候访问路径直接显示 Cannot GET /login 是什么原因。 后台项目好像我除了/的重定向后访问的地址可以,其他的都没办法直接通过路径打开(显示 Cannot GET / 或Cannot POST)

@lzb93 请问是你启动我这个项目出现的问题?

@lzb93 已修复了,谢谢你哦,你可以 git pull 拉取一下最新代码哦!

登录鉴权失败 跳回/login的页面,让我一直觉得有问题,密码错了没有提示直接刷新页面= = 。

感谢楼主值得学习哈~~~慢慢摸索,学着打包到线上

@lzb93 谢谢你的指正,我已经优化这种情况了,你可以 git pull 拉取一下最新代码哦!

@lzb93 好呀,一起学习进步,共勉~

想了解下楼主服务器配置,还有前端打包加速方案。还望赐教。

@blackmatch 服务器配置是最低配1核1G,前端优化主要做了按需加载,CDN储存静态资源等

@liangfengbo node搭建服务器项目环境有啥好的教程吗~

@lzb93 Google,baidu一大堆啦,我部署时除了基本的环境,还有Git用来拉取代码,MySQL数据库,Nginx转发等,pm2启动管理koa2项目,建议自己一边搜Google,一边配置,遇到问题想办法解决,这样会有意义,且大大提升自己:)

@liangfengbo 行哈,谢谢楼主

@liangfengbo Koa2 + ejs 不错,加油啊,支持你

@gawinwu 你好,应你的所的需求,新增了 ejs 服务端渲染,也做了一些优化工作,对比前端分离的项目,各自有优点,从中也学习到不少的知识,谢谢你的支持与建议。

@2019-12-15 更新迭代了新代码,主要新增的内容有:

  1. 新增了 ejs 模板渲染
  2. 使用了 Redis 缓存
  3. 做了一些性能优化,如缓存机制,事件的节流,图片懒加载等等在项目中实际运用。 欢迎大家查阅与多多指教,谢谢(#^.^#)

@liangfengbo 很喜欢你博客的风格,可否为Cabloy-CMS开发一套主题,然后发布到Cabloy商店里面?

@zhennann Hello~ 我刚刚看了一下 Cabloy-CMS,发现网站主题和开源内容不错呀,做得很棒👍

@s749312025 你的博客登录github失败

回到顶部