0.Goku
Goku是《七龙珠》的主人公孙悟空,神通广大,解决世间存在的问题。同样,尝试前后端分离,也希望可以解决目前前端开发中存在的痛点。
1.基本思路
整体上使用MVC的架构,但跟Angular不同(双向绑定),数据是单向流动的,数据单向流动有如下的好处:
- 数据具有更好的可预测性,view层的变化一定来源于model
- 性能上更优
MVC各层使用的基本技术:
- view: 使用react作为view层渲染,这里面的渲染分为node端、浏览器端。react的虚拟DOM、专注于UI、单向流动的特点,是解决页面性能的一把利器。
- controller: react-router是建立在 history 上,用于实现页面单页面应用,同时也方面地进行路由管理。通过react-router可以方面地进行请求的分发处理。
- model: 使用了redux实现数据的流动,同时配合immutable.js来解决state的不可变性,避免引用带来的副作用。
2.整体架构
Goku整体架构主要存在四个实体: 浏览器(browser)、nginx、node中间层、后端sever。跟传统的网站架构相比,多了一层node中间层,该层也是Goku的核心。
3.详细描述
3.1 浏览器
因为使用了react-router,所以整个系统就是一个单页面应用(SPA):
- 当页面初始化时,首屏数据已经渲染完成,直接展示处理
- 次屏数据,需要通过ajax异步获取数据,然后在浏览器端完成渲染
这里面存在一个问题:如果保证前后端渲染的一致性? 即要求react的 data-react-checksum 前后结果保持一致。
- 首屏数据需要通过 JSON.stringify(datat) 传递给页面
- 避免生成动态内容,例如存在 new Date() ,则这个时间在node和browser渲染后就会造成不同
3.2 nginx
nginx已经非常流行,起到请求分发和负载均衡的作用。这里,通过nginx将不同的请求,分发到不同的服务器上:
- url请求统一分发到node server,从其中获取前端的静态资源
- api请求,直接发送到后端服务,当然也可以通过node server来中转
3.3 node server
node server就是一个中间层,起到两个作用:
- 前端静态资源的管理
- 首屏数据的渲染
具体来说,可以分为如下几个功能点:
3.3.1 路由匹配
思路: 根据请求的URL + react router的router配置信息,得到匹配的component
import { match, RoutingContext } from 'react-router';import routes from './routes';serve((req, res) => { match({ routes, location: req.url }, (err, rediction, renderProps) => { if (...) { res.status(200).send(htmlStr); } })})
3.3.2 获取首屏数据
思路: 每个URL均有指定的首屏数据,通过Promise.all并发地发布异步请求,当所有数据都拿到后,执行回调函数
Promise.all([promise1, promise2, ..., promisen], (vals)=> { ... const initialState = val; const store = createStore(reducer, initialState);})
3.3.3 静态化渲染
思路: 使用react的 renderToString 得到静态化数据
Promise.all([promise1, promise2, ..., promisen], (vals)=> { ... const initialState = val; const store = createStore(reducer, initialState); ... const props = { store, ... }; str = React.renderToString(App, props);});
3.3.4 数据mock
思路: 每个api跟一个相应的js文件对应起来,js文件通过 mockjs 的数据模板完成数据的mock
3.3.5 返回完成html
思路: 将3.3得到的字符串 str 与html的其他内容(例如 mta 、
- 网站首页
- PHP视频
- PHP实战
PHP中文网:独家原创,永久免费的在线php视频教程,php技术学习阵地!
Copyright 2014-2019 http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号 免责申明赞助与捐赠