/blog

基于 justemit/elapse 搭建的blog

Primary LanguageJavaScriptMIT LicenseMIT

流水衷曲,韶华飞逝

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

  • 接口服务使用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的样式开发了dialogloadingconfirmnotoficationmessgae等等组件,(感觉自己对vue组件的开发姿势又稍微深入了一点点,毕竟学无止境)。以下为部分页面截图:

  • 登录预览

  • 个人中心

  • 文章管理

1.2 前台页面渲染

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

2. 笔记总结

2.1 Vue.js 篇

2.2 Koa2 篇

2.3 部署篇