智能手機接入小區(qū)管理系統(tǒng)設(shè)計

智能手機接入小區(qū)管理系統(tǒng)設(shè)計摘要社區(qū)是社會的一個主要組成部分，社區(qū)自身的成熟對社會整體的進步起著不可言喻的作用。中國經(jīng)濟飛速發(fā)展的同時，人們對社會基層的成長也提出了新的要求：一是隨著國家綜合實力的不斷增強，社區(qū)工作不再像以前那樣可以“忽略”；二是社會主義市場經(jīng)濟體制的改革過程中，迫切需要注意黨在基層社區(qū)的建設(shè)；三是由于城鎮(zhèn)人口巨大的增長速度，需要優(yōu)化老舊的社區(qū)管理模式；四是隨著人民生活水平的不斷提高，人們開始更加渴望多元化的精神文化建設(shè)。在新的時代，應(yīng)該有更優(yōu)質(zhì)的社區(qū)建設(shè)被實施，來滿足人們在這方面的需求。本文通過研究國內(nèi)外的相關(guān)學術(shù)成果，分析了當前時代社區(qū)的發(fā)展情況以及社區(qū)管理模式的異同，并且介紹了當前社區(qū)管理應(yīng)用的混亂現(xiàn)象。本次設(shè)計利用Express框架設(shè)計了一個輕量級的應(yīng)用，使得智能手機接入小區(qū)管理系統(tǒng)。并且應(yīng)用最新的Manifest技術(shù)，無需復雜的操作，即可完成信息的查詢、事件的申報、代理繳費等任務(wù)。節(jié)省了大量的人力以及時間資源、降低了處理情況的繁雜度，為智能化社區(qū)的進展添磚加瓦，給居民的生活提供了便利。關(guān)鍵詞：Express；Manifest；智能手機TheDesignofCommunityManagementSystemwithSmartphoneAccessAbstract:Communityisanimportantpartofsociety,andthedevelopmentofthecommunityplaysauniqueroleinthedevelopmentofthewholesociety.Withtheeconomicdevelopment,newrequirementshavealsobeenputforwardforthesocialbase:First,asChina’scomprehensivestrengthcontinuestoincrease,communityworkatthegrassrootslevelhasbecomemoreimportant;Second,duringthereformofthesocialistmarketeconomicsystem,thereisanurgentneedtostrengthenthepartybuildingatthegrassrootslevel;Third,duetothehugegrowthrateofurbanpopulation,weneedtooptimizetheoldcommunitymanagementmodel.;Fourth,aspeople’slivingstandardscontinuetoimprove,people’sdemandformaterialcultureandspiritualculturehavebecomemorediverse.Inthenewera,thereshouldbebettercommunitybuildingimplementedtomeetpeople'sneeds.Bystudyingtherelevantacademicachievementsathomeandabroad,thisarticleanalyzedthedevelopmentofcommunitiesandthesimilaritiesanddifferencesofcommunitymanagementmodels.Italsointroducedthechaosofcurrentcommunitymanagementapplications.ThisdesignusesExpressframeworktodesignalightweightapplication,whichmakessmartphonecouldaccesstocommunitymanagementsystem.AndwiththelatestManifesttechnology,youcancompleteinformationquery,eventreporting,agentpayment,andothertaskswithouttoomuchoperations.Itsavesalotofmanpowerandtimeresources,reducesthecomplexityoftheprocessingsituation,andcontributestotheupgradingprogressofintelligentcommunity,providessomanyconveniencesforresidents’dailylife.Keywords:Express;Manifest;Smartphone目錄第1章前言 11.1課題背景 11.1.1國內(nèi)社區(qū)管理近況的分析 11.1.2國外社區(qū)發(fā)展情況的研究 31.2主要內(nèi)容 41.3預(yù)期目標 5第2章小區(qū)管理系統(tǒng)的需求分析 62.1社區(qū)管理系統(tǒng)需求的抉擇 62.2社區(qū)管理系統(tǒng)發(fā)展方向的分析 7第3章小區(qū)管理系統(tǒng)開發(fā)中的主要技術(shù) 93.1HTML的技術(shù)應(yīng)用研究 93.2JavaScript的技術(shù)應(yīng)用研究 103.3MongoDB的技術(shù)應(yīng)用研究 113.4HTTPS的特點分析 13第4章小區(qū)管理系統(tǒng)設(shè)計與實現(xiàn) 164.1小區(qū)管理系統(tǒng)總體設(shè)計 164.2后端數(shù)據(jù)接口設(shè)計 174.3前端界面設(shè)計 194.4智能手機接入小區(qū)管理系統(tǒng)測試 23結(jié)論 27致謝 28參考文獻 29第1章前言1.1課題背景隨著新時代的到來，物業(yè)管理越來越受到人們的重視，人們對美好生活環(huán)境和服務(wù)要求也不斷增加，小區(qū)服務(wù)直接關(guān)系到人們的獲得感、幸福感。在這種情況下，更好更便捷的社區(qū)管理和服務(wù)能為社區(qū)居民營造一個全方位的理想生活氛圍，展示出中國城市的新時代的人類風采。進入到21世紀，中國城市地區(qū)的居民委員會都被上級組織勒令重建，它們的新名字中多了“社區(qū)”一詞。原本黨政性質(zhì)濃厚的居民委員會在此之后，社區(qū)服務(wù)所占的成分越來越大，所以“新版”居民委員會的門外會額外加一塊“社區(qū)服務(wù)中心”的牌子。在上海市，由于存在著許多蜿蜒交錯的巷弄，社區(qū)的概念一般用于指稱街道辦事處的轄區(qū)“街道”，通常為一個街道設(shè)置一個社區(qū)服務(wù)中心。國內(nèi)的一些道路復雜的地區(qū)在社區(qū)服務(wù)實踐過程中，也借鑒了上海的經(jīng)驗，同時因地制宜，提出了帶有本地特色的社區(qū)服務(wù)管理模式，為當?shù)鼐用竦娜粘Ｉ钐峁┝瞬簧俚膸椭?。農(nóng)村地區(qū)也受此影響，衍變出了不同的特征。查閱分析我國已“升級”的新型農(nóng)村社區(qū)的新聞資料，可將其總結(jié)為以下2種：單獨型，這類社區(qū)內(nèi)的居民基本上是原來村莊的大部分村民，社區(qū)由原來的村莊單獨改建；整合型，這類社區(qū)基本是多個鄉(xiāng)村重新組成的一個整體，居民來自于不同的村落。與傳統(tǒng)的村莊相比，新型農(nóng)村社區(qū)有很多地方需要新居民去適應(yīng)：集中居住的樓房，管理層級的調(diào)整，公共空間的合理使用，個人生活的隱私，農(nóng)忙季節(jié)農(nóng)產(chǎn)品的晾曬去雜等（GreenMeansGo，2018）。由于物業(yè)管理涉及的管理范圍較為廣泛，管理內(nèi)容繁雜，日常工作需要耗費大量人力、財力、物力，而借助因特網(wǎng)，采用現(xiàn)代化計算機管理手段來提高物業(yè)管理的效率、降低物業(yè)管理的成本，是一種行之有效的解決辦法（陳長江等，2006）。1.1.1國內(nèi)社區(qū)管理近況的分析中國房地產(chǎn)經(jīng)過了迅猛發(fā)展的十余年，據(jù)有關(guān)統(tǒng)計，中國的物業(yè)管理公司大致有10500家，具有高級資質(zhì)的僅占到1/10，從業(yè)人員達到700萬人，可見體系之龐大。然而一些不正當服務(wù)、不合理收費的現(xiàn)象依舊存在，管理系統(tǒng)的低效沒有解決，物業(yè)管理、社區(qū)居民和周邊店鋪沒有發(fā)展成為一個互利互惠的整體（閆立朝，2016）。分析部分資料總結(jié)出，當前社區(qū)管理存在的問題主要體現(xiàn)在以下幾個方面：（一）社區(qū)管理體制存在問題現(xiàn)行的社區(qū)管理體制改革不夠徹底，政府的負擔仍舊不小。社區(qū)自治實際處于一種“傀儡”的情況之下。在當前的社區(qū)自治的實踐發(fā)展中，社區(qū)的自治地位越來越凸顯出來，這賦予了社區(qū)居民更多的權(quán)力，但在另一方面也意味著大量行政權(quán)力的上交，以至于社區(qū)管理體制下的諸多權(quán)力名存實亡。在這種情況下，社區(qū)自治和社區(qū)服務(wù)職能難以成為社區(qū)工作的主要內(nèi)容，職能缺位與越位交叉的現(xiàn)象十分嚴重。在改革開放后，居委會體制并未出現(xiàn)全局性變化，行政權(quán)威性弱化，職權(quán)、人力、財力、物力等的匱乏，導致很多看似容易的工作難以開展（張文彪，2018）242。（二）社區(qū)管理工作隊伍專業(yè)化程度低現(xiàn)如今，隨著城市單位體制的逐步弱化，越來越多的社會職能會不可避免地回歸到社會，社會事務(wù)也逐步由社區(qū)來承擔。但是社區(qū)管理工作的輻射范圍廣泛，涉及到的具體事務(wù)繁雜且專業(yè)化和綜合性較強，這就需要社區(qū)工作者具備相應(yīng)的文化社區(qū)管理方面專業(yè)知識與之匹配。社區(qū)管理工作并沒有正規(guī)的人才引進渠道，相當一部分是臨時工，社區(qū)管理工作的服務(wù)質(zhì)量深受影響（張文彪，2018）242。（三）社區(qū)組織管理法律制度不近完善目前我國城市社區(qū)管理的法制建設(shè)還不夠健全，職責交叉而導致管理混亂，相應(yīng)的管理制度尚未真正建立。社區(qū)自治組織的職責范圍模糊，與物業(yè)公司、政府部門、業(yè)主委員會這三方之間的聯(lián)動和權(quán)力邊界不清晰且無明確規(guī)定，容易出現(xiàn)執(zhí)行機構(gòu)權(quán)責分配不均的現(xiàn)象。社會組織層面來看，社會中介組織發(fā)展緩慢，居民委員會等自治組織的作用尚未得到充分地發(fā)揮，社區(qū)居民參與率低，積極性不夠，社區(qū)內(nèi)的溝通交流機制也有待完善（張文彪，2018）242。（四）社區(qū)服務(wù)資源不足目前，我國的社區(qū)的服務(wù)設(shè)施嚴重缺乏，許多社區(qū)居委會和黨群服務(wù)中心等辦公場所難以達到國家標準。社會服務(wù)的財物來源于政府，但現(xiàn)實中的社會服務(wù)經(jīng)費并未完全列入政府預(yù)算，許多工作由于缺乏經(jīng)費最后終止。并且由于社區(qū)之間難以共享資源，使得一些社區(qū)持有的資源未得到充分利用，資源閑置現(xiàn)象嚴重，社區(qū)資源整合程度低（張文彪，2018）243。1.1.2國外社區(qū)發(fā)展情況的研究“Acommunityisasocialunitthatsharescommonvalues,oragroupofinteractinglivingorganismssharinganenvironment.”這是維基百科的對于社區(qū)一詞的釋義，更能體現(xiàn)出外國人對于社區(qū)的認知。國外的社區(qū)發(fā)展相對國內(nèi)早一些，使用“plannedcommunity”的方法來規(guī)劃建立的占絕大多數(shù)?！皃lannedcommunity”的特點是預(yù)先策劃、整齊明晰，大多數(shù)建立在未開發(fā)的綠地之上，例如芬蘭的瓦薩、澳大利亞的堪培拉，都是典型。而最具代表性的“plannedcommunity”則是斯洛伐克的帕蒂贊斯克，設(shè)施齊全得更像一個小型城市。它于1938年和一座制鞋工廠一起被建立在一片平原之上，社區(qū)內(nèi)的絕大多數(shù)成年人都任職于這個工廠（Sobreira，2018）。帕蒂贊斯克的俯瞰圖如圖1-1所示。圖1-1帕蒂贊斯克經(jīng)過時間的沉淀，在外國的社區(qū)管理模式中，美國的自治型社區(qū)管理模式、日本地區(qū)的混合型社區(qū)管理模式以及新加坡的政府主導型社區(qū)管理模式這三種發(fā)展成為了標志性的社區(qū)管理模式類型，其管理特色值得參考。自治型社區(qū)管理模式：在這種管理模式下，政府行為和社區(qū)行為是沒有直接關(guān)系的，社區(qū)的工作完全自治，無論是聯(lián)邦政府還是地方政府都沒有權(quán)利干預(yù)社區(qū)事務(wù)。政府有關(guān)部門提供專項撥款，社區(qū)要進行一定的配合，同時通過各類社會團體及基金會來籌措一定的經(jīng)費。社區(qū)的高度自治使得美國社區(qū)管理基本上是“政府規(guī)劃、指導、資助，社區(qū)組織具體實施的運行方式”（李玉杰等，2018）138?；旌闲蜕鐓^(qū)管理模式：日本受西方文化傳統(tǒng)的影響形成了混合型社區(qū)管理模式。政府負責對社區(qū)的規(guī)劃、指導和經(jīng)費支持，政府管理和自治特征相結(jié)合。地域中心和社會團體組織相互配合，給社區(qū)自治、社區(qū)管理及其發(fā)展提供較大的發(fā)展空間。日本混合型社區(qū)是一種雙向管理模式，是政府行政管理部門和民間管理組織之間的共同協(xié)作（李玉杰等，2018）139。政府主導型社區(qū)管理模式：新加坡是一個文化多元化的國家，有著多種民族、宗教和文化傳統(tǒng)，因此社區(qū)建設(shè)不僅要注重社區(qū)物質(zhì)建設(shè)，更重要的是加強社區(qū)文化建設(shè)。新加坡根據(jù)地域范圍劃分為若干個社區(qū)發(fā)展理事會，負責實施本地域內(nèi)的管理工作，社區(qū)發(fā)展理事會下設(shè)多個選區(qū)，按照選區(qū)為單位設(shè)立公民咨詢委員會，負責與政府溝通，維護居民權(quán)益。社區(qū)管理的最基層組織是居民委員會，全國社區(qū)的總機構(gòu)是人民協(xié)會，是一個半官方性質(zhì)的社區(qū)管理機構(gòu)，具有法定地位。這種管理模式的社區(qū)主要經(jīng)費來源于社會贊助和政府撥款（李玉杰等，2018）139。1.2主要內(nèi)容最近這幾年，我國在各地的社區(qū)管理領(lǐng)域?qū)嵤┝硕囗椨袆?chuàng)新意義的試驗，取得了相當大的進步。但這并不代表著人們對現(xiàn)在的社區(qū)管理服務(wù)已經(jīng)心滿意足，正面面對并想辦法解決社區(qū)管理過程中發(fā)生的問題，才是正確、科學的方式。本文主要介紹的是智能手機接入小區(qū)管理系統(tǒng)設(shè)計。利用JavaScript、HTML等語言設(shè)計、創(chuàng)建一個簡易的小區(qū)管理系統(tǒng)，以瀏覽器為基礎(chǔ)運行平臺，實現(xiàn)智能手機接入小區(qū)管理系統(tǒng)設(shè)計，為用戶提供清爽的界面體驗以及實用的功能，讓居民更切實地感受到互聯(lián)網(wǎng)時代的信息技術(shù)給生活帶來的便捷、舒適和安全。網(wǎng)頁應(yīng)用相比于通常的原生應(yīng)用更為輕量，能為用戶帶來更好的體驗，而且可以通過改造升級為PWA，提供更完善的功能；此外，無需為不同設(shè)備的操作系統(tǒng)而做出不同的適配版本，因為應(yīng)用是工作在瀏覽器上的，可以多平臺共通。1.3預(yù)期目標通過使用本應(yīng)用，加強業(yè)主方與物業(yè)方之間的配合，減少不必要的摩擦和人員派遣，能夠為業(yè)主提供更舒心的社區(qū)環(huán)境，能夠為物業(yè)方提供更為有效率的管理能力，可謂是兩全其美。在系統(tǒng)開發(fā)過程中可以根據(jù)實際的需求，適當?shù)卦鰟h功能，現(xiàn)計劃完成以下幾個主要的目標：1.發(fā)布小區(qū)的重要消息、緊要告示，以及日常生活的實用信息；標示社區(qū)周邊的一些重要場所，如醫(yī)院、五金店等。用戶通過點擊新聞標題，可以獲取到更為詳細的內(nèi)容。2.業(yè)主的維修投訴頁面，住戶通過填寫描述信息，把具體情況傳達給物業(yè)方，物業(yè)方根據(jù)事件的種類、緊急程度等調(diào)度相關(guān)人員，更為有效地處理業(yè)主所遇到的問題，為業(yè)主提供優(yōu)質(zhì)的服務(wù)。3.日常繳費功能，住戶可以填寫準確信息來完成網(wǎng)上的代繳費，節(jié)省了不少時間。4.貼心服務(wù)功能，物業(yè)方能夠依據(jù)住戶填寫的信息，代替住戶完成一些任務(wù)，例如，臨時保管物品、特別關(guān)照老人子女等。第2章小區(qū)管理系統(tǒng)的需求分析2.1社區(qū)管理系統(tǒng)需求的抉擇經(jīng)過第一章的分析，可以發(fā)現(xiàn)國內(nèi)外的社區(qū)管理確實有很多不同之處，但這并不意味著其就沒有值得借鑒學習的地方。每種社區(qū)管理模式在當?shù)鬲氂械恼?、?jīng)濟和文化的影響下，不斷進化。每種成熟的管理模式都有其存在、發(fā)展至今的能力，只有吸取國外的優(yōu)秀方式，再結(jié)合本地特色稍加修改，才能創(chuàng)造出和諧高效的社區(qū)管理手段。表2-1具體展示了幾種典型模式之間的差別。表2-1不同社區(qū)管理模式主要特點比較一覽表類型特點自治型管理模式混合型管理模式政府主導型管理模式管理權(quán)力主體社區(qū)及自治組織社區(qū)和政府共同設(shè)立管理機構(gòu)政府設(shè)立管理部門為主導政府社區(qū)關(guān)系完全分離部分分離完全結(jié)合居民參與意識極強較強較弱管理運行機制社區(qū)組織廣泛參與政府支持，社區(qū)居民參與共同管理政府主持管理社區(qū)管理性質(zhì)社會占主導地位政府和社會相協(xié)同政府主導借著互聯(lián)網(wǎng)時代的優(yōu)勢，不少管理類型的應(yīng)用出現(xiàn)在人們面前，幫助業(yè)主去參與社區(qū)事務(wù)，但是需要坦承的是，這些應(yīng)用所提供的功能卻使其更像是一個購物類應(yīng)用，并且廣告的布置、插入也極大地降低了用戶的使用體驗以及使用欲望。居民需要切實地感受到互聯(lián)網(wǎng)時代信息技術(shù)給生活帶來的便捷、舒適和安全，但是這樣的“特色”卻“喧賓奪主”得有些明顯。讓社區(qū)的業(yè)主更多的參與進社區(qū)組織的健康向上的樂趣活動，不僅能夠增強業(yè)主與社區(qū)之間的聯(lián)系，而且可以豐富本地社區(qū)的精神屬性，營造出欣欣向榮、積極向上的生活氛圍。此外，社區(qū)內(nèi)部的組織也能借此機會宣傳自己的優(yōu)勢及作用，給予社區(qū)的業(yè)主列出更多的選擇。社區(qū)管理機構(gòu)需要更用心地協(xié)調(diào)政府與居民的關(guān)系，處事不能過于強硬、冷漠，要讓社區(qū)內(nèi)的居民更好地理解政府的相關(guān)政策、規(guī)范，要更順滑地推行相關(guān)的措施方法，要更積極地舉辦陽光有趣的活動，要更友善地處理鄰里之間的小摩擦，更有效地解決社區(qū)內(nèi)發(fā)生的問題，讓居民全身心地體會到社區(qū)生活的美好。2.2社區(qū)管理系統(tǒng)發(fā)展方向的分析新時代的科技發(fā)展日新月異，社會生產(chǎn)中的大多數(shù)行業(yè)都可以看到智能化管理的影子——AI更是一個燙手山芋，為社會的進步獻出了不可忽視的力量。其中，現(xiàn)代社區(qū)管理的智能化實踐引起了社會各界人民的高度重視。在黨的十九大報告中提出社會治理“社會化、法制化、智能化、專業(yè)化”要求的背景下，類型多樣化的國際化社區(qū)治理對于探索復雜社區(qū)治理的有效形式和路徑、推動形成更具包容性的城市發(fā)展形態(tài)具有極強的前瞻意義。通過對先進地區(qū)試點經(jīng)驗的調(diào)查和分析，可以看出中國正以開放的創(chuàng)新意識和強有力的執(zhí)政規(guī)劃，借助豐富的黨群政治資源，充分發(fā)揮社會組織和專業(yè)隊伍的力量，將中國的制度優(yōu)勢轉(zhuǎn)化為具體的社會治理效能（樊鵬，2018）57。新型社區(qū)治理，發(fā)揮著推動地方當局進行主動積極改革的作用——城市管理者和基層官僚隊伍會做出基于行政能力自保的理性選擇。引入大量專業(yè)機構(gòu)為街道以下的黨組織和居委會分憂，發(fā)展其成為居民服務(wù)供給的主體，是現(xiàn)有體制下的“唯一”選項，有利于把基層黨組織從具體、繁重的社區(qū)事務(wù)之中解放出來，也更有利于培育出健康高效的專業(yè)社會力量。從另一個角度來看，建設(shè)出高品質(zhì)多元化的智能社區(qū)、留住高科技的專業(yè)人才，是帶動地區(qū)產(chǎn)業(yè)升級和高端服務(wù)業(yè)發(fā)展的引擎，是推動城市向更高層次發(fā)展轉(zhuǎn)型的有效手段之一（樊鵬，2018）63。受到互聯(lián)網(wǎng)急速發(fā)展的影響，很多家具也已經(jīng)邁入了一個新的紀元——它們變得更加“聰明”，能理解使用者發(fā)出的一些“復雜”的要求，而社區(qū)管理同樣也借著智能化管理煥發(fā)了“新生”。小區(qū)車輛的智能識別、網(wǎng)上繳費、智能門鎖、社區(qū)WIFI等，這些新技術(shù)逐步融入人們的生活之中，給人們帶來了更好的生活體驗?，F(xiàn)在，互聯(lián)網(wǎng)通過光纖把世界各地的人們串聯(lián)起來；琳瑯滿目的應(yīng)用層出不窮，提供了諸多實用的功能，改變了人們的生活方式。而智能化社區(qū)，則在持續(xù)地提供新穎的服務(wù)，給人類帶來更優(yōu)質(zhì)的生活品質(zhì)。未來，社區(qū)管理系統(tǒng)必將更緊密地與智慧家居結(jié)合起來，在一個地方，用戶就能處理和社區(qū)日常生活相關(guān)的事物、為自己設(shè)計出一個理想的生活環(huán)境。第3章小區(qū)管理系統(tǒng)開發(fā)中的主要技術(shù)3.1HTML的技術(shù)應(yīng)用研究HTML（HypertextMarkupLanguage）——超文本標記語言——不是一種標準的編程語言；它是一種標記語言，它會教導瀏覽器如何去渲染將要訪問的網(wǎng)頁，目前主要使用的是它的第5個版本——HTML5，公開于2014年。它可以變得復雜，也可以變得簡單，這取決于開發(fā)者的選擇。HTML的“基本成員”是元素，它能夠包裝或標記內(nèi)容的不同部分，使其按照預(yù)先設(shè)計好的形式呈現(xiàn)在文檔樹中。HTML由位于第一行的“<!DOCTYPEhtml>”聲明，如果沒有聲明或者聲明寫錯了，瀏覽器就沒有辦法正常渲染頁面，一個最簡單的HTML文件的結(jié)構(gòu)如圖3-1所示。圖3-1HTML的結(jié)構(gòu)物理學家TimBerners-Lee在歐洲核研究組織工作時，為科學家們設(shè)計出一種可以在因特網(wǎng)上共享文件的方法，但是其介質(zhì)只能是通過郵件、FTP等來傳輸?shù)募兾谋疚募?。早期版本的HTML也試圖加入SGML大家族，但在HTML4之前的語法并沒有嚴格地遵守SGML的標準——因為HTML的定義就是“松散的”。SGML是一種語法及其復雜的標記語言，已經(jīng)不再適應(yīng)于現(xiàn)代互聯(lián)網(wǎng)的高速發(fā)展。因此，作為主管的W3C在制定新一代HTML標準時，決定脫離SGML的語法限制，把語言風格明朗化、簡潔化，讓其淺顯易懂，并且延續(xù)了部分HTML4的風格。開始標簽把一個約定好的值——元素名——括在尖括號內(nèi)，它表示這個元素在此生效；結(jié)束標簽與開始標記基本上是相同的，但多了一個正斜杠，它代表這個元素在此“收場”。內(nèi)容在獨特的元素中有不同的含義，如在圖3-2中代表著一段文本。上述的各個“部分”拼接起來便構(gòu)成了一個簡單的元素。不同類型的元素都有各自獨有的特點，也有共通的地方，這也是W3C所期望的“responsive”。元素也能夠獲得額外的屬性，屬性包含元素的一些附帶的、或是自有的有用的信息，不過這些重要的信息并不會直接展示給訪問的瀏覽者，通常被開發(fā)者用來設(shè)計網(wǎng)頁內(nèi)各區(qū)塊的樣式以增強視覺效果。圖3-2一個簡單元素的結(jié)構(gòu)因為HTML的處理對象是瀏覽器，所以它可以在不同的系統(tǒng)上給用戶帶來大致一樣的內(nèi)容呈現(xiàn)——如果使用同款瀏覽器的話，同時會為不同的界面（分辨率）做出不同程度的自適應(yīng)以提供更好的用戶體驗（Pachinko，2018）。3.2JavaScript的技術(shù)應(yīng)用研究JavaScript是世界上最流行的腳本語言，因為在互聯(lián)網(wǎng)上能夠瀏覽到的全部網(wǎng)頁以及衍生的HTML5應(yīng)用的交互邏輯都是由JavaScript實現(xiàn)的。1995年，美國的網(wǎng)景（Netscape）公司憑借Navigator瀏覽器成為了人類邁入Web時代后最有名的第一代互聯(lián)網(wǎng)公司。后來，網(wǎng)景公司想讓一些動態(tài)反饋可以在靜態(tài)網(wǎng)頁上體現(xiàn)出來，使網(wǎng)頁看起來“富有生命力”，讓網(wǎng)頁能夠與使用者“互動”。BrendanEich因此受命設(shè)計一種新的編程語言去實現(xiàn)這個目標，也就是JavaScript。經(jīng)過十幾年的發(fā)展，所有現(xiàn)代的HTML頁面都使用JavaScript來增強用戶與Web站點和Web應(yīng)用程序之間的交互（Canon，2017）。與HTML不同，JavaScript是輕量級的解釋型編程語言。通過編寫不同的代碼，可以創(chuàng)建動態(tài)更新的內(nèi)容，控制頁面渲染的內(nèi)容，以及更多。AngularJS是一個基于JavaScript的開源前端Web應(yīng)用程序框架，于2009年被開發(fā)出來，后來被Google公司收購?，F(xiàn)在主要由Google的AngularJS團隊和開發(fā)者社區(qū)來維護，以解決開發(fā)單頁面應(yīng)用程序時所遇到的許多問題。AngularJS調(diào)整、改寫了部分標準的HTML標簽和屬性，在降低代碼復雜度的同時，增強了腳本代碼的可讀性。得益于雙向的數(shù)據(jù)綁定，網(wǎng)頁中的一部分數(shù)據(jù)會被AngularJS拿來與JavaScript對象中對應(yīng)的值對比、更新。為了創(chuàng)建更易于測試的開發(fā)項目，AngularJS會誘導渲染引擎去處理依賴注入和交換控制。它還使用承諾（Promise）和延遲對象（defer）優(yōu)化處理原本復雜的異步回調(diào)過程（Aqra，2018）。2014年，原本的AngularJS團隊開始開發(fā)新一代Angular應(yīng)用平臺——Angular2.0，并通知各位開發(fā)者將會于2018年7月發(fā)布AngularJS的長期支持版本1.7。盡管AngularJS的版本停止在了1.x，但是這并不代表著它是一個落后、難以使用、性能差勁、被拋棄的框架，世界上仍有10%左右開發(fā)者依然選擇AngularJS作為他們的前端框架，社區(qū)中的討論也在繼續(xù)。Node.js問世于2009年，是一個基于ChromeV8引擎的JavaScript運行環(huán)境。Node.js使用的是由事件驅(qū)動的、非阻塞式I/O的事務(wù)處理模型。JavaScript其實是一個完整的編程語言——雖然在有些地方的規(guī)范不夠“嚴謹”。由于部分前端開發(fā)者通常寫得沒有那么規(guī)整，給人們留下了“JavaScript就是個‘玩具語言’”的壞印象。如果模塊化的JavaScript代碼運行在Node.js上的話，開發(fā)者就完全沒有解決瀏覽器兼容性問題的后顧之憂，并且能夠使用最新的ES6語法標準，完全滿足工程上的需求，足以設(shè)計出高性能的Web服務(wù)（佚名，2018）。Express.js是世界上最流行的基于Node.js的開源web框架，它高度包容、快速而極簡的，無需繁瑣的設(shè)置即可建立出表現(xiàn)優(yōu)秀的網(wǎng)站。各大論壇中關(guān)于它的討論帖的數(shù)量是一個巨大的數(shù)字，開發(fā)者們沒有任何理由不選擇它作為一個輕量級應(yīng)用的“后盾”（佚名，2018）。3.3MongoDB的技術(shù)應(yīng)用研究MongoDB（MongoDatabase）是使用C++語言編寫的一個基于分布式文件存儲的開源數(shù)據(jù)庫系統(tǒng)。MongoDB不是傳統(tǒng)的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)。在操作相當大量的數(shù)據(jù)時，NoSQL類數(shù)據(jù)庫能夠比傳統(tǒng)的關(guān)系型數(shù)據(jù)庫展現(xiàn)出更優(yōu)秀的表現(xiàn)。目前比較流行的Python，Java等多種語言都在MongoDB的支持列表中,MongoDB還為市場上主流的操作系統(tǒng)推出了各自的版本。NoSQL是“NotOnlySQL（不僅僅是SQL)”的簡寫形式。在2009年的一次關(guān)于分布式開源數(shù)據(jù)庫的會議上，來自Rackspace的EricEvans把“NoSQL”再次引入人們的視線，此刻的“NoSQL”代表的是非關(guān)系型、分布式、沒有提供“ACID”的數(shù)據(jù)庫設(shè)計模式。同年，“no:sql(east)”在亞特蘭大召開，它揮出了這項革命性運動的最濃墨重彩的一筆——讓世界再次意識到NoSQL類數(shù)據(jù)庫的優(yōu)勢。對彼時風靡全球的關(guān)系型數(shù)據(jù)庫來說，這一概念在全球范圍內(nèi)的盛行無疑讓人們瞠目結(jié)舌。時至今日，對“NoSQL”一詞最準確的解釋是，非關(guān)聯(lián)類型的，強調(diào)Key-ValueStores和文檔數(shù)據(jù)庫的優(yōu)點，而不是單純的反對傳統(tǒng)的關(guān)系數(shù)據(jù)庫管理系統(tǒng)（佚名，2018）。隨著互聯(lián)網(wǎng)上RIA網(wǎng)站的涌現(xiàn)，傳統(tǒng)的關(guān)系數(shù)據(jù)庫在配合新型網(wǎng)站，尤其是超大規(guī)模、高并發(fā)式的網(wǎng)站時已經(jīng)有些招架不住，暴露出來不少的問題。而“新”的非關(guān)系數(shù)據(jù)庫則借此機會取得了相當快速的進步，扎實地壯大自己的“根基”，開始蠶食原先由傳統(tǒng)的關(guān)系數(shù)據(jù)庫管理系統(tǒng)占據(jù)主要份額的全球市場。目前比較成熟的NoSQL類數(shù)據(jù)庫有Hbase，Redis，MongoDB以及Neo4J等。盡管它們都屬于NoSQL，但是每個庫仍是不同的類型，例如Hbase是列存儲類型，而MongoDB是文檔存儲類型，Neo4J則是圖存儲類型。MongoDB不限制每個鍵對應(yīng)的值的數(shù)目。比如一個新聞網(wǎng)站，有些新聞沒有讀者評論，那么它的值就是一個空集；有的新聞引發(fā)了讀者的熱烈討論，那么它的值就是擁有很多鍵值對的集合。除此之外，MongoDB沒有規(guī)定同一個集合里面的不同文檔必須要有相同的鍵。還以上面那個例子來說，有的文章可能沒有開放評論，不過這些不同的文檔都可以方便地存儲在MongoDB中，而且查詢起來也相當輕松，因為操作者不需要進行跨文檔查詢。MongoDB會把數(shù)據(jù)集中存放在一處，填充著數(shù)據(jù)的許許多多的鍵值對構(gòu)成了它的數(shù)據(jù)結(jié)構(gòu)，這與JSON文件的格式很像。前文曾經(jīng)提到過JavaScript對于網(wǎng)頁的重要性，因此，MongoDB的數(shù)據(jù)和應(yīng)用所使用的數(shù)據(jù)可以說是“無縫銜接”，這免除了很多轉(zhuǎn)換格式帶來的惱人問題。MongoDB中基本的概念，如圖3-3所示。圖3-3MongoDB特點Node.js和MongoDB能夠建立完整的“REST”服務(wù)。“REST”是一種基于HTTP定義一組約束和屬性的架構(gòu)風格，它允許開發(fā)者使用固定的接口輔助完成客戶端與服務(wù)器的通信過程。在REST風格的Web服務(wù)中，對URI的請求將觸發(fā)XML、JSON或其他格式的響應(yīng)返回。響應(yīng)可以確認對已經(jīng)存儲的資源進行的更改，并且能夠提供到別的有關(guān)聯(lián)的頁面的URL。除了基礎(chǔ)的自帶命令行工具，MongoDB同樣支持多種可視化工具來對存儲的數(shù)據(jù)進行各項操作，官方提供MongoDBCloudManager、MongoDBCompass，第三方軟件也有很多，如mongo-express、MongoChef、Robo3T。這些可視化工具減少了操作人員對于命令語句的依賴，大大降低了工作時的復雜度。3.4HTTPS的特點分析HTTP（HypertextTransferProtocol）——超文本傳輸協(xié)議——是一種能夠獲取網(wǎng)絡(luò)資源的通訊協(xié)議?，F(xiàn)代網(wǎng)絡(luò)上發(fā)生的數(shù)據(jù)的交換都依賴于它。HTTP網(wǎng)絡(luò)通信的幾個關(guān)鍵組成部分如圖3-4所示。圖3-4HTTP網(wǎng)絡(luò)通信HTTPS（HypertextTransferProtocolSecure）——超文本傳輸安全協(xié)議——是一種通過計算機網(wǎng)絡(luò)進行安全通信的傳輸協(xié)議。HTTPS的底層雖然使用HTTP實現(xiàn)網(wǎng)絡(luò)通信，但是它會使用SSL或者TLS來加密需要傳輸?shù)臄?shù)據(jù)包。大多數(shù)人知道，或者至少懷疑，通過公共互聯(lián)網(wǎng)連接購買物品是不明智的，但他們可能并不知道原因所在。其中一個原因是潛在的“中間人攻擊”——中間人攻擊是指有人把他自己插入到用戶和用戶正在訪問的網(wǎng)站的中間，并通過模仿雙方來獲取訪問敏感信息的權(quán)限，如密碼、信用卡數(shù)據(jù)。舉個簡單的例子，Ann在她最喜歡的咖啡店瀏覽百思買電子商務(wù)網(wǎng)站，并且想要買些什么。此時沒有任何辦法阻止一個惡意的中間人攻擊插入Ann和百思買的會話，他可以捕獲并且修改將要傳輸?shù)臄?shù)據(jù)。如果Ann此刻進行購買，他就能夠調(diào)整訂單數(shù)量或竊取她的全部身份信息。Ann和她訪問的網(wǎng)站都會落入危險之中。HTTPS增加了安全性，但不是全面的保護——已經(jīng)有一些人在設(shè)法“解決”認證過程。HTTPS現(xiàn)在還不夠完美，而且隨著時間的推移它會進一步改善。HTTPS開發(fā)的主要目的，是提供對網(wǎng)站服務(wù)器的身份認證，保護交換數(shù)據(jù)的隱私與完整性（KayceBasques，2018）。現(xiàn)在，幾乎所有類型的網(wǎng)站都在使用HTTPS“武裝”自己的網(wǎng)頁，保護個人用戶的敏感信息、網(wǎng)頁之間的通訊和訪問網(wǎng)頁時的私密性。HTTPS還提供了更為強大的全新網(wǎng)絡(luò)平臺功能，更新一些“老舊”的API，而且支持PWA的運行。一個擁有HTTPS證書的網(wǎng)站，會有圖3-5所示的彈窗提示。圖3-5HTTPS標示第4章小區(qū)管理系統(tǒng)設(shè)計與實現(xiàn)4.1小區(qū)管理系統(tǒng)總體設(shè)計本次設(shè)計以HTML作為骨架，構(gòu)建應(yīng)用的主體頁面，后端使用Express框架來維護創(chuàng)建好的“REST”服務(wù)，來確保前后端數(shù)據(jù)的流通；不同的頁面能夠去完成不同的功能，項目絕大部分數(shù)據(jù)存儲在MongoDB中。AngularJS是“MEAN”堆?！狹ongoDB數(shù)據(jù)庫、Express.js服務(wù)器框架、AngularJS前端框架和Node.js服務(wù)器運行時環(huán)境——的前端部分。用戶打開主頁，可以瀏覽到工作人員發(fā)布的社區(qū)新聞、臨時通知等，獲取到最新的消息；通過上方的導航欄跳轉(zhuǎn)到“表單”頁面，用戶可以填寫表單，提供詳細的要求或者信息來告知物業(yè)方自己有哪些事情需要解決處理；通過上方的導航欄跳轉(zhuǎn)到“周邊”頁面，用戶可以查看社區(qū)周圍的娛樂、體育、醫(yī)療等設(shè)施——這里使用重繪的地圖能更為清晰地標出地點；通過上方的導航欄跳轉(zhuǎn)到“聯(lián)系我”頁面，用戶可以查看社區(qū)內(nèi)部的一些機構(gòu)、組織的位置和聯(lián)系方式，快速滿足需求。屏幕的左下方設(shè)計了一個按鈕，點擊可以回到頂部，滑動可以喚出另外的功能按鈕來刷新頁面。管理端可以使用額外的頁面，來發(fā)布最新情況、社區(qū)活動等信息，也可以刪除過時、失效的新聞；用戶發(fā)來的表單信息，使用數(shù)據(jù)庫的可視化工具操作，更為安全、方便，幾乎沒有上手難度。首先安裝好本次設(shè)計所需的服務(wù)器運行時環(huán)境——Node.js——的長期支持版本，按照指導一步步安裝。MongoDB數(shù)據(jù)庫去官方網(wǎng)站下載即可，然后安裝。要注意一點，需要提前在安裝MongoDB的磁盤根目錄下新建一個data文件夾，之后才能使用各種方式——命令行或者GUI——正常訪問到MongoDB。本次設(shè)計使用的AngularJS版本號是1.6.9；AngularJS含有多個可以額外使用的模塊文件，每個文件都可以獨立使用，根據(jù)項目中的使用程度有選擇地放進項目文件夾，沒有使用到的就放在一邊。Express框架需要在npm窗口下載、全局安裝，Express４需要下載額外的express-generator包來進行基礎(chǔ)的操作。開發(fā)時使用Mongoose來連接到MongoDB并對其操作，使用nodemon包來解決實時刷新預(yù)覽的問題。本次設(shè)計選擇Chrome瀏覽器作為產(chǎn)品的測試平臺，使用的版本號為66.0.3359.181。Chrome瀏覽器可以實時模擬多個頁面，以檢測產(chǎn)品在各個終端上的效果。檢測各部分版本號，這是排查問題、搜索答案時重要的依據(jù)，如圖4-1所示。圖4-１版本號檢測4.2后端數(shù)據(jù)接口設(shè)計項目的目錄如圖4-2所示。圖4-2目錄結(jié)構(gòu)數(shù)據(jù)的結(jié)構(gòu)文件存放在models中，腳本、樣式表、圖片等資源放在public“公共”文件夾內(nèi)；routes文件夾里是路由文件，views文件夾里的是視圖文件——將要展示在瀏覽器上的主要內(nèi)容，package.json文件記錄著項目的依賴項等一系列基本信息，app.js文件是Express的“根基”，它設(shè)定了服務(wù)器的方法規(guī)則。在app.js中調(diào)用自帶的方法把Mongoose連接到本地已經(jīng)自動建立好的數(shù)據(jù)庫，具體的代碼如圖4-3所示。圖4-3Mongoose連接數(shù)據(jù)庫Mongoose提供一系列原生的方法來操作數(shù)據(jù)庫中的數(shù)據(jù)，這里不再詳細介紹。需要設(shè)計2個模板，1個用來規(guī)范管理方發(fā)布的信息，另1個用來規(guī)范用戶提交的表單信息。雖然使用的數(shù)據(jù)是無模式的，不過使全部的數(shù)據(jù)擁有一個規(guī)范合理的結(jié)構(gòu)會易于驗證信息的真實性。模板設(shè)計了3個屬性（內(nèi)容），分別是新聞標題、新聞內(nèi)容、具體時間；表單模板設(shè)計了7個屬性（內(nèi)容），分別是地點、是否解決、期待時間、聯(lián)系方式、事件詳情、事件種類、提交時間。如圖4-4，4-5所示。圖4-4新聞模板圖4-5表單模板通過在路由文件里面編寫的代碼，設(shè)計具體的頁面路徑，路徑設(shè)置使用/news/:id來展示新聞信息，詳細表單信息則對用戶隱藏，本次設(shè)計如圖4-6所示。圖4-6具體路由設(shè)置4.3前端界面設(shè)計使用AngularJS的factory方法創(chuàng)建2個服務(wù)，分別對應(yīng)后端2個數(shù)據(jù)接口，都使用封裝好的、高級的$resource服務(wù)替代$http與其通信，如圖4-7所示。圖4-7factory方法通過改寫尾部的$routeProvider，可以調(diào)整將要渲染的頁面，展示出不同的信息。為每個頁面指定各自的控制器，來改變能夠使用的功能。利用$resource獲取的數(shù)據(jù)暫時存儲在臨時創(chuàng)建的數(shù)組中，使用AngularJS內(nèi)置的ng-repeat指令從該數(shù)組取出數(shù)據(jù)的內(nèi)容，填充進HTML文檔中，展示給用戶，如圖4-8所示。圖4-8分配控制器的設(shè)置“周邊”頁面使用重繪的地圖來標示周邊的娛樂、體育、醫(yī)療設(shè)施，相比于接入百度地圖等地圖，能夠清晰地傳達給瀏覽者更多有效的信息，如圖4-9所示。圖4-9簡單的地圖“聯(lián)系我”頁面與周邊頁面設(shè)計的大同小異，地圖更換為社區(qū)內(nèi)部的結(jié)構(gòu)圖，指引用戶去了解本社區(qū)內(nèi)部的成員，下方會列出有效的聯(lián)系方式，如圖4-10所示。圖4-10示例地圖首頁展示了新聞列表，并且設(shè)計了一個輸入框去檢索過往的信息。頁面頂部引用了必應(yīng)的每日圖片，每天都有新的圖片呈現(xiàn)給用戶；后期也可以使用自建的圖庫，例如社區(qū)內(nèi)部景觀的攝影、社區(qū)居民生活中的攝影，如圖4-11所示。圖4-11首頁貼圖管理方可以進入到控制頁面，發(fā)布、修改新聞，這個地址只有管理員知道。填寫完必要的信息后，點擊發(fā)布按鈕，即可把新聞、活動、通知等公布給用戶；在列項頁面，管理方可以刪除已經(jīng)發(fā)布的消息，如圖4-12，4-13所示。圖4-12發(fā)布新聞頁面圖4-13管理頁面用戶發(fā)來的表單信息使用數(shù)據(jù)庫的可視化工具操作，容易上手，功能全面，更加安全。請求的事務(wù)由