Skip to content

Commit

Permalink
update README
Browse files Browse the repository at this point in the history
  • Loading branch information
aemoe committed Apr 27, 2017
1 parent a2887b0 commit d32cc51
Showing 1 changed file with 16 additions and 22 deletions.
38 changes: 16 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<h2 align="center">框架名字</h2>

## 为什么叫这个名字?
### 为什么叫这个名字?

因为这是一份送给一只名叫Fairy M(美人)的猫的礼物 ~

Expand Down Expand Up @@ -40,9 +40,9 @@ npm start

<h2 align="center">也想从头到尾构建一个这样的框架? Well, 我把构建过程尽量详细的写下来</h2>

## 架构
### 架构

对于一个框架 最重要的就是架构, 对于很多框架的过于复杂, 这里会使用很直观的方法构建大家都懂的中间同构框架, 我们看下目录结构, 别切我们会用图解释模块的用途
对于一个框架, 最重要是架构, 我们如果需要构建一个前后端中间层同构的插件, 就需要在一个文件夹中. 考虑架构时,我为了让前后端所使用的环境相对独立, 前端部分可以单独提取出来进行制作, 也希望后端部分也能更清晰的展现和管理. 我们决定将框架内容分成两大部分, **Cliet****Server** 两个文件夹分别保存.对于前端文件夹目录结构相对比较固定了, 不需要考虑太多东西, 按照官方的推荐目录即可, 将View, Router和Store区分出来即可. 而服务器端部分, 我们考虑后还是使用最经典的MVC架构, 这样可以将控制层, 数据层和展示层区分出来, 即利于后台业务的解耦, 也利于我们之后的维护修改和添加新业务.

目录结构如下:

Expand Down Expand Up @@ -79,43 +79,37 @@ npm start
└── view 后端页面生成外套层存放目录,由于界面同步, 后端只负责生成页面时的外套嵌套
```

我们将客户端(client)和服务器端(server)区分出来, 这样就可以独立进行工作了,前端开发只要在client文件中工作, 而且client也是独立的, 可以直接单独使用, 只制作前端开发部分, 而不需要考虑太多后端部分

sever端主要以经典的MVC架构搭建, 方便后端的对数据层和控制器的独立

最终将前后端开发工作进行分离, 让前端也可以自己独立开发, 也可以合并整体项目开发

## 前言
### 前言

**为什么要用中间同构?中间同构是什么?**

在出现同构之前,我们会让后端输出API的json数据, 而前端接收到这些数据以后, 进行封装和拼装,这样会出现一个问题,就是如果业务变更了,那么接口变更,这时候前端和后端人员都需要重新修改字节的代码和业务逻辑,之前的主要问题如下:

* 前后端端使用不同模板引擎渲染
1. 前后端端使用不同模板引擎渲染

```
后端用自己的业务实现业务逻辑和json数据的拼接,前端接收到json数据,完成数据到界面的转换,成本很大
```

* SEO问题
2. SEO问题

```
异步加载的SEO优化问题,没有服务端渲染,蜘蛛抓取不到数据,无SEO可言
```

其实理由很简单,就是为了减少开发成本,并增加整体项目的可维护性, 而且通过使用该技术可以有效减少网页加载速度,并提供优良的SEO优化能力,还能够利用Nodejs的高并发能力的特性,让Nodejs处理它最擅长的方面,从而增加整体架构的负载能力,节约硬件成本,提升项目的的负载能力

## 一. Nodejs的环境安装和配置
### 一. Nodejs的环境安装和配置

构建一个这样的框架 肯定用的是NodeJS环境, 毕竟无论是后端服务器, 代码打包优化等工作,都是由Nodejs负责制作的

怎么安装?很简单~ ~ 官方地址直接下载 [Nodejs官网](https://nodejs.org/en/ "Nodejs官网")
怎么安装?很简单~ ~ 官方地址直接下载 [Nodejs官网](https://nodejs.org/en/)

Window: 直接下载官方安装包安装即可,请下载最新版本,这样可以支持新的一些特性,例如async和await等,之后会用到

Mac: 不建议用安装包安装 一个是升级不方便,切换版本也不方便,而且卸载非常麻烦,mac使用brew安装或者nvm来安装,攻略大家自己搜索吧

## 二.webpack及babel环境工具的搭建
### 二.webpack及babel环境工具的搭建

当完成了Nodejs环境, 我们会遇到一个大坑, 就是需要一些自动化工具的使用, 主要是webpack和babel,webpack我们使用2.0版本,也是最近发布的

Expand Down Expand Up @@ -568,7 +562,7 @@ new UglifyJsPlugin({
OK, 我们完成了webpack和Babel的配置, 就可以开始开发了, 这部分主要还是资料的稀缺,现在有了中文官方站好一些, 之前很多配置并不是很找, 看了后希望大家能够明白这些配置是干什么的而不只是按照别人的配置完成即可.
## 三.react的引用
### 三.react的引用
react作为实现的核心框架,主要的黑科技也是靠它给出的一些方法来实现的,我们先看下react的生命周期
Expand Down Expand Up @@ -913,7 +907,7 @@ exports.layout = function(content, data) {
```
这里很简单 就是将生成的内容填充到这个外套中
## 四.前端路由和后端路由的同步
### 四.前端路由和后端路由的同步
当我们明白了React的生命周期和了解了服务器如何使用官方的2个方法实现服务器渲染功能, 我们看下如何架构前后端公用的路由
Expand Down Expand Up @@ -1041,7 +1035,7 @@ export async function index(ctx,next) {
这里可以看到路由的设计, 在后端使用了koa2, 所以可以对请求的类型进行判断,这样充分利用了链接的优势, 可以请求同一个地址, 由于请求类型的不同, 判断是html还是json,反馈不同的数据结构, 这样就做到了路由的富应用
## 五.前端状态控制及后端状态控制的同步
### 五.前端状态控制及后端状态控制的同步
**什么是redux**
Expand Down Expand Up @@ -1100,7 +1094,7 @@ server/view/layout.js
</script>
```
## 六.服务器的选择 - koa2
### 六.服务器的选择 - koa2
至此, 我们基本明白了三大同构的用处, 明白了为什么要这样做和怎么做, 我们看下服务器端的架构和使用的一些组件
Expand All @@ -1122,7 +1116,7 @@ app.listen(3000);
其他koa的相关文档, 请查阅官方的中文文档, 这里列一下使用的各种中间件
## 七.一些koa中间件的介绍和用途
### 七.一些koa中间件的介绍和用途
```js
router = require('koa-router')(),
Expand All @@ -1142,9 +1136,9 @@ koa的服务器记录插件,可以输出各种请求报错等信息的输出,
数据库方面操作方面使用了Sequelize, 可以对多种数据库进行操作, 并且使用了类似MongoDB一样的操作方法, 使用起来非常便捷,详细见 server/models
## 八.用户权限验证 passport
### 八.用户权限验证 passport
在身份验证方面, 我们选择了Nodejs 最常用的权限验证组件, 这个组件还支持OAuth , OAuth2 及OpenID等标准的登录.
Expand Down

0 comments on commit d32cc51

Please sign in to comment.