之前说好的一周完成两篇技术文档，事实证明被打脸了。我高估了自己学习的速度和时间管理，实在没办法做到，但我还是在学习的路上坚持着。今天给大家带来是5月份自己学习的一个总结：即使用koa和vue全家桶独立完成一个前后端分离的项目。于是利用双休的时间，我写了一个小demo，来跟大家分享前端菜鸟是怎样从0到1的完成整个前后端分离项目的架构，以及在完成这个项目中会遇到哪些问题。
这个demo是以《易经64卦》作为数据基础，在前端给出相应的展示。下面我给大家放两张这个例子的配图，让大家有个大概的印象。
今天这篇文章是作为项目开始之前的一些介绍。包括这个项目会用到哪些插件，项目的结构，开发前需要的准备有哪些，表结构如何设计等等，我将在下面给大家一一介绍。
项目地址
演示地址
项目架构
既然是前后端分离，那么肯定是分成两部分：前端，后端。所以我分别用client和server文件夹代表这两部分。前端部分是使用vue全家桶，使用vue-cli脚手架创建的，这一块相信大家都非常了解，其项目结构就不做过多的赘述。我在这里需要重点讲一下server部分的架构。
server的文件结构
|- config
|- config.json
|- migrations
|- ...-create-contents.js
|- ...-create-comments.js
|- models
|- contents.js
|- comments.js
|- node_modules
|- routes
|- maiin.js
|- seeders
|- ...-contentTest.js
|- ...-commentTest.js
|- app.js
|- package.json
我对主要的文件夹做一个介绍：
- config是连接数据库的配置文件
- migrations是建立数据库表结构的迁移文件
- models是对数据进行增删改查的模型文件
- seeders是创建数据库数据的种子文件
- routes 写接口的路由文件
看到这里我就开始疑惑了，这些迁移文件、种子文件是什么鬼，抛出一个这样的概念根本无法理解啊有木有。是的，俺也一样。所以接下来我跟大家介绍一下这个项目需要用到的一些插件，而这里的迁移文件、种子文件的概念，就是根据这些插件来的。
服务端依赖的插件
- mysql2
- sequelize
- sequelize-cli
- koa
- koa-body-parser
- koa-router
- koa-static-cache
所以要想让服务端跑起来，需要用到上面列出来的插件。而上面说的迁移文件、种子文件就是sequelize这个插件里的概念。这一部分我在后面会单独用一篇文章来介绍。感兴趣的朋友可以提前看一下这些插件的使用方法。
上面说到需要使用数据库，那么要在测试环境让项目运行起来，你需要提前准备好开发的环境，需要做哪些工作呢？我在下面给你一一道来。
开发前的准备工作
- 本地安装mysql数据库
- 安装node环境
准备工作比较简单，按照上面的两点要求做好就行。到了这里数据库已经搭建好了，那下面我们就根据需求来说说如何创建数据库的表结构。
定义表结构
我们在上面的展示图可以看到。一共是两个页面：一个是展示了64卦的列表页面，一个是单独某一个卦象的详情页面，很简单的效果。
我们分析一下：至少需要创建2张表。一张是64卦的内容表，一张是评论表（或者说解释表）。内容和解释表的关系是一对多的关系。即：一个卦象可能对应多条评论（多条解释）。所以需要有一个字段将这两张表进行关联。那是什么字段呢？即每一个卦的id在内容表中是唯一的，而这个id可以跟它对应的评论表做一个映射关系，这样就能建立起联系了。
所以最后我的表结构设计是这样的：
内容表：Content
| 名称 | 类型 | 允许空 | 默认值 | 主键 | 说明 |
|---|---|---|---|---|---|
| id | INTEGER | No | - | Yes | id |
| contentId | INTEGER | No | - | No | 卦Id |
| name | STRING | No | - | No | 名称 |
| contentList | STRING | No | - | No | 内容 |
| desc | STRING | No | - | No | 描述 |
| likeCount | STRING | No | - | No | 点赞人数(附加字段) |
评论表：Comments
| 名称 | 类型 | 允许空 | 默认值 | 主键 | 说明 |
|---|---|---|---|---|---|
| id | INTEGER | No | - | Yes | id |
| commentId | INTEGER | No | - | No | 卦Id |
| content | STRING | No | - | No | 评论内容 |
以上就是对该项目的简单介绍，更多内容将在后续为您揭晓。
总结
主要讲了一下关于实现这个demo的一些准备工作、该项目的架构、服务端依赖的插件、表结构的定义等内容。是从比较大的方向粗略的讲了一下让大家对这个demo有一个基本的预测，也方面我们接下来对这个demo的细节部分进行阐述。
另外我自己新建了一个QQ群，群号码是：1103713567（全栈开发跳板群）。方便大家一起交流前端方面或者项目方面的问题。
