某公司行销系统的动态前端设计与实现

发布时间：2020-04-12 21:40

【摘要】：随着经济全球化,越来越多的中国产品、技术走向国际。对行销人员来说,如何更好、更快、更全的将实时信息传递给客户,成为其难题。针对行销人员的诉求,不少企业采用了多菜单多模块模式的方法,为不同类型的需求进行页面定制。这种方法虽然较好的解决了行销人员的问题,但是却给开发人员增加了巨大的代码压力。这种单一且完全依靠前端工程师手写的网站,随着公司产品和方案的不断增多,无形之中造成了人力资源的严重浪费。如果网页层次结构发生改变,对于前后端人员而言都将是巨大的灾难。系统致力于解决行销人员困扰,避免开发人员重复工作。系统通过动态的、可操作的菜单树进行方案的编排和展示。当行销人员有展示需求时,管理人员只需要通过简单的页面操作,即可实现菜单栏的动态更新,行销人员只需点击菜单栏中的菜单项,即可动态生动的向客户进行解决方案效果的传递,从而大大避免了人力成本的浪费。系统平台的搭建主要基于HTML文档流和CSS模型,为了解决信息同步、菜单展示等问题,结合vue的双向绑定技术编写了tree组件,tree组件通过递归、遍历、样式预处理等方法实现了数据传递、动态样式等功能。系统采用了前后端分离的开发模式,不仅提升了用户体验,还降低了应用的开发和维护成本。系统主要包含动态菜单树、方案列表和可视化界面。其中动态菜单树为用户列表、方案列表的展示,方案模式对应应用场景和解决方案,可视化界面为当前解决方案的效果展示。通过上述方案实现了某公司行销平台的动态前端平台,使得动态化的页面实现成本得以降低与用户体验感大幅度提升,真正意义上实现了信息的实时传递与共享。
【图文】：

工作原理图,客户端,服务端

都是可以通过该过程传回的。基于XHR对象发送请求的过程是异步的，所以客户端收到数据的时候是先有JavaScript进行处理，，而不是直接进行显示的。如图2-6所示，在AJAX技术应用之前，客户端的更新流程分为如下几个步骤。首先，客户端向服务端发送一个HTTP请求，服务端返回相应的请求数据。服务器返回给客户端的是一个全新的页面。这样一来，在Web应用中一旦涉及数据更新，返回的都是整个页面。那么客户端的响应时间完全依赖于服务器的响应时间。不仅造成了时间和资源的浪费，而且每次的页面重载也降低了用户的体验。Web BrowserDBHTTP RequestHTML、Images、CSS、JavaScriptQuery/Data RequestData图2-6 传统Web应用工作原理图Web BrowserDBHTTPRequestQuery/DataRequestDataDataUserinterfaceAjaxEngineerHTML 、CSSJavaScript call图2-7 AJAX Web应用的工作原理AJAX Web应用的工作原理如图2-7所示。AJAX的异步请求方式的出现

效果图,首页,效果图,方案

模块化编写。采用 vue 实现页面的渲染。未进行菜单树编辑的首页面渲染效果如图 4-1所示。图4-1 首页面渲染效果图方案中心主要为方案的列表集合，包含导航栏、广告模块和方案列表。广告模块轮为公司推荐方案的轮播图。方案列表默认根据最热进行排列，可切换至最新进行排列展示。方案中心渲染效果如图 4-2 所示。图4-2 方案中心渲染效果图
【学位授予单位】：华中科技大学
【学位级别】：硕士
【学位授予年份】：2018
【分类号】：TP311.52

【相似文献】