基于express的個(gè)人旅游動(dòng)態(tài)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

PAGE1基于express的個(gè)人旅游動(dòng)態(tài)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)DesignandImplementationofPersonalTourismDynamicWebsiteBasedonExpress目錄TOC\o"1-3"\h\u7380 323878第一章核心框架 595061.1核心框架的選擇 530565第二章相關(guān)技術(shù)介紹 7293802.1Node.js介紹 769462.2Vue.js介紹 7163302.3MongoDB數(shù)據(jù)庫(kù)介紹 8289202.4Express框架介紹 822187第三章項(xiàng)目的設(shè)計(jì) 8301513.1城市模塊 8133153.2新聞專欄模塊 916911第四章項(xiàng)目建設(shè) 9111014.1項(xiàng)目架構(gòu) 9112814.1.1項(xiàng)目的設(shè)計(jì)架構(gòu) 9203014.1.2項(xiàng)目后端結(jié)構(gòu) 1092154.1.3項(xiàng)目數(shù)據(jù)庫(kù)架構(gòu) 1080404.1.4項(xiàng)目前端設(shè)置 19252484.2項(xiàng)目功能測(cè)試 23212054.3關(guān)于項(xiàng)目的發(fā)布 241549第五章結(jié)束語(yǔ) 243214致謝 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核心框架的選擇第二章相關(guān)技術(shù)介紹這個(gè)項(xiàng)目是由node.js作為核心，輔助以express框架進(jìn)行研發(fā)，其中后臺(tái)主要用了VUE.js來(lái)做后臺(tái)的核心的組件，elementUI做后臺(tái)的界面，數(shù)據(jù)庫(kù)用了MongoBD作為核心，其中還用了cors做跨域進(jìn)行項(xiàng)目：2.1Node.js介紹2.2Vue.js介紹Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式的框架，它與其他的大型框架不同，Vue.js被設(shè)計(jì)可以自底向上的逐層應(yīng)用，在操作過(guò)程中能夠更加的靈活自由，設(shè)計(jì)更為簡(jiǎn)單，便于用戶能夠很快的去熟悉和掌火Vue的大部分使用特征，并且能夠投入使用，Vue的核心庫(kù)只關(guān)注視圖層，這樣便于與第三方庫(kù)或既有的項(xiàng)目整合；Vue也提供了一個(gè)強(qiáng)大的過(guò)度效果系統(tǒng)，可以在Vue插入/更新/移除元素時(shí)自動(dòng)應(yīng)用過(guò)渡效果。而ElementUI也時(shí)基于Vue2.0來(lái)制作的桌面端的組件庫(kù)。Vue-cli是Vue.js框架的腳手架工具，它可以用于編寫關(guān)于Vue.js家畜代碼的工具，能夠通過(guò)使用Vue-cli就可以能夠很輕松快速的生成目錄結(jié)構(gòu)。Vue-cli的目錄結(jié)構(gòu)如圖2-1所示，其中middleware是用于存放項(xiàng)目中間件，models和plugins是用于存放項(xiàng)目的數(shù)據(jù)庫(kù)文件，routes是存放項(xiàng)目的路由配置文件，uploads是用于存放項(xiàng)目的上傳的數(shù)據(jù)，node_modules目錄存放npminstall安裝的依賴代碼庫(kù)。圖2-1Vue-cli目錄結(jié)構(gòu)圖2.3MongoDB數(shù)據(jù)庫(kù)介紹MongoDB有兩個(gè)庫(kù)可選擇，分別為mongodb（Node.jsMongoDBDriver)和mongoose，其中mongoose專用于mongoDB文檔的增刪查改操作，能夠方便用戶操作時(shí)的便利和提供額外功能。Mongodb則是mongoDB的官方驅(qū)動(dòng)，可以操作MongoDB數(shù)據(jù)庫(kù)本身的功能。Mongoose的一切始于Schema。每個(gè)schema都會(huì)映射到一個(gè)MongoDBcollection，并定義這個(gè)collection里的文檔的構(gòu)成。其中models就是從Schema編譯來(lái)的構(gòu)建函數(shù)。它們的實(shí)例就代表著可以從數(shù)據(jù)庫(kù)保存和讀取的

documents。從數(shù)據(jù)庫(kù)創(chuàng)建和讀取document的所有操作都是通過(guò)model進(jìn)行的。2.4Express框架介紹Express是一個(gè)保持最小規(guī)模的靈活的Node.jsWeb應(yīng)用程序開發(fā)框架[14]，為Web和移動(dòng)應(yīng)用程序提供一組強(qiáng)大的功能。它包含了非常豐富的HTTP的工具；它的核心點(diǎn)在于能夠快速進(jìn)行開發(fā)，擁有能夠更加靈活的擴(kuò)展模式，中間件（middleware）則是express.js中非常重要的特征，能夠能加簡(jiǎn)便的實(shí)現(xiàn)更多功能，增加代碼的復(fù)用性。第三章項(xiàng)目的設(shè)計(jì)3.1城市模塊城市作為項(xiàng)目的核心內(nèi)容，城市模塊包括了相對(duì)應(yīng)的省份，將省份作為一個(gè)分類列表能夠提高了用戶對(duì)于自己需求能夠更快的找到自己所需求的城市，再針對(duì)城市里面的特色統(tǒng)合在一個(gè)頁(yè)面內(nèi)，能夠?qū)⒚朗常频?、旅館等住宿方面，景點(diǎn)以及游玩提示等統(tǒng)一作為一個(gè)城市的模板，這樣能夠?qū)⒂脩舸罅克枨蟮狞c(diǎn)都能做到壓縮，將這些都能在一個(gè)頁(yè)面中做出顯示，而且用戶還能對(duì)這個(gè)城市進(jìn)行留言，這樣能夠提高用戶之間的交互性，能夠?qū)@個(gè)城市做出更客觀的分析，能夠讓用戶在沒(méi)有去到之前就能夠?qū)τ谶@個(gè)城市有著一定的理解，這樣就能在一定程度的減少用戶的選擇難度，還能加上城市新聞的新聞或者提示，能夠讓用戶更加客觀的對(duì)這個(gè)城市了解，將新聞加入也能讓用戶更加了解對(duì)于這個(gè)城市的時(shí)事，從而選擇更加適合用戶自己的時(shí)間或者是隨行物品，而且進(jìn)行對(duì)頁(yè)面進(jìn)行精簡(jiǎn)以及優(yōu)化這樣能夠提高用戶的用戶體驗(yàn)，并且能夠更加省時(shí)省力的快速進(jìn)行網(wǎng)頁(yè)的布局和維護(hù)。3.2新聞專欄模塊第四章項(xiàng)目建設(shè)4.1項(xiàng)目架構(gòu)4.1.1項(xiàng)目的設(shè)計(jì)架構(gòu)4.1.2項(xiàng)目后端結(jié)構(gòu)4.1.3項(xiàng)目數(shù)據(jù)庫(kù)架構(gòu)（1）數(shù)據(jù)庫(kù)連接圖4-2：連接數(shù)據(jù)庫(kù)圖4-3：數(shù)據(jù)結(jié)構(gòu)定義數(shù)據(jù)庫(kù)字段名中文字段名數(shù)據(jù)類型空否name名字IntNitems_image文章圖片VarcharYItems_url文章鏈接VarcharYBody正文部分VarcharN表4-2：新聞文章數(shù)據(jù)庫(kù)列表（2）用戶登錄表4-3：登陸模塊表格圖4-4：用戶賬戶密碼數(shù)據(jù)定義（3）中間件的設(shè)置圖4-6：增刪查改模塊論壇模塊論壇模塊作為提供給用戶的交流空間，能夠促進(jìn)用戶之間的氛圍，能夠讓用戶直接進(jìn)入用戶的攻略模塊，能夠點(diǎn)擊發(fā)表來(lái)直接進(jìn)行發(fā)表，能夠?qū)μ幽軌蜻M(jìn)行評(píng)論，期間能夠驗(yàn)證用戶的登陸狀態(tài)進(jìn)行檢驗(yàn)，論壇模塊流程圖如圖4-8所示圖4-8：論壇模塊流程圖根據(jù)論壇功能的分析，將創(chuàng)建論壇帖子表儲(chǔ)存的數(shù)據(jù)，包括了帖子id，標(biāo)題、內(nèi)容、用戶等，創(chuàng)建論壇評(píng)論表儲(chǔ)存數(shù)據(jù)，包括了評(píng)論id、帖子id，回帖信息，回帖用戶等，論壇帖子表如表4-4所示，論壇評(píng)論表如表4-5所示表4-4：論壇帖子表字段名