基于express的个人旅游动态网站的设计与实现

PAGE1目录TOC\o"1-3"\h\u 3第一章核心框架 51.1核心框架的选择 5第二章相关技术介绍 72.1Node.js介绍 72.2Vue.js介绍 72.3MongoDB数据库介绍 82.4Express框架介绍 8第三章项目的设计 83.1城市模块 83.2新闻专栏模块 9第四章项目建设 94.1项目架构 94.1.1项目的设计架构 94.1.2项目后端结构 104.1.3项目数据库架构 104.1.4项目前端设置 194.2项目功能测试 234.3关于项目的发布 24第五章结束语 24致谢 26AbstractAboutpersonaltravelwebsites,Isaimedatyoungpeople,especiallycollegestudents,Forthisgroupofpeople,manytimestheywillchooseapersonoragroupofpeopletotravel,Butmostofthetime,Theydonotliketogowiththegroup.Moreoften,theychoosetotravelbythemselfortheirfriends.Thiscanbemoretoexperiencethelocalculturalcustoms.Butquiteoften,TheygetlocalinformationfromtheInternetandmakedescriptionsthroughfriendstheyhavebeento.Socanmakeapersonaltravelwebsiteforthisgroupofpeople,andthroughthecolumnandotherfunctions,Provideaplatformfortravelloverstoshareexperiencesandexchanges,whichcanmakeiteasierforuserstoplanandchoosetheirowntravel.ThisprojectdevelopsaconvenientpersonaltravelwebsitebasedonHTML5andNode.js,Inordertobeabletohelpthecurrentdemandfortourismamongthegroupofcollegestudents,theneedsofuserscanbebetterdemonstrated,Andcontrolthepermissionsofusersinthesystem,therebyimprovingthesecurityofthesystem.Designthesystem'sloginfunction,citymodule,newsmoduleandothermodules.Itallowsuserstointuitivelyimprovetheirownneeds.ThissystemusesNode.jsastheback-enddevelopmentofthesystem,whichhasthecharacteristicsofsinglethread,non-blockingI/O,event-drivenandsoon.AndusetheExpressframework,whichcanenablethesystemtohandlethemaximumnumberofconcurrentI/Os,sothatitcanhavefastsystemprocessingperformance.ThesystemalsousesalightweightVue,jsframework,throughtherelevantAPIcanachieveresponsivedatabinding,andwebcomponents,usingthescaffoldingtooloftheVue.jsframeworktowritethebasiccodeoftheproject,Maketheprojectinterfacecanbedevelopedmorequickly.:travel;Node.js;dynamic;websiteyoungpeople;Expressframework第一章核心框架1.1核心框架的选择第二章相关技术介绍这个项目是由node.js作为核心，辅助以express框架进行研发，其中后台主要用了VUE.js来做后台的核心的组件，elementUI做后台的界面，数据库用了MongoBD作为核心，其中还用了cors做跨域进行项目：2.1Node.js介绍2.2Vue.js介绍Vue.js是一套用于构建用户界面的渐进式的框架，它与其他的大型框架不同，Vue.js被设计可以自底向上的逐层应用，在操作过程中能够更加的灵活自由，设计更为简单，便于用户能够很快的去熟悉和掌火Vue的大部分使用特征，并且能够投入使用，Vue的核心库只关注视图层，这样便于与第三方库或既有的项目整合；Vue也提供了一个强大的过度效果系统，可以在Vue插入/更新/移除元素时自动应用过渡效果。而ElementUI也时基于Vue2.0来制作的桌面端的组件库。Vue-cli是Vue.js框架的脚手架工具，它可以用于编写关于Vue.js家畜代码的工具，能够通过使用Vue-cli就可以能够很轻松快速的生成目录结构。Vue-cli的目录结构如图2-1所示，其中middleware是用于存放项目中间件，models和plugins是用于存放项目的数据库文件，routes是存放项目的路由配置文件，uploads是用于存放项目的上传的数据，node_modules目录存放npminstall安装的依赖代码库。图2-1Vue-cli目录结构图2.3MongoDB数据库介绍MongoDB有两个库可选择，分别为mongodb（Node.jsMongoDBDriver)和mongoose，其中mongoose专用于mongoDB文档的增删查改操作，能够方便用户操作时的便利和提供额外功能。Mongodb则是mongoDB的官方驱动，可以操作MongoDB数据库本身的功能。Mongoose的一切始于Schema。每个schema都会映射到一个MongoDBcollection，并定义这个collection里的文档的构成。其中models就是从Schema编译来的构建函数。它们的实例就代表着可以从数据库保存和读取的

documents。从数据库创建和读取document的所有操作都是通过model进行的。2.4Express框架介绍Express是一个保持最小规模的灵活的Node.jsWeb应用程序开发框架[14]，为Web和移动应用程序提供一组强大的功能。它包含了非常丰富的HTTP的工具；它的核心点在于能够快速进行开发，拥有能够更加灵活的扩展模式，中间件（middleware）则是express.js中非常重要的特征，能够能加简便的实现更多功能，增加代码的复用性。第三章项目的设计3.1城市模块城市作为项目的核心内容，城市模块包括了相对应的省份，将省份作为一个分类列表能够提高了用户对于自己需求能够更快的找到自己所需求的城市，再针对城市里面的特色统合在一个页面内，能够将美食，酒店、旅馆等住宿方面，景点以及游玩提示等统一作为一个城市的模板，这样能够将用户大量所需求的点都能做到压缩，将这些都能在一个页面中做出显示，而且用户还能对这个城市进行留言，这样能够提高用户之间的交互性，能够对这个城市做出更客观的分析，能够让用户在没有去到之前就能够对于这个城市有着一定的理解，这样就能在一定程度的减少用户的选择难度，还能加上城市新闻的新闻或者提示，能够让用户更加客观的对这个城市了解，将新闻加入也能让用户更加了解对于这个城市的时事，从而选择更加适合用户自己的时间或者是随行物品，而且进行对页面进行精简以及优化这样能够提高用户的用户体验，并且能够更加省时省力的快速进行网页的布局和维护。3.2新闻专栏模块第四章项目建设4.1项目架构4.1.1项目的设计架构4.1.2项目后端结构4.1.3项目数据库架构（1）数据库连接图4-2：连接数据库图4-3：数据结构定义数据库字段名中文字段名数据类型空否name名字IntNitems_image文章图片VarcharYItems_url文章链接VarcharYBody正文部分VarcharN表4-2：新闻文章数据库列表（2）用户登录表4-3：登陆模块表格图4-4：用户账户密码数据定义（3）中间件的设置图4-6：增删查改模块论坛模块论坛模块作为提供给用户的交流空间，能够促进用户之间的氛围，能够让用户直接进入用户的攻略模块，能够点击发表来直接进行发表，能够对帖子能够进行评论，期间能够验证用户的登陆状态进行检验，论坛模块流程图如图4-8所示图4-8：论坛模块流程图根据论坛功能的分析，将创建论坛帖子表储存的数据，包括了帖子id，标题、内容、用户等，创建论坛评论表储存数据，包括了评论id、帖子id，回帖信息，回帖用户等，论坛帖子表如表4-4所示，论坛评论表如表4-5所示表4-4：论坛帖子表字段名中文字段名数据类型空否Id帖子idBigintNTitle标题VarcharNBody正文内容VarcharNUsername用户VarcharN表4-5：论坛评论表字段名中文字段名数据类型空否Id评论idBigintNFormid对应帖子idBigintNBody回帖内容VarcharNUsername用户VarcharN4.1.4项目前端设置（1）项目登陆模块（2）项目新闻模块（3）项目样式模块（4）项目城市模块4.2项目功能测试4.3关于项目的发布第五章结束语HYPERLINK电脑文件整理懒招从来都是不会经常整理文件的，不过时间一长，众多的文档分布在硬盘的各个角落，用目录进行整理保存，工作量大、查看起来也不方便且还会浪费不少的磁盘空闻；用压缩工具打包，尽管可以节约空间但是却无法直接编辑修改或查看压缩包中的文件。这些招，懒人怎么会用，他们自有妙招!再多再乱的文件也能整理得井井有条，关键是不费力哦!

懒招1，自动提取乱中取胜

小张起初将照片、Office文档、电影、音乐等文件一股脑地存放在某一个磁盘分区，刚开始文件少使用起来倒也方便，但随着时间的推移，文件数量剧增，每次找所需的文件都要瞪大眼睛，不过有了MY文档管理器(下载地址：)就不用担心了。

第一步，下载MY文档管理器，解压到任意目录，直接双击其中的可执行性文件即可使用。依次单击“节点操作→添加节点”，分别添加多个节点，如“办公文档”、“电影”等分类，这样做的目的是方便归类。

第二步，在小张的F盘中的TEST目录下有众多的RM、MP3、JPG、DOC、TXT格式的文件，现在他要把JPG格式的文件提取到“照片”类别中。依次单击“系统配置→文件过滤”选项，打开Dialog对话框，输入“*.doc”，单击“添加”按钮，意思是过滤掉所有类型为“.DOC”的文件。然后按照同样的方法，将“*.txt”、“*.rm”、“*.MP3”一一添加进来。

第三步，双击左侧窗格中的“照片”节点，然后依次单击“记录操作→导入记录树”命令，在打开的对话框中单击浏览按钮，打开“F:\test”目录，单击“确定”按钮之后就可以将格式为JPG的文件提取出来并添加到“照片”节点中了。

懒招2，不同的电脑统一的管理

小张是电爱的Fans，工作之余常常为杂志写稿，他写完的和正在处理的稿件一般都存在一个稿件文件夹里。不过时间一长，家里的电脑(PC1)和单位的电脑(PC2)上都有这个文件夹。时常需要通过移动硬盘(U盘)在两台电脑之间传递，使用和管理都很不方便。不过他现在用优盘就可以统一管理了。

第一步，将上文提到的那个MY文档管理器解压后直接拷贝到优盘上。把优盘插到PC1上，并运行软件，依次单击“记录操作→导入记录树”命令，在随后弹出的对话框中设置好“稿件”文件夹的根目录，将“导入深度”设置为“5”，单击“确定”后，稍等片刻，软件就把PC1上的“稿件”导入到MY文档管理器中。

小提示：通过这种方式导入到程序中的仅仅是文件的路径、文件名等属性信息，并不是文件本身。

第二步，把优盘插到PC2上，按照同样的方法导入PC2上的“稿件”文件。以后要编辑“稿件”里的文件，你自己根本不用记住哪台电脑的哪个路径，只要把优盘插入到电脑，运行MY文档管理器，就可以直接编辑了。

第三步，为方便在异地使用，小张决定为当前正在处理的稿件增加一个副本。在需要异地处理的稿件上右键单击，选择“复制文件到(自动添加副本)”命令，在弹出的对话框中将保存目录设置为优盘上的某个目录即可。这样，就可以在优盘上编辑PC1或PC2的稿件了。

小提示：对于PC1、PC2上的同名文件，MY文档管理器以不同的磁盘号+文件路径来标识文件记录，因此，对于不同电脑上的同名文件，甚至是路径和文件名完全相同的文件，程序也可以准确识别哪个是哪个。

懒招3多种文件批量移动

要将文件管理得井然有序，就免不了要进行复制、删除、移动等等操作，如果一个个进行操作，工作量是非常巨大的。这时我们就需要借助于BelvedereAutomated(下载地址：.com/assets/resources/2008/03/Belvedere%200.3.exe)进行批量操作了。例如我们想把“F:\test”目录中的所有照片移动到F盘中的“北京游照片”目录中，可以按以下方法进行。

第一步，建立“F:\test”目录后在“rule”一栏中，单击“+”按钮，建立一个规则。在“Descriptior”文本框中为当前规则起一个名字如“批量整理移动”。单击第一个下拉列表，在这里可以选择Name(文件名)、Extension(扩展名)、Size(大小)等进行操作，这里选择扩展名“Extension”。单击第二个下拉列表，在这里设置的是操作条件，有is(是)、isnot(不是)、contains(包含)等操作可供选择，这里选择的是“is”。接下来，在最后的文本框中输入图片文件的扩展名，示例中是“JPG”。定义的规则合起来的意思就是“扩展名是JPG”。

第二步，在“Dothefollowing”区域设置操作动作，单击第一个下拉列表进行操作动作的选择，有“Movefile(移动)、Renamefile(重命名)、Deletefile(删除)”等动作可供选择，我们要批量移动，那就选择重命名“Movefile(移动文件)”。接下来，单击后面的按钮选择“F:\北京游照片”目录。

第三步，规则设置完毕，单击“Test”按钮应用规则，程序即可一次性地将所有扩展名为“JPG”的图片文件移动到“F:\北京游照片”目录中了。

懒招4提纲挈领一点即得

在前面几大懒招的帮助下，你电脑里的文件应该已经有点类别了吧。如果从此想告别懒人的生活，那就要养成管理文件的好习惯了。

第一步，在你保存资料的电脑分区中，要接类别建立多个文件夹，可以按用途分为：学习、娱乐、暂存、工作、下载，在娱乐下又可以建立二级目录：电影、歌曲、动画等。也可以按照常见的文件性质进行分类，例如分为：图片、电影、电子书、安装文件等，当然也可以按照你的需要再建立二级目录，以后每有文件需要保存就按这个类别保存到相应的目录。

第二步，虽然现在已经把文件分门别类存放了，但时间长了，目录太深，一层一层查找也很麻烦的，在EXCEL里建一个目录就可以统一管理了。运行EXCEL后，新建一个表格，然后按照我们的分类方式隔行输入：图片、电影、电子书，在图片分类下再建立二级目录名，例如明星、汽车、壁纸等。

第三步，右键单击“图片文字”，选择“超链接”，在弹出的对话框中选择电脑里图片目录文件夹，单击“确定”后EXCEL里的“图片”文字就变成彩色。用同样的方法为一级目录的“电影、电子书”和二级目录的“明星、汽车、壁纸”等添加超链接。然后将这个EXCEL文件命名为文件目录，保存到桌面上，以后打开这个文档，直接单击相应的文字，比如单击“壁纸”，就可以切换到壁纸文件夹了。

小提示：如果要更改某个超链接，直接右键单击该文字，选择“编辑超链接”就可以了。本人的电脑分类原则简述如下。

硬盘的第一层(请在自己的件夹中右键“按组排列”查看)

第一位字母表示A生活娱乐B教学C工作D安装程序

第二位字母表示只是流水号

AA影视

AB音乐

AC阅读

AD图片

AE相册

生活娱乐

BA计算机

BB英语

BC运动

BD游戏攻略

BE衣食住行

BF文艺

教学

CA管理制度

CB流程图

CC程序文件

工作

DA娱乐

DB其它

安装程序

硬盘的第二层(进入“AA影视”的文件夹举例)

第一位字母表示只是流水号

第二位字母表示只是流水号

AA电影

BA电视剧

CAMTV

硬盘的第三级(进入“AA电影”的文件夹举例)

第一位字母表示A动作片B剧情片C动画片

第二位字母表示A未看过B已看过

AA导火线

AB尖峰时刻

动作片

BA独自等待

剧情片

CB机器猫

CB狮子王

动画片

利用“字母排序”和“按组排列查看”可以使文件查看和存放简洁明了，结合自己资料的特点和实际需求，给自己定一个分类原则并严格执行。个人电脑资料的资源会得到高效而充分的利用。电脑文件管理八条小技巧

在电脑的内部，在电脑的桌面上，在“资源管理器”中，充斥着无序与混乱,这种虚拟的混乱极大地影响了电脑的性能和我们办公的效率，当大家面临这个问题时，通常认为硬盘空间又不够了，电脑性能又不跟不上了，需要再换一台新的电脑了。事实上，我们真正需要的是坐下来，好好花时间将电脑里的文件真正管理起来，会为自己日后省下更多的时间。

文件管理的真谛在于方便保存和迅速提取，所有的文件将通过文件夹分类被很好地组织起来，放在你最能方便找到的地方。解决这个问题目前最理想的方法就是分类管理，从硬盘分区开始到每一个文件夹的建立，我们都要按照自己的工作和生活需要，分为大大小小、多个层级的文件夹，建立合理的文件保存架构。此外所有的文件、文件夹，都要规范化地命名，并放入最合适的文件夹中。这样，当我们需要什么文件时，就知道到哪里去寻找。

这种方法，对于相当数量的人来说，并不是一件轻松的事，因为他们习惯了随手存放文件和辛苦、茫无头绪地查找文件。

下面，我们将帮你制订一套分类管理的原则，并敦促您养成好的文件管理习惯。以下是我们总结出的一些基本技巧，这些技巧并不是教条，可能并不适合你，但无论如何你必须要有自己的规则，并坚持下来，形成习惯。

一、发挥我的文档的作用

有很多理由让我们好好地利用“我的文档”，它能方便地在桌面上、开始菜单、资源管理器、保存/打开窗口中找到，有利于我们方便而快捷地打开、保存文件。我们可以利用“我的文档”中已有的目录，也可以创建自己的目录，将经常需要访问的文件存储在这里。至于“我的文档”存储在C盘，在重装系统时可能会误删除的问题，可以在非系统盘建立一个目录，然后右击桌面上的“我的文档”，选择“属性”。在弹出的“我的文档属性”窗口中，单击目标文件夹下的“移动”按钮，然后在新的窗口中指定我们刚创建的文件夹。重装系统后再次执行以上操作，再重新指向此文件夹即可，即安全又便捷。

小提示：如果你使用Windows2000/XP，则移动“我的文档”文件夹时，其下的所有文件会自动移过去，但如果你使用Windows9x，则需要手工将C:MyDocuments下的所有文件手工移到新指定的文件夹中，否则可能会丢失数据。

二、建立最适合自己的文件夹结构

文件夹是文件管理系统的骨架，对文件管理来说至关重要。建立适合自己的文件夹结构，需要首先对自己接触到的各种信息、工作和生活内容进行归纳分析。每个人的工作和生活有所不同，接受的信息也会有很大差异，因此分析自己的信息类别是建立结构的前提。比如，有相当多的IT自由撰稿人和编辑就是以软件、硬件的类别建立文件夹;而很多老师，就是以自己的工作内容比如教学工作、班主任工作建立文件夹。

同类的文件名字可用相同字母前缀的文件来命名，同类的文件最好存储在同一目录，如图片目录用image，多媒体目录用media，文档用doc等等，简洁易懂，一目了然，而且方便用一个软件打开。这样，当我们想要找到一个文件时，能立刻想到它可能保存的地方。

三、控制文件夹与文件的数目

文件夹里的数目不应当过多，一个文件夹里面有50个以内的文件数是比较容易浏览和检索的。如果超过100个文件，浏览和打开的速度就会变慢且不方便查看了。

这种情况下，就得考虑存档、删除一些文件，或将此文件夹分为几个文件或建立一些子文件夹。另一方面，如果有文件夹的文件数目长期只有少得可怜的几个文件，也建议将此文件夹合并到其他文件夹中。

四、注意结构的级数

分类的细化必然带来结构级别的增多，级数越多，检索和浏览的效率就会越低，建议整个结构最好控制在二、三级。另外，级别最好与自己经常处理的信息相结合。

越常用的类别，级别就越高，比如负责多媒体栏目的编辑，那多媒体这个文件夹就应当是一级文件夹，老师本学期所教授的课程、所管理班级的资料文件夹，也应当是一级文件夹。

文件夹的数目，文件夹里文件的数目以及文件夹的层级，往往不能两全，我们只能找一个最佳的结合点。

五、文件和文件夹的命名

为文件和文件夹取一个好名字至关重要，但什么是好名字，却没有固定的含义，以最短的词句描述此文件夹类别和作用，能让你自己不需要打开就能记起文件的大概内容，能就是好的名称。要为电脑中所有的文件和文件夹使用统一的命名规则，这些规则需要我们自己来制订。最