基于React的私人通讯录的设计与开发

毕业设计说明书基于React的私人通讯录的设计与开发2020年5月15日基于React的私人通讯录的设计与开发摘要：本文介绍了私人通讯录系统的整个开发过程，使用了React框架完成前台页面，nodejs完成后台逻辑处理，antdesign作为ui框架，并按照现有的通讯录系统的现状从而设计出来的私人通讯录系统，这个系统是基于现在社会人们通讯方式的便捷，犹如蜘蛛网一般的网络，所以，导致现在社会的人的联系人数量日益增加，所以，像以前呢样用纸笔记录联系人，已经不可能行的通了，基于web端的发展，就有了这个通讯系统，这个通讯系统一但完成，就可以用于个人用户管理专属于自己的通讯录。本文主要阐述的了整个系统的完成过程，模拟了一个个人用户在本系统的一系列操作。这个系统对个人用户所拥有的功能进行了划分。对每个模块的具体要求进行了完善。使用这些模块通过与数据库的交互，完成了通讯录管理，日程管理，相册管理等模块的交互。在下文中有说明通讯录的选题背景，国内外现状等问题，也同样介绍了这个系统所需要完成的功能，以及对这个系统的整个开发到完成的过程进行了具体的规划。私人通讯录系统以React为主要的网页开发技术。利用mvvm模式作为开发思想，出于对系统的维护性，耦合性和安全性的考量，后台采用非阻塞I/O模型+事件驱动的Nodejs，存储数据使用了MYSQL这个免费开源的数据库，为了能更好的操作数据库，我选用了Navicat来对数据库进行可视化操作。关键字:React；nodejs；antdesign；MYSQLDesignanddevelopmentofprivateaddressbookbasedonReactAbstract：Thisarticleintroducestheentiredevelopmentprocessoftheprivateaddressbooksystem,usingtheReactframeworktocompletethefrontpage,nodejstocompletethebackgroundlogicprocessing,antdesignastheuiframework,andtheprivateaddressbooksystemdesignedaccordingtothecurrentstatusoftheexistingaddressbooksystemThissystemisbasedontheconvenientcommunicationmethodsofpeopleinthecurrentsociety,whichislikeaspiderweb.Therefore,thenumberofpeopleinthesocietyisincreasingnow.Itworks,basedonthedevelopmentoftheweb,thereisthiscommunicationsystem.Oncethiscommunicationsystemiscompleted,itcanbeusedbyindividualuserstomanagetheirownaddressbook.Thisarticlemainlyexplainsthecompletionprocessoftheentiresystem,andsimulatesaseriesofoperationsofanindividualuserinthesystem.Thissystemdividesthefunctionsthatindividualusershave.Thespecificrequirementsofeachmodulehavebeenimproved.Usingthesemodules,throughtheinteractionwiththedatabase,theinteractionofmodulessuchasaddressbookmanagement,schedulemanagement,andalbummanagementiscompleted.Inthefollowing,thebackgroundofthetopicselectionoftheaddressbook,thecurrentsituationathomeandabroad,andotherissuesarealsointroduced.Thefunctionsthatthissystemneedstocompletearealsointroduced,aswellasthespecificplanningoftheentiredevelopmenttocompletionofthissystem.TheprivateaddressbooksystemusesReactasthemainwebdevelopmenttechnology.Usingthemvvmmodeasadevelopmentidea,forthemaintenance,couplingandsecurityofthesystem,thebackgroundusesanon-blockingI/Omodel+event-drivenNodejs,andthestoreddatausesMYSQL,afreeandopensourcedatabase.Tobetteroperatethedatabase,IchoseNavicattovisualizethedatabase.Keywords:React；nodejs；antdesign；MYSQL绪论选题背景根据最新的统计，中国的网民数量已经达到中国的一多半人口。随着各种电子产品的更新换代，以及互联网技术的飞速发展，它们打破了地理和时间限制，改变了人们过去的工作和生活方式。过去，我们是如何记录联系人信息的？有很多方法，例如，有一种在笔记本中记录联系方式的方法，一种在手机上存储电话号码的方式以及在电脑文本文档中记录的方法。等等。对于在笔记本上记录联系信息的方式，第一个是可能在某处将其忘记，不方便携带，很容易丢失，第二个是特别难找，例如数以百计的联系人信息，查找某一条相关信息时需要花费大量时间，同时，如果有某一个联系人更换了通讯信息，我们就需要在众多信息中找到对应的呢一条，在通过涂改来修改信息。虽然也可以在手机上存电话号码，但是现在手机小巧，很有可能就会将手机遗失，一但遗失，就会损失所有的联系人信息。对于记录到电脑文本文档或打印的地址簿，它也不是很方便扩展。查找起来非常不方便。基于互联网的飞速发展，并且对目前现有的通讯录解决方案进行深入的了解，初步决定了整个项目的需求，包括本系统包含哪些基本功能，做哪些扩展，以及如何实现，为了完成项目需求了解了当前主流的前端框架React，以及搭建后台的nodejs，并且对有关知识和技术进行了深入的学习。开发到后期，进行测试环节的时候，解决出现的问题，对页面进行优化，打开页面的速度等，有了更深刻的认识，对于自己以后的工作和学习将是一笔不小的财富。通讯录在现代社会是每个人必不可少的东西。每个人都必不可少的会有许多联系人，在以前，每个人都曾经手动记录所有地址簿信息。但是现代社会，通讯信息多种多样，直接来改动这些信息极易出错，并且很容易造成信息混乱或丢失。在各种移动电话中，尽管商务通信中的电话簿便于携带，但其缺点是“记录量少，浏览不便，记录数据信息不完整”。有些人使用Excel或Word来编译通讯簿。尽管数据相对全面并且信息足够，但是查找非常麻烦，并且维护起来很麻烦。所以，我想到了使用数据库来对数据进行统一管理。1.2国内外研究现状最初的个人通讯录管理是手动的，工作量大且耗时长。且信息极有可能遗漏，或者将信息记录错，所以我决定使用数据库来动态保存想要保存的信息，这样，不仅可以提高个人工作效率，还可以节省个人查询信息的时间。这个通讯录系统是每个个人用户管理通讯录必不可少的系统，这个系统可以快速查找修改增加删除想变动的信息，极大地方便了用户合理地管理通讯录。1.3系统说明这个系统是在React的基础上进行开发和完善的。用户从开始可以进行注册，登录，创建，修改，删除，查询通讯信息。创建，修改，删除，查询分组。创建，修改日常行程，删除日常行程，查询日常行程。相册功能，新增图片，查看图片，下载图片，删除图片。修改密码。退出登录功能。为了保护个人的隐私，本系统不设管理员。2关键技术与开发环境本章主要为软件的开发提供技术支持。2.1前后端分离在以前的程序项目开发中，浏览器是前端和后端的分界线，前端人员只负责把页面写好，然后把页面交给后端人员，由后端人员来进行代码合并，部署，发布，等重要任务，并且承担项目的逻辑处理，前端人员在日常工作中也只是负责辅助后端人员来完成开发任务，但是随着众多前端技术的兴起，前端技术栈也越来越多，3D动画，微信分析等功能只依靠后端已经无法完成，前端工程师在开发中所占的比重也越来越大，也不再是只是给后端工程师作为辅助，然后随着npm兴起，前端也有了可以统一管理依赖以及打包的工具，自此，前端和后端分离的需求已收到越来越多的关注。前后端分离作为Web应用程序的新体系结构模型，前端和后端的分离也与传统的Web开发不一样。在前后端交互上，以本系统为例，本系统是一个单页面应用程序，Ajax，是一个前端调用后端接口的程序，本系统使用了它的升级版axios。我在写好页面样式之后，可以通过浏览器访问到静态页面，然后在进入页面时通过axios请求调用到nodejs中的接口，nodejs在通过sql语句去数据库查找所需要的数据，在通过axios的HTTP请求把所需要的数据返回给前端。前端拿到数据在根据需要显示到对应的位置，在平常的前后端开发中，前端和后端只需要写好各自的逻辑，然后定义和各自axios要请求和接收的数据格式，一般数据格式通常是取用JSON格式，以及接口文档，这样，前端人员和后端人员的分工细化了，但是，这样的话就更需要前端人员和后端人员定义好接口规范，一个好的规范可以大大提升开发的效率后端人员可以专注于逻辑处理，前端人员也可以专注于页面的美化以及页面打开效率的提升。如果前端在后端接口出来之前就完成了页面，也可以通过Mock来造假数据以提升开发效率。2.2HTML5HTML5是由结构，样式，行为组成，被用于在页面上呈现样式，HTML5是HTML标准的第五个版本。它的不断更新，使Web标准一直能支持最新的技术发展，同时满足Internet应用程序的快速发展。它还可以满足开发人员的开发需求，还可以帮助浏览器提供更多本机应用程序服务。2.2.1WebSocketWebSocket是一种用于服务器和浏览器之间互相通讯的技术，之所以它会被广泛使用，是因为它可以使客户端和服务器端之间建立长连接，并且只需要一次，就可以建立持久的连接，可以减少web间的通信内存损耗。在没有WebSocket这项技术的时候，大多数开发人员都会使用轮询这种方法来使得Web每隔一段时间将请求发送到服务器一次。这样的弊端也非常大，如果连续不断的向服务器发送请求，就会非常浪费带宽，浪费网络资源，所以，后面就出现了WebSocket。现如今，基本上所有的主流浏览器都支持WebSocket协议，这也为前端发展提供了良好的环境，可以使更多，更大的应用程序能够快速，稳定的运行在浏览器上。2.3前端工程化这些年，随着互联网的发展越来越快，Web前端作为一项新兴技术，发展的也同样飞快。因为浏览器的快速更新换代，为前端技术提供了软件基础，以及更稳定的平台，可以让前端展示更绚丽的界面，以及4G，5G技术的发展，为前端技术提供了硬件基础，不会像以前一样进入一个页面也需要十几秒甚至几十秒，以及移动端的发展，各种尺寸的手机，以及手机性能的提高，都为前端的发展提供了基础，前端因为框架的发展，现如今也可以处理复杂的逻辑。随着前端工程化的发展，以及nodejs的发展，前端可以使用nodejs快速构建开发平台，为前端发展提供了便利，以及模块化的出现，可以使多人同时开发同一个系统，同时，node还是目前最大的第三方库管理平台，可以统一管理所有的依赖性，这更加为前端工程化提供了基础。在现在的程序开发阶段，因为前端后端已经分离，所以要分开管理各自的依赖，在前端部分，所需要管理打包的资源有HTML，CSS，JS，这三项也就是完成一个前端页面所需要的最基本的元素，在开发阶段，这三项资源由模块分开进行管理，在生产阶段，一般会使用打包工具来对代码进行编译，降低所使用的版本，这样做的原因是要保证生产环境所运行的代码，能够在更多的浏览器运行，比如说，本系统在css部分使用了新版本SASS，这个是对css的优化版本，还有ES6，在项目中使用了ES6中类，还有箭头函数的概念，这部分虽然在本地能够运行，但是不能保证在所有的浏览器都能够运行，所以这就需要使用打包工具来对代码进行编译，降低代码的版本，将SASS降低成css，将ES6降低成ES5，以保证代码能够在低版本浏览器运行。还会将每个页面单独的css样式合并成一个公共的css样式，将每个页面单独的js代码，进行压缩，合并成一个js文件，这样可以减少文件的体积，当文件体积减小后，就会相应的增加业务代码在浏览器中运行的速度，当运行速度提升，也会给用户带来更好的体验。随着前端技术的发展，前端项目的规模也越来越大，逻辑也越来越复杂，这就不在是只依靠一两个人就能完成开发，而是需要许多人共同来开发一个项目，这就带来了一个问题，如何才能在多人同时开发的情况下不会造成代码冲突，这就是模块化开发，一个模块可以将一组完整的HTML，CSS，JS代码进行合并，然后将这部分代码，随意引入到所需要的地方，比如说，本系统中所使用的ui框架，antd就是这个概念，当多人开发时，每个人可以将自己写的代码放到一个类中，然后可以在页面中对应的位置将写好的页面引入，这也就是组件化思想，本系统是基于React开发的，同样也使用了组件化开发的思想，每一个页面都是由一到多个组件拼凑起来，这样做的好处是可以将代码进行复用，减少了项目体积，提高代码运行速度，增加用户体验。2.3.1NPMNPM的全称是NodePackageManager，它是Nodejs默认使用的用来进行模块化管理的工具，同样，它也是现在最大的第三方库的管理运营平台，有了这个平台后，可以为前端解决一大部分问题，比如说，每个人安装的依赖不一样从而导致的依赖混乱，所以就可以使用NPM来管理所需要的包，并且在Package.json文件中记录所安装的文件的依赖，还有依赖的版本号，这样可以避免依赖混乱，管理困难等问题。开发人员在开发过程中，使用NPM安装依赖时，还可以选择是在开发环境安装依赖，还是在生产环境安装依赖，这样同样可以减少不必要的安装，从而精简项目代码，当修改依赖项的时候，Package.json里的记录也将同样的更新。在开发私人通讯录系统时，本系统的前端部分是使用NPM进行依赖的管理。使用了Package.json来记录开发环境和生产环境所需要的依赖项，当别人下载这个项目时，也可以根据Package.json里记录的依赖进行安装。2.3.2ECMAScript6ECMAScript6缩写为ES6，是在2015年由ES5更新成ES6，在这次更新中，ES6新增了Let，const，这两个关键词，这两个关键词，解决了var的变量声明提升的问题，还有箭头函数，箭头函数在本系统中被多次使用，解决了this指向的问题，不在需要使用bind（）方法来改变this指向。本系统还使用了class关键字，来将一个个页面组装成一个整体的程序，然后通过import引入所需要的类来进行拼接，是然后将写好的类使用export或者extends来导出。图图2.1 ES6模块化代码示例ES6引入导出代码如图2.1所示，使用import导入在其他地方或框架内已经写好的类，然后在使用ES6的新关键字class来声明这个导入的类，然后在这个页面写入自己需要完成的代码，当写完之后在使用export把这个写好的组件导出，然后在需要使用它的地方进行导入，这样的话，就把一个功能丰富的页面拆分成许许多多的组件，可以供多人同时开发，而不会造成冲突，这样，也极大的促进了前端模块化开发和规范化来发。在本次开发系统的过程中，使用了ES6的新技术箭头函数，import，export进行导入导出，虽然方便了本次的开发，但是随之也带来一个问题，呢就是低版本的浏览器可能无法识别这样的新代码，这样，也就催生了一项新技术，Wabpack，它可以用来编译打包，而在打包的过程中，使用了babel来编译高版本的代码，把高版本的ES6代码转义成ES5代码，为浏览器提供更高的兼容性。2.3.3Babelbabel我在之前有提到过，主要是用来把高版本的，可能无法被浏览器识别的代码，转化成能被浏览器识别的低版本代码，babel可以单独使用，将ES6的代码转化成ES5的代码，还可以使用它提供的一个方法babeloader，这个方法在Webpack打包时会自动使用，作用同样也是用来将高版本代码转换成低版本代码。在本系统的开发中，我也使用了babeloader，来对系统中出现的ES6的新特性的代码进行了编译。2.3.4WabpackWebpack被用来给前端项目进行打包，打包，也就是要将在开发环境所编写的代码，进行一系列处理，包括把高版本代码降低成低版本代码，将项目中所用到的类，依赖，样式代码，进行合并，比如在本系统中，将ES6的代码转换成ES5的代码，将样式的SASS代码转换成css代码，将项目用到的ui框架中，所用到的样式，抽离出来，在与本地所写的SASS代码抽离出来，然后将多个页面的SASS合并成一个css文件，将多个文件的js代码合并成一个js文件，然后将代码进行丑化，压缩，丑化是为了让别人不会在浏览器直接看到你的源代码，保证你代码的安全，压缩是为了将文件体积减小，从而提升浏览器编译文件的速度，编译速度提高，就会提高页面打开的速度。Webpack是一项开源的技术，也随着技术的发展在不断更新，到现在，它已经更新到了4版本，同时，也会随着技术的更新换代，而同步更新。在本系统的开发过程中，我使用了React的脚手架自动生成了项目目录以及基本结构，在生成的Package.json文件中，有这个项目的基本信息，在这里面有一项是dependencies,这项里面记录了这个系统生产环境所需要的依赖,devDependencies,这项里面记录了这个系统开发环境所需要的依赖。它还实现了项目对浏览器的热更新，就是说在本地开发的时候，只需要变更相应代码，保存，就可在浏览器自动进行更新，而无需刷新浏览器页面。打包的时候，它也是读取这个文件，然后根据这个文件所记录的信息来打包依赖项。2.4前端框架这一节主要记录在本系统中所用到的前端框架。2.4.1ReactReact是Facebook公司的一个项目，这个项目本来是Facebook公司的内部项目，在这个项目写完之后，却意外的发现，这个框架特别好用，慢慢的，这个项目就有越来越多的人使用了起来，慢慢的，这个项目就进行了开源，然后随着这个项目的持续优化，以及更多的人使用它，现在他以成为三大主流框架之一。React通过组件来构建界面。可以把组件看成一个个简单的函数，它在调用这个函数的时候会传递这个函数所需要的参数，然后在获得这个参数的时候把这个参数输出。还可以根据这个函数在这个系统中出现的次数来进行程序的复用，这样可以减少代码的量，并且可以导出一个个小模块在导入合成一个大的模块。可以将需要导出的模块使用export进行导出，在通过import将需要到导入的内容导入到指定界面。在日常开发中，如果有必要的话可以在多个页面中重复的使用单个组件。每一个组件其实还可以由许许多多的小组件组成。在新的框架中，出现的一个思想，也是跟以往完全不同的思想，这个就是使用数据来驱动视图，而不是像以往一样操作DOM元素节点来改变浏览器页面，数据驱动视图在本系统中也有体现。比如说，用户在输入完联系人信息之后，点击保存，然后将数据存到数据库，然后在页面上显示，如果在以前使用jquery的话，可能就需要操作DOM节点，来将页面显示的呢个列表完全替换，这样的话会对浏览器造成很大的开销，操作也不是很方便，但是在使用了React之后，就不在需要操作DOM了，可以通过数据的改变来驱动视图的变化，视图改变，也就是说页面会自动改变了，这样可以节省浏览器性能。2.4.2AntDesignAntDesign是在React框架基础上设计的ui框架，他有许许多多的样式，有了这些样式，可以加快前端的项目构建，在本系统中，我同样使用了AntDesign，使用了定制好的样式组件，快速的完成了系统页面样式的优化。2.5nodejs技术简介Nodejs是运行在基于js的平台服务器。实际上，他是对谷歌浏览器的V8引擎进行的重复封装。他可以实现类似服务器的环境，并可以使用它来实现可伸缩的应用程序。Nodejs高效，快速且易于使用。它非常适合构建数据密集型实时应用程序，并且主要用于在高度并发的环境中处理函数。Nodejs提供了一种技术，是为了帮助js更好的运行在浏览器环境中的一种技术，他提供了一种环境，这种环境跟浏览器的环境类似，它还提供了一种跟接口类似的功能。同时，他还是一个跟以往的不同的操作环境。他可以用来打通数据库跟前台页面的界限，在本系统中，通过sql语句来调用到数据库中的数据，在通过前端调用接口，node接收到前端传来的接口，在调用sql语句去数据库查找相应的数据。尽管Node在服务器端运行时Javascript并非唯一的，但这是它一个强大的特性。因为各版本浏览器的不同，各版本浏览器有自己独特的版本，因此，我们必须去对应浏览器的环境然后在选择所需要的语言，随着技术的发展，各种各样的浏览器以及服务器的更新。如果想要能兼容大多数服务器和浏览器的环境的话就只能依靠Javascript实现。虽然不是只有Node能把Javascript运行在服务器，但是Node却很好的支持了各个浏览器，因此，Node发展也越来越快。以下为nodejs工作流程图，如图2.2所示:开始侦听端口接受网络请求发送给I/O观察者形成时间结束开始进入循环执行I/O观察者中时间的回调函数退出循环回调?开始侦听端口接受网络请求发送给I/O观察者形成时间结束开始进入循环执行I/O观察者中时间的回调函数退出循环回调?开始绑定请求事件执行回调函数结束图2.2nodejs工作流程图2.6Express框架Express是我们常用的，比较轻量级而且灵活性比较好的一款NodeJS

Web应用程序的编程框架框架。对于这个框架中的中间插件的处理方法，这个可用于组合，安排等请求过程中的许多方法。Express框架它提供了一种极其便捷化的管理模式，并且他是模块儿化的，它在构建Web应用程序的过程中极大的降低了我们的开发难度。路由我们把从客户机到服务器的一次请求成为路由。他是客户机基于HTTP请求路径，并且用于在Web服务器上匹配特定路由的一个过程，并且把最后的结果反馈给客户端。路由的这种请求方法主要是由路由句柄和路径组合而成。这种方法会指定类似于get和post请求方法。从客户端一次请求开始到服务器，然后经过各种转发，这些都需要路由来提供相应的功能。对于这个过程的一个或者是一些处理方法就是我们常说的路由句柄。他主主要负责的是，通过调用自身拥有的方法来及时的响应客户端。中间件Express框架有着许多的数据处理机制，其中，中间件就是Express框架的核心功能。中间件它可以在，客户端和服务器Request请求和response响应中间，访问请求对象，并且响应给服务器对象的中间件。他可以负责执行我们写的任何代码，并且可以对请求和响应的对象进行修改，必要的时候还可以终止请求响应的阶段。另外，Express框架也提供了不同级别的中间件。例如我们常用的应用程序集合路由器的中间件,并且还提供了错误处理中间件,它可以自定义错误处理的过程。有了中间件，我们可以极大地简化开发过程。3）模板引擎模板引擎是一种处理问题的方法，他可以将与用户进行交互的界面和后台运行过程中的业务数据进行分离。他可以把服务器的数据稍加组合，成为我们熟悉的HTML页面，然后把它反馈给客户端进行显示，这样用户就能直接的进行操作，极大地简化了操作。4）错误处理Express框架可以根据实际开发过程中的需要，指定处理错误的方法，也就是咱们的自定义错误处理方法。对于自定义的错误处理方法，也是可以在程序运行的过程中，对相应的错误进行处理。当然，Express同样的也具有错误句柄的功能,它可以捕获任何在程序运行过程中发生的错误,并且在控制台显示及错误信息，以及栈和堆的一些相关跟踪信息。2.7系统数据的介绍2.7.1数据库的概念数据库就像一个存储大量信息的仓库，并且长时间使用计算机作为介质将大量数据存储在集合中。该数据库具有集成，数量大，可共享性和持久性的特点。数据只是某种事物的记录符号，也就是说，它可以是简单的数字或字母，也可以是图片或声音，并且可以机器语言的形式存储在计算机中。数据库有以下特点：1）数据集成化：数据库将数据收集在一起，并且通过文件的内部约束机制，使得原始混合的数据变得井井有条，从而防止了数据重复或数据混乱。便于将来维护数据库；2）数据数量庞大性：作为众多数据的载体，数据库需要存在大量的数据，在同一时间内如果同时调用将会对存储器造成不小的负荷，要想解决这些问题必须利用移动硬盘，固态硬盘等数据存储设备来进行分担；3）数据分享性强：其冗余度非常低，对数据库进行增加，修改，删除，的操作时会非常方便，也可以用通一个数据库存储不同用户的信息；在私人通讯录系统中，数据库起到了非常大的作用，它存储了所有用户的信息，也能及时修改前台页面和后台接口交互时所产生的数据变化，将接收到的数据进行分别的处理，存放的行为。而数据库将这些收到的信息利用其集成化的特性将数据分门别类。而实现这些功能nodejs技术就成为了这个项目的关键，其作为应用编程的接口，将页面与数据库进行连接。Nodejs的高并发等特性也可以更好的完成数据处理。2.7.2MySQL数据库简介MySQL源自瑞典公司MySQLAB，经过几次转手，MySQL成为Oracle的一员。尽管与大型数据库相比，MySQL有许多无法与大型数据库所媲美的功能，但是这并不能让它退出历史舞台，但是它以实用性，低成本和开源性成功占领了个人和中小企业市场。它易于学习，易于维护，执行效率高并且与Linux和Windows等主流平台兼容，从而使其成为程序员必须学习和理解的主流数据库。MySQL之所以能够拥有今天的成就，还得益于它的使用无需支付任何费用，免费的经营手段使用户获得了最大的收益。2.8系统运行环境配置私人通讯录系统为网页版,所以只要基本满足上网需求就可以运行本系统。3总体设计3.1功能分析经过对时下通讯录系统网站的调查，对该系统的功能进行的大体的划分。确定了整个系统的基本模块，所包括的模块共有对通讯录联系人的新增，修改，删除，查询操作，对分组信息的新增，删除操作，对日常行程的新增，修改，删除，查询操作，还包括是否需要提醒，以及对相册照片的新增，相册照片的删除，相册照片的下载，修改密码，退出登录的功能。下图是本通讯录系统的技术路线图，如图3.1所示：业务代码业务代码mysql数据库后端部分通讯录系统html,css,antd业务逻辑页面前端部分React框架图3.1私人通讯录系统技术路线示意图3.2系统功能分析下图为私人通讯录系统的功能框架图，如图3.2所示。进入页面注册修改密码相册管理分组管理日程管理进入页面注册修改密码相册管理分组管理日程管理通讯管理首页登录图3.2私人通讯录系统功能框架图3.3数据流图下图是进入注册界面时进行注册的数据流图，如图3.3所示：注册结果注册结果用户新用户1注册2进入系统功能选择用户用户图图3.3注册时的数据流图3.4系统结构分析3.4.1逻辑结构本系统是mvvm模式，将其以一个网页的形式展示在网络平台中，访问者可以通过网页进行登录,达到创建修改联系人等一系列操作。下图是网站进行工作时的情况示意图，如图3.4所示：系统服务器系统服务器后台数据库后台数据库Internet用户Internet用户私人通讯录Internet私人通讯录Internet图3.4网站工作情况示意图下图是网站的物理结构示意图，如图3.5所示：浏览器浏览器浏览器WEB服务器数据服务器浏览器图3.5网站物理结构示意图4数据库设计4.1数据表的介绍该系统地数据库采用MYSQL数据库，其作用是将网站中得到的数据进行存储，我将系统数据库地名字设为addressBook，其中包括5张表。以下为数据库中的数据表：communication（联系人表）结构如表4.1所示。表4.1communication的结构字段名数据类型是否主键描述idint是idnamevarchar(255)否联系人名字phoneNumbervarchar(255)否联系人电话birthdayvarchar(255)否联系人生日subgroupvarchar(255)否所属分组notevarchar(255)否给联系人的备注policevarchar(255)否是否启用生日报警功能usernamevarchar(255)否用户名groups（分组表）结构如表4.2所示。表4.2groups的结构字段名数据类型是否主键描述idint是idgroupingvarchar(255)否分组名称usernamevarchar(255)否用户名login（用户登录表）结构如表4.3所示。表4.3login的结构字段名数据类型是否主键描述idint是idusernamevarchar(255)否登录用户名passwordvarchar(255)否密码phonevarchar(255)否手机号schedule（日程管理信息表）结构如表4.4所示。表4.4schedule的结构字段名数据类型是否主键描述idint是idtitledata(0)否日程需要完成的日期notevarchar(255)否日程的备注remindvarchar(255)否日程是否需要提醒usernamevarchar(255)否用户名album（购物车表）结构如表4.5所示。表4.5album的结构字段名数据类型是否主键描述uidint是idurlvarchar(255)否图片路径namevarchar(255)否图片的名字statusvarchar(255)否图片的状态（是否可以下载）usernamevarchar(255)否用户名4.2用户模块设计概述4.2.1系统原理本系统是利用mvvm架构作为开发的基础框架。私人通讯录系统的主要体系结构包括：1）数据服务器；2）WEB服务器；3）后台管理平台；4）客户端。影响应用系统设计的因素包括：1）业务处理方式；2）数据处理量，存储量；3）应用功能设计；4）服务器设计；5）存储设计；6）安全设计。4.2.2用户模块的程序流程图用户模块的设计，私人通讯录系统的程序流程图设计如图4.1所示：是否新用户是否新用户登录注册进入系统分组管理日程管理相册管理联系人管理图4.1用户模块流程图5详细设计5.1前台页面部分5.1.1登录以下是私人通讯录系统的登录页面，如图5.1所示：图5.1私人通讯录系统登录页面进入登录页后,用户名【必填】：可输入不超过20位任意字符（中英文、数字、特殊字符），密码【必填】：可输入不超过20位任意字符的英文、数字、特殊字符，输入后点击登录按钮，如果输入的账号密码正确，即可登录成功，如果输入的账号密码不规范：用户名为空，点击登录提示【请输入用户名！】，用户名不存在，点击登录提示【用户名不存在！】，密码为空，点击登录提示【请输入密码！】，密码与登录名不匹配，点击登录提示【密码错误，请重新输入】，如用户名，密码输入正确，则登录成功，跳转到首页，如果没有账号可点击页面上的没有账号？去注册>，跳转注册界面。5.1.2注册以下是私人通讯录系统的登录页面，如图5.2所示：图5.2私人通讯录系统注册页面当用户没有账号时可以进行注册操作，可以进入到注册界面进行注册操作，用户名【必填】：可输入不超过20位任意字符（中英文、数字、特殊字符），如果输入不规范：用户名为空，点击注册提示【请输入用户名！】，密码【必填】：可输入不超过20位任意字符的英文、数字、特殊字符，如果输入不规范：密码为空，点击注册提示【请输入您的密码！】，确认密码【必填】：重复输入刚才输入的密码，如果第二次输入的密码与第一次输入的不一致，会出现【两次输入的密码不一致！】，如果输入不规范：确认密码为空，点击注册提示【请确认您的密码！】，手机号【必填】：只能输入符合规则的11位号码，如果输入不规范：手机号为空，点击注册提示【请输入正确的手机号码!】，输入后点击注册，进行注册操作，如果用户名与之前已注册过的用户名重复，会出现【用户已存在！】，如用户名没有重复，会出现【注册成功！】，并且跳转到登录页面，如果已有账号，可点击页面上的已有账号？去登录>，跳转到登录界面。5.1.3首页以下是私人通讯录系统的首页页面，如图5.3所示：图5.3私人通讯录系统首页页面首页是本系统的主页面，进入其它功能都是从主页面左侧的菜单栏进入。因为本系统使用组件化开发，所以其它模块是分开组件从其它页面引入。首页左下角可以点击收缩菜单栏，左侧是通讯管理，日程管理，分组管理，相册管理，修改密码功能的入口，右上方有退出本系统的按钮。5.1.4通讯管理以下是私人通讯录系统的通讯管理页面，如图5.4所示：图5.4私人通讯录系统通讯管理页面进入首页后会自动进入通讯管理页面，页面上方是搜索功能，输入不同字段可对联系人进行搜索，姓名：可输入不超过20位任意字符（中英文、数字、特殊字符），搜索出全模糊查询结果，手机号：可输入不超过11位数字，搜索出全模糊查询结果。生日日期：可输入不超过4位字符，搜索出全模糊查询结果，所属分组：可输入不超过20位任意字符（中英文、数字、特殊字符），搜索出全模糊查询结果，备注：可输入不超过200位任意字符（中英文、数字、特殊字符），搜索出全模糊查询结果。输入完毕后点击右侧的查询按钮，就会查询出所需要的结果。下方是一个表格，展示联系人的信息，分别是联系人姓名，联系人手机号，联系人生日日期，联系人所属分组，对此联系人的备注，对此联系人执行的操作。对联系人进行的操作包括对联系人的修改和删除，点击删除的时候弹出冒泡框，提示【是否要删除此联系人?】，选择否则关闭弹框，选择是则进行删除操作，如删除成功则提示【删除联系人成功】，如删除失败则提示【删除联系人失败】，表格下面是一个分页，可以让页面一次只展示10条数据，避免数据太多，加载缓慢的问题。表格上方有按钮，新增联系人，点击新增联系人弹出模态框，可以对联系人进行新增操作，以下是私人通讯录系统的添加联系人页面，如图5.5所示：图5.5私人通讯录系统添加联系人页面添加联系人可输入如下信息进行保存，姓名：可输入不超过20位任意字符（中英文、数字、特殊字符），手机号：可输入11位符合要求的手机号码，生日日期：可输入四位的月加日的格式（例如：01.01），所属分组：下拉列表格式，可选择在分组管理中已创建的分组，备注：可输入不超过200位任意字符（中英文、数字、特殊字符），是否启用生日报警功能：可以选择是否需要当联系人生日临近的时候启用提醒功能，输入完毕的时候点击确认按钮，如添加成功则提示【添加联系人成功！】，如添加失败则提示【添加联系人失败！】。为了减少代码的冗余，我把新建用户与修改用户的弹窗进行了复用，所以修改用户的页面与新建用户的页面相同，当进入修改页面时，输入完毕点击确认按钮，如修改成功则提示【修改联系人成功！】，如修改失败则提示【修改联系人失败！】。5.1.5日程管理以下是私人通讯录系统的通讯管理页面，如图5.6所示：图5.6私人通讯录系统日程管理页面进入日程管理页面，页面上方是搜索功能，输入不同字段可对已有日程进行搜索，日期范围：可选择一个日期范围，搜索出日程日期在这个范围之内的结果，关键字：可输入不超过200位任意字符（中英文、数字、特殊字符），搜索出备注中符合要求的全模糊查询结果。输入完毕后点击右侧的查询按钮，就会查询出所需要的结果。下方是一个列表，展示日程记录的日期，对此日程的备注，右侧是对此日程执行的操作。对日程进行的操作包括对日程的修改和删除，点击删除的时候弹出冒泡框，提示【是否要删除此日程?】，选择否则关闭弹框，选择是则进行删除操作，如删除成功则提示【删除日程成功】，如删除失败则提示【删除日程失败】，表格下面是一个分页，可以让页面一次只展示10条数据，避免数据太多，加载缓慢的问题。表格上方有按钮，添加日程，点击添加日程弹出模态框，可以对日程进行新增操作，以下是私人通讯录系统的添加日程页面，如图5.7所示：图5.7私人通讯录系统新增日程页面添加日程可输入如下信息进行保存，日程需要提醒的日期：可选择日期，备注：可输入不超过200位任意字符（中英文、数字、特殊字符），是否启用生日报警功能：可以选择是否需要当联系人生日临近的时候启用提醒功能，输入完毕的时候点击确认按钮，如添加成功则提示【添加日程成功！】，如添加失败则提示【添加日程失败！】。为了减少代码的冗余，我把新建用户与修改用户的弹窗进行了复用，所以修改用户的页面与新建用户的页面相同，当进入修改页面时，输入完毕点击确认按钮，如修改成功则提示【修改日程成功！】，如修改失败则提示【修改日程失败！】。5.1.6分组管理以下是私人通讯录系统的通讯管理页面，如图5.8所示：图5.8私人通讯录系统分组管理页面进入分组管理页面，左侧可以添加分组，如添加成功则提示【添加分组成功！】，如添加失败则提示【添加分组失败！】，点击删除的时候弹出冒泡框，提示【确认删除此分组？(请确认此分组下没有联系人)】，点击取消则关闭冒泡框，点击确定则进行删除操作，如删除成功则提示【删除分组成功！】，如删除失败则提示【删除分组失败！】。5.1.7相册管理以下是私人通讯录系统的相册管理页面，如图5.9所示：图5.9私人通讯录系统相册管理页面进入相册管理页面，点击上传图片按钮，弹出图片选择框，选择自己需要上传的图片进行上传，如上传成功则在左侧出现图片的缩略图，鼠标悬浮在图片缩略图上时可以进行查看图片大图，图片下载，图片删除的操作。5.1.8系统管理以下是私人通讯录系统的系统管理页面，如图5.10所示：图5.10私人通讯录系统系统管理页面进入系统管理页面，暂时只提供了修改密码功能，可以输入想要修改的密码，点击修改密码按钮进行修改密码操作，如修改成功则提示【修改密码成功】，如修改失败则提示【修改密码失败】。6测试概要测试内容测试策略可以从功能上，可用性上，性能上进行测试。 功能测试：从详细设计所列出的功能开始测试，确保系统的功能都能正常使用。功能测试包括跳转测试，跳转测试是指，测试系统中的链接是否能按照设置的呢样那样正确的跳转到该跳转的页面，其他正常链接则跳转到对应的界面。还有”表单测试“，比如说限制一些模态框中的表单的可输入的字符长度，输入达到最大长度时会无法继续输入等等。操作相应测试，测试用户的一些操作是否会正确响应比如删除和修改等操作，是否会正确改变数据库数据。按照需求分析逐一进行检测。 可用性测试：按照业务流程操作一遍系统，查看是否能保存，修改，删除想要进行的操作。用户界面测试，看看页面加载是否流畅主要是跟网络资源加载有关，比如说相册管理所上传的图片太大，导致加载过慢，还有导航栏是否直观（见名知意），保证页面的设计风格一致等等。 性能测试：测试用户访问页面时打开页面的速度。不能让页面打开的时间过长，用户可能会因为等待时间过长从而退出页面，页面打开的速度，主要是跟后台的性能有关。针对问题跟进性能问题将会优化node代码。本系统的测试大概分成六个模块来进行测试，把自身当成用户，通过日常使用来测试流程，从而找出bug，测试概要如表7.1所示表6.1测试概要表测试模块测试内容登录注册模块注册时测试账号唯一性，两次密码是否一致，是否能保存到数据库中。登录时测试登录账号密码检查是否正确，登录成功能否跳转页面，登陆错误能否正确提示错误原因通讯管理模块测试通讯管理信息能否进行正常的查询，新增，修改，删除，以及提醒功能能否正常提醒。日程管理模块测试日程管理信息能否进行正常的查询，新增，修改，删除，以及提醒功能能否正常提醒。续表6.1测试概要表分组管理模块测试分组能否正常的添加分组，删除分组。相册管理模块测试相册管理能否上传图片，查看图片，下载图片，删除图片。修改密码模块测试密码能否修改成功。7测试结果及发现7.1登录注册模块登陆注册模块测试用例：注：已注册用户名：郝旭波密码：123123表7.1登陆注册模块测试用例表输入信息（用户名，密码，确认密码）预期结果实际结果注册：郝旭波账号已注册，注册失败注册失败注册：郝旭波，123,124注册失败，两次密码不一致注册失败注册：郝旭波1，123,123注册成功，跳转到登陆界面注册成功登录：郝旭波2,111用户未注册，登录失败登录失败登录：郝旭波,123121密码错误登陆失败登录：郝旭波,123123登录成功，跳转到主界面登录成功2.登陆注册实际显示界面如下图:图7.1已经注册测试图图7.2两次密码不一致图7.3用户名不存在图7.4密码错误图7.5登录成功7.2通讯管理模块测试1.通讯管理模块测试用例：表7.2通讯管理模块测试用例表输入信息预期结果实际结果点击添加联系人出现模态框，输入要保存的信息后点击保存弹出添加联系人成功，页面列表出现添加的信息添加成功输入要查询的信息，点击查询列表出现与要查询的信息有关联的信息查询成功点击修改，本行的信息自动出现在模态框内，输入要修改的信息，点击保存弹出修改联系人成功，页面列表出现修改后的信息修改成功点击删除，根据提示进行删除弹出删除成功删除成功2.通讯管理模块测试界面如下图:图7.6添加联系人测试图图7.7修改联系人测试图图7.8删除联系人测试图7.3日程管理模块测试1.日程管理模块测试用例：表7.3分数管理模块测试用例表输入信息预期结果实际结果点击添加日程出现模态框，输入要保存的信息后点击保存弹出添加日程成功，页面列表出现添加的信息添加成功输入要查询的信息，点击查询列表出现与要查询的信息有关联的信息查询成功点击修改，本行的信息自动出现在模态框内，输入要修改的信息，点击保存弹出修改日程成功，页面列表出现修改后的信息修改成功点击删除，根据提示进行删除弹出删除成功删除成功2.日程管理模块测试界面如下图:图7.9添加日程测试图图7.10修改日程测试图图7.11删除日程测试图7.4分组管理模块测试1.分组管理模块测试用例：表7.4分组管理模块测试用例表输入信息预期结果实际结果输入要添加的分组，然后点击添加分组右侧出现刚刚添加的分组名称右侧成功出现点击删除按钮，所点击的分组被删除成功删除成功2.分组管理模块测试界面如下图:图7.12添加分组测试图图7.13删除分组测试图7.5相册管理模块测试相册管理模块测试用例：表7.5相册管理模块测试用例表点击显示预期结果实际结果点击加号出现文件选择框，可选择想要上传的图片图片上传成功，并出现在页面图片上传成功，并出现在页面点击图片上的查看图片出现图片大图出现图片大图续表7.5相册管理模块测试用例表点击图片上的删除删除图片成功删除图片成功点击图片上的下载跳转界面点击右键进行下载跳转界面点击右键进行下载点击图片上的删除删除图片成功删除图片成功2.相册管理模块测试界面如下图:图7.14添加图片测试图图7.15删除图片测试图图7.16查看图片测试图图7.17下载图片测试图7.6修改密码模块测试1.修改密码模块测试用例：表7.6修改密码模块测试用例表输入信息预期结果实际结果输入想要修改的密码密码修改成功密码修改成功2.修改密码模块测试界面如下图:图7.18修改密码测试图8总结从选题开始再到需求分析阶段—详细设计阶段—数据库设计及