基于 React 的前端项目开发总结
原文发表于【抹桥的博客-基于 React 的前端项目开发总结】 技术选型我们的项目主要选用以下技术开发,再配合一些其它辅助工具。
开发及线上环境开发环境由于项目是前后端分离的,所以我们需要一套完整的开发环境,需要包括以下功能:
基于这些需求,我们基于 Express,Webpack,Webpack-dev-middleware 搭建了这套完整的开发环境。
可以看到,浏览器所有的请求都被本地的 Node.js 服务拦截。对于静态资源请求,都委托给 本地开发当 前后端联调当 这样就可以直接用本地开发代码和后端联调,能大大提高效率,省去了每次需要往服务器上构建部署的步骤。 线上环境前后端是分开部署的,所有的静态资源都放在 CDN (example.cdn.com)上面。 也就是说我们的页面在 example.cdn/index.html 这里,但是请求的接口在 example.163.com/api/xxx,我们肯定不能让用户去直接去访问 example.cdn.com/index.html,这样不合理,而且由跨域问题存在。 那么访问 example.dai.163.com 的时候,怎么拿到我们的 HTML 页面呢?
在客户端和后台服务之间架设一台 Nginx,我们访问的 example.dai.163.com 有两种请求:
这两种请求都先经过 nginx,在这里做判断,如果是页面请求那么由 nginx 转发到 CDN, 否则交给后端服务来响应接口请求。 拿到页面以后,其它所有的 css,js 等静态资源都是直接请求到 CDN ,这里没什么说的。 数据流转我们是借助 redux 来管理数据流的。
我们来看这张图。 首先,通过 以 当 { types: ['home/start','home/success','home/failure'],payload: { api: ... },meta: { isApi: true } } 所有的 在这里,我们的 比如在这个中间件里面,我们去做了真实的接口请求,在请求成功或失败的时候分发对应的 当请求成功,并渲染页面后,假设用户点击了一个按钮,这个按钮需要唤起 { types: ['sdk/start','sdk/success','sdk/failure'],payload: { command: ... },meta: { isSDK: true } } 同样的道理,这个 中间件的存在,使整个流程变得非常清晰,接口的请求的中间件就只做接口请求,调用 native 接口的中间件就只做对 native 的调用,当对 native 接口的调用需要做后端接口请求的时候,去分发一个 每个中间件只专注于自己的事情,既方便后续的维护,同时也提供了一个很好的拓展方式。 一个例子
假设我们由如下的一个路由配置。 { component: App,path: '/',onEnter: initLogin(store),indexRoute: { getComponent(nextState,cb) { require.ensure([],require => { cb(null,require('../views/Home').default) },'Home') },onEnter: initHome(store) },childRoutes: [ createActivateRoute(store),{ path: 'test',indexRoute: { getComponent(nextState,cb) { require.ensure([],require => { cb(null,require('../views/Test').default) },'Test') } } },... ] } 那结合 首先,通过最上面 线上环境 一节提到的内容,拿到页面需要 html,css,js. 然后渲染 此时触发根路径的路由匹配,然后加载根组件 后面的事情就和前面数据流转一节讲的是一样的了。 总结在前后端完全分离的基础上,借助一套完善的开发环境,可以大大提高的我们的开发效率,降低前后端联调的成本。 同时借助于 Redux 思想,实现单向数据流,让我们可以实现一个非常清晰的数据流向。并且,借助于中间件,我们可以更加有效的控制数据流转的过程。为后面项目的扩展提供无限的想象空间。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |