关于本文

• 本文标题：基于Vue+Element+nodeJs+MongoDB的企业官网及后台系统设计与实现.doc
• 链接地址：https://wk.sbvv.cn/view/20195.html
• 内容摘要：基于Vue+Element+nodeJs+MongoDB的企业官网及后台系统设计与实现 摘要，在新世纪，Inteet已经成为人类别的必需品之一，使人们获取世界各地的信息更加迅速便捷。特别是HTML5CSS3和三大主流框架的快速发展，推动社会信息化数字化的快速发展，企业的网站建设是企业信息化的重要表现之一，这使得企业官网已经是每一个企业的刚需，通过官网能使外界更快速便捷的了解本公司，也是展示自身的平台，而随之而来的是网站的维护和管理。所以官网+后台是一个企业建设官方网站必需品。 本文以可以跨越移动端平板和PC端的企业官网和官网的后台管理系统为开发目标，通过vue框架和Element组件库来开发响应式官网，使用flex弹性布局和@media来实现官网的跨设备可观看，使用vueElement和avue来开发后台管理系统，用nodejs+MongoDB来开发官网和后台的接口和数据库。此次设计主要面向中小企业，为企业提供一个充分展示自己的产品理念实时动态等信息的平台，以及管理自己官网的后台。 关键词，VueElementnodejsMongoDBflexmedia DesignandImplementationofEnterpriseOfficialWebsiteandBackOfficeSystemBasedonVue+Element+nodeJs+MongoDB Abstract，InthenewcenturytheInteethasbecomeoneofthenecessitiesofthehumancategorymakingiteasierandfasterforpeopletoobtaininformationfromallovertheworld。InparticulartherapiddevelopmentofHTML5CSS3andthethreemaitreamframeworkspromotestherapiddevelopmentofsocialinformatizationanddigitization。Thecotructionofanenterprise抯websiteisoneoftheimportantmanifestatioofenterpriseinformatization。Throughtheofficialwebsitetheoutsideworldcanundertandthecompanymorequicklyandconvenientlyanditisalsoaplatformfordisplayingitselfandthenthemaintenanceandmanagementofthewebsite。Thereforetheofficialwebsite+backgroundisanecessityforanenterprisetobuildanofficialwebsite。 ThisarticletakestheenterpriseofficialwebsiteandtheofficialwebsitebackendmanagementsystemthatcanspanmobiletabletandPCasthedevelopmentgoals。ItusesthevueframeworkandElementcomponentlibrarytodeveloparespoiveofficialwebsiteandusesflexelasticlayoutand@mediatorealizethecrossdeviceofficialwebsiteWatchusevueElementandavuetodevelopthebackendmanagementsystemusenodejs+MongoDBtodeveloptheofficialwebsiteandbackendinterfaceanddatabase。Thisdesignismainlyforsmallandmediumsizedenterprisesprovidingcompanieswithaplatformtofullydisplaytheirproductsconceptsrealtimedynamicsandotherinformationaswellasthebackgroundtomanagetheirofficialwebsite。 Keywords，VueElementnodejsMongoDBflexmedia。 目录 第1章绪论 1 1。1背景和意义 1 1。1。1背景 1 1。1。2研究意义 2 1。2国内外现状分析 2 1。2。1国内现状分析 2 1。2。2国外现状分析 3 1。3研究方法和内容 3 1。3。1方法 3 1。3。2研究内容 4 第2章开发工具及相关技术 5 2。1前端 5 2。2后端 6 第3章系统整体设计 7 3。1可行性 7 3。1。1需求可行性 7 3。1。2技术可行性 8 3。2主体功能模块设计 8 3。2。1官网模块设计 8 3。2。2后台模块设计 9 3。3系统流程 12 3。3。1官网 13 3。4数据库设计 15 3。4。1数据库分析 15 3。4。2数据库实体关系 15 3。4。3数据库集合 17 第4章系统详细设计 20 4。1官网功能设计 20 4。1。1内容显隐 20 4。1。2响应式 21 4。1。3首页设计 23 4。1。4新闻页面设计 24 4。1。5产品页面设计 25 4。2后台系统功能设计 26 4。2。1登录模块 26 4。2。2新闻模块 27 4。2。3用户模块 29 第5章系统测试 30 5。1系统测试 30 5。2测试过程 30 5。2。1测试用例 30 5。2。2测试方法 31 5。3测试结果 33 5。3。1登录测试结果 33 5。3。2增删改查权限测试结果 35 5。3。3新闻发布测试结果 36 5。3。4新闻修改测试结果 37 5。3。5新闻删除测试结果 38 5。3。6新闻查看测试结果 39 5。3。7官网随机路径测试结果 40 5。3。8官网PC手机测试响应式布局 40 第6章结论 42 6。1毕业设计总结 42 6。2存在问题及改进 42 参考文献， 43 致谢 44 第1章绪论 1。1背景和意义 1。1。1背景 新世纪以来，科技技术信息万变，特别是IT技术得到迅猛发展，而随着IT技术通信技术的快速发展，Inteet渗入到社会的大多数行业的范畴，它已经是人民生活习惯的重要部分。有了Inteet，人们只需要通过电脑手机电视平板等终端设备，就能实现古人难以实现的秀才不出门，便知天下事，特别是智能手机的普及，互联网得到了再次跨越式发展，人们现在遇到自己不懂得想要了解的人事物，只需要通过网络，就能了解得一清二楚。这也促使企业必须要拥有属于自己的官方网站，只有有了自己网站，才能让想要了解自己的合作伙伴和个人有了了解的途径，才能充分展示自己。随之而来的，现在社会，手机上网率比PC高的多，这就要求企业的官网必须兼容手机端，所以，响应式网站就是现阶段网站的必须方向。当然，有了网站，维护和管理就成为一个新的问题，后台系统也成为不可或缺的一部分。 目前，绝大部分企业都拥有自己的响应式官网和后台系统，建立响应式网站，让企业可以跨设备，在移动端开辟属于自己的天地，也为用户提供了方便快捷的随时随地了解自身动态的途径。而后台管理系统，则可以让企业内部实时管理和更新官网的内容和最新动态，可以知道有哪些有合作意向的企业。 官网设置多个模块，每个模块页面都是相互独立的。主要有新闻页面企业产品企业介绍和合作意向表单等。而后台管理系统，则主要是给企业内部人员进行官网资讯图片等进行管理和发布的，管理人员可以把公司最新的动态通过管理系统发布到官网，实现官网的实时更新。 官网和后台的前端开发主要还是用到vuehtmlcssjavaScript和Element组件库，而后端和数据库则用到nodej和MongoDB关键在于怎么把三者串联起来。 最终要实现管理员可以对官网和后台系统进行综合的管理，发布企业的相关信息，对企业的感兴趣的求职者和合作企业能够通过官网来了解本企业的相关信息。 1。1。2研究意义 官网使用MVVM模式开发，对于代码维护性开发效率使用效率都有提高，充分发挥了vue的组件优势后端使用MVV结构开发，有效优化代码的可复用性，发挥了nodejs的模块化开发。 建立企业官网，可以为企业提供一个充分展示自己的平台，通过官网，展示一个企业的业务范畴联系方式实时信息地址等等，为想要了解本企业的个人企业提供了一个很好的途径，而与之对应的后台系统，则可以让企业内部人员更方便快捷的对官网内容进行管理更新，实时发送一些新的信息上官网。具体为， ，1， ，2， 1。2国内外现状分析 1。2。1国内现状分析 1。截至2018年12月，我国网民规模为8。29亿，全年新增网民5653万，互联网普及率达59。6%，网民中使用手机上网的比例由2017年底的97。5%提升至2018年底的98。6%。随着手机的普及度越来越高，人们的使用网络的门槛越来越低，愈来愈多的普通民众使用上Inteet，人们通过网络获取信息已经是一种潮流主流方向，所以现在的企业，发展自己的官网已经是现代企业的标配，是让人们了解自身的重要途径。 2。Vue在近两年中得到了快速发展，北京在招的前端职位中40%的岗位对vue技能有要求，在18年之后，我们看到像美团滴滴饿了么等这样的大型互联网公司已经把vue作为主要的前端技术栈，这使得vue在业界中的影响力和认可度得到迅速提升。 1。2。2国外现状分析 1。截至2015，有超过80%的APP将全部或部分基于HTML5，这意味着大部分APP的内容都将以网页的形式呈现，典型的例子，微信FacebookTwitter等这些大型应用。NicholasC。Zakas，JavaScriptWeb开发中极受欢迎的一门语言，JavaSript是一种全新的动态语言，它植根于全球数亿名都在使用的Web浏览器之中，致力于增强网站和Web应用程序的交互性。 3。BrianP。Hogon，HTMLCSS3帮助奠定了下一代Web应用的基础，这两项技术可以让我们的网站更易开发维护用户用户友好性，两者使一些复杂的功能再也不需要编写复杂的Javascript代码无需使用PS等图形工具，就可以把网站做得更炫酷。 1。3研究方法和内容 1。3。1方法 本论文主要运用了以下几种研究方法， 1调查对比法。通过对当前企业对官网建设的需求调查分析，以及对其他企业的官网进行观摩学习，来研究该网站的可行性和其所要完成的功能。 2分析法。对网站和系统进行系统的分析。分析其可行性应具备哪些功能要完善某功能所需的技术知识和技术支持。 3实验法。对该网站和系统系统进行系统编码，同时还应不断的运行测试该编码是否正确，该网站和系统是否能如期的实现其功能。 4总结法。对运行测试的结果和现象进行分析总结，及时修改bug完善网站和系统。最后，根据实验的过程和结果，完成毕业设计的说明书最终稿。 1。3。2研究内容 本文主要研究现在社会企业对建立自身网站的刚需，为企业提供一套官网及后台管理系统，具体拟从下面几方面研究， 1。绪论。主要介绍本论文的研究背景，分析官网及后台系统建立的背景。同时，对涉及技术的相关文献资料进行综述。阐述本论文的研究意义。 2。系统分析。主要介绍现状，分析用户功能的需求。同时，从技术经济方面进行可行性分析。 3。开发工具和涉及技术简介。主要介绍了官网及后台开发涉及到的技术栈，另外，还介绍了使用哪些工具进行开发。 4。系统概要设计。主要对官网和后台的功能需求进行设计，对基本功能操作流程和总体模块进行罗列和设计。 5。系统详细设计。对企业官网的一些功能模块的设计和实现，以及对后台管理系统的功能设计与实现。 6。系统测试。简介一些官网后台数据库三者进行综合联调测试。 第2章开发工具及相关技术 2。1前端 1开发环境 第一步是搭建npm，javaScript的包管理工具，，通过npm可以为自己的项目插入一些开发中需要使用到的第三方包，通过使用现成的包来提高开发效率，然后是安装Git，它是最先进的代码版本控制软件，通过它可以把托管在码云上的代码拉到本地来开发，当然也可以把本地代码通过Git上传到码云上，还有就是需要开发工具VScode编辑器，它提供了很多插件使开发前端方便快捷，当然浏览器是开发前端必不可少的，使用一些浏览器上的插件能更方便的调试代码，最后就是通过vuecli脚手架来初始化项目，使用scss来写css样式。前端开发本质还是HTML5开发，主要由用户交互视觉体验等来配合，根据设计原型来合理规划布局页面，合理编写代码来实现各种功能需求，实现各种交互效果。 2开发工具 ，1，VisualStudioCode 是微软发布的一款兼容各大主流桌面系统的源代码编辑器，里面集成了所有类似软件具备的特性。 ，2，GoogleChromeFireFox 两大主流浏览器，用于调试代码，查看效果的 ，3，Postman 是一款用于测试后端接口的工具，主要用于测试后端接口能否正常请求和返回来的数据是否正常。 3开发技术 ，1，Vue 是当前前端的主流框架之一，提高开发者的开发效率。 ，2，Elementui Elementui是一整套基于vue。js的的PC端的组件库。就是把PC端常用的一些功能模块封装成组件，开发者只需要导入就可以使用，能大大提高开发者的效率。 2。2后端 1开发环境 首先安装Node。js，里面内嵌了NPM包管理工具，然后是安装MongoDB配置好MongoDB环境，然后使用VSCode来进行具体开发，使用npm来安装各种开发中使用的各种第三方包，当然，Git版本控制系统来管理代码也是必不可少的，还有就是使用Postman来进行后端接口的测试。 2开发工具 ，1，VisualStudioCode 主要进行代码的编写。 ，2，NavicatforMongoDB NavicatforMongoDB是MongoDB数据库的可视化工具，它能使你更方便快捷的连接上本地远程的服务器，为你的数据的管理增删改查提高效率。 ，3，Postman 是一款用于测试后端的接口是否正常的接口功能测试工具，支持主流的请求方式。 3开发技术 ，1，Node。js Node。js本质是JavaScript，只不过是运行在服务端的而已，是基于谷歌的V8引擎的服务器平台，是事务驱动的，高效迅速。 ，2，Express Express是一款基于Nodejs的灵活的框架，里面封装了常用的nodejs功能模块。 ，3，MongoDB MongoDB是由C++语言编写的，是一个分布式文件存储的开源数据库系统，MongoDB将数据存储为一个文档，数据结构由键值(key=value)对组成，MongoDB文档类似于JSON对象，字段值可以包含其他文档，数组及文档数组。 第3章系统整体设计 3。1可行性 3。1。1需求可行性 在现代这个信息化时代，互联网已经渗透到各个领域，它把世界各地联系在一起，拉近了人们的距离。万维网www作为互联网上先进的，已经被人们高度接受的信息检索获取的手段，已经成为当今世界最大的信息资源库，里面的资源成千上万，只要你想得到的信息，通过它都能够找到。web站点是互联网的重要载体之一，数量早已难以估计，其内容范畴跨域了金融教育文化娱乐体育等各个领域，用户群体庞大，每天访问量数几十亿为单位。目前，人们主要通过互联网来获取各种自己想要了解的信息，所以，建设一个好的网站对于一个企业的发展是十分重要的，在现如今，企业自己的官网建设已经成为企业信息化建设中的重要组成部分。企业通过自己的官网来表达自己的相关信息，展示自己本公司的优秀产品，阐述自己企业的理念和企业文化，为想要了解公司客户和个人的提供一个平台途径，也让合作伙伴可以通过它与企业及时的交换意见，产生互动。后台管理系统是一个网站的后勤部，有了官网，如果要更新一些内容新闻，不可能由程序员来更新的，而是由专门的人来负责官网的内容的管理和更新，这时，后台管理系统就是必要的辅助后勤了，管理员通过后台来进行官网的内容更新替换，发布新的新闻等等，建设官网能给企业带来以下好处， 1公司形象 企业可以利用自己的网站来宣传自身的企业文化理念公司情况本公司的产品及动态信息。通过图文结合视频等的方式把自己公司的实时信息产品发到公司网站，体现本公司的形象。 2降低成本 有了网站，客户可以通过网站得到公司的联系方式，促使客户可以通过该联系方式与公司洽谈业务，减少了业务人员的出差等等。 3受众面广 企业网站是发布到公网上的，任何人都可以浏览的，不收区域限制，所以受众面面会很广。 4功能全面 一个企业有了网站以后能做和本公司相关的新闻系统产品系统在线下载系统招聘系统等。及时交流与客户的直接沟通，并及时收集隐藏的客户的资料。 故而，在信息化时代，企业自身的官网和后台管理系统是公司自身信息化建设的重要组成部分，是一个企业能力的重要展示平台，是为外界提供一个展示自我的重要途径，是一个企业发展中不可或缺的一部分，是一个企业的必需品。 3。1。2技术可行性 官网及后台管理系统开发周期并不长，主体是官网，后台只是辅助，不对外公布，只需要重点雕琢官网即可。....
• 版权声明：知知范文网 本站所有内容的版权归相应内容作者或权利人所有，本站不对涉及的版权问题负法律责任。
• 内容来源：本站所有内容均有网络公开等合法途径整理而来，该资料仅作为交流学习使用，并无任何商业目的，任何访问，浏览本站，购买或者未购买的人，就代表已阅读，理解本条声明
• 免责声明：内容所标价格，是对本站搜集、整理资料以及本站运营必须费用支付的适当补偿，资料索取者尊重版权方的知识产权，谢谢！