时间:2021-07-01 10:21:17 帮助过:38人阅读
Goku是《七龙珠》的主人公孙悟空,神通广大,解决世间存在的问题。同样,尝试前后端分离,也希望可以解决目前前端开发中存在的痛点。
整体上使用MVC的架构,但跟Angular不同(双向绑定),数据是单向流动的,数据单向流动有如下的好处:
MVC各层使用的基本技术:
Goku整体架构主要存在四个实体: 浏览器(browser)、nginx、node中间层、后端sever。跟传统的网站架构相比,多了一层node中间层,该层也是Goku的核心。
因为使用了react-router,所以整个系统就是一个单页面应用(SPA):
这里面存在一个问题:如果保证前后端渲染的一致性? 即要求react的 data-react-checksum 前后结果保持一致。
nginx已经非常流行,起到请求分发和负载均衡的作用。这里,通过nginx将不同的请求,分发到不同的服务器上:
node server就是一个中间层,起到两个作用:
具体来说,可以分为如下几个功能点:
思路: 根据请求的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); } })})
思路: 每个URL均有指定的首屏数据,通过Promise.all并发地发布异步请求,当所有数据都拿到后,执行回调函数
Promise.all([promise1, promise2, ..., promisen], (vals)=> { ... const initialState = val; const store = createStore(reducer, initialState);})
思路: 使用react的 renderToString 得到静态化数据
Promise.all([promise1, promise2, ..., promisen], (vals)=> { ... const initialState = val; const store = createStore(reducer, initialState); ... const props = { store, ... }; str = React.renderToString(App, props);});
思路: 每个api跟一个相应的js文件对应起来,js文件通过 mockjs 的数据模板完成数据的mock
思路: 将3.3得到的字符串 str 与html的其他内容(例如 mta 、