毕业设计（论文）基于Polymer的网站前台动态布局.doc

摘 要当下虽有一些网站前台设计器，不过依旧基于HTML的基本组件，跳转加链接，布局靠DIV+CSS，提交触发action，服务端处理提交的数据，处理后返回给客户端。设计繁琐，响应时间长，对于现在网民的吸引力日益减小。如果要实现绚丽效果，要在熟悉CSS和JavaScript基础上对审美有一定了解才能做出比较优秀的网站前台。如果实现动态布局则需要修改大量源码，再次使用不同的效果又要改代码。修改起来实在不方便，以前的成果不能简易复用，造成极大人力物力浪费，进而延长开发时间。所以一个不仅操作简单，易上手，而且功能强大的前台动态布局很有必要。基于Polymer的网站前台动态布局，采用Google最新Polymer 5.0框架，引入Polymer中core、paper等基本组件进行页面布局，以及Google API和其他一些集成组件作为拓展功能。用<core-icon>设置各个功能按钮；<core-toolbar>作为包含各个按钮的工具条，<core-pages>作为组件的容器，囊括组件、组件根结构、组件属性、组件样式；<core-selector>包含在<core-pages>中，用来显示各个组中的各个组件；<x-meta>组件实现选中组件属性和样式的实时更新；利用<core-dropdown>实现组件拖拽进入设计面板，<core-drag-drop>接收被拖入设计面板中的组件;使用<inspector-element>结合数据双向绑定进行对选中的组件在<core-pages>中显示其属性，使用<Github-elements>组件实现网页保存到Github的gist个人中心。一切皆组件、最少化代码量、最少框架限制的基于Polymer的网站前台动态布局，适合任何想做网站的个人或企业的UI设计，不仅操作简单，极易上手，不需要修改代码。数据双向绑定，反应迅速，通过简单设置组件属性实现绚丽的动态效果，可用更短时间做出交互更好的网站前台。应用在网页模板的设计更是游刃有余，不仅动态效果丰富，甚至还可以定制动画展现，而且可以实现组件属性间的绑定，进而实现组件间通信。非常适合设计公司、开发个人网站。采用该系统可做出很强交互性的网站模板，进而应用到企业。应用范围广，发展潜力巨大！关键词：Polymer； 动态布局； x-meta； UI设计； 前台； 数据双向绑定； 集成组件。ABSTRCTAt present there are some web designer, but still the basic components based on HTML, jump and links, depending on the DIV+CSS layout, to trigger the action server processing, the data submitted, after the return to the client. The design of complex, long response time, for now the netizen's appeal is gradually reduced. If you want to achieve a beautiful effect, to be familiar with CSS and JavaScript on the basis of the aesthetic must understand in order to make excellent website front. If you need to modify the dynamic layout of a large number of source code, and again with the effect of different modified code. It is not easy to modify, before the results can not be easy reuse, causing great waste of manpower, and prolonged development time. So a not only has the advantages of simple operation, easy to use, and the powerful dynamic layout is necessary.The dynamic website layout based on Polymer, using the latest Google Polymer 5 framework, the introduction of core, paper and Polymer in the basic components of the layout of the page, and Google API and other integrated components as the expansion function. Use <core-icon> to set the function buttons; each button contains <core-toolbar> as a tool, <core-pages> as the component container, including component, structure, component properties, root component style; <core-selector> is contained in <core-pages>, used to display the various components of each group; real-time update selected component properties and style of the <x-meta> component to implement the components; drag and drop into the design panel using <core-dropdown>, <core-drag-drop> was dragged into the receiving component design panel; using <inspector-element> combined with two-way data binding to the selected components show its properties in <core-pages>, realize the Webpage saved to the Github gist center using the <Github-elements> component.All components, minimum amount of code, at least web dynamic layout based on Polymer framework, UI design is suitable for any person or business that wants to do a website, not only has the advantages of simple operation, easy to use, does not need to modify the code. Two-way data binding, rapid response, the dynamic effect of simple component properties to achieve a beautiful, available in a shorter time make better web interaction. The design used in the Webpage template is not only the dynamic effect of the rich, do a job with skill and ease, and even custom animation shows and can achieve, component properties between binding, and inter component communication realization. Very suitable for personal website design company, development. The system can make a strong interactive website template, and then applied to the enterprise. A wide range of applications, a huge potential for development!Keywords: Polymer; x-meta; UI dynamic layout; design; front desk; two-way data binding; integrated component.目 录1 绪 论11.1 开发背景11.2 开发的目的及意义12 网站前台动态布局开发环境32.1 Sublime Text简介32.1.1 Sublime Text特点及优势32.1.2 Polymer开发环境及版本介绍32.1.3 Polymer环境配置52.3 Polymer 简介52.4 Polymer包含技术简介52.4.1 Polymer分层与各层简介62.4.2 Polymer应用73 网站前台动态布局分析83.1 网站前台目标83.2 网站前台的初步调查83.3 网站需求分析83.4 前台动态布局可行性分析93.4.1 经济可行性93.4.2 技术可行性93.4.3 运行可行性93.4.4 时间可行性103.4.5 法律可行性103.5 系统设计104 详细设计124.1 构建工程框架124.2 模块设计134.2.1代码管理模块134.2.2 组件模块154.2.3 组件根模块154.2.4 组件属性模块164.2.5 组件样式模块165 系统实现185.1 系统前台布局设计185.1.1网站前台界面185.1.2标头195.1.3代码查看界面195.1.4保存设计成果195.1.5设计区域205.1.6组件编辑区205.2 系统功能的实现215.2.1代码管理模块215.2.2 组件模块245.2.3 组件根结构245.2.4 组件属性模块255.2.5 组件样式模块265.3 基于Polymer的网站前台动态布局系统前台布局测试276 结论29参考文献30致 谢31附 录321 绪 论网络技术发展数十年，网站多如牛毛，可现在网站前台设计器屈指可数。绝大部分停留在HTML页面设计，优秀的可以在界面完成元素的样式修改，不过基本停留在样式修改，DIV+CSS布局，JavaScript设计动画效果及表单验证。链接触发跳转界面，表单提交数据，服务端处理返回结果到客户端。这样的网站前端开发周期较长，交互一般。浏览网站不仅仅为了获得信息，而在于一种交互，体验。对于要求越来越高的广大网民的吸引力自然减小，造成很多新生网站难以为继。目前看来，各大框架仍难以互相兼容：各自使用各自的工具链、继承API、widget基础构架等等。Web开发的未来应该是更高的互操作性。这对Web开发生态系统的益处显而易见。建设基于Polymer的网站前台布局，是初步应用Polymer的一步，Polymer 是一个基于Web组件的新型Web库，包括一系列全面的、用于构建Web应用的UI和工具组件，倡导“一切皆组件、最少化代码量、最少框架限制”。Polymer设计得像菜单一样，可以按需选择。各组件之间可以通过数据绑定通信。建设网站除完成相应功能外，还有建设方便(无框架，组件开发)，操作简便(点击即可查看全部信息，功能按需定制)等特点。开发基于Polymer的网站前台布局，是Web未来UI的重要一环，除了完成相应功能。更重要能把前台动态布局网站互操作性展现出来，动态操作交互。用户可以方便快捷地通过该系统完成网站前台动态布局，初步了解组件属性即可设计网站。比起当下的一些网站设计器，该系统集成web组件，组件中已经包含不用属性和样式，无需利用CSS设置元素的样式，只需要按照需求设置组件的属性即可。完全可以用在网站模板的开发中，个人用来开发网页，与其他设计器，如DreamWeaver，相比，开发更方便，设计出的成品交互更完善，用户体验更好。1.1 开发背景随着互联网的高速发展，我国的网站处于一个快速增长的状态，网上交流办公已经成为一种趋势，互操作性好的网站为数不多，大多还是HTML4+DIV+CSS+JavaScript布局。尽管时下有一些网站设计器，大多功能单一，只设计按钮或表单。其他还是HTML网页设计器，只能设计静态界面，使用起来还是不尽人意。一些优秀的网站，交互性都比较好，采用动态布局，网页中元素可根据界面大小自适应布局。而关于网站前台动态布局的应用，几乎没有。1.2 开发的目的及意义基于Polymer的网站前台动态布局致力打造可以在线设计动态布局网站前台，组件可以像标签一样选择。选中组件后拖拽到设计面板即可设置为网页元素，图形化设置组件属性和样式，即时响应。通过组件中属性绑定及数据双向绑定技术即可达到组件通信的目的。真正实现“一切皆组件，最少代码量，最少框架限制”。从此，网站前台将变得异常简单高效，无需掌握大量布局知识，即可设计网页。设计出的不再是单调静态的展示界面，而是可以交互的网站前台，网站开发可以变得有趣。无论企业还是个人，用该系统开发的网站，无论布局，交互，用户体验。比起其他的一些HTML生成器来说效率大大提升。而且上线后，因其设计优势定会比一般布局设计吸引流量。2 网站前台动态布局开发环境2.1 Sublime Text简介Sublime Text 是一个代码编辑器，也是HTML和散文先进的文本编辑器，可扩展插件。它最初被设计为一个具有丰富扩展功能的Vim。支持 Retina 视网膜屏、快速跳到下一个、文本拖放、改善构建系统、CSS 自动完成和高亮设置等。2.1.1 Sublime Text特点及优势(1) 编辑功能强大Sublime Text 2还具有良好的扩展能力和完全开放的用户自定义配置与神奇实用的编辑状态恢复功能。支持强大的多行选择和多行编辑。强大的快捷命令“可以实时搜索到相应的命令、选项、snippet 和 syntex， 按下回车就可以直接执行，减少了查找的麻烦。即时的文件切换。随心所欲的跳转到任意文件的任意位置。多重选择功能允许在页面中同时存在多个光标。(2) 人性化布局该编辑器在界面上比较有特色的是支持多种布局和代码缩略图，右侧的文件略缩图滑动条，方便地观察当前窗口在文件的那个位置。也提供了 F11 和 Shift+F11 进入全屏免打扰模式。代码缩略图、多标签页和多种布局设置，在大屏幕或需同时编辑多文件时尤为方便 全屏免打扰模式，更加专心于编辑。代码缩略图的功能在更早的编辑器TextMate中就已经存在，TextMate已经开源。Sublime Text 2支持文件夹浏览，可以打开文件夹，在左侧会有导航栏，方便在同时处理多个文件。3、多个位置同时编辑，按住Ctrl，用鼠标选择多个位置，可以同时在对应位置进行相同操作。(3) 可恢复未保存文件Sublime Text 2还有编辑状态恢复的能力，即当你修改了一个文件，但没有保存，这时退出软件，软件不询问用户是否要保存的，因为无论是用户自发退出还是意外崩溃退出，下次启动软件后，之前的编辑状态都会被完整恢复，就像退出前时一样。2.1.2 Polymer开发环境及版本介绍(1) Node.jsNode.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行的数据密集型的实时应用。Node是一个JavaScript运行环境(Runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行JavaScript的速度非常快，性能非常好。Node对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。(2) Bowerbower是twitter的又一个开源项目，基于nodejs的模块化思想，用于web包管理，把功能分散到各个模块中，让模块和模块之间崔在联系，通过bower管理模块间的这种联系。如果越来越多得开源项目都托管在Github上，bower只需要将Github上项目加上一个配置文件既可以使用bower方式使用安装包。作为包管理，bower能提供添加新web包，更新web包，删除web包，发布web包功能，管理包依赖。包括以下功能。注册机制：每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配，所以包管理工具需要维护注册信息，可以依赖其他平台。文件存储：确定文件存放的位置，下载的时候可以找到，当然这个地址在网络上是可访问的。上传下载：这是工具的主要功能，能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了，不用到处找下载。上传并不是必备的，根据文件存储的位置而定，但需要有一定的机制保障。依赖分析：这也是包管理工具主要解决的问题之一，既然包之间是有联系的，那么下载的时候就需要处理他们之间的依赖。下载一个包的时候也需要下载依赖的包。(3) GithubGithub是全球最大的社交编程及代码托管网站。这个开源平台不仅拥有其它类似控制系统相同的功能，能够管理并储存修改过的代码，还能用于储存其它形式的文件，比如Word，PPT或者其它最终版软件，所以，GitHub不仅仅是一个控制系统，还是一个草稿与最终文件的储存系统。GitHub的撒手锏就是复制“fork”，能将一个用户的储存库复制到另一个用户的储存库，这样用户就可以访问别人的代码并且在自己的账户下进行修改，修改好以后，如果该用户喜欢与别人分享，就可以发送一条请求给原始代码编写人，此人可以一键点击按钮，将别人的修改与自己的原始代码相结合。正是这三个步骤：复制请求合并，让GitHub变得更加强悍。Code School 的Gregg Pollack 说，在GitHub之前，如果你想修改某个开源软件，就必须先下载原始代码，进行本地修改，然后将这些修改电邮给软件编写人，别些人再对这些修改作出评估，再决定是否合并，非常麻烦。(4) x-meta引擎x-meta以最简单的方式定义XML的结构，而这个结构就是x-meta。如果元事物是任意XML的结构的结构，那么反过来就可以通过元事物直接或者间接的编辑出任意XML，因此如果说使用XML可以表示任意事物，那么一个拥有元事物的系统可以在运行时构建出任意事物，而如果系统还能够把任意事物转化成程序正确执行，那么这个系统理论上就可以处理任意事物了，这种系统就是元系统。元系统中构建任意事物(XML)和解释任意事物(转化为程序执行)的方法称为X-Meta方法，X-Meta方法的实现是X-Meta引擎。 X-Meta方法实际上也可是一种模型编程方法。x-meta引擎是一个编程系统，它认为系统也是具有认知能力的，可以通过和系统交互实现编程。2.1.3 Polymer环境配置软件需求nodejsv0.12.2、bower、Git-1.9.5安装过程下载nodejs，网址：https:/nodejs.org/。安装到D:Program Files下，编辑环境变量path，追加：D:Program Filesnodejs;。win+R，输入cmd，输入npm version。出现nodejs版本号，安装成功。下载Git，网址：http:/git- Files下，编辑环境变量path，追加：D:Program FilesGitbin;。win+R，输入cmd，输入git version。出现Git版本号，安装成功。安装nodejs和Git后，win+R，输入cmd。输入npm install -g bower，安装好后，输入bower version检查是否安装成功。最后通过bower下载polymer所需包。进入Dos，输入bower install -save Polymer/polymer#0.5。2.3 Polymer 简介Polymer 是一个基于Web组件的新型Web库，包括一系列全面的、用于构建Web应用的UI和工具组件。它是一个使用Web组件构建Web应用的类库，同时也使用了为Web构建可重用组件的新的HTML 5标准。Polymer为大部分Web组件技术提供了polyfills功能，它能让开发者在所有的浏览器支持新特性前创建自己的可重用组件。是一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。此外，Web Components则提供了一种更彻底的解耦方式，更加方便了UI的开发和模块化，可以说是Polymer的基础之一。 2.4 Polymer包含技术简介DOM Mutation Oberservers和 Object.observe()：用于监视DOM元素和简单JavaScript对象的改变。该功能可能会在ECMAScript 7中正式标准化。Pointer Events ：在所有的平台上以同样的方式处理鼠标和触摸操作。Shadow DOM：将结构和样式封装在元素内(比如定制元素)。Custom Elements：定义自己的HTML5元素。自定义元素的名字中必须包括一个破折号，它的作用类似于命名空间，为了将其与标准元素区分开来。HTML Imports：封装自定义元素，包中包括HTML、CSS、JavaScript元素。Model-Driven Views(MDV)：直接在HTML中实现数据绑定。仍没有标准化的计划。Web Animations：统一Web动画实现API。2.4.1 Polymer分层与各层简介Polymer 有三个概念层：使用 element： Polymer 提供了一系列你可以直使用的UI和非UI的 element 。你可以将 Polymer 的 element 一起混着用，包括自带的 element 和其他自定义的custom elements。创建 element： Polymer 的声明语法使得定义一个 custom elements 变得更加简单。数据双向绑定，属性监听，手势事件等特性会帮你构建强大可复用的 element。平台：Polymer 是基于最新的 web 技术的，像 Web Components 和 Object.observe。并不是所有的浏览器都支持了，因此 Polymer 的平台层填补了这些缺口，通过 JavaScirpt 实现了对应的 APIs。Polymer 在运行时会自动选择最高性能的方式 使用原生的实现还是 JavaScript 的实现。(1) PolymerPolymer由以下几层组成：基础层(Foundation)webcomponents.js：基本构建块，其中大部分API最终将成为原生浏览器API。核心层(Core)polymer.js：基础层实现的辅助工具。元素层(Elements)：包括构建于核心层之上的UI以及非UI组件。 基础层(webcomponents.js)其中，基础层使用了以下技术：DOM Mutation Oberservers和 Object.observe()：用于监视DOM元素和简单JavaScript对象的改变。该功能可能会在ECMAScript 7中正式标准化。Pointer Events ：在所有的平台上以同样的方式处理鼠标和触摸操作。Shadow DOM：将结构和样式封装在元素内(比如定制元素)。Custom Elements：定义自己的HTML5元素。自定义元素的名字中必须包括一个破折号，它的作用类似于命名空间，为了将其与标准元素区分开来。HTML Imports：封装自定义元素，包中包括HTML、CSS、JavaScript元素。Model-Driven Views(MDV)：直接在HTML中实现数据绑定。仍没有标准化的计划。Web Animations：统一Web动画实现API。以上第3-5个API都是Web Components的一部分。很明显，Web Components对Polymer的重要性非同一般。webcomponentsjs.js的作用在于代替浏览器提供这些API，它在经过充分压缩后不足10KB。而根据已公开的信息，还知道Polymer的目标之一就在于测试这些未标准化的HTML5 UI API。 核心层和元素层Polymer本身非常像原生的HTML5：“attributes in, events out”。可以看出其结构非常“面向组件(component-oriented)”，所有组件都是HTML元素。有的元素本身并不提供UI，比如animations元素并不提供UI，但是你可以将它与UI元素相关联，实现动画效果。此外，Polymer的很多widget中都内建了响应式设计，也就是说，他们会依平台的不同变化成最适合的形状。 互操作性Polymer设计得像菜单一样，可以按需选择。得益于Web Components，其元素都具有非常高的互操作性。在I/O大会上我们就看到了这样的例子：Mozilla项目中的元素X-Tag(同样基于Web组件)与Polymer协同得非常好。2.4.2 Polymer应用Polymer提供了一系列的部件的例子，其中包括天气、始终、股票行情和线型图。 应用范围广，以下分别为谷歌音乐、谷歌翻译、圣诞追踪、YouTube视频网站。 (1) Google Music Player(2) Google Translate(3) Santa Tracker (4) YouTube 3 网站前台动态布局分析3.1 网站前台目标基于Polymer的网站前台动态布局前台展示包括设计框，网页代码保存，组件展示，组件属性和组件样式设计以及组件根机构。主界面为左右布局，有部分为组件、组件根机构；组件的属性、组件样式；左部分为设计区域；上标头为代码处理，包括(查看源码、保存源码、查看成果)；组件控制，包括(撤销、返回、当前编辑组件、自适应布局、删除)；布局控制，控制组件编辑区显示与否。力求交互流畅，布局适合，功能完善并且兼顾用户体验。3.2 网站前台的初步调查网站前台初步调查的主要目标就是，从网站分析人员的角度看新项目的开发有无必要和可能。初步调查的内容包括： (1) 网站前台的基本情况，包括它的功能、展示内容、方法、交互条件、主要任务、当前面临的主要问题。 (2) 网站前台中信息处理情况，包括现有网站的组织机构、工作方式、技术手段。总之，应使管理员及时了解反映相关知识产权、专利保护的法律和系统管理的相关事项。 根据争取到的建议，网站动态布局遵循以下原则： 满足用户设计网站前台动态布局的需要。(1) 效果更生动。信息展示更符合“别让我思考”的用户习惯，操作简便，交互友好。 (2) 技术更先进。运用Polymer，根据需要情况应用相应组件，结合异步数据传输、事件相应，数据和事物转换，动作变化，行为定义。同时，不要为了一味的先进，而忽视了技术本身的成熟性。3.3 网站需求分析经过网站的需求分析， 初步得到了基于Polymer网站前台动态布局的主要步骤：输入网址进入网站主界面：(1) 标头左部分：网页代码查看，保存，查看效果。撤销，返回。(2) 标头组件编辑区：隐藏工具栏，选择网页组件，自适应布局，删除，移动位置。(3) 组件栏：组件编辑区上半部分，分为core、paper各组组件；属性和样式栏，设置组件的属性和样式以及组件间的数据绑定。除了上述功能以外，还具有动态转换、页面切换自如的界面，安全性要高，稳定性要强，能够满足用户的需求。3.4 前台动态布局可行性分析该阶段通过对网站前台目标的初步调研和分析，提出可行性方案并进行论证。我们在这里主要从技术可行性、经济可行性和操作可行性等方面进行分析。3.4.1 经济可行性开发该网站所需的相关资料可以通过Polymer官方网站查看，所需的其他应用软件、硬件系统需要一定成本。Polymer技术推行实行开后，Web UI定会绽放异彩，妙笔生辉，用户体验也会随之提升，流量得到一定增长。所以，从经济的角度来看，该系统可行。3.4.2 技术可行性技术可行性要考虑现有的技术条件是否能够顺利完成开发工作，软硬件配置是否满足开发的需求等。本网站采用最新Web组件polymer，虽说目前成品较少，有官方详细文档参考。通过x-meta处理组件和DOM，当前的计算机硬件配置勉强完全能满足开发的需求，因此在技术上是绝对可行的。软件方面：需翻墙连接Google api，软件的开发平台成熟可行，它们速度快、容量大、可靠性能高、价格低，完全能满足系统的需求。Polymer的官方网站提供示例和组件。本系统的开发主要是对基本组件的应用以及运用基本组件开发可完成功能的自定义组件，运用数据双向绑定使改变的属性和样式即时生效。通过<x-meta>组件引入组件作为新组件的一部分，<dom-serializer>解析根结构转化为程序运行。并把设计成果通过<github-element>保存到Gist中。3.4.3 运行可行性运行可行性是对网站动态布局的影响，现有用户需要理解Polymer的基本原理，对JavaScript、CSS3和x-meta引擎有一定了解。当前信息化技术已经相当普及，不过用户还需要一定的编程基础，并不适合小白用户，对一些编程爱好者和Web前端开发人士比较适合，在运行上是可行性的。3.4.4 时间可行性从时间上看，在两个月的时间里学习相关知识，并开发网站前台动态布局系统，时间上是有点紧，但是不是不可能实现，通过两个多月的努力功能基本实现。3.4.5 法律可行性(1) 所有技术资料为开源或为官方购买，都为合法。(2) 开发过程中不存在知识产权问题。(3) 开发过程中未涉及任何法律责任。综上所述，本系统的开发从技术上、从经济上、从法律上都是完全可靠的。3.5 系统设计(1) 系统设计原则 实用性：网站前台动态布局系统为了运用Polymer进行动态网站前台动态布局系统前台布局，力求界面简洁，功能完善。 可维护性和可扩展性：系统具有良好的可扩展性和可维护性。系统中各个模块的独立性可以完全保证各个模块的适当扩展和修改不会影响到其他模块的运行。 标准性：网站前台动态布局系统设计遵循企业级网站前台动态布局系统开发标准，保证系统质量，提供完整、准确、详细的开发文档。 (2) 网站前台动态布局系统设计方法原型化模型方法是在形成一组基本需求之后，通过快速分析方法构造出待建的原型版本，然后根据顾客在使用原型的过程中提出的意见对原型进行修改，从而得到原型的更新版本，这一过程重复进行，直至得到满足顾客需求的系统。原型化开发方法的特点是： 需求表示清楚，用户满意度较高降低开始风险和开发成本(3) 设计目标 本基于Polymer的网站前台动态布局系统功能设计目标如下： 实用性强：符合实际操作流程的习惯，易学易用的友好的用户界面，适合用户的使用需求，实现计算机与多年积累起来的经验相结合的科学化管理。 先进的程序结构：使用当代前卫的软件编程，能延长其生命周期，易于维护与管理。使用模块化设计的方法：使系统具有良好的可扩充性，以适应其不同阶段的发展需要。 操作简单，维护方便：每个系统都具有系统维护功能，对项目可进行维护。响应快速：对组件属性/样式的更改要马上体现。 4 详细设计详细设计是整个设计过程中，最重要的步骤之一。下面就分如下几个部分对系统进行详细设计。(1) 构建工程框架。(2) 功能模块设计。4.1 构建工程框架安装nodejs和Git。步骤如下：(1) 安装nodejs。使用英文原版。下载nodejs后，直接打开安装，安装完成后，打开DOS，输入npm -version，显示出版本号，则安装成功。环境配置：Path D:Program Filesnodejsnode_modulesnpmbin;(2) 下载Git后直接打开安装：安装在D:Program Files，环境配置：Path:D:Program FilesGitbin，打开dos，输入git version，出现Git版本号，说明安装成功。(3) 下载tomcat6.0服务器。看到如图4-1Tomcat服务器所示。安装到F:/，打开服务，打开浏览器，输入http:/localhost:8080：图4-1Tomcat服务器localhost是本地环境的访问网址，即在浏览器中输入http:/localhost/或者127.0.0.1，类同网站前台动态布局系统域名；designer是网站前台动态布局系统的文件存放目录，这个就类似我们的虚拟主机空间，不同的就是可以直接粘贴复制文件，不用FTP上传；4.2 模块设计该系统包括五个大模块：代码管理模块、组件模块、组件根结构、组件属性模块、组件样式模块，如图4-2系统模块设计所示。图4-2系统模块设计4.2.1代码管理模块代码管理模块包括查看源码，保存网页，预览；撤销，返回；控制组件编辑区显示，当前组件名称，组件的自适应布局，删除组件，组件移动。如图4-3代码管理模块设计所示。图 4-3代码管理模块设计代码管理模块实现代码查看编辑功能，宜采用自定义组件，设计过程如图4-4查看编辑功能流程图所示。图4-4查看编辑功能流程图保存设计成果功能，保存到全球最大代码托管平台Github。设计过程如图4-5保存功能流程图所示。图4-5保存功能流程图预览功能，点击预览，即可打开新标签预览成果，预览之前会保存设计成果，如果预览已经打开，则关闭打开标签，再次打开新标签预览。设计流程如图4-6预览功能流程图所示。图4-6预览功能流程图4.2.2 组件模块组件模块要实现在主页面显示各组内各组件，设计如图4-7组件模块设计图所示。图4-7组件模块设计图4.2.3 组件根模块根结构需要展现当前编辑网页中各组件之间的关系，设计如图4-8