基于express的個人旅游動態(tài)網(wǎng)站的設計與實現(xiàn)

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

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