Project - Hogwartz

5 月 28 日,Kiyoshi 降落在了成都双流国际机场,开始了 14 天的集中隔离。隔离的这两周里不能出门,不能点外卖,虽然条件也还可以,但是耐不住闲的 Kiyoshi 还是准备学习一点东西。前几天看完了 C# 的基础后,前天开始学习 Andrew Ng 的 ML 课程。虽然有些事情做了,但是整个假期还是很闲的。

昨天,11 突然提出想要做一个前端的项目,我说要不就做个 MOOC 系统吧,于是就有了这个新项目。

取名永远是一件麻烦的事,为了简单方便,我们就叫它 Hogwartz 吧。

技术栈

Hogwartz = Ant Design Vue (Vue) + strapi (Node.JS) + Caddy + MongoDB

后端

由于我们也是第一次开发这种项目,而且我们并不想要自己从头造一个后端,因为主要目的是练习 Vue 之类的前端技术,所以我们选用了 strapi 作为后端进行数据交互选择 strapi 的原因也是因为 Node 很可爱

数据库选择了 MongoDB。因为比较易用,而且和 Node 交互起来很方便。

前端

Http Server 选用了 Caddy,因为配置起来 —— 实!在!是!太!简!单!啦!前后端分离的情况下,前端配置为静态网页,后端通过反向代理访问 API,Caddyfile 只需要写不到十行。

Vue 组件库我们纠结了很久。从设计风格上来说,我们不是很想要一个非常 Material 的的设计语言 —— 我们追求干净,生态良好,文档完善的库。选来选去,我们筛选出了 iViewElementAnt Design Vue。纠结良久,最后选择了 Ant Design Vue 来进行开发。

开发过程

这里会记录开发过程中的技术细节以及遇到的坑。

Vue-CLI

SPA vs MPA

Vue CLI 是 Vue 的脚手架应用,它可以让前端应用快速成型。我并没有使用过 Vue CLI,所以在开发登录界面时发现按照其目录结构创建的新页面并不能被 Vue 正确渲染。阅读了 Vue CLI 官方文档后发现 Vue CLI 默认项目为一个 SPA,但是通过配置 vue.config.js,我们可以开发 MPA。其配置格式也在文档中给出了。

To - Be - Done

文章作者: Takahashi Kiyoshi
文章链接: https://blog.k1yoshi.com/article/new-mooc-project/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Kiyoshi's Blog