React+Redux架构的CMSweb后台管理系统

一、CMS管理系统功能

CMS是Content Management System的缩写，意为"内容管理系统"。

CMS都有可能包括些什么？

隐藏在内容管理系统(CMS)之后的基本思想是分离内容的管理和设计。页面设计存储在模板里，而内容存储在数据库或独立的文件中。 当一个用户请求页面时，各部分联合生成一个标准的HTML（标准通用标记语言下的一个应用）页面。

一个内容管理系统通常有如下要素：

文档模板

脚本语言或标记语言

与数据库集成

内容管理系统也简化了网站的内容供给和内容管理的责任委托。很多内容管理系统允许对网站的不同层面人员赋予不同等级的访问权限， 这使得他们不必研究操作系统级的权限设置，只需用浏览器接口即可完成。

内容管理系统被分离成以下几个层面：各个层面优先考虑的需求不同

1，后台业务子系统管理（管理优先：内容管理）：新闻录入系统，全文检索子系统等，针对不同系统的方便管理者的内容录入：所见即所得的编辑管理界面等，清晰的业务逻辑：各种子系统的权限控制机制等；

2，前台发布（效率优先：发布管理）：面向最终用户的缓存发布

可以通过WEB实现一套完整的CMS管理系统，用于对PC网站和移动端浏览内容的增、删、改、查等操作，通过对模板内容的修改即可改变网页展示内容，方便了网站管理人员的日常管理和操作。

二、One Page One Application

1.定义

 One Page, One Application(后面缩写为OPOA，或者1P1A)， 含义很简单：一个页面就是一个应用。不再使用iframe, 页面提交不能再使用submit方式。网页中发生的操作和交互都在当 前页面进行。

      在 众多的基于Web的MIS系统中，没有人关心页面的组织形式；大多数稍微复杂的MIS系统，都采用分祯(Frame)的方式来组织页面，这样，在进行业务 操作的时候，url的变化表现在一个框架页面内，从浏览器的地址看起来，只有一个地址；更有甚者，一些应用干脆弹出一个去掉了浏览器菜单、工具条、地址 栏、状态栏的窗口（比如招商银行、民生银行的网上银行系统），连地址都看不见。因此，一个页面就是一个应用，从用户的角度来说，对于操作型系统，是一种非 常自然的体现。用户无需了解每一个具体的操作对应的地址是什么。

      这种设计背后的含义实际是：是希 望由程序来控制用户的行为，还是反过来。在操作型系统中，每一步的操作往往被业务含义严格定义，无论是应用的设计者，还是其使用者，都希望在一种受控的状 况下来进行操作。例如，一个审批动作，用户更希望是通过一个按钮来触发，而不是访问类似于/approve.action?itemid=123的方式。

      这样的好处是：很多东西，例如：JS，CSS，HEAD等整个系统都只需加载一次。加快响应速度。客户体验也有所提高，不再弹出窗口，不再整个页面进行刷新。

2.场景（内容管理系统更倾向明确的URL定位页面）

显然，OPOA的设计只能针对那些对URL不敏感的系统，或者说操作型系统。绝大多数MIS系统都属于这一范畴，Email系统也是这一范 畴，其他领域，如监控系统，聊天室等都可以采用这种思路。反面的例子是，对于内容型系统，如新闻系统，Blog系统，论坛系统，用户更希望能够通过一个明 确的URL来定位页面内容，搜索引擎也喜欢这种地址。这种应用需要的是一个合理，易懂，明确的地址。

3.设计与实现

注意到上述的OPOA地实现只是对用户而言，看起来好像是一个页面一样，但实际上还是有众多的action， page在后面工作。

    

三、react的技术准备

1.react的起源

React 起源于 Facebook 的内部项目，意在解决随时间数据不断变化的大规模应用程序开发，react可以表现出应用程序在任何时间点的样子，底层数据改变时，react的虚拟DOM机制会自动重新渲染，更新界面。

2.对react的认识

• React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；

• React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；
  
  
• React的虚拟DOM原理：在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM）的 机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前 整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟 DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是 Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要 关心在任意一个数据状态下，整个界面是如何Render的。
• jsx语法：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。jsx语法与javascript并不兼容，需要通过babel-loader来解析。

          

• 组件化：构建可组合的组件࿰