a805883237 / blog

基于 justemit/elapse 搭建的blog

流水衷曲，韶华飞逝

前后端分离 + 服务端渲染的博客系统。其中：

• 接口服务使用Koa2 + mongodb + mongoose
• 后端管理使用Vue开发
• 前端页面使用React服务端渲染框架nextjs

本项目比较简单，一定程度上适合入门。您可以学到如何使用koa2开发接口和如何使用vue开发单页面。

0. 如何运行

0.1 运行接口服务

打开 server 项目修改 server/config 下的相关配置，尤其是 mongodb 的配置，然后运行 npm run dev 即可

0.2 运行后台系统

进入 be 项目，安装依赖后执行 npm run dev，然后打开浏览器相关链接即可

0.3 运行前台页面

进入 fe 项目，安装依赖后执行 npm run dev，然后打开浏览器相关链接即可

1. 效果预览

1.1 后端管理页面

后端管理页面使用了vue、vuex、sass以及axios，其中模仿ElementUI的样式开发了dialog、loading、confirm、notofication、messgae等等组件，（感觉自己对vue组件的开发姿势又稍微深入了一点点，毕竟学无止境）。以下为部分页面截图：

• 登录预览

  

• 个人中心

  

• 文章管理

  

1.2 前台页面渲染

借此机会想学习一下React，于是前端页面使用了React服务端渲染框架nextjs，并使用了Redux、axios以及koa(自定义服务所用)。前端页面目前比较简单，主要就是文章的读取和渲染。

2. 笔记总结

2.1 Vue.js 篇

• Vue组件开发总结
• 利用Promise做表单验证
• 上传组件开发以及上传到七牛云

2.2 Koa2 篇

• 一文入门koa2接口开发
• 使用koa2签发认证token
• 使用log4js为koa2增加日志记录

2.3 部署篇

• 页面部署与接口服务