基于vue+Element+nodejs+mongoDB的企业官网及后台系统设计与实现

PAGE基于Vue+Element+nodeJs+MongoDB的企业官网及后台系统设计与实现摘要：在新世纪，Internet已经成为人类别的必需品之一，使人们获取世界各地的信息更加迅速便捷。特别是HTML5、CSS3和三大主流框架的快速发展，推动社会信息化、数字化的快速发展，企业的网站建设是企业信息化的重要表现之一，这使得企业官网已经是每一个企业的刚需，通过官网能使外界更快速便捷的了解本公司，也是展示自身的平台，而随之而来的是网站的维护和管理。所以官网+后台是一个企业建设官方网站必需品。本文以可以跨越移动端、平板和PC端的企业官网和官网的后台管理系统为开发目标，通过vue框架和Element组件库来开发响应式官网，使用flex弹性布局和@media来实现官网的跨设备可观看；使用vue、Element和avue来开发后台管理系统；用nodejs+MongoDB来开发官网和后台的接口和数据库。此次设计主要面向中小企业，为企业提供一个充分展示自己的产品、理念、实时动态等信息的平台，以及管理自己官网的后台。关键词：Vue、Element、nodejs、MongoDB、flex、@mediaDesignandImplementationofEnterpriseOfficialWebsiteandBackOfficeSystemBasedonVue+Element+nodeJs+MongoDBAbstract：Inthenewcentury,theInternethasbecomeoneofthenecessitiesofthehumancategory,makingiteasierandfasterforpeopletoobtaininformationfromallovertheworld.Inparticular,therapiddevelopmentofHTML5,CSS3andthethreemainstreamframeworkspromotestherapiddevelopmentofsocialinformatizationanddigitization.Theconstructionofanenterprise’swebsiteisoneoftheimportantmanifestationsofenterpriseinformatization.Throughtheofficialwebsite,theoutsideworldcanunderstandthecompanymorequicklyandconveniently,anditisalsoaplatformfordisplayingitself,andthenthemaintenanceandmanagementofthewebsite.Therefore,theofficialwebsite+backgroundisanecessityforanenterprisetobuildanofficialwebsite.Thisarticletakestheenterpriseofficialwebsiteandtheofficialwebsiteback-endmanagementsystemthatcanspanmobile,tablet,andPCasthedevelopmentgoals.ItusesthevueframeworkandElementcomponentlibrarytodeveloparesponsiveofficialwebsite,andusesflexelasticlayoutand@mediatorealizethecross-deviceofficialwebsiteWatch;usevue,Elementandavuetodeveloptheback-endmanagementsystem;usenodejs+MongoDBtodeveloptheofficialwebsiteandback-endinterfaceanddatabase.Thisdesignismainlyforsmallandmedium-sizedenterprises,providingcompanieswithaplatformtofullydisplaytheirproducts,concepts,real-timedynamicsandotherinformation,aswellasthebackgroundtomanagetheirofficialwebsite.Keywords：Vue、Element、nodejs、MongoDB、flex、@media.目录19077第1章绪论 186361.1背景和意义 1125821.1.1背景 12941.1.2研究意义 277091.2国内外现状分析 2187591.2.1国内现状分析 217391.2.2国外现状分析 34261.3研究方法和内容 3259761.3.1方法 3124731.3.2研究内容 420261第2章开发工具及相关技术 517342.1前端 5114912.2后端 6640第3章系统整体设计 7238063.1可行性 7250733.1.1需求可行性 7252213.1.2技术可行性 831833.2主体功能模块设计 8158533.2.1官网模块设计 8177133.2.2后台模块设计 981563.3系统流程 12131533.3.1官网 13285273.4数据库设计 15296653.4.1数据库分析 15100913.4.2数据库实体关系 15189763.4.3数据库集合 1727193第4章系统详细设计 20288494.1官网功能设计 20273084.1.1内容显隐 20203574.1.2响应式 21306694.1.3首页设计 23196944.1.4新闻页面设计 24113404.1.5产品页面设计 25224964.2后台系统功能设计 2616124.2.1登录模块 26320044.2.2新闻模块 2747594.2.3用户模块 299625第5章系统测试 30282995.1系统测试 30220815.2测试过程 30159225.2.1测试用例 30135925.2.2测试方法 31246805.3测试结果 3366195.3.1登录测试结果 33146005.3.2增删改查权限测试结果 35163555.3.3新闻发布测试结果 36269755.3.4新闻修改测试结果 37125975.3.5新闻删除测试结果 38208705.3.6新闻查看测试结果 39314945.3.7官网随机路径测试结果 40187765.3.8官网PC、手机测试响应式布局 4032606第6章结论 42138356.1毕业设计总结 4253046.2存在问题及改进 422499参考文献： 4327610致谢 44PAGE44第1章绪论1.1背景和意义1.1.1背景新世纪以来，科技技术信息万变，特别是IT技术得到迅猛发展，而随着IT技术、通信技术的快速发展，Internet渗入到社会的大多数行业的范畴，它已经是人民生活习惯的重要部分。有了Internet，人们只需要通过电脑、手机、电视、平板等终端设备，就能实现古人难以实现的“秀才不出门，便知天下事”，特别是智能手机的普及，互联网得到了再次跨越式发展，人们现在遇到自己不懂得、想要了解的人、事、物，只需要通过网络，就能了解得一清二楚。这也促使企业必须要拥有属于自己的官方网站，只有有了自己网站，才能让想要了解自己的合作伙伴和个人有了了解的途径，才能充分展示自己。随之而来的，现在社会，手机上网率比PC高的多，这就要求企业的官网必须兼容手机端，所以，响应式网站就是现阶段网站的必须方向。当然，有了网站，维护和管理就成为一个新的问题，后台系统也成为不可或缺的一部分。目前，绝大部分企业都拥有自己的响应式官网和后台系统，建立响应式网站，让企业可以跨设备，在移动端开辟属于自己的天地，也为用户提供了方便快捷的随时随地了解自身动态的途径。而后台管理系统，则可以让企业内部实时管理和更新官网的内容和最新动态，可以知道有哪些有合作意向的企业。官网设置多个模块，每个模块页面都是相互独立的。主要有新闻页面、企业产品、企业介绍和合作意向表单等。而后台管理系统，则主要是给企业内部人员进行官网资讯、图片等进行管理和发布的，管理人员可以把公司最新的动态通过管理系统发布到官网，实现官网的实时更新。官网和后台的前端开发主要还是用到vue、html、css、javaScript和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%引用《新闻研究导刊》2019,(02):34-35。随着手机的普及度越来越高，人们的使用网络的门槛越来越低，愈来愈多的普通民众使用上Internet引用《新闻研究导刊》2019,(02):34-352.Vue在近两年中得到了快速发展，北京在招的前端职位中40%的岗位对vue技能有要求，在18年之后，我们看到像美团、滴滴、饿了么等这样的大型互联网公司已经把vue作为主要的前端技术栈，这使得vue在业界中的影响力和认可度得到迅速提升。来自知乎慕课网[/p/35253650]1.2.2国外现状分析1.截至2015，有超过80%的APP将全部或部分基于HTML5，这意味着大部分APP的内容都将以网页的形式呈现，典型的例子：微信、Facebook、Twitter等这些大型应用。数据来源：国际科技媒体 ReadWriteWeb，20152.NicholasC.Zakas：JavaScript是一种非常松散的面向对象语言，也是Web开发中极受欢迎的一门语言，JavaSript是一种全新的动态语言，它植根于全球数亿名都在使用的Web浏览器之中，致力于增强网站和Web应用程序的交互性。NicholasC.Zakas.《JavaScript高级程序设计》第三版.前言，20123.BrianP.Hogon：HTML5和CSS3帮助奠定了下一代Web应用的基础，这两项技术可以让我们的网站更易开发、维护、用户用户友好性，两者使一些复杂的功能再也不需要编写复杂的Javascript代码、无需使用PS等图形工具，就可以把网站做得更炫酷。BrianP.Hogon.《HTML5和CSS3实例教程》前言，20141.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）GoogleChrome、FireFox 两大主流浏览器，用于调试代码，查看效果的（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对象，字段值可以包含其他文档，数组及文档数组。菜鸟教程.MongoDB教程./mongodb/mongodb-tutorial.html第3章系统整体设计3.1可行性3.1.1需求可行性在现代这个信息化时代，互联网已经渗透到各个领域，它把世界各地联系在一起，拉近了人们的距离。万维网www作为互联网上先进的，已经被人们高度接受的信息检索、获取的手段，已经成为当今世界最大的信息资源库，里面的资源成千上万，只要你想得到的信息，通过它都能够找到。web站点是互联网的重要载体之一，数量早已难以估计，其内容范畴跨域了金融、教育、文化、娱乐、体育、等各个领域，用户群体庞大，每天访问量数几十亿为单位。目前，人们主要通过互联网来获取各种自己想要了解的信息，所以，建设一个好的网站对于一个企业的发展是十分重要的，在现如今，企业自己的官网建设已经成为企业信息化建设中的重要组成部分。企业通过自己的官网来表达自己的相关信息，展示自己本公司的优秀产品，阐述自己企业的理念和企业文化，为想要了解公司客户和个人的提供一个平台、途径，也让合作伙伴可以通过它与企业及时的交换意见，产生互动。后台管理系统是一个网站的“后勤部”，有了官网，如果要更新一些内容、新闻，不可能由程序员来更新的，而是由专门的人来负责官网的内容的管理和更新，这时，后台管理系统就是必要的辅助后勤了，管理员通过后台来进行官网的内容更新替换，发布新的新闻等等，建设官网能给企业带来以下好处：1、公司形象企业可以利用自己的网站来宣传自身的企业文化理念、公司情况、本公司的产品及动态信息。通过图文结合、视频等的方式把自己公司的实时信息、产品发到公司网站，体现本公司的形象。2、降低成本有了网站，客户可以通过网站得到公司的联系方式，促使客户可以通过该联系方式与公司洽谈业务，减少了业务人员的出差等等。3、受众面广企业网站是发布到公网上的，任何人都可以浏览的，不收区域限制，所以受众面面会很广。4、功能全面一个企业有了网站以后能做和本公司相关的新闻系统、产品系统、在线下载系统、招聘系统等。及时交流、与客户的直接沟通，并及时收集隐藏的客户的资料。故而，在信息化时代，企业自身的官网和后台管理系统是公司自身信息化建设的重要组成部分，是一个企业能力的重要展示平台，是为外界提供一个展示自我的重要途径，是一个企业发展中不可或缺的一部分，是一个企业的必需品。3.1.2技术可行性官网及后台管理系统开发周期并不长，主体是官网，后台只是辅助，不对外公布，只需要重点雕琢官网即可。公司只需要让一位稍微熟悉nodejs开发的前端工程师自主进行整套项目的开发即可。整套项目，有强大合适的软件开发工具VSCode，里面可以安装各种辅助开发包来提高我们的开发工具，且前后端使用同一个软件即可，大大节省我们去熟悉不同软件的时间。前端只需用到前端工程师熟悉的vue框架、javaScript、css，这些都无需额外的复杂、不熟悉的知识，通过结合ElementUI组件库开发，通过使用现成的组件，无需我们自己封装；后端用到nodejs和MongoDB数据库，nodejs本质就是JavaScript，对于前端再熟悉不过了，逻辑基本和javaScript差不多，它提供了一些前端JavaScript不具备的核心模块，而MongoDB数据库和nodejs关联很大，操作起来不需要像MySQL那样写SQL语句，官方都封装成js函数，只需要调用对应的函数即可实现各种增删改查操作。前后端都无需很高的内外存储器，用户只需有能连接上网络的终端即可观看官网，而后台只需普通PC即可使用。所以，官网和后台系统的开发在技术上是具有可行性的。3.2主体功能模块设计3.2.1官网模块设计当前，企业的官方网站功能模块趋于统一，大部分功能都差不多，不外乎新闻模块、公司简介、产品信息展示、联系方式等，这些功能是每一个合格企业官网必须的。企业官网为客户提供了解企业的重要方式之一，客户可以通过官网取得联系方式，并与企业取得沟通，同时，企业也可以获取潜在客户的信息，为企业的发展添砖加瓦。本次设计的官网的模块主要是包含首页、产品展示页、新闻中心、关于我们、渠道合作、合作申请等11个页面。（1）首页：由轮播图、其他页面内容的一些简单展示、顶部导航栏、底部导航栏及版权信息等；（2）产品页：主要是公司软硬件设备的一些展示；（3）新闻中心：提供和本公司相关的新闻，以及一些和公司产品相关的新闻；（4）关于我们：展示公司相关信息、企业理念等；（5）渠道合作：提供一些招聘信息、申请合作的相关信息；（6）合作申请：填写合作意向信息。图3-SEQ图\*ARABIC\s31官网结构3.2.2后台模块设计每个企业的官网的都会提供新闻模块，例如华为公司的官网、阿里巴巴集团官网等等，提供新闻模块，利于展示企业专业信息、原创文章加快搜索引擎收录（利于更多用户能浏览到本公司的网站）。很多企业网站，并不是完全是静态页面，若是如此，每次更新都需要开发人员进行内容的更新在发布，这样一来会浪费很多时间和资源。这时，通过后台管理系统来对新闻进行管理，就会非常节省资源和方便快捷，只需要管理员在后台系统对新闻进心编辑输入，然后发布，官网就会同步更新了。本节，主要描述后台管理系统的各功能模块登录模块账号、密码和验证码组成，主要给用户进行后台登录的，必须只有在数据库有这个账号才能登录。2、新闻模块（如图3-2）添加新闻分类：在新闻类别页面中添加新闻的类别；修改分类：在类别页面的编辑弹窗中修改类别；删除分类：删除数据库中的类别；查看分类：查看该新闻类别的详细信息；添加新闻：发布新闻，会根据类别分配；删除新闻：删除数据库中该条新闻；修改新闻：修改新闻的各项内容；查看新闻：查看新闻的各个字段的详细信息；3、申请模块查看申请：查看官网中的申请表单提交的申请信息；导出成表格：把整个数据库中申请信息导出成一张Excel表格；批量删除信息：批量删除申请信息，必须选中一条及以上才行；改变申请状态：即把“未联系”改为“已联系”，默认是“未联系”4、系统模块管理员：增加后台菜单：即添加项目中已有的菜单名称和对应路由；删除后台菜单：删除对应菜单后，左侧菜单导航栏就没有该菜单了；修改后台菜单：可以重新编辑该菜单的各项字段内容；查看后台菜单；添加后台登录账号：管理员添加可以登录后台的账号，同时配置密码；删除后台登录账号；查看后台登录账号；修改后台登录账户：删除该账号后，该账户不能再登录后台。普通用户：查看后台菜单：只能看后台的具体菜单；查看后台登录账号（出密码外的账号名）5、产品模块修改产品图文信息：重新编辑该产品的信息；增加信息：新增公司的产品图文信息；删除信息；查阅信息。修改账号信息重新编辑账号：修改原来账号的名称；重新编辑密码：由现在密码、新的密码、确认密码组成。图3-2新闻模块与官网的关系图图3-3后台结构3.3系统流程为了让读者更清晰了解本次设计的操作流程，故而设计了本小节。本小结分为两个部分，分别是官网的流程和后台流程。官网流程较为简单，根据顶部导航菜单来选择对应的页面即可；后台必须登录才能进入官网，进入后台后，还会根据不同用户类型分配不同的增删改查权限和菜单，具体如下：3.3.1官网官网主要包含新闻、关于我们、渠道合作、产品信息、合作和体验申请等功能，由于没有登录注册功能，所以流程比较简单，流程图如图3-4：（1）进入官网，一进入官网默认是首页，首页是整个官网的内容的简略版；（2）根据顶部（左侧）导航菜单来选择你想要看的页面，页面大体内容如图3.4；（3）新闻页面包含新闻列表和新闻详情，点击新闻列表中的各个新闻，都会调到新闻详情页面；合作页面的底部有个“申请合作”的按钮，点击会跳转到一个表单页面，填写完后会跳会合作页面；（4）其他模块的流程都差不多。图3-4官网流程图3-5后台系统流程3.4数据库设计3.4.1数据库分析在一个动态的网站中，本质上它的动态就是通过数据库的增删改查，所以数据库在动态网站中是很关键的。本次设计使用的数据库是MongoDB，它是非关系型数据库，是以文档形式存储的，以键值对（key-value）存储，以JSON数据格式保存。本次对数据库的需求不会很大，最大的需求就在新闻模块，其他模块对数据库的需求不会很大，因为官网更新一般都在与新闻板块，且新闻涉及的数据不少；其次是产品和轮播图模块。所以，本次数据库的设计不会很复杂，可能较为复杂的就在于每个集合的分页查询和模糊搜索查询这两个需求。3.4.2数据库实体关系在数据库的设计中，首先要考虑的问题是确立对象模型，只有确立了对象模型，才能进行各种增删改查。概念模型（信息模型）是各种数据模型的共同基础，它可以充分地反映现实世界，包括事物和事物之间的联系，能满足用户对数据的处理要求，是现实世界的一个真实模型，描述概念模型的有力工具是E-R模型百度百科.E-R图百度百科.E-R图E-R图提供展示实体、联系、属性的方法，它主要由以下三者构成：·实体：现实社会客观存在的事物；·属性：实体具备的特性称为属性；·联系：现实世界中，事物内部以及事物之间是有联系的，这些联系在信息世界中反映为实体内部的联系和实体之间的联系，实体之间的联系有一对一、一对多和多对多等多种类型。E-R图的精细设计.E-R图的精细设计.知网.2015-04-25E-R关系图如下：账户实体属性：_id、账号、密码、用户类型、创建时间。图3-6帐户E-R图新闻实体属性：_id、类别、标题、作者、新闻内容、创建时间、更新时间。图3-7新闻E-R图官网申请合作信息实体属性：_id、来源、所属公司、姓名、电话、所在城市、状态、创建时间。图3-8官网申请合作E-R图官网产品信息实体属性：_id、图片、标题、介绍、创建时间、更新时间。图3-9官网产品信息E-R图官网首页轮播图：_id、图片、标题、内容、创建时间。图3-10官网首页轮播图3.4.3数据库集合 MongoDB是一种面向集合存储的数据库，即数据被分组存储在数据集中，被称为一个集合，集合的概念类似关系型数据库里的表，不同的是它不需要定义任何数据模式菜鸟教程.MongoDB教程./mongodb/mongodb-tutorial.html。下面是本次数据库中的集合：菜鸟教程.MongoDB教程./mongodb/mongodb-tutorial.html账户集合：表3-SEQ表\*ARABIC1账户集合序号字段名类型说明

续表3-11_idObjectIDMongoDB自动生成的唯一id2userString唯一账号3passwordString经过加密的密码4usertypeNumber用户类型：1：管理员；0：普通用户5createTimeDate账号的创建时间新闻集合：表3-2新闻集合序号字段名类型说明1_idObjectIDMongoDB自动生成的唯一id2categoryObjectID对应新闻类别集合的_id3titleString新闻标题4authorString新闻作者5contentString新闻的内容6imageString新闻内容的首图7firstContentString新闻内容的首句8updateTimeDate新闻的更新时间9createTimeDate新闻的创建时间产品集合：表3-3产品集合序号字段名类型说明1_idObjectIDMongoDB自动生成的唯一id2imageString产品的图片3titleString标题4contentString产品的介绍5updateTimeDate产品的更新时间6createTimeDate产品的创建时间轮播图集合：表3-4轮播图集合序号字段名类型说明

续表3-41_idObjectIDMongoDB自动生成的唯一id2imageString图片3titleString标题4contentString内容5createTimeDate账号的创建时间申请合作集合：表3-5申请合作集合序号字段名类型说明1_idObjectIDMongoDB自动生成的唯一id2nameString姓名3phoneString电话4companyString所属公司5cityString所在城市6sourceNumber来源：1：官网--申请体验；2：官网--渠道合作；7statusNumber状态：0：已联系；1：未联系8createTimeDate账号的创建时间第4章系统详细设计4.1官网功能设计 官网使用vue框架来搭建，并使用ElementUI组件库中的一些组件来提高开发效率的。核心功能是新闻模块、内容随滚动条的滚动而不断显隐、官网跨设备（主要是PC和手机）兼容（即响应式布局）、首页等。其中响应式是通过CSS3的@media来实现的。4.1.1内容显隐图4-1滚动显隐的流程这个功能是贯穿整个官网的比较核心的功能。简单的来说，就是，页面的内容只有滚动条滚动到该内容刚好在整个浏览器的显示区域的1/3的时候，该内容才能显示，该内容一旦消失在显示区域，内容就消失，且每次显示和隐藏时都伴随着对应的动画效果，具体实现如上图4.1。首先，在主体页面App.vue（官网整个项目的主页面，所以页面都会在这个页面显示，相当于一个容器）监听一个scroll事件（滚动事件），然后在created周期函数中获取浏览器的可视显示高度clientHeight，接着在scroll事件的回调函数中，不断获取滚动出去的高度scrollTop，以及获取本页面将要实现显隐的模块Dom，获取这些Dom元素距文档顶部的距离top，然后通过top-scrollTop-(clientHeight/3*2)<=0来判断内容是否显隐；代码如上图。4.1.2响应式 随着踏入移动互联网,手机上网率大幅超过PC上网率，传统的网站只能兼容PC，越来越多的传统网站已经满足不了市场的需求，所以，开发兼容PC和移动端的网站已经是现在的主流方向，而HTML5响应式网站是主要方向之一。 响应式网站使网站可以跨设备，使网站不再局限于PC端，能让用户直接通过手机即可浏览你的网站。 H5响应式开发主要用到的是CSS3的@media媒体查询，通过使用@media可以对不同分辨率尺寸的设备进行不同的样式设计。官网通过@media媒体查询设置了三种屏幕尺寸的不同样式，这三种覆盖了PC、平板、手机： 有了这三种不同尺寸的样式，能使网站的内容都能在主流的不同尺寸的PC、平板、手机等终端设备正常显示，不出现样式错乱的情况。图4-2min-width:1100px的情况图4-3(min-width:769px)and(max-width:1100px)的情况图4-4(min-width:100px)and(max-width:769px)的情况4.1.3首页设计 首页作为整个官网的门面担当，是整个官网设计中的重中之重。首页是整个官网内容的缩减版展示，主要由产品、新闻、合作伙伴、导航栏、轮播图等小组件组成。 由于首页的内容比较多，如果把代码都写在一个.vue文件的话，会难以维护，故而把首页的每一块内容模块都写成一个.vue文件，最后分别导入home.vue这个文件，组合成首页，首页一共由rotation.vue、role.vue、wisdom.vue、product.vue、partner.vue、news.vue等六个模块组成，这样，代码清晰易维护；另外，首页还有顶部、底部两个导航菜单（贯穿整个官网的），顶部导航菜单会根据设备的大小自动变化成顶部、左侧两种，且根据滚动显隐，当向下滚动和静止时导航栏消失，向上滚动，菜单栏会显示，这样会方便用户操作。图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产品页面设计产品模块划分好几个页面，由于产品页面都是展示一些产品的图文信息，且内容排版都差不多，所以把这几个产品页面公用的排版模板封装成一个公用组件，这样能提高效率和减少代码冗余。产品页面是由头部的页面介绍、中间的产品图文介绍、底部的其他内容组成，比较简略，中间排版主要由图片和文字左右交叉展示，部分代码如图4-7。图4-7产品公共组件部分代码4.2后台系统功能设计后台系统使用了vue+ElementUI+基于Element的二度封装的avue框架来搭建。核心的功能是登录模块、不同账号类型的菜单权限分配、增删改查的权限分配、各大模块的增删改查。每个模块都是以表格来呈现，新增、编辑、查看都是以弹窗的形式呈现出来，删除会有提示，只有点击“确定”，才会删除选中的那条数据；总体是左侧为导航菜单，右侧为内容区域，顶部为企业logo和账户等一些辅助内容。4.2.1登录模块登录模块是进入后台的第一个页面，若是没有登录成功，是不能进入后台的首页的。其中登录页面有一个表单组成，包含账户、验证码、密码等组成。其中验证码是由英文大小写字母和阿拉伯数字随机组成字符串，再通过JavaScript的Math.random()方法生成的随机数去选择对应字符串中的字母或数字，最后通过HTML5的cansva勾画出来的。每次刷新页面、点击报错后验证码都会重新获取，验证码不区分大小。部分代码：identifyCodes:"1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM",

//

验证码随机数范围identifyCode:

"",//验证码randomNum(min,

max)

{//获取随机数

return

Math.floor(Math.random()

*

(max

-

min)

+

min);

},refreshCode()

{//刷新验证码

this.identifyCode

=

"";

this.makeCode(this.identifyCodes,

4);},makeCode(o,

l)

{//从identifyCodes中获取对应字符

for

(let

i

=

0;

i

<

l;

i++)

{

this.identifyCode

+=

this.identifyCodes[

this.randomNum(0,

this.identifyCodes.length)

];

}

} 登录模块需要通过后台和后端的双重验证，特别是后端的验证，只有后端的验证通过了，才能正式登录后台。后端验证的流程：（1）首先把前端传过来的账号传到数据库中查询，如果能在数据库中找到，则进行下一步，反之，则报错，返回“用户不存在”的提示； （2）把前端穿过来的密码和数据库中对应用户的密码通过第三方模块bcryptjs的compareSync()方法进行解密匹配（因为之前管理员添加用户的时候，密码是使用bcryptjs的hashSync()方法加密过），匹配成功，则继续下一步，反之，则报错，返回“密码错误”的错误提示； （3）返回通过jsonwebtoken的sign()方法生成的token、账号、用户类型、id、菜单权限给前端，这个token是后续前端向后端各种请求时必须添加进请求头（RequestHeaders）的Authorization中的安全标识，后端响应每个请求前都会判断前端返回来的token是否是合法的，如果不是合法的，就不会返回任何数据，直接报错，是合法的，则返回对应数据。图4-8登录校验流程4.2.2新闻模块 在新闻模块中，主要的功能其实就是新闻的增删改查，难点就是新闻详情的富文本和图片的上传。 本模块的增改查都是通过弹窗实现的，无需跳转到其他页面，每次增删改查成功后，都会重新向后端发送请求，重新获取数据，起到刷新数据的效果。打开查看弹窗时，所有数据只能看，不能改（会全部disabled），编辑弹窗可以进行修改。 富文本主要实现图片的上传和新闻内容的编辑，使用的是avue框架的avue-plugin-ueditor组件，由于该组件上传图片并不支持添加token，故而修改了一下该组件的源码，实现上传图片时在请求头添加token。通过富文本，可是实现新闻内容的各种字体加粗、下划线、颜色、字体大小等等操作，在发送给后端时，富文本的内容是以HTML标签式字符串发给后端并存储进数据库的。 由于新闻会有多条，所有在后台还做了分页，通过向后端请求新闻列表数据时，传current（当前页）、size（一页多少条）参数给后端，后端通过这两个参数来跳过若干条数据获取前端要求current页的size条数据返回给前端来实现分页功能。 另外，新闻模块做了模糊查询，前端把模糊查询的条件发给后端，后端通过条件进数据库对应字段进行匹配，把所有匹配的数据返回给前端，部分实现代码如图4-12：图4-9模糊查询代码4.2.3用户模块 这个模块是用来展示后台管理系统的账号信息的，只有管理员有这个权限查看、修改、增加、删除这个表格的数据，普通用户是看不到这个菜单的，当然，即使分配此模块的菜单权限给普通用户，他也只能看，增删改权限是没有的。实现管理员和普通用户的区别，在于创建账号时，会添加一个用户类别的字段，共同存进数据库。 在登录时，后端通过识别该用户的用户类型来返回不同的菜单（是由管理员创建账号时，分配给该账户的菜单），只有分配到的菜单，在用户登录后台时才会显示，没有分配的菜单，是不会显示的。不同类型的用户类型，最大，也是唯一的区别，就是增删改查权限，管理员拥有全部权限，普通用户只有查看的权限。 部分代码如下：图4-10用户的增删改查部分代码第5章系统测试5.1系统测试 软件测试是程序开发的重要环节之一，通过它的结果决定你的项目能否最终上架，它的目的是最大限度的发现软件中的bug和不完善的问题，并让开发者修复，提高软件的可靠性和完整性，对软件开发具有重要意义。测试一般分为白盒和黑盒测试。白盒测试要求全面了解程序内部逻辑结构、对所有逻辑路径进行测试，主要用于检测软件编码过程中的错误，黑盒测试，主要检测软件的每一个功能是否能够正常使用。王彦.移动互联网软件测试技术研究及应用[J].现代信息科技,2019,3(3):8-9,12.王彦.移动互联网软件测试技术研究及应用[J].现代信息科技,2019,3(3):8-9,12.5.2测试过程 本次设计的测试主要用到postman、chrome浏览器、Firefox浏览器和NavicatforMongoDB这几个软件，chorme和Firefox这两个浏览器用于呈现官网和后台页面的，postman用于测试发送请求，测试接口能否正常接受来自前端的请求并返回对应数据，NavicatforMongoDB是MongoDB的可视化工具，用于增删改查数据库中的数据的。通过这几个软件，分别使用整体测试和随机测试方式，对官网、后台进行完整的测试，把发现的问题加以解决，使设计更晚上。5.2.1测试用例 本次毕业设计的部分用例如下：表5-SEQ表\*ARABIC\s11测试用例过程预期结构实际结果输入账号、密码、验证码进入后台首页进入后台首页登录后，根据不同用户类型，分配增删改查权限管理员拥有所有菜单的增删改查权限；普通用户只有查看的权限管理员拥有所有菜单的增删改查权限；普通用户只有查看的权限输入新闻的标题、作者、详情、类别添加新闻，并刷新数据，新加数据显示在第一条添加新闻，并刷新数据，新加数据显示在第一条附表5-1打开新闻编辑，把详情修改了新闻详情更新，并显示到第一条新闻详情更新，并显示到第一条后台点击删除新闻按钮删除新闻删除新闻后台点击查看新闻按钮查看新闻详情查看详情官网随机输入路径跳到404页面跳到404页面官网PC、手机测试响应式布局PC端和手机端都能正常显示PC端和手机端都能正常显示5.2.2测试方法测试主要分为两大部分，整体测试和随机测试。整体联合测试，把所有模块页面都测试，这样有利于发现一些比较大的问题，例如数据请求渲染不及时、增删改查的错误等问题。主要是通过后台系统对数据进行增删改查时，通过NavicatPremium15软件或是直接通过后台的表格查看对应数据库中的集合（表）的数据是否出现对应操作的变化；还有就是当在后台进行数据操作时，官网的数据有没有出现对应的变化。随机测试，也是本设计测试的重要一环。通过模拟用户的“暴力”、故意找茬式的测试，有利于发现一些不容易发现的、出现概率比较低的、隐藏得比较深的bug，例如，随机输入路径是否能跳到404页面等等，通过这样测试修复bug，使我们的项目更趋完善。各个用例的测试过程（测试结果请看5.3）：后台登录分为四种情况来测试：输入错误的验证码：用户输入账号、密码、验证码，点击登录后，会直接弹出验证码错误的提示，验证码框清空，要求重新输入。输入不存在的账号：通过post把账号密码发给后端，后端通过账号查询数据库，没有查询到，返回“用户不存在”，登录不了。输入错误的密码：后端查询到该用户后，把前端发过来的密码和在数据库中查询到的对应账户的已经加密过的密码进行解析匹配，密码错误，直接返回“密码错误”。输入正确的账号、密码、验证码：通过前端的验证码、后端的账号、密码的全部校验，生成token，返回该账户除密码的信息和token给前端，后台登录成功，进入首页。增删改查权限分配用户登录成功后，会根据该用户的用户类型字段来进行增删改查权限的分配。事先先创建两个不同的账号，分别是管理员和普通用户（管理员创建的）。然后分别分别进行登录，通过查看每个菜单的页面，看新增、删除、查看、编辑这四个按钮是否显示。管理员应该是每个菜单页面都会显示这四个按钮，普通用户只会显示查看按钮。新闻发布（增加）打开后台的新闻列表页面，点击新增按钮，然后根据弹窗进行新闻的各个字段的输入，全部输入后，点击保存按钮，就会发布该新闻了，发布后，会自动重新请求获取列表数据，实现数据刷新，新发布的新闻就会显示在表格的首行；若点击取消，则会放弃发布新闻。新闻修改在新闻列表页面，随机选一条新闻。点击该新闻的右侧操作栏中的编辑按钮，就会打开一个弹窗，在该弹窗中修改你想要修改的字段内容即可，完成后，点击修改按钮，就会把所有内容通过post请求发给后端，后端会更新数据库中对应的数据，且会重新请求列表数据，达到数据刷新的效果，新修改的那条新闻会自动排在表格首行。新闻删除点击新闻列表中的某条新闻右侧操作栏中的删除按钮，弹出个确认删除弹窗，点击“删除”，会彻底删除该新闻。新闻查看点击查看按钮，弹出查看弹窗，所有内容都会disabled，只能看，不能修改。官网随机路径在浏览器中，随机输入官网不存在的url，会自动跳到404页面，输入正常路径，会跳到对应的页面。官网PC、手机跨设备响应式显示在PC机打开官网，能正常显示各个页面，然后在手机上打开官网，页面布局会自动适应手机大小，每个页面都会正常显示。5.3测试结果5.3.1登录测试结果图5-1前端表单验证图5-2用户不存在图5-3密码错误图5-4登录成功5.3.2增删改查权限测试结果图5-5管理员权限图5-6普通用户权限5.3.3新闻发布测试结果图5-7新闻发布弹窗图5-8新闻发布列表5.3.4新闻修改测试结果图5-9修改前图5-10修改后5.3.5新闻删除测试结果图5-11删除新闻5.3.6新闻查看测试结果图5-12新闻查看图5-13成功删除新闻5.3.7官网随机路径测试结果图5-14404页面5.3.8官网PC、手机测试响应式布局图5-15PC端图5-16手机移动端第6章结论6.1毕业设计总结 在完成毕业设计的这段时间里，重新体验到类似高三的那种时间的紧迫感。由于平时非周末时间要正常上班，没有时间来完成毕业设计，只能在周末来开发，且要完成公司分配的开发任务，所以这段时间排的特别紧。 在过去的这段时间虽然过得辛苦，总是抱怨，但，当看到自己的成品时，总是满满的满足感，心中的抱怨早就烟飞云散了。毕设途中，让我学到了很多新的知识，把以前觉得很遥远、高大上的东西都纷纷收入囊中，变成自己的，正是这种不断追求的新知识的渴望驱使我完成这份毕业设计。 通过这次毕业设计，个人动手能力、自我解决问题的能力都有了不错的提高，也给了自己一个不合理安排和规划时间的教训。6.2存在问题及改进 在这次毕业设计中，遇到了很多新的知识、技术，有些知识和技术已经明白掌握，但有些还是不懂，这我明白前端涉及的知识是很广阔的，需要自己不断的完善自己的知识面，不断巩固已掌握的知识的同时，也要不断学习新知识，不能满足于现状，道路还长。 由于时间紧迫，还是有不少功能未能实现，譬如用户的评论功能等，后续会找时间完善的。参考文献：[1](美)霍多罗夫(Chodorow).MongoDB权威指南[M].人民邮电出版社,2014.[2]朴灵.深入浅出Node.js[M].人民邮电出版社,2013.[3]黄丹华.Node.js开发实战详解[M].清华大学出版社,2014.[4]崔莹,刘兵.Node.js与Express技术在计算机课程教学中的应用[J].软件导刊,2016(09).[5]麦冬,陈涛,梁宗湾.轻量级响应式框架Vue.js应用分析[J].信息与电脑(理论版),2017(07).[6]柴青山.基于MVVM模式的Vue.js框架在物流软件自动化测试系统中的应用研究[D].北京邮电大学,2019.[7]刘德山.HTML5+CSS3Web前端开发技术[M].人民邮电出版社,2016.[8]王成,李少元,郑黎晓,缑锦,曾梅琴,刘慧敏.Web前端性能优化方案与实践[J].计算机应用与软件,2014(12).[9]熊俊雄,陆海洪,周志文,兰伟发,朱师琳,徐元中.基于express的内容发布系统[J]电子世界,2019(11):14-16.[10]BowersM,SynodinosD,SumnerV.ProHTML5andCSS3DesignPatterns,2013.致谢本次毕业设计能够完成，离不开我的指导老师张亚林老师的细心指导和帮助，知道期间细心传达毕业设计的具体要求和检查时间，细致的检查，牺牲自己的宝贵时间和精力帮助我们完善毕业设计，让我们顺利毕业，在此，让我说声谢谢。另外，还要特别感谢大学四年里给我传授知识的所有老师和辅导员老师，是你们的辛勤付出，才造就了现在的我们。最后，由于时间叫仓促，自身知识技术的不足，整篇论文的缺点、错误还请各位阅读过的老师、同学多多予与指正，谢谢。

ExcelXP的八则快速输入技巧如果我们在用ExcelXP处理庞大的数据信息时，不注意讲究技巧和方法的话，很可能会花费很大的精力。因此如何巧用ExcelXP，来快速输入信息就成为各个ExcelXP用户非常关心的话题，笔者向大家介绍几则这方面的小技巧。1、快速输入大量含小数点的数字如果我们需要在ExcelXP工作表中输入大量的带有小数位的数字时，按照普通的输入方法，我们可能按照数字原样大小直接输入，例如现在要在单元格中输入0.05这个数字时，我们会把“0.05”原样输入到表格中。不过如果需要输入若干个带有小数点的数字时，我们再按照上面的方法输入的话，每次输入数字时都需要重复输入小数点，这样工作量会变大，输入效率会降低。其实，我们可以使用ExcelXP中的小数点自动定位功能，让所有数字的小数点自动定位，从而快速提高输入速度。在使用小数点自动定位功能时，我们可以先在ExcelXP的编辑界面中，用鼠标依次单击“工具”/“选项”/“编辑”标签，在弹出的对话框中选中“自动设置小数点”复选框，然后在“位数”微调编辑框中键入需要显示在小数点右面的位数就可以了。以后我们再输入带有小数点的数字时，直接输入数字，而小数点将在回车键后自动进行定位。例如，我们要在某单元格中键入0.06的话，可以在上面的设置中，让“位数”选项为2，然后直接在指定单元格中输入6，回车以后，该单元格的数字自动变为“0.06”，怎么样简单吧？2、快速录入文本文件中的内容现在您手边假如有一些以纯文本格式储存的文件，如果此时您需要将这些数据制作成ExcelXP的工作表，那该怎么办呢？重新输入一遍，大概只有头脑有毛病的人才会这样做；将菜单上的数据一个个复制/粘贴到工作表中，也需花很多时间。没关系！您只要在ExcelXP中巧妙使用其中的文本文件导入功能，就可以大大减轻需要重新输入或者需要不断复制、粘贴的巨大工作量了。使用该功能时，您只要在ExcelXP编辑区中，依次用鼠标单击菜单栏中的“数据/获取外部数据/导入文本文件”命令，然后在导入文本会话窗口选择要导入的文本文件，再按下“导入”钮以后，程序会弹出一个文本导入向导对话框，您只要按照向导的提示进行操作，就可以把以文本格式的数据转换成工作表的格式了。3、快速输入大量相同数据如果你希望在不同的单元格中输入大量相同的数据信息，那么你不必逐个单元格一个一个地输入，那样需要花费好长时间，而且还比较容易出错。你可以通过下面的操作方法在多个相邻或不相邻的单元格中快速填充同一个数据，具体方法为：首先同时选中需要填充数据的单元格。若某些单元格不相邻，可在按住Ctrl键的同时，点击鼠标左键，逐个选中；其次输入要填充的某个数据。按住Ctrl键的同时，按回车键，则刚才选中的所有单元格同时填入该数据。4、快速进行中英文输入法切换一张工作表常常会既包含有数字信息，又包含有文字信息，要录入这样一种工作表就需要我们不断地在中英文之间反复切换输入法，非常麻烦，为了方便操作，我们可以用以下方法实现自动切换：首先用鼠标选中需要输入中文的单元格区域，然后在输入法菜单中选择一个合适的中文输入法；接着打开“有效数据”对话框，选中“IME模式”标签，在“模式”框中选择打开，单击“确定”按钮；然后再选中输入数字的单元格区域，在“有效数据”对话框中，单击“IME模式”选项卡，在“模式”框中选择关闭（英文模式）；最后单击“确定”按钮，这样用鼠标分别在刚才设定的两列中选中单元格，五笔和英文输入方式就可以相互切换了。5、快速删除工作表中空行删除ExcelXP工作表中的空行，一般的方法是需要将空行都找出来，然后逐行删除，但这样做操作量非常大，很不方便。那么如何才能减轻删除工作表中空行的工作量呢？您可以使用下面的操作方法来进行删除：首先打开要删除空行的工作表，在打开的工作表中用鼠标单击菜单栏中的“插入”菜单项，并从下拉菜单中选择“列”，从而插入一新的列Ｘ，在Ｘ列中顺序填入整数；然后根据其他任何一列将表中的行排序，使所有空行都集中到表的底部。删去所有空行中Ｘ列的数据，以Ｘ列重新排序，然后删去Ｘ列。按照这样的删除方法，无论工作表中包含多少空行，您就可以很快地删除了。6、快速对不同单元格中字号进行调整在使用ExcelXP编辑文件时，常常需要将某一列的宽度固定，但由于该列各单元格中的字符数目不等，致使有的单元格中的内容不能完全显示在屏幕上，为了让这些单元格中的数据都显示在屏幕上，就不得不对这些单元格重新定义较小的字号。如果依次对这些单元格中的字号调整的话，工作量将会变得很大。其实，您可以采用下面的方法来减轻字号调整的工作量：首先新建或打开一个工作簿，并选中需要ExcelXP根据单元格的宽度调整字号的单元格区域；其次单击用鼠标依次单击菜单栏中的“格式”/“单元格”/“对齐”标签，在“文本控制”下选中“缩小字体填充”复选框，并单击“确定”按钮；此后，当你在这些单元格中输入数据时，如果输入的数据长度超过了单元格的宽度，ExcelXP能够自动缩小字符的大小把数据调整到与列宽一致，以使数据全部显示在单元格中。如果你对这些单元格的列宽进行了更改，则字符可自动增大或缩小字号，以适应新的单元格列宽，但是对这些单元格原设置的字体字号大小则保持不变。7、快速输入多个重复数据在使用ExcelXP工作表的过程中，我们经常要输入大量重复的数据,如果依次输入，无疑工作量是巨大的。现在我们可以借助ExcelXP的“宏”功能,来记录首次输入需要重复输入的数据的命令和过程,然后将这些命令和过程赋值到一个组合键或工具栏的按钮上,当按下组合键时,计算机就会重复所记录的操作。使用宏功能时，我们可以按照以下步骤进行操作:首先打开工作表，在工作表中选中要进行操作的单元格；接着再用鼠标单击菜单栏中的“工具”菜单项，并从弹出的下拉菜单中选择“宏”子菜单项，并从随后弹出的下级菜单中选择“录制新宏”命令；设定好宏后，我们就可以对指定的单元格，进行各种操作，程序将自动对所进行的各方面操作记录复制。8、快速处理多个工作表有时我们需要在ExcelXP中打开多个工作表来进行编辑，但无论打开多少工作表，在某一时刻我们只能对一个工作表进行编辑，编辑好了以后再依次编辑下一个工作表，如果真是这样操作的话，我们倒没有这个必要同时打开多个工作表了，因为我们同时打开多个工作表的目的就是要减轻处理多个工作表的工作量的，那么我们该如何实现这样的操作呢？您可采用以下方法：首先按住“Shift"键或“Ctrl"键并配以鼠标操作，在工作簿底部选择多个彼此相邻或不相邻的工作表标签，然后就可以对其实行多方面的批量处理；接着在选中的工作表标签上按右键弹出快捷菜单，进行插入和删除多个工作表的操作；然后在“文件”菜单中选择“页面设置……”，将选中的多个工作表设成相同的页面模式；再通过“编辑”菜单中的有关选项，在多个工作表范围内进行查找、替换、定位操作；通过“格式”菜单中的有关选项，将选中的多个工作表的行、列、单元格设成相同的样式以及进行一次性全部隐藏操作；接着在“工具”菜单中选择“选项……”，在弹出的菜单中选择“视窗”和“编辑”按钮，将选中的工作表设成相同的视窗样式和单元格编辑属性；最后选中上述工作表集合中任何一个工作表，并在其上完成我们所需要的表格，则其它工作表在相同的位置也同时生成了格式完全相同的表格。高效办公Excel排序方法"集中营"排序是数据处理中的经常性工作，Excel排序有序数计算（类似成绩统计中的名次）和数据重排两类。本文以几个车间的产值和名称为例，介绍Excel2000/XP的数据排序方法。一、数值排序1.RANK函数RANK函数是Excel计算序数的主要工具，它的语法为:RANK（number，ref，order），其中number为参与计算的数字或含有数字的单元格，ref是对参与计算的数字单元格区域的绝对引用，order是用来说明排序方式的数字（如果order为零或省略，则以降序方式给出结果，反之按升序方式）。例如图1中E2、E3、E4单元格存放一季度的总产值，计算各车间产值排名的方法是:在F2单元格内输入公式“=RANK（E2，$E$2:$E$4）”，敲回车即可计算出铸造车间的产值排名是2。再将F2中的公式复制到剪贴板，选中F3、F4单元格按Ctrl+V，就能计算出其余两个车间的产值排名为3和1。如果B1单元格中输入的公式为“=RANK（E2，$E$2:$E$4，1）”，则计算出的序数按升序方式排列，即2、1和3。需要注意的是:相同数值用RANK函数计算得到的序数（名次）相同，但会导致后续数字的序数空缺。假如上例中F2单元格存放的数值与F3相同，则按本法计算出的排名分别是3、3和1（降序时）。2.COUNTIF函数COUNTIF函数可以统计某一区域中符合条件的单元格数目，它的语法为COUNTIF（range，criteria）。其中range为参与统计的单元格区域，criteria是以数字、表达式或文本形式定义的条件。其中数字可以直接写入，表达式和文本必须加引号。仍以图1为例，F2单元格内输入的公式为“=COUNTIF（$E$2:$E$4，">"&E2）+1”。计算各车间产值排名的方法同上，结果也完全相同，2、1和3。此公式的计算过程是这样的:首先根据E2单元格内的数值，在连接符&的作用下产生一个逻辑表达式，即“>176.7”、“>167.3”等。COUNTIF函数计算出引用区域内符合条件的单元格数量，该结果加一即可得到该数值的名次。很显然，利用上述方法得到的是降序排列的名次，对重复数据计算得到的结果与RANK3.IF函数Excel自身带有排序功能，可使数据以降序或升序方式重新排列。如果将它与IF函数结合，可以计算出没有空缺的排名。以图1中E2、E3、E4单元格的产值排序为例，具体做法是:选中E2单元格，根据排序需要，单击Excel工具栏中的“降序排序”或“升序排序”按钮，即可使工作表中的所有数据按要求重新排列。假如数据是按产值由大到小（降序）排列的，而您又想赋予每个车间从1到n（n为自然数）的排名。可以在G2单元格中输入1，然后在G3单元格中输入公式“=IF（E3=E2，G3,G3+1）”，只要将公式复制到G4等单元格，就可以计算出其他车间的产值排名。二、文本排序选举等场合需要按姓氏笔划为文本排序，Excel提供了比较好的解决办法。如果您要将图1数据表按车间名称的笔划排序，可以使用以下方法:选中排序关键字所在列（或行）的首个单元格（如图1中的A1），单击Excel“数据”菜单下的“排序”命令，再单击其中的“选项”按钮。选中“排序选项”对话框“方法”下的“笔画排序”，再根据数据排列方向选择“按行排序”或“按列排序”，“确定”后回到“排序”对话框（图2）。如果您的数据带有标题行（如图1中的“单位”之类），则应选中“有标题行”（反之不选），然后打开“主要关键字”下拉列表，选择其中的“单位”，选中排序方式（“升序”或“降序”）后“确定”，表中的所有数据就会据此重新排列。此法稍加变通即可用于“第一名”、“第二名”等文本排序，请读者自行摸索。三、自定义排序如果您要求Excel按照“金工车间”、“铸造车间”和“维修车间”的特定顺序重排工作表数据，前面介绍的几种方法就无能为力了。这类问题可以用定义排序规则的方法解决:首先单击Excel“工具”菜单下的“选项”命令，打开“选项”对话框中的“自定义序列”选项卡（图3）。选中左边“自定义序列”下的“新序列”，光标就会在右边的“输入序列”框内闪动，您就可以输入“金工车间”、“铸造车间”等自定义序列了，输入的每个序列之间要用英文逗号分隔，或者每输入一个序列就敲回车。如果序列已经存在于工作表中，可以选中序列所在的单元格区域单击“导入”，这些序列就会被自动加入“输入序列”框。无论采用以上哪种方法，单击“添加”按钮即可将序列放入“自定义序列”中备用（图3）。使用排序规则排序的具体方法与笔划排序很相似，只是您要打开“排序选项”对话框中的“自定义排序次序”下拉列表，选中前面定义的排序规则，其他选项保持不动。回到“排序”对话框后根据需要选择“升序”或“降序”，“确定”后即可完成数据的自定义排序。需要说明的是:显示在“自定义序列”选项卡中的序列（如一、二、三等），均可按以上方法参与排序，请读者注意Excel提供的自定义序列类型。谈谈Excel输入的技巧在Excel工作表的单元格中，可以使用两种最基本的数据格式：常数和公式。常数是指文字、数字、日期和时间等数据，还可以包括逻辑值和错误值，每种数据都有它特定的格式和输入方法，为了使用户对输入数据有一个明确的认识，有必要来介绍一下在Excel中输入各种类型数据的方法和技巧。一、输入文本Excel单元格中的文本包括任何中西文文字或字母以及数字、空格和非数字字符的组合，每个单元格中最多可容纳32000个字符数。虽然在Excel中输入文本和在其它应用程序中没有什么本质区别，但是还是有一些差异，比如我们在Word、PowerPoint的表格中，当在单元格中输入文本后，按回车键表示一个段落的结束，光标会自动移到本单元格中下一段落的开头，在Excel的单元格中输入文本时，按一下回车键却表示结束当前单元格的输入，光标会自动移到当前单元格的下一个单元格，出现这种情况时，如果你是想在单元格中分行，则必须在单元格中输入硬回车，即按住Alt键的同时按回车键。二、输入分数几乎在所有的文档中，分数格式通常用一道斜杠来分界分子与分母，其格式为“分子/分母”，在Excel中日期的输入方法也是用斜杠来区分年月日的，比如在单元格中输入“1/2”，按回车键则显示“1月2日”，为了避免将输入的分数与日期混淆，我们在单元格中输入分数时，要在分数前输入“0”（零）以示区别，并且在“0”和分子之间要有一个空格隔开，比如我们在输入1/2时，则应该输入“01/2”。如果在单元格中输入“81/2”，则在单元格中显示“81/2”，而在编辑栏中显示“三、输入负数在单元格中输入负数时，可在负数前输入“-”作标识，也可将数字置在（）括号内来标识，比如在单元格中输入“（88）”，按一下回车键，则会自动显示为“-88”。四、输入小数在输入小数时，用户可以向平常一样使用小数点，还可以利用逗号分隔千位、百万位等，当输入带有逗号的数字时，在编辑栏并不显示出来，而只在单元格中显示。当你需要输入大量带有固定小数位的数字或带有固定位数的以“0”字符串结尾的数字时，可以采用下面的方法：选择“工具”、“选项”命令，打开“选项”对话框，单击“编辑”标签，选中“自动设置小数点”复选框，并在“位数”微调框中输入或选择要显示在小数点右面的位数，如果要在输入比较大的数字后自动添零，可指定一个负数值作为要添加的零的个数，比如要在单元格中输入“88”后自动添加3个零，变成“88000”，就在“位数”微调框中输入“-3”，相反，如果要在输入“88”后自动添加3位小数，变成“0.088”，则要在“位数”微调框中输入“3”。另外，在完成输入带有小数位或结尾零字符串的数字后，应清除对“自动设置小数点”符选框的选定，以免影响后边的输入；如果只是要暂时取消在“自动设置小数点”中设置的选项，可以在输入数据时自带小数点。五、输入货币值Excel几乎支持所有的货币值，如人民币（￥）、英镑（￡）等。欧元出台以后，Excel2000完全支持显示、输入和打印欧元货币符号。用户可以很方便地在单元格中输入各种货币值，Excel会自动套用货币格式，在单元格中显示出来，如果用要输入人民币符号，可以按住Alt键，然后再数字小键盘上按“0165”即可。六、输入日期Excel是将日