《基于vue+Element+nodejs+mongoDB的企业官网及后台系统设计与实现.doc》由会员分享，可在线阅读，更多相关《基于vue+Element+nodejs+mongoDB的企业官网及后台系统设计与实现.doc（49页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、基于Vue+Element+nodeJs+MongoDB的企业官网及后台系统设计与实现摘要：在新世纪，Internet已经成为人类别的必需品之一，使人们获取世界各地的信息更加迅速便捷。特别是HTML5、CSS3和三大主流框架的快速发展，推动社会信息化、数字化的快速发展，企业的网站建设是企业信息化的重要表现之一，这使得企业官网已经是每一个企业的刚需，通过官网能使外界更快速便捷的了解本公司，也是展示自身的平台，而随之而来的是网站的维护和管理。所以官网+后台是一个企业建设官方网站必需品。本文以可以跨越移动端、平板和PC端的企业官网和官网的后台管理系统为开发目标，通过vue框架和Element 组件库
2、来开发响应式官网，使用flex弹性布局和media来实现官网的跨设备可观看；使用vue、Element和avue来开发后台管理系统；用nodejs+MongoDB来开发官网和后台的接口和数据库。此次设计主要面向中小企业，为企业提供一个充分展示自己的产品、理念、实时动态等信息的平台，以及管理自己官网的后台。关键词：Vue、Element、nodejs、MongoDB、flex、media Design and Implementation of Enterprise Official Website and Back Office System Based on Vue + Element +
3、nodeJs + MongoDBAbstract：In the new century, the Internet has become one of the necessities of the human category, making it easier and faster for people to obtain information from all over the world. In particular, the rapid development of HTML5, CSS3 and the three mainstream frameworks promotes th
4、e rapid development of social informatization and digitization. The construction of an enterprise s website is one of the important manifestations of enterprise informatization. Through the official website, the outside world can understand the company more quickly and conveniently, and it is also a
5、 platform for displaying itself, and then the maintenance and management of the website. Therefore, the official website + background is a necessity for an enterprise to build an official website.This article takes the enterprise official website and the official website back-end management system t
6、hat can span mobile, tablet, and PC as the development goals. It uses the vue framework and Element component library to develop a responsive official website, and uses flex elastic layout and media to realize the cross-device official website Watch; use vue, Element and avue to develop the back-end
7、 management system; use nodejs + MongoDB to develop the official website and back-end interface and database. This design is mainly for small and medium-sized enterprises, providing companies with a platform to fully display their products, concepts, real-time dynamics and other information, as well
8、 as the background to manage their official website.Keywords： Vue、Element、nodejs、MongoDB、flex、media.目 录第1章 绪 论11.1背景和意义11.1.1背景11.1.2研究意义21.2 国内外现状分析21.2.1 国内现状分析21.2.2 国外现状分析31.3研究方法和内容31.3.1 方法31.3.2 研究内容4第2章 开发工具及相关技术52.1前端52.2后端6第3章 系统整体设计73.1可行性73.1.1 需求可行性73.1.2 技术可行性83.2主体功能模块设计83.2.1官网模块设计83
9、.2.2 后台模块设计93.3 系统流程123.3.1 官网133.4 数据库设计153.4.1 数据库分析153.4.2 数据库实体关系153.4.3 数据库集合17第4章 系统详细设计204.1官网功能设计204.1.1 内容显隐204.1.2 响应式214.1.3 首页设计234.1.4 新闻页面设计244.1.5 产品页面设计254.2 后台系统功能设计264.2.1 登录模块264.2.2 新闻模块274.2.3 用户模块29第5章 系统测试305.1 系统测试305.2 测试过程305.2.1 测试用例305.2.2 测试方法315.3 测试结果335.3.1 登录测试结果335.
10、3.2 增删改查权限测试结果355.3.3 新闻发布测试结果365.3.4 新闻修改测试结果375.3.5 新闻删除测试结果385.3.6 新闻查看测试结果395.3.7 官网随机路径测试结果405.3.8 官网PC、手机测试响应式布局40第6章 结论426.1 毕业设计总结426.2 存在问题及改进42参考文献：43致谢44第1章 绪 论1.1背景和意义1.1.1背景新世纪以来，科技技术信息万变，特别是IT技术得到迅猛发展，而随着IT技术、通信技术的快速发展，Internet渗入到社会的大多数行业的范畴，它已经是人民生活习惯的重要部分。有了Internet，人们只需要通过电脑、手机、电视、平
11、板等终端设备，就能实现古人难以实现的“秀才不出门，便知天下事”，特别是智能手机的普及，互联网得到了再次跨越式发展，人们现在遇到自己不懂得、想要了解的人、事、物，只需要通过网络，就能了解得一清二楚。这也促使企业必须要拥有属于自己的官方网站，只有有了自己网站，才能让想要了解自己的合作伙伴和个人有了了解的途径，才能充分展示自己。随之而来的，现在社会，手机上网率比PC 高的多，这就要求企业的官网必须兼容手机端，所以，响应式网站就是现阶段网站的必须方向。当然，有了网站，维护和管理就成为一个新的问题，后台系统也成为不可或缺的一部分。目前，绝大部分企业都拥有自己的响应式官网和后台系统，建立响应式网站，让企业
12、可以跨设备，在移动端开辟属于自己的天地，也为用户提供了方便快捷的随时随地了解自身动态的途径。而后台管理系统，则可以让企业内部实时管理和更新官网的内容和最新动态，可以知道有哪些有合作意向的企业。官网设置多个模块，每个模块页面都是相互独立的。主要有新闻页面、企业产品、企业介绍和合作意向表单等。而后台管理系统，则主要是给企业内部人员进行官网资讯、图片等进行管理和发布的，管理人员可以把公司最新的动态通过管理系统发布到官网，实现官网的实时更新。官网和后台的前端开发主要还是用到vue、html、css、javaScript和Element组件库，而后端和数据库则用到nodej和MongoDB,关键在于怎么
13、把三者串联起来。最终要实现管理员可以对官网和后台系统进行综合的管理，发布企业的相关信息；对企业的感兴趣的求职者和合作企业能够通过官网来了解本企业的相关信息。1.1.2研究意义官网使用MVVM模式开发，对于代码维护性、开发效率、使用效率都有提高，充分发挥了vue的组件优势;后端使用MVV结构开发，有效优化代码的可复用性，发挥了nodejs 的模块化开发。建立企业官网，可以为企业提供一个充分展示自己的平台，通过官网，展示一个企业的业务范畴、联系方式、实时信息、地址等等，为想要了解本企业的个人、企业提供了一个很好的途径；而与之对应的后台系统，则可以让企业内部人员更方便快捷的对官网内容进行管理、更新，
14、实时发送一些新的信息上官网。具体为：（1）有助于求职者、合作意向企业等随时通过官网了解和熟悉本企业；（2）便于内部人员实时管理官网内容，做到实时性。1.2 国内外现状分析1.2.1 国内现状分析1. 截至2018年12月，我国网民规模为8.29亿，全年新增网民5653万，互联网普及率达59.6%，网民中使用手机上网的比例由2017年底的97.5%提升至2018年底的98.6% 引用新闻研究导刊2019,(02):34-35。随着手机的普及度越来越高，人们的使用网络的门槛越来越低，愈来愈多的普通民众使用上Internet，人们通过网络获取信息已经是一种潮流、主流方向；所以现在的企业，发展自己的官
15、网已经是现代企业的标配，是让人们了解自身的重要途径。2.Vue在近两年中得到了快速发展，北京在招的前端职位中40%的岗位对vue技能有要求，在18年之后，我们看到像美团、滴滴、饿了么等这样的大型互联网公司已经把vue作为主要的前端技术栈，这使得vue在业界中的影响力和认可度得到迅速提升。 来自知乎慕课网1.2.2 国外现状分析1. 截至2015，有超过80%的APP将全部或部分基于HTML5，这意味着大部分APP的内容都将以网页的形式呈现，典型的例子：微信、Facebook、Twitter等这些大型应用。 数据来源：国际科技媒体ReadWriteWeb，20152. Nicholas C.Za
16、kas：JavaScript是一种非常松散的面向对象语言，也是Web开发中极受欢迎的一门语言，JavaSript是一种全新的动态语言，它植根于全球数亿名都在使用的Web浏览器之中，致力于增强网站和Web应用程序的交互性。 Nicholas C.Zakas.JavaScript高级程序设计第三版.前言，20123. Brian P.Hogon：HTML5和CSS3帮助奠定了下一代Web应用的基础，这两项技术可以让我们的网站更易开发、维护、用户用户友好性，两者使一些复杂的功能再也不需要编写复杂的Javascript代码、无需使用PS等图形工具，就可以把网站做得更炫酷。 Brian P.Hogon.
17、HTML5和CSS3实例教程前言，20141.3研究方法和内容1.3.1 方法本论文主要运用了以下几种研究方法：1、调查对比法。通过对当前企业对官网建设的需求调查分析，以及对其他企业的官网进行观摩学习，来研究该网站的可行性和其所要完成的功能。2、分析法。对网站和系统进行系统的分析。分析其可行性、应具备哪些功能、要完善某功能所需的技术知识和技术支持。3、实验法。对该网站和系统系统进行系统编码，同时还应不断的运行、测试该编码是否正确，该网站和系统是否能如期的实现其功能。4、总结法。对运行测试的结果和现象进行分析、总结，及时修改bug、完善网站和系统。最后，根据实验的过程和结果，完成毕业设计的说明书
18、最终稿。1.3.2 研究内容本文主要研究现在社会企业对建立自身网站的刚需，为企业提供一套官网及后台管理系统，具体拟从下面几方面研究：1.绪论。主要介绍本论文的研究背景，分析官网及后台系统建立的背景。同时，对涉及技术的相关文献资料进行综述。阐述本论文的研究意义。2.系统分析。主要介绍现状，分析用户、功能的需求。同时，从技术、经济方面进行可行性分析。3.开发工具和涉及技术简介。主要介绍了官网及后台开发涉及到的技术栈，另外，还介绍了使用哪些工具进行开发。4.系统概要设计。主要对官网和后台的功能需求进行设计，对基本功能、操作流程和总体模块进行罗列和设计。5.系统详细设计。对企业官网的一些功能模块的设计
19、和实现，以及对后台管理系统的功能设计与实现。6.系统测试。简介一些官网、后台、数据库三者进行综合联调测试。第2章 开发工具及相关技术2.1前端1、开发环境第一步是搭建npm（javaScript的包管理工具），通过npm可以为自己的项目插入一些开发中需要使用到的第三方包，通过使用现成的包来提高开发效率；然后是安装Git，它是最先进的代码版本控制软件，通过它可以把托管在码云上的代码拉到本地来开发，当然也可以把本地代码通过Git上传到码云上；还有就是需要开发工具VScode编辑器，它提供了很多插件使开发前端方便快捷；当然浏览器是开发前端必不可少的，使用一些浏览器上的插件能更方便的调试代码；最后就是
20、通过vue cli 脚手架来初始化项目，使用scss来写css样式。前端开发本质还是HTML5开发，主要由用户交互、视觉体验等来配合，根据设计原型来合理规划布局页面，合理编写代码来实现各种功能需求，实现各种交互效果。2、开发工具 （1）Visual Studio Code是微软发布的一款兼容各大主流桌面系统的源代码编辑器，里面集成了所有类似软件具备的特性。（2）Google Chrome、FireFox两大主流浏览器，用于调试代码，查看效果的（3）Postman是一款用于测试后端接口的工具，主要用于测试后端接口能否正常请求和返回来的数据是否正常。3、开发技术（1） Vue是当前前端的主流框架之
21、一，提高开发者的开发效率。（2） Element uiElement ui是一整套基于vue.js的的PC端的组件库。就是把PC端常用的一些功能模块封装成组件，开发者只需要导入就可以使用，能大大提高开发者的效率。2.2后端1、开发环境 首先安装Node.js，里面内嵌了NPM包管理工具，然后是安装MongoDB,配置好MongoDB环境，然后使用VSCode来进行具体开发，使用npm来安装各种开发中使用的各种第三方包，当然，Git版本控制系统来管理代码也是必不可少的，还有就是使用Postman来进行后端接口的测试。2、开发工具（1） Visual Studio Code主要进行代码的编写。（2
22、） Navicat for MongoDB Navicat for MongoDB 是MongoDB数据库的可视化工具，它能使你更方便快捷的连接上本地、远程的服务器，为你的数据的管理、增删改查提高效率。（3） Postman是一款用于测试后端的接口是否正常的接口功能测试工具，支持主流的请求方式。3、开发技术（1） Node.jsNode.js本质是JavaScript，只不过是运行在服务端的而已，是基于谷歌的V8引擎的服务器平台，是事务驱动的，高效、迅速。（2） ExpressExpress 是一款基于Nodejs的灵活的框架，里面封装了常用的nodejs功能模块。（3） MongoDBMon
23、goDB 是由C+语言编写的，是一个分布式文件存储的开源数据库系统，MongoDB 将数据存储为一个文档，数据结构由键值(key=value)对组成，MongoDB 文档类似于 JSON 对象，字段值可以包含其他文档，数组及文档数组。 菜鸟教程.MongoDB教程.第3章 系统整体设计3.1可行性3.1.1 需求可行性在现代这个信息化时代，互联网已经渗透到各个领域，它把世界各地联系在一起，拉近了人们的距离。万维网www作为互联网上先进的，已经被人们高度接受的信息检索、获取的手段，已经成为当今世界最大的信息资源库，里面的资源成千上万，只要你想得到的信息，通过它都能够找到。web站点是互联网的重要
24、载体之一，数量早已难以估计，其内容范畴跨域了金融、教育、文化、娱乐、体育、等各个领域，用户群体庞大，每天访问量数几十亿为单位。目前，人们主要通过互联网来获取各种自己想要了解的信息，所以，建设一个好的网站对于一个企业的发展是十分重要的，在现如今，企业自己的官网建设已经成为企业信息化建设中的重要组成部分。企业通过自己的官网来表达自己的相关信息，展示自己本公司的优秀产品，阐述自己企业的理念和企业文化，为想要了解公司客户和个人的提供一个平台、途径，也让合作伙伴可以通过它与企业及时的交换意见，产生互动。后台管理系统是一个网站的“后勤部”，有了官网，如果要更新一些内容、新闻，不可能由程序员来更新的，而是由
25、专门的人来负责官网的内容的管理和更新，这时，后台管理系统就是必要的辅助后勤了，管理员通过后台来进行官网的内容更新替换，发布新的新闻等等，建设官网能给企业带来以下好处：1、公司形象企业可以利用自己的网站来宣传自身的企业文化理念、公司情况、本公司的产品及动态信息。通过图文结合、视频等的方式把自己公司的实时信息、产品发到公司网站，体现本公司的形象。2、降低成本有了网站，客户可以通过网站得到公司的联系方式，促使客户可以通过该联系方式与公司洽谈业务，减少了业务人员的出差等等。3、受众面广企业网站是发布到公网上的，任何人都可以浏览的，不收区域限制，所以受众面面会很广。4、功能全面一个企业有了网站以后能做和
26、本公司相关的新闻系统、产品系统、在线下载系统、招聘系统等。及时交流、与客户的直接沟通，并及时收集隐藏的客户的资料。故而，在信息化时代，企业自身的官网和后台管理系统是公司自身信息化建设的重要组成部分，是一个企业能力的重要展示平台，是为外界提供一个展示自我的重要途径，是一个企业发展中不可或缺的一部分，是一个企业的必需品。3.1.2 技术可行性官网及后台管理系统开发周期并不长，主体是官网，后台只是辅助，不对外公布，只需要重点雕琢官网即可。公司只需要让一位稍微熟悉nodejs开发的前端工程师自主进行整套项目的开发即可。整套项目，有强大合适的软件开发工具VSCode，里面可以安装各种辅助开发包来提高我们
27、的开发工具，且前后端使用同一个软件即可，大大节省我们去熟悉不同软件的时间。前端只需用到前端工程师熟悉的vue框架、javaScript、css，这些都无需额外的复杂、不熟悉的知识，通过结合Element UI 组件库开发，通过使用现成的组件，无需我们自己封装；后端用到nodejs和MongoDB数据库，nodejs本质就是 JavaScript，对于前端再熟悉不过了，逻辑基本和 javaScript差不多，它提供了一些前端JavaScript不具备的核心模块，而MongoDB数据库和nodejs关联很大，操作起来不需要像MySQL那样写SQL语句，官方都封装成js 函数，只需要调用对应的函数即
28、可实现各种增删改查操作。前后端都无需很高的内外存储器，用户只需有能连接上网络的终端即可观看官网，而后台只需普通PC即可使用。所以，官网和后台系统的开发在技术上是具有可行性的。3.2主体功能模块设计3.2.1官网模块设计当前，企业的官方网站功能模块趋于统一，大部分功能都差不多，不外乎新闻模块、公司简介、产品信息展示、联系方式等，这些功能是每一个合格企业官网必须的。企业官网为客户提供了解企业的重要方式之一，客户可以通过官网取得联系方式，并与企业取得沟通，同时，企业也可以获取潜在客户的信息，为企业的发展添砖加瓦。本次设计的官网的模块主要是包含首页、产品展示页、新闻中心、关于我们、渠道合作、合作申请等
29、11个页面。（1）首页：由轮播图、其他页面内容的一些简单展示、顶部导航栏、底部导航栏及版权信息等；（2）产品页：主要是公司软硬件设备的一些展示；（3）新闻中心：提供和本公司相关的新闻，以及一些和公司产品相关的新闻；（4）关于我们：展示公司相关信息、企业理念等；（5）渠道合作：提供一些招聘信息、申请合作的相关信息；（6）合作申请：填写合作意向信息。图 3-1 官网结构3.2.2 后台模块设计每个企业的官网的都会提供新闻模块，例如华为公司的官网、阿里巴巴集团官网等等，提供新闻模块，利于展示企业专业信息、原创文章加快搜索引擎收录（利于更多用户能浏览到本公司的网站）。很多企业网站，并不是完全是静态页面
30、，若是如此，每次更新都需要开发人员进行内容的更新在发布，这样一来会浪费很多时间和资源。这时，通过后台管理系统来对新闻进行管理，就会非常节省资源和方便快捷，只需要管理员在后台系统对新闻进心编辑输入，然后发布，官网就会同步更新了。本节，主要描述后台管理系统的各功能模块1、 登录模块账号、密码和验证码组成，主要给用户进行后台登录的，必须只有在数据库有这个账号才能登录。2、新闻模块（如图3-2）（1） 添加新闻分类：在新闻类别页面中添加新闻的类别；（2） 修改分类：在类别页面的编辑弹窗中修改类别；（3） 删除分类：删除数据库中的类别；（4） 查看分类：查看该新闻类别的详细信息；（5） 添加新闻：发布新
31、闻，会根据类别分配；（6） 删除新闻：删除数据库中该条新闻；（7） 修改新闻：修改新闻的各项内容；（8） 查看新闻：查看新闻的各个字段的详细信息；3、申请模块（1） 查看申请：查看官网中的申请表单提交的申请信息；（2） 导出成表格：把整个数据库中申请信息导出成一张Excel表格；（3） 批量删除信息：批量删除申请信息，必须选中一条及以上才行；（4） 改变申请状态：即把“未联系”改为“已联系”，默认是“未联系”4、系统模块（1） 管理员：A、 增加后台菜单：即添加项目中已有的菜单名称和对应路由；B、 删除后台菜单：删除对应菜单后，左侧菜单导航栏就没有该菜单了；C、 修改后台菜单：可以重新编辑该菜
32、单的各项字段内容；D、 查看后台菜单；E、 添加后台登录账号：管理员添加可以登录后台的账号，同时配置密码；F、 删除后台登录账号；G、 查看后台登录账号；H、 修改后台登录账户：删除该账号后，该账户不能再登录后台。（2） 普通用户：A、 查看后台菜单：只能看后台的具体菜单；B、 查看后台登录账号（出密码外的账号名）5、产品模块（1） 修改产品图文信息：重新编辑该产品的信息；（2） 增加信息：新增公司的产品图文信息；（3） 删除信息；（4） 查阅信息。6、 修改账号信息（1） 重新编辑账号：修改原来账号的名称；（2） 重新编辑密码：由现在密码、新的密码、确认密码组成。图 3-2 新闻模块与官网的
33、关系图图 3-3 后台结构3.3 系统流程为了让读者更清晰了解本次设计的操作流程，故而设计了本小节。本小结分为两个部分，分别是官网的流程和后台流程。官网流程较为简单，根据顶部导航菜单来选择对应的页面即可；后台必须登录才能进入官网，进入后台后，还会根据不同用户类型分配不同的增删改查权限和菜单，具体如下：3.3.1 官网官网主要包含新闻、关于我们、渠道合作、产品信息、合作和体验申请等功能，由于没有登录注册功能，所以流程比较简单，流程图如图3-4：（1）进入官网，一进入官网默认是首页，首页是整个官网的内容的简略版；（2）根据顶部（左侧）导航菜单来选择你想要看的页面，页面大体内容如图3.4；（3）新闻
34、页面包含新闻列表和新闻详情，点击新闻列表中的各个新闻，都会调到新闻详情页面；合作页面的底部有个“申请合作”的按钮，点击会跳转到一个表单页面，填写完后会跳会合作页面；（4）其他模块的流程都差不多。图 3-4 官网流程图 3-5 后台系统流程3.4 数据库设计3.4.1 数据库分析在一个动态的网站中，本质上它的动态就是通过数据库的增删改查，所以数据库在动态网站中是很关键的。本次设计使用的数据库是MongoDB，它是非关系型数据库，是以文档形式存储的，以键值对（key-value）存储，以JSON数据格式保存。本次对数据库的需求不会很大，最大的需求就在新闻模块，其他模块对数据库的需求不会很大，因为官
35、网更新一般都在与新闻板块，且新闻涉及的数据不少；其次是产品和轮播图模块。所以，本次数据库的设计不会很复杂，可能较为复杂的就在于每个集合的分页查询和模糊搜索查询这两个需求。3.4.2 数据库实体关系在数据库的设计中，首先要考虑的问题是确立对象模型，只有确立了对象模型，才能进行各种增删改查。概念模型（信息模型）是各种数据模型的共同基础，它可以充分地反映现实世界，包括事物和事物之间的联系，能满足用户对数据的处理要求，是现实世界的一个真实模型，描述概念模型的有力工具是E-R模型 百度百科.E-R图。E-R图提供展示实体、联系、属性的方法，它主要由以下三者构成：实体：现实社会客观存在的事物；属性：实体具
36、备的特性称为属性；联系：现实世界中，事物内部以及事物之间是有联系的，这些联系在信息世界中反映为实体内部的联系和实体之间的联系，实体之间的联系有一对一、一对多和多对多等多种类型。 E-R图的精细设计.知网.2015-04-25E-R关系图如下：（1） 账户实体属性：_id、账号、密码、用户类型、创建时间。图 3-6 帐户E-R图（2） 新闻实体属性：_id、类别、标题、作者、新闻内容、创建时间、更新时间。图 3-7 新闻E-R图（3） 官网申请合作信息实体属性：_id、来源、所属公司、姓名、电话、所在城市、状态、创建时间。图3-8 官网申请合作E-R图（4） 官网产品信息实体属性：_id、图片、
37、标题、介绍、创建时间、更新时间。图 3-9 官网产品信息E-R图（5） 官网首页轮播图：_id、图片、标题、内容、创建时间。图 3-10 官网首页轮播图3.4.3 数据库集合MongoDB 是一种面向集合存储的数据库，即数据被分组存储在数据集中，被称为一个集合，集合的概念类似关系型数据库里的表，不同的是它不需要定义任何数据模式 菜鸟教程.MongoDB教程.。下面是本次数据库中的集合：（1） 账户集合： 表 3-1 账户集合序号字段名类型说明续表3-11_idObject IDMongoDB自动生成的唯一id2userString唯一账号3passwordString经过加密的密码4usert
38、ypeNumber用户类型：1：管理员；0：普通用户5createTimeDate账号的创建时间（2） 新闻集合：表 3-2 新闻集合序号字段名类型说明1_idObject IDMongoDB自动生成的唯一id2categoryObject ID对应新闻类别集合的_id3titleString新闻标题4authorString新闻作者5contentString新闻的内容6imageString新闻内容的首图7firstContentString 新闻内容的首句8updateTimeDate新闻的更新时间9createTimeDate新闻的创建时间（3） 产品集合：表 3-3 产品集合序号字段
39、名类型说明1_idObject IDMongoDB自动生成的唯一id2imageString产品的图片3titleString标题4contentString产品的介绍5updateTimeDate产品的更新时间6createTimeDate产品的创建时间（4） 轮播图集合：表 3-4 轮播图集合序号字段名类型说明续表3-41_idObject IDMongoDB自动生成的唯一id2imageString图片3titleString标题4contentString内容5createTimeDate账号的创建时间（5） 申请合作集合：表 3-5 申请合作集合序号字段名类型说明1_idObject
40、 IDMongoDB自动生成的唯一id2nameString姓名3phoneString电话4companyString所属公司5cityString所在城市6sourceNumber来源：1：官网-申请体验；2：官网-渠道合作；7statusNumber状态：0：已联系；1：未联系8createTimeDate账号的创建时间第4章 系统详细设计4.1官网功能设计官网使用vue 框架来搭建，并使用Element UI组件库中的一些组件来提高开发效率的。核心功能是新闻模块、内容随滚动条的滚动而不断显隐、官网跨设备（主要是PC和手机）兼容（即响应式布局）、首页等。其中响应式是通过CSS3 的med
41、ia 来实现的。4.1.1 内容显隐图 4-1 滚动显隐的流程这个功能是贯穿整个官网的比较核心的功能。简单的来说，就是，页面的内容只有滚动条滚动到该内容刚好在整个浏览器的显示区域的1/3的时候，该内容才能显示，该内容一旦消失在显示区域，内容就消失，且每次显示和隐藏时都伴随着对应的动画效果，具体实现如上图4.1。首先，在主体页面App.vue（官网整个项目的主页面，所以页面都会在这个页面显示，相当于一个容器）监听一个 scroll 事件（滚动事件），然后在 created 周期函数中获取浏览器的可视显示高度 clientHeight，接着在 scroll 事件的回调函数中，不断获取 滚动出去的
42、高度scrollTop，以及获取本页面将要实现显隐的模块 Dom，获取这些Dom元素距文档顶部的距离top，然后通过 top-scrollTop-(clientHeight / 3 * 2) = 0 来判断内容是否显隐；代码如上图。4.1.2 响应式随着踏入移动互联网,手机上网率大幅超过PC上网率，传统的网站只能兼容PC，越来越多的传统网站已经满足不了市场的需求，所以，开发兼容PC和移动端的网站已经是现在的主流方向，而HTML5响应式网站是主要方向之一。响应式网站使网站可以跨设备，使网站不再局限于PC端，能让用户直接通过手机即可浏览你的网站。H5响应式开发主要用到的是CSS3的 media 媒
43、体查询，通过使用media可以对不同分辨率尺寸的设备进行不同的样式设计。官网通过 media 媒体查询设置了三种屏幕尺寸的不同样式，这三种覆盖了PC、平板、手机：有了这三种不同尺寸的样式，能使网站的内容都能在主流的不同尺寸的PC、平板、手机等终端设备正常显示，不出现样式错乱的情况。图4-2 min-width:1100px 的情况图4-3 (min-width: 769px) and (max-width: 1100px)的情况图4-4 (min-width: 100px) and (max-width: 769px)的情况4.1.3 首页设计首页作为整个官网的门面担当，是整个官网设计中的重中
44、之重。首页是整个官网内容的缩减版展示，主要由 产品、新闻、合作伙伴、导航栏、轮播图等小组件组成。由于首页的内容比较多，如果把代码都写在一个 .vue 文件的话，会难以维护，故而把首页的每一块内容模块都写成一个 .vue 文件，最后分别导入 home.vue 这个文件，组合成首页，首页一共由 rotation.vue、role.vue、wisdom.vue、product.vue、partner.vue、news.vue等六个模块组成，这样，代码清晰易维护；另外，首页还有顶部、底部两个导航菜单（贯穿整个官网的），顶部导航菜单会根据设备的大小自动变化成顶部、左侧两种，且根据滚动显隐，当向下滚动和静
45、止时导航栏消失，向上滚动，菜单栏会显示，这样会方便用户操作。图4-5 首页组成4.1.4 新闻页面设计官网的新闻页面是由组件newsList.vue、newsDetail.vue 组合成 的newsCenter.vue页面。newsList.vue、newsDetail.vue 是 newsCenter.vue 的子孙组件，刚进入新闻页面时，默认是由newsCenter、newsList组成的新闻列表，点击新闻后，则是由newsCenter和newsDetail组成的新闻详情页。列表和详情处于新闻页面右侧，导航栏（新闻类别）处于左侧，新闻列表和新闻详情不会同时出现，当新闻列表模块出现时，详情页隐藏；详情模块出现时，列表模块消失。新闻列表会通过左边的新闻类别导航栏划分为对应的列表，导航栏会根据设备的大小自动调整位置，当是PC和平板时，导航栏位于左侧，当是手机时，导航栏位于顶部。另外新闻列表在底部有分页模块。图4-6 新闻页面设计详情4.1.5 产品页面设计产品模块划分好几个页面，由于产品页面都是展示一些产品的图文信息，且内容排版都差不多，所以把这几个产品页面公用的排版模板封装成一个公用组件，这样能提高效率和减少代码冗余