HTML 汽車信息資訊系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)
時(shí)間：2023-09-18 21:06:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-18 21:06:01 來源：網(wǎng)站運(yùn)營(yíng)
HTML 汽車信息資訊系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)：
摘要
隨著人們對(duì)于汽車的需求越來越多，車輛的數(shù)量不斷增加。人們對(duì)于挑選汽車的方面有了大面積的廣泛需求。所以為了更便捷的為人們有一個(gè)方便的看車選車的平臺(tái)，此文章闡述了一個(gè)汽車資訊選購系統(tǒng)的開發(fā)過程。介紹了汽車資訊系統(tǒng)的開發(fā)環(huán)境工程與相應(yīng)使用的開發(fā)工具。我們?yōu)槿藗兲峁┝艘粋€(gè)現(xiàn)代化的資訊平臺(tái)，并且在文章中分別分析了各種功能的實(shí)現(xiàn)過程和思想設(shè)計(jì)過程，可以更清晰的展示出系統(tǒng)的功能實(shí)現(xiàn)。
汽車信息資訊系統(tǒng)的設(shè)計(jì)采用模塊化的設(shè)計(jì)思想，本系統(tǒng)中我們制定了一系列管理操作和交互信息。該系統(tǒng)在Windows操作系統(tǒng)環(huán)境下，搭建了HTML的運(yùn)行環(huán)境，為了響應(yīng)世界行業(yè)號(hào)召，不使用Flash控件和功能。通過Dreamweaver完成整個(gè)系統(tǒng)。采用了H5語言，CSS和JavaScript來實(shí)現(xiàn)靜態(tài)，交互，實(shí)現(xiàn)系統(tǒng)的主要功能。
該系統(tǒng)主要針對(duì)人們無法及時(shí)了解到的汽車資訊，資訊以及真實(shí)價(jià)格來進(jìn)行建立和補(bǔ)充。幫助人們了解相關(guān)問題，從而更有效地完成汽車銷售服務(wù)。從每種意義上來說，此系統(tǒng)對(duì)與境內(nèi)的4S店，直銷商等等都有著越來越多的好處。提升用戶的購車體驗(yàn)和及時(shí)了解相關(guān)資訊。有效提升客戶體驗(yàn)和汽車品牌的工作效率。
關(guān)鍵詞：效率 便捷 HTML5 相關(guān)資訊
AbstractWith the increasing demand for cars, the number of vehicles is increasing. There is a wide demand for the selection of cars. Therefore, in order to have a convenient platform for people to watch and choose cars, this paper describes the development process of an automobile information purchase system. This paper introduces the development environment engineering of automobile information system and the corresponding development tools. We provide a modern information platform for people, and in this paper, we analyze the realization process and design process of various functions, which can show the function realization of the system more clearly.
The design of automobile consultation and purchase system adopts the modular design idea. In this system, we have formulated a series of management operations and interactive information. In order to respond to the call of the world industry, the system does not use flash controls and functions. Complete the whole system through Dreamweaver. Using H5 language, CSS and JavaScript to achieve static, interactive, to achieve the main functions of the system.
The system mainly aims at the establishment and supplement of automobile information, consultation and real price that people can't understand in time. Help people understand the relevant issues, so as to more effectively complete the car sales service. In every sense, this system has more and more benefits for domestic 4S stores, direct sellers and so on. Improve the user's car purchase experience and timely understand the relevant information. Effectively improve the customer experience and the work efficiency of automobile brand.
Key words: efficiency, convenience, HTML5 related information
目錄摘要 I
Abstract II
第一章 緒論 1
1.1 本文研究課題背景及意義 1
1.2 本文的基本內(nèi)容和關(guān)鍵問題 1
1.3 系統(tǒng)完成目標(biāo) 2
第二章 系統(tǒng)分析 3
2.1需求分析 3
2.1.1 用戶需求分析 3
2.1.2 系統(tǒng)需求分析 3
2.2 可行性分析 3
2.2.1 技術(shù)可行性 3
2.2.2 經(jīng)濟(jì)可行性 3
2.2.3 使用可行性 4
2.3 開發(fā)工具和語言 4
2.3.1 Adobe Dreamweaver集成開發(fā)環(huán)境 4
2.3.2 MySQL數(shù)據(jù)庫 4
2.3.3 HTML5 5
2.3.4 CSS 5
2.3.5 JavaScript 6
2.3.6 SQL 6
第三章 系統(tǒng)總體設(shè)計(jì) 8
3.1 系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì) 8
3.1.1 設(shè)計(jì)思想 8
3.1.2 網(wǎng)站模塊分類設(shè)計(jì) 9
3.1.2 系統(tǒng)各功能模塊設(shè)計(jì) 9
第四章 詳細(xì)設(shè)計(jì) 11
4.1 登錄模塊 11
4.2 注冊(cè)模塊 12
4.3 創(chuàng)作者模塊 13
4.4 用戶管理模塊 16
4.5 管理員信息管理模塊 20
4.6 反饋模塊 23
4.7 查詢模塊 24
4.8 數(shù)據(jù)庫設(shè)計(jì) 25
4.8.2 數(shù)據(jù)庫設(shè)計(jì)思路 25
4.8.3 數(shù)據(jù)庫概念設(shè)計(jì) 26
4.8.4 數(shù)據(jù)庫邏輯設(shè)計(jì) 26
第五章 系統(tǒng)實(shí)現(xiàn) 29
5.1 數(shù)據(jù)庫的實(shí)現(xiàn) 29
5.2 系統(tǒng)功能 31
5.2.1 登錄模塊 31
5.2.2 注冊(cè)模塊 34
5.2.3 用戶模塊 36
5.2.4 后臺(tái)模塊 39
5.2.5 咨詢發(fā)布模塊 41
5.2.6 用戶反饋模塊 43
第六章 系統(tǒng)測(cè)試 45
6.1 測(cè)試技術(shù) 45
6.2 版本更新記錄 45
6.3 接口測(cè)試 45
6.4 實(shí)際功能測(cè)試 46
6.4.1 注冊(cè)模塊測(cè)試 46
6.4.2 登錄模塊測(cè)試 46
6.4.3 主頁瀏覽測(cè)試 47
6.4.4 用戶模塊測(cè)試 48
6.4.5 發(fā)布模塊測(cè)試 49
6.4.6 反饋模塊測(cè)試 49
6.4.7 測(cè)試環(huán)境 50
6.4.8用戶體驗(yàn) 50
6.5 系統(tǒng)測(cè)試結(jié)果 50
結(jié) 論 51
參考文獻(xiàn) 52
致 謝 53
第一章 緒論1.1 本文研究課題背景及意義經(jīng)濟(jì)的迅速發(fā)展，帶動(dòng)了各行業(yè)的快速進(jìn)步與發(fā)展。人們的生活水平也隨之提高，“汽車”也已經(jīng)不再是家庭消費(fèi)中的奢侈品，反倒是之間成為了必需品。汽車已經(jīng)越來越多的進(jìn)入到尋常百姓家中。購買汽車的企業(yè)、家庭、個(gè)人越來越多，汽車消費(fèi)群體日趨壯大，帶動(dòng)了整個(gè)汽車產(chǎn)業(yè)的迅猛發(fā)展。隨著汽車市場(chǎng)的競(jìng)爭(zhēng)越來越激烈，汽車的銷售、選擇、咨詢、發(fā)布等等服務(wù)渠道的健全日益成為企業(yè)發(fā)展壯大的必要因素。
背景：隨著計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的不斷進(jìn)步和電子商務(wù)的日漸成熟，使得人們不再滿足于以往的購車咨詢服務(wù)等方式，渴望通過互聯(lián)網(wǎng)查詢和購買子的鐘愛的汽車，享受網(wǎng)上咨詢訂購所帶來的更多的便利。截止至今，消費(fèi)者們想要咨詢購車價(jià)格，和具體總價(jià)都要前往經(jīng)銷商或者4s店內(nèi)，非常的不方便和對(duì)價(jià)格的把控也不準(zhǔn)確。為了滿足廣大百姓的需求，越來越多的汽車服務(wù)網(wǎng)站也就應(yīng)運(yùn)而生。
意義：此次項(xiàng)目在結(jié)合當(dāng)今主流的開發(fā)技術(shù)和實(shí)際需求的情況下，對(duì)信息資訊系統(tǒng)在現(xiàn)代生活中的重要性和必要性，完成了汽車信息資訊系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)。該項(xiàng)目利用前后端分布式設(shè)計(jì)對(duì)傳統(tǒng)開發(fā)方式就行了改進(jìn)，在用戶需求方面進(jìn)行了整合，提高了用戶使用舒適性和系統(tǒng)的高可用性。
1.2 本文的基本內(nèi)容和關(guān)鍵問題本課題的基本內(nèi)容：
1.交互形式
架構(gòu)中前端比較重要，后端只需要顯示前端的基本信息。前后端之間通過Mysql數(shù)據(jù)庫進(jìn)行數(shù)據(jù)交互，前端獲取數(shù)據(jù)返回到數(shù)據(jù)庫，后端再另行調(diào)用。
2.代碼組織方式
前后端代碼是非分離方式，通過HTTP鏈接進(jìn)行交互。但是互不影響底層邏輯和代碼，可以支持前端獨(dú)立開發(fā)和測(cè)試，后端因?yàn)閮H僅是傳入數(shù)據(jù)和少量需要權(quán)限的傳輸交互，所以可以保障一定的安全性。
3.開發(fā)模式
前端和后端屬于分布式開發(fā)，前端工程師只需要編寫HTML、JavaScript、CSS等前端資源，然后只要通過HTTP鏈接后端和數(shù)據(jù)庫交互數(shù)據(jù)。
1.3 系統(tǒng)完成目標(biāo)主要目標(biāo)：
- 能夠劃分明確的分類和信息分類顯示。
- 能實(shí)現(xiàn)注冊(cè)登錄功能。
- 能夠?qū)崿F(xiàn)申請(qǐng)成為創(chuàng)作者的顯示功能。
- 能夠?qū)崿F(xiàn)車輛圖片顯示功能。
- 能夠?qū)崿F(xiàn)管理員管理功能
第二章 系統(tǒng)分析
2.1需求分析
2.1.1 用戶需求分析用戶使用此資訊系統(tǒng)能夠更好地對(duì)本地汽車價(jià)格,車主成交價(jià)格和本地品牌服務(wù)質(zhì)量等有清晰的認(rèn)知，對(duì)逐漸龐大的汽車信息進(jìn)行有效的處理。避免產(chǎn)生大量的重復(fù)內(nèi)容影響用戶判斷。
還能夠更加快捷的幫助資訊內(nèi)容創(chuàng)作者帶來收入和流量，為自媒體時(shí)代籌備力量。
2.1.2 系統(tǒng)需求分析此系統(tǒng)設(shè)計(jì)的是一個(gè)小型信息資訊系統(tǒng)，能夠?yàn)樵S多關(guān)心車的用戶和品牌商提供一個(gè)網(wǎng)絡(luò)線上的非直接交流平臺(tái)。實(shí)現(xiàn)查看最新資訊，發(fā)布咨詢創(chuàng)作收入，品牌推廣等民商結(jié)合一體化。面對(duì)未來的趨勢(shì)走向，網(wǎng)絡(luò)線上式的交流推廣效率會(huì)高很多很多。
本系統(tǒng)的用戶可以在汽車信息資訊系統(tǒng)中實(shí)現(xiàn)瀏覽信息，發(fā)布評(píng)論，發(fā)表文章，創(chuàng)作收益，收藏等功能。管理員可以通過MySQL數(shù)據(jù)庫進(jìn)行數(shù)據(jù)的監(jiān)察，管理，審核，修改等功能。
2.2 可行性分析
可行性分析是通過對(duì)項(xiàng)目的主要內(nèi)容和配套條件，如市場(chǎng)需求、資源供應(yīng)、建設(shè)規(guī)模、工藝路線、環(huán)境影響、等，從技術(shù)、經(jīng)濟(jì)、使用等方面進(jìn)行調(diào)查研究和分析比較，為項(xiàng)目決策提供依據(jù)的一種綜合性的系統(tǒng)分析方法?？尚行苑治鰬?yīng)具有預(yù)見性、公正性、可靠性、科學(xué)性的特點(diǎn)。
系統(tǒng)的實(shí)現(xiàn)需要基本的技術(shù)保障，在可行性分析上，經(jīng)過我在院校的5年學(xué)習(xí)與實(shí)踐，對(duì)于需要使用的技術(shù)和基礎(chǔ)理論都具有，并且可以熟練使用開發(fā)工具。具有研發(fā)和制作系統(tǒng)的基本要求。同時(shí)在經(jīng)濟(jì)和運(yùn)行上也具備基本的條件。
2.2.1 技術(shù)可行性隨著計(jì)算機(jī)技術(shù)在中國的不斷完善，能夠使用計(jì)算機(jī)進(jìn)行更多的開發(fā)，實(shí)現(xiàn)更加復(fù)雜的功能，并且在 HTML這門編程語言的數(shù)十年發(fā)展后，已經(jīng)能夠使用 Dreamweaver更加簡(jiǎn)單的開發(fā)系統(tǒng)網(wǎng)站，利用 HTML5編程語言可以提高計(jì)算機(jī)工作效率。在程序設(shè)計(jì)前期通過對(duì)汽車信息資訊網(wǎng)站系統(tǒng)的調(diào)研得到明確的客戶需求，有著充足的開發(fā)時(shí)間，明確的開發(fā)需求以及自身扎實(shí)的基本功之下，能夠很好的對(duì)系統(tǒng)進(jìn)行開發(fā)，不具備很高的阻礙開發(fā)的技術(shù)難點(diǎn)。
2.2.2 經(jīng)濟(jì)可行性汽車在中國的發(fā)展已經(jīng)非常繁榮，在每個(gè)城市的每年汽車銷量都在急劇增加，基于中國國土的廣闊和人口優(yōu)勢(shì)，每家汽車廠商都有大量的消費(fèi)者，但是隨之誕生的消費(fèi)者和汽車品牌的糾紛和爭(zhēng)論也在不斷增加，以至于現(xiàn)在人們對(duì)于4S店等或汽車經(jīng)銷商都有著莫名的仇視和不信任。所以集合與許多資訊的汽車資訊網(wǎng)站就有著相當(dāng)大的作用。這個(gè)系統(tǒng)既可以幫助人們辨別各種車輛的優(yōu)點(diǎn)與缺點(diǎn)，也能讓用戶更簡(jiǎn)單快捷放心的挑選自己所需要的，同時(shí)吸引眾多品牌和資訊創(chuàng)作者來集合巨型流量和品牌效應(yīng)的產(chǎn)生，在市場(chǎng)上取得較高的收益。
汽車信息資訊系統(tǒng)使用的是開源的HTML5編程語言，采用的數(shù)據(jù)庫也是阿里云的MySql數(shù)據(jù)庫，同樣免費(fèi)的Dreamwerver教育版，所以開發(fā)成本較低，在經(jīng)濟(jì)上是可行的。
2.2.3 使用可行性在開發(fā)系統(tǒng)的時(shí)候就想到使用這個(gè)系統(tǒng)的只有管理人員和用戶，所以分布式的開發(fā)可以節(jié)省很多不方便的交互。所以界面帶著現(xiàn)代美觀，簡(jiǎn)單易用的設(shè)計(jì)。而且互聯(lián)網(wǎng)在中國已經(jīng)發(fā)展了這么多年，大部分人都能使用簡(jiǎn)單的軟件，所以汽車信息資訊系統(tǒng)在使用上完全不具備任何難度，同時(shí)系統(tǒng)的開發(fā)都沒有違反法律要求，同時(shí)網(wǎng)站域名都是用的是阿里云的服務(wù)器，也是經(jīng)過合法備案的，功能上也沒有觸犯法律法規(guī)，在使用過程中不用擔(dān)心違反相關(guān)任何規(guī)定。
2.3 開發(fā)工具和語言本系統(tǒng)使用HTML5+CSS+JavaScript語言Dreamwerver 2020工具開發(fā)，主界面清晰顯示主頁，界面美觀，使用方便。所有功能均使用控件代碼和js實(shí)現(xiàn)。不同界面分別用獨(dú)立html文件來承擔(dān)，這樣整理起來方便快捷，可以盡量減少bug出現(xiàn)。
2.3.1 Adobe Dreamweaver集成開發(fā)環(huán)境Adobe Dreamweaver，簡(jiǎn)稱“DW”，最初為美國MACROMEDIA公司開發(fā)，2005年被Adobe公司收購。DW是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁代碼編輯器。利用對(duì) HTML、CSS、JavaScript等內(nèi)容的支持，設(shè)計(jì)師和程序員可以在幾乎任何地方快速制作和進(jìn)行網(wǎng)站建設(shè)。
Adobe Dreamweaver使用所見即所得的接口，亦有HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）編輯的功能，借助經(jīng)過簡(jiǎn)化的智能編碼引擎，輕松地創(chuàng)建、編碼和管理動(dòng)態(tài)網(wǎng)站。訪問代碼提示，即可快速了解 HTML、CSS 和其他Web 標(biāo)準(zhǔn)。 使用視覺輔助功能減少錯(cuò)誤并提高網(wǎng)站開發(fā)速度。
2.3.2 MySQL數(shù)據(jù)庫MySQL是一個(gè)關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，由瑞典MySQL AB 公司開發(fā)，屬于 Oracle 旗下產(chǎn)品。MySQL 是最流行的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)之一，在 WEB 應(yīng)用方面，MySQL是最好的 RDBMS (Relational Database Management System，關(guān)系數(shù)據(jù)庫管理系統(tǒng)) 應(yīng)用軟件之一。
MySQL是一種關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，關(guān)系數(shù)據(jù)庫將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個(gè)大倉庫內(nèi)，這樣就增加了速度并提高了靈活性。
MySQL所使用的 SQL 語言是用于訪問數(shù)據(jù)庫的最常用標(biāo)準(zhǔn)化語言。MySQL 軟件采用了雙授權(quán)政策，分為社區(qū)版和商業(yè)版，由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點(diǎn)，一般中小型網(wǎng)站的開發(fā)都選擇 MySQL 作為網(wǎng)站數(shù)據(jù)庫。
2.3.3 HTML5HTML5是構(gòu)建Web內(nèi)容的一種語言描述方式。HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語言方式．被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)，并廣泛應(yīng)用于互聯(lián)網(wǎng)應(yīng)用的開發(fā)。
HTML5是Web中核心語言HTML的規(guī)范，用戶使用任何手段進(jìn)行網(wǎng)頁瀏覽時(shí)看到的內(nèi)容原本都是HTML格式的，在瀏覽器中通過一些技術(shù)處理將其轉(zhuǎn)換成為了可識(shí)別的信息。HTML5在從前HTML4.01的基礎(chǔ)上進(jìn)行了一定的改進(jìn)，雖然技術(shù)人員在開發(fā)過程中可能不會(huì)將這些新技術(shù)投入應(yīng)用，但是對(duì)于該種技術(shù)的新特性，網(wǎng)站開發(fā)技術(shù)人員是必須要有所了解的。
同時(shí)HTML5也將是未來很長(zhǎng)時(shí)間內(nèi)最流行的網(wǎng)站開發(fā)語言，因?yàn)镕lash已經(jīng)被拋棄，HTML5將代替曾經(jīng)Flash的統(tǒng)治地位。
HTML5將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，在這個(gè)平臺(tái)上，視頻、音頻、圖像、動(dòng)畫以及與設(shè)備的交互都進(jìn)行了規(guī)范。
2.3.4 CSS層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力。
從HTML被發(fā)明開始，樣式就以各種形式存在。不同的瀏覽器結(jié)合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。
隨著HTML的成長(zhǎng)，為了滿足頁面設(shè)計(jì)者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。于是CSS便誕生了。
CSS為HTML標(biāo)記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設(shè)計(jì)領(lǐng)域是一個(gè)突破。利用它可以實(shí)現(xiàn)修改一個(gè)小的樣式更新與之相關(guān)的所有頁面元素。
2.3.5 JavaScriptJavaScript（簡(jiǎn)稱“JS”） 是一種具有函數(shù)優(yōu)先的輕量級(jí)，解釋型或即時(shí)編譯型的編程語言。雖然它是作為開發(fā)Web頁面的腳本語言而出名，但是它也被用到了很多非瀏覽器環(huán)境中，JavaScript 基于原型編程、多范式的動(dòng)態(tài)腳本語言，并且支持面向?qū)ο?、命令式和聲明式（如函?shù)式編程）風(fēng)格。
主要特點(diǎn)：
1.嵌入動(dòng)態(tài)文本于HTML頁面。
2.對(duì)瀏覽器事件做出響應(yīng)。
3.讀寫HTML元素。
4.在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。
5.檢測(cè)訪客的瀏覽器信息， 控制cookies，包括創(chuàng)建和修改等。
6.基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
JavaScript是一種屬于網(wǎng)絡(luò)的高級(jí)腳本語言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動(dòng)態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實(shí)現(xiàn)自身的功能的。
1.是一種解釋性腳本語言（代碼不進(jìn)行預(yù)編譯）。
2.主要用來向HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）頁面添加交互行為。 [7]
3.可以直接嵌入HTML頁面，但寫成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離。 [7]
4.跨平臺(tái)特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下運(yùn)行（如Windows、Linux、Mac、Android、iOS等）。
2.3.6 SQL結(jié)構(gòu)化查詢語言(Structured Query Language)簡(jiǎn)稱SQL，是一種特殊目的的編程語言，是一種數(shù)據(jù)庫查詢和程序設(shè)計(jì)語言，用于存取數(shù)據(jù)以及查詢、更新和管理關(guān)系數(shù)據(jù)庫系統(tǒng)。
結(jié)構(gòu)化查詢語言是高級(jí)的非過程化編程語言，允許用戶在高層數(shù)據(jù)結(jié)構(gòu)上工作。它不要求用戶指定對(duì)數(shù)據(jù)的存放方法，也不需要用戶了解具體的數(shù)據(jù)存放方式，所以具有完全不同底層結(jié)構(gòu)的不同數(shù)據(jù)庫系統(tǒng), 可以使用相同的結(jié)構(gòu)化查詢語言作為數(shù)據(jù)輸入與管理的接口。結(jié)構(gòu)化查詢語言語句可以嵌套，這使它具有極大的靈活性和強(qiáng)大的功能。
SQL可以獨(dú)立完成數(shù)據(jù)庫生命周期中的全部活動(dòng)，包括定義關(guān)系模式、錄入數(shù)據(jù)、建立數(shù)據(jù)庫、査詢、更新、維護(hù)、數(shù)據(jù)庫重構(gòu)、數(shù)據(jù)庫安全性控制等一系列操作，這就為數(shù)據(jù)庫應(yīng)用系統(tǒng)開發(fā)提供了良好的環(huán)境，在數(shù)據(jù)庫投入運(yùn)行后，還可根據(jù)需要隨時(shí)逐步修改模式，且不影響數(shù)據(jù)庫的運(yùn)行，從而使系統(tǒng)具有良好的可擴(kuò)充性。
第三章 系統(tǒng)總體設(shè)計(jì)
3.1 系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì)
3.1.1 設(shè)計(jì)思想選擇采用分布式開發(fā)，分布設(shè)計(jì)和互動(dòng)是分布式開發(fā)中最重要的問題之一，但鑒于單人開發(fā)，這個(gè)問題就不是特別重要了。在集成式開發(fā)下使得每個(gè)模塊實(shí)現(xiàn)相應(yīng)的功能，每個(gè)模塊單獨(dú)開發(fā)，降低模塊之間的耦合程度，減少bug和過多的開發(fā)負(fù)擔(dān)。所以這樣開發(fā)十分符合軟件開發(fā)所需要的高內(nèi)聚低耦合的開發(fā)要求。每個(gè)模塊也能更加自主，提高開發(fā)效率，層次清晰。并且這種開發(fā)方式使得程序的錯(cuò)誤能夠很好的被發(fā)現(xiàn)和解決，便于人員維護(hù)此程序。
圖3-1 總體結(jié)構(gòu)流程圖
3.1.2 網(wǎng)站模塊分類設(shè)計(jì)根據(jù)系統(tǒng)分析的結(jié)果，按照結(jié)構(gòu)功能分類化的系統(tǒng)分類設(shè)計(jì)方法，汽車信息資訊系統(tǒng)從功能由用戶登陸注冊(cè)模塊，創(chuàng)作者模塊，管理員后臺(tái)模塊，資訊信息模塊，申訴模塊，添加模塊，查詢模塊等組成，各模塊的簡(jiǎn)要功能說明如表3-1。
表3-1 各模塊的簡(jiǎn)要功能概述
| 模塊名 | 功能簡(jiǎn)介 |
| 登陸模塊 | 用于普通用戶的登陸。 |
| 注冊(cè)模塊 | 用于普通用戶的注冊(cè)。 |
| 創(chuàng)作者模塊 | 用于普通用戶申請(qǐng)成為創(chuàng)作者后發(fā)布資訊和基本的獨(dú)立審核管理功能。 |
| 用戶管理模塊 | 管理所有除管理員外所有用戶的信息，包括修改信息，刪除信息，審核信息，批準(zhǔn)等相關(guān)功能。 |
| 管理員后臺(tái)模塊 | 管理系統(tǒng)所有的汽車信息新聞等信息，和用戶評(píng)論或?qū)徍藙?chuàng)作者發(fā)表的文稿新聞。 |
| 反饋模塊 | 是面對(duì)除管理員外所有用戶的疑問處理和相關(guān)反饋功能。 |
| 查詢模塊 | 查詢用戶想要知道相關(guān)的內(nèi)容 |
3.1.2 系統(tǒng)各功能模塊設(shè)計(jì)管理人員的管理功能
該系統(tǒng)的信息量很大，保存數(shù)據(jù)的安全性和完整性要求很高。本系統(tǒng)功能可以使管理員輕松實(shí)現(xiàn)對(duì)所有用戶、信息實(shí)施管理和網(wǎng)站系統(tǒng)情況進(jìn)行統(tǒng)計(jì)，方便維護(hù)和及時(shí)發(fā)現(xiàn)問題?？梢詭椭脩敉ǔ？梢院芊奖愕倪M(jìn)行瀏覽，查詢，添加，刪除，修改，統(tǒng)計(jì)等。模塊功能圖如下圖3-2所示。
圖3-2 模塊功能圖
管理員、創(chuàng)作者、用戶權(quán)限如下圖3-3用戶實(shí)例圖所示。
圖3-3 用戶實(shí)例圖
第四章 詳細(xì)設(shè)計(jì)
4.1 登錄模塊
由于網(wǎng)絡(luò)系統(tǒng)自身不可能有著絕對(duì)的安全性，雖然非絕對(duì)安全本身不會(huì)對(duì)網(wǎng)絡(luò)系統(tǒng)造成直接破壞，但是一旦具有不良行為的攻擊者所利用，如登陸網(wǎng)站找到用戶系統(tǒng)的漏洞。將不可避免地給數(shù)據(jù)庫和用戶帶來很大的風(fēng)險(xiǎn)。所以在這個(gè)模塊的設(shè)計(jì)中，要求用戶必須輸入正確且有效的用戶名和密碼，若滿足登陸條件，則用戶進(jìn)入主界面，可以開始使用此系統(tǒng)，若輸入賬號(hào)或密碼錯(cuò)誤，則提示錯(cuò)誤信息，以便用戶正確登錄。在用戶登錄按鈕點(diǎn)擊的時(shí)候，系統(tǒng)后臺(tái)開始檢測(cè)用戶名和密碼，若正確，后臺(tái)為用戶生成一串標(biāo)識(shí)，通過標(biāo)識(shí)方便用戶進(jìn)行后面的操作。登錄流程如圖4-1所示。
圖4-1 登錄模塊流程圖
4.2 注冊(cè)模塊
該模塊主要實(shí)現(xiàn)注冊(cè)功能，進(jìn)入系統(tǒng)首先需要注冊(cè)登錄才能進(jìn)入網(wǎng)站系統(tǒng)主頁，以供用戶瀏覽相關(guān)信息。所以在這個(gè)頁面內(nèi)，所有用戶都需要輸入自定義用戶名、密碼、手機(jī)號(hào)等等相關(guān)信息，并且符合輸入框的正確字符格式規(guī)則才可以注冊(cè)成功。如果失敗系統(tǒng)會(huì)提示，并重新輸入信息進(jìn)行注冊(cè)，這也是為了防止惡意破壞的一層防護(hù)。注冊(cè)流程圖如圖4-2所示。
圖4-2 注冊(cè)模塊流程圖
4.3 創(chuàng)作者模塊
創(chuàng)作者是近年來受個(gè)平臺(tái)歡迎的一個(gè)位置，畢竟一個(gè)資訊網(wǎng)站的信息更新和資訊更新只依靠單一的開發(fā)者尋找的信息只會(huì)令系統(tǒng)的信息時(shí)效性嚴(yán)重下降，不能保證資訊的全面更新和及時(shí)更新。而創(chuàng)作者是全面的，廣泛的，數(shù)量極多的群體，他們涵蓋區(qū)域廣，關(guān)系鏈復(fù)雜而多。對(duì)于幫助網(wǎng)站系統(tǒng)信息的更新有著巨大的作用，也可以減少開發(fā)者對(duì)于信息資訊方面的成本與負(fù)擔(dān)。此模塊可以根據(jù)創(chuàng)作者投稿的信息資訊的點(diǎn)擊量和點(diǎn)贊量等流量大小的綜合判定給予一定的獎(jiǎng)勵(lì)。作為創(chuàng)作者，可以進(jìn)行投稿，審核自身投稿資訊的評(píng)論，領(lǐng)取收益的操作。通過這些功能，可以對(duì)自己的創(chuàng)作投稿進(jìn)行有效管理。創(chuàng)作者投稿流程圖如圖4-3。
圖4-3 創(chuàng)作者投稿流程圖
創(chuàng)作者管理流程圖如下圖4-4
圖4-4 創(chuàng)作者管理流程圖
創(chuàng)作者收益流程圖如下圖4-5
圖4-5 創(chuàng)作者收益流程圖
創(chuàng)作者用戶模塊的功能主要包括：用戶登錄、用戶注冊(cè)、投稿、審核稿件評(píng)論、流量收益等概念性子模塊。創(chuàng)作者用戶模塊的功能模塊圖如圖4-6所示。
圖4-6 創(chuàng)作者用戶功能圖
4.4 用戶管理模塊
用戶是一個(gè)網(wǎng)站系統(tǒng)的支撐，是最基礎(chǔ)也最重要的東西。一個(gè)網(wǎng)站系統(tǒng)想要擁有更多的用戶，就需要打造利于用戶交互、瀏覽、操作方便的系統(tǒng)功能。用戶管理模塊是對(duì)用戶進(jìn)行修改自身的姓名，手機(jī)號(hào)，身份證號(hào)，評(píng)論，收藏等方面的功能管理模塊。這些功能有利于用戶更好的操作系統(tǒng)和瀏覽。用戶信息修改流程圖如圖4-7所示。
圖4-7 用戶信息修改流程圖
用戶評(píng)論管理流程圖如下圖4-8
圖4-8 用戶評(píng)論管理流程圖
用戶收藏管理流程圖如下圖4-9
圖4-9 用戶收藏管理流程圖
普通用戶模塊的功能主要包括：用戶登錄、用戶注冊(cè)、信息修改、信息查詢、資訊評(píng)論、信息收藏等概念性子模塊。普通用戶模塊的功能模塊圖如圖4-10所示。
圖4-10 普通用戶功能圖
4.5 管理員信息管理模塊
使用信息化系統(tǒng)對(duì)汽車信息資訊系統(tǒng)進(jìn)行管理，如果不能滿足規(guī)范清晰的顯示資訊信息的話，可能這個(gè)系統(tǒng)就不能滿足用戶的需求。同時(shí)信息化的系統(tǒng)管理能更方便的查看用戶的信息和對(duì)信息資訊的各種審查行為。所以在本系統(tǒng)中為汽車信息資訊系統(tǒng)管理員提供了快捷的管理信息板塊的功能，這樣才能為用戶帶來更好的體驗(yàn)。在這個(gè)模塊中管理員擁有幾乎所有的權(quán)限，用來管理資訊信息的添加刪除修改等，管理用戶的各種信息以及各種審核審查活動(dòng)。為健康文明的環(huán)境做出有效的舉措，還管理著資訊的各方面。系統(tǒng)用戶信息審查流程圖如圖4-11。
圖4-11 系統(tǒng)用戶信息審查流程圖
信息資訊管理流程圖如下圖4-12。
圖4-12 信息資訊管理流程圖
管理員信息管理模塊的功能主要包括：管理員登錄、普通用戶管理、創(chuàng)作者用戶管理、信息資訊管理、審查、公告欄等概念性子模塊。普通用戶模塊的功能模塊圖如圖4-13所示。
圖4-13 管理員信息管理功能模塊圖
4.6 反饋模塊
網(wǎng)站和系統(tǒng)不可能存在完美無缺的，在使用的過程中一定會(huì)遇到使用問題或者bug。單靠開發(fā)者是無法發(fā)現(xiàn)太多的隱性bug和問題。很多問題都是需要在不斷的使用中被發(fā)現(xiàn)出來。這就需要用戶們的使用反饋了。
用戶如果發(fā)現(xiàn)問題和bug可以及時(shí)反饋給開發(fā)者或管理員，這樣及時(shí)發(fā)現(xiàn)和修復(fù)就可以避免問題的長(zhǎng)期存在，能明顯改善用戶的使用環(huán)境和交互舒適度，對(duì)于增加用戶粘性有著很大的作用。反饋模塊流程如圖4-14
圖4-14 反饋模塊流程圖
4.7 查詢模塊
因?yàn)槭瞧囆畔①Y訊模塊，所以汽車種類一定很多，品牌很多，型號(hào)一定更多。還有一些新聞，用戶喜歡的創(chuàng)作者等等。為了方便用戶快速找到自己想要的東西。我添加了查詢模塊。內(nèi)置的查詢模塊可以在看到資訊的時(shí)候想要搜索與其相關(guān)的東西。大大方便了用戶的體驗(yàn)。
查詢模塊流程如圖4-15。
圖4-15 查詢模塊流程圖
4.8 數(shù)據(jù)庫設(shè)計(jì)
4.8.1 MySQL數(shù)據(jù)庫設(shè)計(jì)
數(shù)據(jù)庫的地位尤為重要，作為系統(tǒng)運(yùn)行必不可少的數(shù)據(jù)存儲(chǔ)區(qū)，數(shù)據(jù)庫能夠?qū)?shù)據(jù)進(jìn)行有效的存儲(chǔ)與管理，汽車信息資訊系統(tǒng)需要存儲(chǔ)大量的數(shù)據(jù)并要求做出及時(shí)的更新，為了避免數(shù)據(jù)太雜亂影響程序的運(yùn)行速度，設(shè)計(jì)一個(gè)好的數(shù)據(jù)庫是系統(tǒng)開發(fā)的核心。但是從數(shù)據(jù)庫的邏輯結(jié)構(gòu)到數(shù)據(jù)庫物理的結(jié)構(gòu)，若有一個(gè)步驟設(shè)計(jì)出現(xiàn)問題，則會(huì)影響整個(gè)應(yīng)用系統(tǒng)。因此。良好的數(shù)據(jù)庫設(shè)計(jì)是成為高效系統(tǒng)需要的一個(gè)重要的構(gòu)建基礎(chǔ)。
4.8.2 數(shù)據(jù)庫設(shè)計(jì)思路數(shù)據(jù)庫在出現(xiàn)的這么多年間不斷完善，每一步的設(shè)計(jì)都有著清晰的規(guī)范，為實(shí)現(xiàn)不同的目的提供了不同的設(shè)計(jì)原則，其中最為出名的就是數(shù)據(jù)庫三范式。當(dāng)然這么久了數(shù)據(jù)庫不只有三大范式還有更多，但是只要滿足了三范式就已經(jīng)足夠進(jìn)行普通的系統(tǒng)設(shè)計(jì)，更多的范式不僅不會(huì)簡(jiǎn)化開發(fā)加快訪問的速度，可能還會(huì)增加設(shè)計(jì)難度，使得程序在開發(fā)中遇到更多的困難。在遵循三范式的基礎(chǔ)上，為了實(shí)現(xiàn)不同表之間的聯(lián)系，保證數(shù)據(jù)的完整性和一致性在表中增添了外鍵屬性，但是為了使得表之間解耦合所使用的外鍵只能算得上理論上的外鍵，并沒有實(shí)際在表的字段上增加外鍵索引，這樣既保證了表在開發(fā)時(shí)的相對(duì)獨(dú)立性，方便修改又可以實(shí)現(xiàn)不同表之間的連表查詢。
4.8.3 數(shù)據(jù)庫概念設(shè)計(jì)數(shù)據(jù)庫在設(shè)計(jì)過程中不能缺少的就是E-R圖，能夠?qū)?shù)據(jù)庫表關(guān)系進(jìn)行清晰展示，明確每張表所需要的屬性，讓實(shí)體與實(shí)體間的界限更加明了，利于后期進(jìn)行的系統(tǒng)開發(fā)。在這個(gè)階段最主要的就是完成E-R圖的設(shè)計(jì)，本系統(tǒng)的E-R圖見圖
圖4-16數(shù)據(jù)庫E-R圖
4.8.4 數(shù)據(jù)庫邏輯設(shè)計(jì)在這一部分就是將上面所示的E-R圖轉(zhuǎn)換為儲(chǔ)存在數(shù)據(jù)庫中的數(shù)據(jù)庫表，表的設(shè)計(jì)必須要盡可能地符合三大范式，只有這樣才能使得數(shù)據(jù)在訪問的時(shí)候不至于出現(xiàn)幻讀、臟讀等情況。還要在表中添加索引，因?yàn)樗饕亲詈玫姆绞饺p少邏輯讀取和磁盤輸入或輸出。從和提高數(shù)據(jù)訪問的速度，相應(yīng)的提升用戶的使用好感，下面是部分重要表信息。
表4-1 系統(tǒng)管理員
| 字段 | 字段名 | 類型 | 長(zhǎng)度 | 主鍵 | 備注 |
| id | 管理員編號(hào) | varchar | 10 | 是 | |
| account | 賬號(hào) | varchar | 20 | 否 | |
| password | 密碼 | varchar | 18 | 否 | |
| name | 姓名 | varchar | 20 | 否 | |
| permissions | 權(quán)限 | int | 2 | 否 | 用數(shù)字大小表示相應(yīng)權(quán)限 |
| state | 狀態(tài) | int | 1 | 否 | 1 表示可用0 表示禁用 |
表4-2 信息資訊表
| 字段 | 字段名 | 類型 | 長(zhǎng)度 | 主鍵 | 備注 |
| id | 資訊編號(hào) | varchar | 50 | 是 | |
| title | 標(biāo)題 | varchar | 100 | 否 | |
| location | 位置 | varchar | 100 | 否 | 定位資訊位置 |
| guishu | 作者姓名 | varchar | 20 | 否 | 投稿人 |
| dianzan | 點(diǎn)贊數(shù)量 | int | 100 | 否 | 用數(shù)字表示數(shù)量 |
| state | 狀態(tài) | int | 1 | 否 | 1 表示可用0 表示禁用 |
表4-3 用戶表
| 字段 | 字段名 | 類型 | 長(zhǎng)度 | 主鍵 | 備注 |
| id | 用戶編號(hào) | varchar | 10 | 是 | |
| account | 賬號(hào) | varchar | 20 | 否 | |
| password | 密碼 | varchar | 18 | 否 | |
| name | 昵稱 | varchar | 20 | 否 | |
| shenfenzheng | 身份證號(hào) | int | 18 | 否 | 用于驗(yàn)證是否成年 |
| phone | 手機(jī)號(hào)碼 | int | 11 | 否 | |
| iddate | 注冊(cè)日期 | datetime | | 否 | |
| sex | 性別 | int | 1 | 否 | 1 表示男0 表示女 |
| birthday | 生日 | date | | 否 | 生日 |
| state | 狀態(tài) | int | 1 | 否 | 1 表示正常0 表示封禁 |
第五章 系統(tǒng)實(shí)現(xiàn)
5.1 數(shù)據(jù)庫的實(shí)現(xiàn)
為了更好地對(duì)數(shù)據(jù)進(jìn)行管理選擇使用 MySQL進(jìn)行數(shù)據(jù)管理，不僅僅因?yàn)樗_源免費(fèi)，更因?yàn)樗δ軓?qiáng)大，完全能夠滿足數(shù)據(jù)管理要求。在數(shù)據(jù)庫設(shè)計(jì)時(shí)遵循三范式開發(fā)，建立了系統(tǒng)管理員表，信息資訊表，用戶表等數(shù)據(jù)庫表，在使用時(shí)與 js代碼一一映射，實(shí)現(xiàn)汽車信息資訊的儲(chǔ)存和交互。
我用極少的成本購買了阿里云官方的云數(shù)據(jù)庫MySql，在它的數(shù)據(jù)管理DMS中添加實(shí)例，創(chuàng)建數(shù)據(jù)庫，并且創(chuàng)建表單。我建立了三個(gè)最基本也是最重要的表單，用來維護(hù)系統(tǒng)初期的大部分使用情況。系統(tǒng)管理員表如下圖5-1所示。
圖5-1 數(shù)據(jù)庫系統(tǒng)管理員表t_guanli
數(shù)據(jù)庫信息資訊表如下圖5-2所示。
圖5-2 數(shù)據(jù)庫信息資訊表t_zixun
數(shù)據(jù)庫用戶表如下圖5-3所示。
圖5-3數(shù)據(jù)庫用戶表t_user
通過node.js將系統(tǒng)連接到數(shù)據(jù)庫。
首先，通過一個(gè)小的Demo來測(cè)試我們的環(huán)境是否已經(jīng)搭建完畢了；
var mysql = require('mysql');
// 連接數(shù)據(jù)庫的配置
var connection = mysql.createConnection({
// 主機(jī)名稱，一般是本機(jī)
host: 'localhost',
// 數(shù)據(jù)庫的端口號(hào)，如果不設(shè)置，默認(rèn)是3306
port: 3306
// 創(chuàng)建數(shù)據(jù)庫時(shí)設(shè)置用戶名
user: 'root',
// 創(chuàng)建數(shù)據(jù)庫時(shí)設(shè)置的密碼
password: '123456',
// 創(chuàng)建的數(shù)據(jù)庫
database: 'lunwen'
});
// 與數(shù)據(jù)庫建立連接
connection.connect();
// 查詢數(shù)據(jù)庫
connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {
if (err) throw err;
console.log('The solution is: ', rows[0].solution);
});
// 關(guān)閉連接
connection.end();
運(yùn)行程序，如果顯示“The solution is: 2”，那么整個(gè)連接查詢是成功的。
遇到的困難：
鏈接數(shù)據(jù)庫對(duì)于現(xiàn)階段的我來說，也是遇到了很多困難，首先遇到的是端口不匹配。所以我要在阿里云服務(wù)器（放置系統(tǒng)的服務(wù)器）防火墻選項(xiàng)里添加3306端口，才能讓系統(tǒng)放行對(duì)數(shù)據(jù)庫的連接。
第二個(gè)問題是阿里云的RDS數(shù)據(jù)庫管理，并沒有任何公網(wǎng)ip，只能利用一串密鑰進(jìn)行連接，但是因?yàn)橄到y(tǒng)本身服務(wù)器不能添加阿里云自帶網(wǎng)關(guān)，所以建立本地?cái)?shù)據(jù)庫的可能也就被抹除了。如下圖5-4所示實(shí)例地址
圖5-4阿里云數(shù)據(jù)庫實(shí)例地址
連接阿里云數(shù)據(jù)庫只能通過這串實(shí)例地址才行。最后我想到了一個(gè)解決辦法。用我的電腦本地?cái)?shù)據(jù)庫連接阿里云網(wǎng)關(guān)，然后再從阿里云服務(wù)器上調(diào)用我的電腦的網(wǎng)關(guān)從而連接至數(shù)據(jù)庫，這樣利用JavaScript輸入賬號(hào)密碼就可以連接了。
5.2 系統(tǒng)功能
5.2.1 登錄模塊登錄功能實(shí)現(xiàn)用戶登錄，采取阿里云數(shù)據(jù)庫自帶傳輸加密功能，可以有效避免被劫包等用戶信息傳輸中泄露的可能，因?yàn)槭褂玫氖前⒗镌谱詭У募用?，所以很難被破解，大大提高了數(shù)據(jù)的安全性。在使用特定功能時(shí)對(duì)用戶身份進(jìn)行識(shí)別避免胡亂操作，通過代碼的結(jié)合保證登錄時(shí)的交互體驗(yàn)和安全。登錄模塊如下圖5-5所示。
圖5-5 登錄模塊
核心校驗(yàn)代碼如下：
<body>
賬號(hào)：<input type="text" name="" id="" value="" /> 密碼：
<input type="password" name="" id="" value="" />
<input type="button" name="" id="btn" value="登陸" />
<button type="button" id="clear">清除數(shù)據(jù)</button>
</body>
<script type="text/javascript">
var aInputs = document.getElementsByTagName('input');
var oClear = document.getElementById('clear');
var db = openDatabase('zuchedenglu', '1.0', 'textdb', '1024*1024');
db.transaction(function(contex) {
contex.executeSql('create table if not exists userinf(id integer primary key AutoIncrement,name,password)');
});
var oBtn = document.getElementById('btn');
var blogin = true;
oBtn.onclick = function() {
if (aInputs[0].value && aInputs[1].value) {
db.transaction(function(contex) {
contex.executeSql('select * from t_user', [], function(con, data) {
var leg = data.rows.length,
i;
for (var i = 0; i < leg; i++) {
if (aInputs[0].value == data.rows.item(i).name && aInputs[1].value == data.rows.item(i).password) {
blogin = false;
break;
}
}
if (blogin) {
alert('請(qǐng)輸入正確的賬號(hào)和密碼！');
} else {
alert('登陸成功！');
}
});
});
} else {
alert('請(qǐng)?zhí)顚懲暾馁~號(hào)密碼！');
}
}
oClear.onclick = function() {
db.transaction(function(contex) {
contex.executeSql('drop table userinf');
});
}
</script>
5.2.2 注冊(cè)模塊注冊(cè)功能是一個(gè)網(wǎng)站系統(tǒng)最基礎(chǔ)也是最重要的部分，用戶輸入用戶名密碼和手機(jī)號(hào)進(jìn)行注冊(cè)使用，點(diǎn)擊注冊(cè)按鈕會(huì)向數(shù)據(jù)庫提交表單進(jìn)行存儲(chǔ)，從而使得用戶后面可以進(jìn)行登陸操作。
注冊(cè)界面如下圖5-6所示。
圖5-6 注冊(cè)模塊
核心代碼如下：
<body>
用戶名：<input type="text" name="" id="" value="" /> 密碼：
<input type="password" name="" id="" value="" />
<input type="button" name="" id="btn" value="注冊(cè)" />
<button type="button" id="clear">清除數(shù)據(jù)</button>
</body>
<script type="text/javascript">
var aInputs = document.getElementsByTagName('input');
var oClear = document.getElementById('clear');
var db = openDatabase('zuchedenglu', '1.0', 'textdb', '1024*1024');
db.transaction(function(contex) {
contex.executeSql('create table if not exists userinf(id unique,name,password)');
});
var oBtn = document.getElementById('btn');
var num = 0;
oBtn.onclick = function() {
if (aInputs[0].value && aInputs[1].value) {
db.transaction(function(contex) {
contex.executeSql('select * from t_user', [], function(con, data) {
var leg = data.rows.length,
i;
for (var i = 0; i < leg; i++) {
if (aInputs[0].value == data.rows.item(i).name) {
alert('該用戶名已注冊(cè)！');
return;
}
}
num =leg +1;
});
contex.executeSql('insert into userinf(id,name,password) values("' + num + '","' + aInputs[0].value + '","' + aInputs[1].value + '")');
alert('注冊(cè)成功');
});
} else {
alert('請(qǐng)?zhí)顚懲暾馁~號(hào)密碼！');
}
}
oClear.onclick=function(){
db.transaction(function(contex) {
contex.executeSql('drop table userinf');
});
}
</script>
</html>
5.2.3 用戶模塊用戶模塊用于對(duì)用戶進(jìn)行修改自身的姓名，手機(jī)號(hào)，評(píng)論，收藏等方面的功能管理模塊。這些功能有利于用戶更好的操作系統(tǒng)和瀏覽。用戶詳細(xì)信息如下圖5-7所示。
圖5-7 用戶詳細(xì)信息
這個(gè)模塊包括修改密碼的操作。核心代碼如下：
//大寫字母、小寫字母、數(shù)字、特殊字符 滿足其中三種即可
function checkStrong(value) {
var strength = 0;
if (value.length > 5 && value.match(/[/da-zA-Z]+/)) {
if (value.match(//d+/)) {
strength++;
}
if (value.match(/[a-z]+/)) {
strength++;
}
if (value.match(/[A-Z]+/)) {
strength++;
}
if (value.match(/[!@*$-_()+=&￥]+/)) {
strength++;
}
}
if (strength >= 3) {
return true;
}
return false;
}
// 密碼校驗(yàn)
function checkPassword() {
$("#passwordCorrect").hide();
$("#rePasswordCorrect").hide();
var passwordValue = $.trim($('#passwordValue').val());
var rePasswordValue = $.trim($('#rePasswordValue').val());
if ("" == passwordValue) {
$("#passwordError").html("請(qǐng)輸入密碼");
$("#passwordError").css("display", "inline-block");
return false;
}
if (!checkStrong(passwordValue)) {
$("#passwordError").html("6-20位數(shù)字、大小寫字母或特殊字符(4選3)");
$("#passwordError").css("display", "inline-block");
return false;
}
if (rePasswordValue != "" && passwordValue != rePasswordValue) {
$("#rePasswordError").html("輸入的密碼不一致");
$("#rePasswordError").css("display", "inline-block");
return false;
} else {
$("#rePasswordError").hide();
$("#rePasswordCorrect").css("display", "inline-block");
}
$("#passwordError").hide();
$("#passwordCorrect").css("display", "inline-block");
return true;
}
// 重復(fù)密碼校驗(yàn)
function checkRePassword() {
$("#rePasswordCorrect").hide();
var passwordValue = $.trim($('#passwordValue').val());
var rePasswordValue = $.trim($('#rePasswordValue').val());
if ("" == rePasswordValue) {
$("#rePasswordError").html("請(qǐng)?jiān)俅屋斎朊艽a");
$("#rePasswordError").css("display", "inline-block");
return false;
}
if (!checkStrong(rePasswordValue)) {
$("#rePasswordError").html("6-20位數(shù)字、大小寫字母或特殊字符(4選3)");
$("#rePasswordError").css("display", "inline-block");
return false;
}
if (passwordValue != rePasswordValue) {
$("#rePasswordError").html("輸入的密碼不一致");
$("#rePasswordError").css("display", "inline-block");
return false;
}
$("#rePasswordError").hide();
$("#rePasswordCorrect").css("display", "inline-block");
return true;
}
5.2.4 后臺(tái)模塊這個(gè)一個(gè)后臺(tái)模塊，是專門為創(chuàng)作者和管理員使用的，主要用來管理資訊信息的添加刪除修改等，管理用戶的各種信息以及各種審核審查活動(dòng)，以及系統(tǒng)的流量監(jiān)控等。能幫助管理員快捷方便的查看系統(tǒng)數(shù)據(jù)等，還管理著資訊的各方面。創(chuàng)作者的后臺(tái)就比較簡(jiǎn)單，可以發(fā)布資訊，審查評(píng)論和查看審核狀態(tài)。下圖是管理員后臺(tái)管理模塊設(shè)計(jì)。管理員后臺(tái)界面如下圖5-8所示。
圖5-8 管理員后臺(tái)界面
設(shè)計(jì)核心代碼是：
圖5-9 左側(cè)菜單代碼
可以看到代碼很少，但是界面明顯有很多功能。是因?yàn)檫@是index.html作為的主頁只是一個(gè)后臺(tái)管理系統(tǒng)的總體框架。每個(gè)模塊都有著獨(dú)立的html文件。用frameset控件聚合起來例。
5.2.5 咨詢發(fā)布模塊創(chuàng)作者可以發(fā)布資訊以賺取收益，完成發(fā)布資訊的功能，完成后可以在后臺(tái)管理系統(tǒng)看到審核結(jié)果。發(fā)布咨詢界面如下圖5-10所示。
圖5-10 發(fā)布咨詢界面
設(shè)計(jì)可以添加圖片和直接調(diào)用文本編輯器，核心設(shè)計(jì)代碼如下圖5-11所示。
// 新增按鈕
function add() {
// 打開新增框架
document.getElementById('addBlock').style.display = 'block';
document.getElementById('totalBackground').style.display = 'block';
}
// 提交按鈕
function sumbit() {
// 關(guān)閉新增框架
document.getElementById('addBlock').style.display = 'none';
document.getElementById('totalBackground').style.display = 'none';
// 寫入表單
// 獲取表
var iTable = document.getElementById('myTable');
// 獲取輸入值
var stuId = document.getElementById('stuId1').value;
var name = document.getElementById('name1').value;
var colg = document.getElementById('colg1').value;
var profession = document.getElementById('profession1').value;
var grade = document.getElementById('grade1').value;
var stuClass = document.getElementById('stuClass1').value;
var age = document.getElementById('age1').value;
var nums = iTable.rows.length;
// 創(chuàng)建一行tr
var iTr = document.createElement('tr');
// 隔行換色
if (nums % 2 != 0)
{
iTr.className = 'mainTbodyTr1';
}
else {
iTr.className = 'mainTbodyTr2';
}
// 將tr添加到table中
iTable.appendChild(iTr);
圖5-11 資訊發(fā)布界面核心代碼
5.2.6 用戶反饋模塊這個(gè)模塊有著至關(guān)重要的作用，可以利用廣大的用戶群體幫助開發(fā)者發(fā)現(xiàn)各種各樣的問題，也能給用戶通知管理員和開發(fā)者發(fā)現(xiàn)的問題。使網(wǎng)站系統(tǒng)愈發(fā)成熟。系統(tǒng)不可能沒有任何錯(cuò)誤。大批量的“黑盒測(cè)試”更容易發(fā)現(xiàn)問題和解決問題。因?yàn)橛脩趔w驗(yàn)極為重要。用戶反饋模塊如下圖5-12所示。
圖5-12 用戶反饋界面圖
設(shè)計(jì)代碼如下圖5-13所示：
圖5-13 反饋界面代碼圖
第六章 系統(tǒng)測(cè)試
6.1 測(cè)試技術(shù)
開發(fā)系統(tǒng)的過程中，從開始構(gòu)建到開發(fā)結(jié)束，要經(jīng)歷眾多的環(huán)節(jié)和繁瑣的流程，其中任何一點(diǎn)錯(cuò)誤或者失誤，特別是開始階段的失誤都直接將導(dǎo)致整個(gè)系統(tǒng)在隨后的環(huán)節(jié)中存在重大錯(cuò)誤。所以每個(gè)設(shè)計(jì)出來的系統(tǒng)在交付給用戶之前必須有著一個(gè)重要的動(dòng)作那就是測(cè)試，因?yàn)樾枰ＷC交給用戶的系統(tǒng)是一個(gè)可以正常運(yùn)行的有效的程序，不能用戶拿到手一使用就出現(xiàn)一系列的問題，這樣肯定會(huì)影響到用戶，所以必須對(duì)程序進(jìn)行有效的測(cè)試。
白盒測(cè)試也稱為結(jié)構(gòu)測(cè)試，主要用于檢測(cè)軟件編碼過程中的錯(cuò)誤。程序員的編程經(jīng)驗(yàn)、對(duì)編程軟件的掌握程度、工作狀態(tài)等因素都會(huì)影響到編程質(zhì)量，導(dǎo)致代碼錯(cuò)誤。
黑盒測(cè)試又稱為功能測(cè)試，主要檢測(cè)軟件的每一個(gè)功能是否能夠正常使用。在測(cè)試過程中，將程序看成不能打開的黑盒子，不考慮程序內(nèi)部結(jié)構(gòu)和特性的基礎(chǔ)上通過程序接口進(jìn)行測(cè)試，檢查程序功能是否按照設(shè)計(jì)需求以及說明書的規(guī)定能夠正常打開使用。
6.2 版本更新記錄
表6-1版本更新記錄
| 測(cè)試號(hào) | 創(chuàng)建者 | 創(chuàng)建日期 | 維護(hù)者 | 維護(hù)日期 | 維護(hù)記錄 |
| V1.0 | 王冠澎 | 2020/12/25 | — | — | — |
| V1.0.1 | — | — | 王冠澎 | 2020/12/17 | 不符合項(xiàng)測(cè)試 |
| V1.0.2 | — | — | 王冠澎 | 2021/03/20 | 不符合項(xiàng)測(cè)試 |
| V1.0.3 | — | — | 王冠澎 | 2021/03/25 | 基本功能可用 |
6.3 接口測(cè)試
表6-2接口測(cè)試
| 測(cè)試編號(hào) | 輸入項(xiàng) | 輸出項(xiàng) |
| 1 | 點(diǎn)擊登錄 | 進(jìn)入主頁顯示信息是正確 |
| 2 | 點(diǎn)擊目錄按鈕 | 進(jìn)入相應(yīng)頁面，顯示正確信息 |
| 3 | 點(diǎn)擊導(dǎo)航按鈕 | 正確回到相應(yīng)頁面 |
6.4 實(shí)際功能測(cè)試
基于個(gè)人測(cè)試環(huán)境能力和成本上，我選擇了黑盒測(cè)試。因?yàn)楹诤袦y(cè)試更貼近用戶使用的體驗(yàn)，更能發(fā)現(xiàn)用戶使用上的問題。
黑盒測(cè)試，它是通過測(cè)試來檢測(cè)每個(gè)功能是否都能正常使用。在測(cè)試中，把程序看作一個(gè)不能打開的黑盒子，在完全不考慮程序內(nèi)部結(jié)構(gòu)和內(nèi)部特性的情況下，在程序接口進(jìn)行測(cè)試，它只檢查程序功能是否按照需求規(guī)格說明書的規(guī)定正常使用，程序是否能適當(dāng)?shù)亟邮蛰斎霐?shù)據(jù)而產(chǎn)生正確的輸出信息。黑盒測(cè)試著眼于程序外部結(jié)構(gòu)，不考慮內(nèi)部邏輯結(jié)構(gòu)，主要針對(duì)軟件界面和軟件功能進(jìn)行測(cè)試。
聲明：黑盒測(cè)試是以用戶的角度，從輸入數(shù)據(jù)與輸出數(shù)據(jù)的對(duì)應(yīng)關(guān)系出發(fā)進(jìn)行測(cè)試的。很明顯，如果外部特性本身設(shè)計(jì)有問題或規(guī)格說明的規(guī)定有誤，用黑盒測(cè)試方法是發(fā)現(xiàn)不了的。
6.4.1 注冊(cè)模塊測(cè)試輸入用戶名密碼問題測(cè)試，輸入最小6位最多18位密碼，輸入框下方提示用戶名或密碼長(zhǎng)度有誤；請(qǐng)重新輸入。符合輸入框規(guī)則顯示注冊(cè)成功，手動(dòng)跳轉(zhuǎn)到登陸界面。登錄成功界面提示如下圖6-1所示。
圖6-1 注冊(cè)頁面測(cè)試效果
6.4.2 登錄模塊測(cè)試用戶名密碼問題測(cè)試，不輸入用戶名、密碼或錯(cuò)誤用戶名和密碼提示應(yīng)戶名或密碼輸入錯(cuò)誤；
用戶名密碼長(zhǎng)度測(cè)試，輸入最小6位最多18位密碼，輸入框下方提示用戶名或密碼長(zhǎng)度有誤；
用戶名密碼正確測(cè)試，輸入正確的用戶名和密碼，進(jìn)入系統(tǒng)主頁；
不輸入用戶名密碼直接進(jìn)入系統(tǒng)頁面，直接輸入系統(tǒng)其它網(wǎng)頁路徑，跳系統(tǒng)登錄頁；
登錄失敗測(cè)試效果如下圖6-2所示。
圖6-2 登錄失敗測(cè)試效果
6.4.3 主頁瀏覽測(cè)試自動(dòng)跳轉(zhuǎn)到主頁，主頁包括車輛循環(huán)預(yù)覽圖和文字，并且?guī)в屑?xì)微動(dòng)畫效果，讓整個(gè)頁面更加順暢。消費(fèi)者可以直觀的感受網(wǎng)站的氣氛，并且主頁的頂部導(dǎo)航欄可以供用戶隨意選擇瀏覽。不同的車輛種類滿足用戶不同的需求。主頁測(cè)試圖片如下圖6-3。
圖6-3 主頁測(cè)試效果
6.4.4 用戶模塊測(cè)試密碼修改，當(dāng)?shù)卿涃~號(hào)操作此功能，顯示賬號(hào)名稱，用戶可以修改賬號(hào)密碼，但賬號(hào)名稱不能修改。輸入舊密碼和兩次新密碼，如果舊密碼錯(cuò)誤則提示密碼錯(cuò)誤，如果兩次新密碼輸入不一致則提示密碼不一致，如果密碼輸入長(zhǎng)度超過則在輸入框下方顯示長(zhǎng)度限制；
信息修改，當(dāng)賬戶擁有者操作此功能，會(huì)提示確認(rèn)保存嗎。用戶如果輸入不符合該單元格規(guī)則的字符會(huì)出現(xiàn)相應(yīng)的提示。用戶信息修改測(cè)試如下圖6-4所示。
圖6-4 用戶信息修改測(cè)試效果
6.4.5 發(fā)布模塊測(cè)試添加圖片，可以選擇本地的圖片文件例如jpg，png格式的圖片。如果選擇其他文件會(huì)提示“請(qǐng)選擇jpg，png格式文件！”，點(diǎn)擊發(fā)布按鈕會(huì)提交給管理員進(jìn)行審核。資訊發(fā)布界面測(cè)試如下圖6-5所示。
圖6-5 資訊發(fā)布測(cè)試效果
6.4.6 反饋模塊測(cè)試反饋測(cè)試，系統(tǒng)導(dǎo)航欄最右邊的反饋按鈕點(diǎn)擊成功跳轉(zhuǎn)到反饋頁面，反饋頁面顯示聯(lián)系的地址，電話號(hào)碼和郵箱。下面輸入問題可以正常輸入。點(diǎn)擊發(fā)送反饋，提示發(fā)送成功。反饋頁面測(cè)試如下圖6-6所示。
圖6-6 反饋頁面測(cè)試效果
6.4.7 測(cè)試環(huán)境測(cè)試環(huán)境為Windows10 教育版系統(tǒng)個(gè)人電腦。
CPU：AMD Radeom 5800X
顯卡：AMD Radeom 6800XT
硬盤：機(jī)械硬盤3T
內(nèi)存：16G內(nèi)存
運(yùn)行效果良好，無卡頓。
6.4.8用戶體驗(yàn)在系統(tǒng)完成之前會(huì)讓用戶進(jìn)行內(nèi)測(cè)體驗(yàn)，驗(yàn)收測(cè)試是必不可少的環(huán)節(jié)，對(duì)于實(shí)際操作可以發(fā)現(xiàn)更多潛在的問題與bug，所以在用戶測(cè)試這一環(huán)節(jié)測(cè)試還原真實(shí)數(shù)據(jù)，以達(dá)到系統(tǒng)功能完整性和穩(wěn)定性。
6.5 系統(tǒng)測(cè)試結(jié)果
通過各個(gè)模塊的測(cè)試與整合，整個(gè)汽車信息資訊網(wǎng)站系統(tǒng)的各項(xiàng)基本數(shù)據(jù)都符合要求，數(shù)據(jù)庫數(shù)據(jù)也能夠正確的存儲(chǔ)，系統(tǒng)各個(gè)模塊之間能夠很好的相互調(diào)用在充分利用了分布式開發(fā)的優(yōu)點(diǎn)之上很好的實(shí)現(xiàn)系統(tǒng)各項(xiàng)功能。測(cè)試效果不錯(cuò)，大部分基礎(chǔ)的核心功能都成功運(yùn)行，經(jīng)過這段時(shí)間的測(cè)試，汽車信息資訊系統(tǒng)有著比較良好的運(yùn)行效果，能夠很好的滿足用戶的基本需求。
結(jié) 論
經(jīng)過很長(zhǎng)一段的學(xué)習(xí)，和老師的幫助。我完成了這篇論文，但是論文上設(shè)計(jì)的東西并沒有能全部在代碼編輯上全部實(shí)現(xiàn)。不過我知道，我現(xiàn)在的能力還不夠，以后還是會(huì)繼續(xù)學(xué)習(xí)，爭(zhēng)取把更發(fā)雜更有用的功能完成。
在設(shè)計(jì)過程中，借鑒了國內(nèi)許多系統(tǒng)的設(shè)計(jì)理念并參考了許多相關(guān)的中文文獻(xiàn)，同時(shí)為以后的設(shè)計(jì)收集了大量的參考資料。通過辛苦的查詢和收集，我認(rèn)識(shí)到了“信息”的重要性。但是書面的學(xué)習(xí)不能夠讓我們擁有足夠的東西來應(yīng)對(duì)以后的困難，只有理論和實(shí)踐結(jié)合才能創(chuàng)造更好的系統(tǒng)。
參考文獻(xiàn)
[1] 《HTML5+CSS3+JavaScript從入門到精通（精編版）》清華大學(xué)出版社2018
[2] 韋婭彬。基于HTML5的移動(dòng)端游戲新聞系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn).浙江工業(yè)大學(xué)2015.
[3] 章斕?；贖TML5的WebApp的開發(fā)與探索[J].杭州大學(xué)學(xué)報(bào)，2015
[4] 計(jì)算機(jī)網(wǎng)絡(luò)數(shù)據(jù)庫的安全管理技術(shù)研討[J].馮娜,韓淑芹.通訊世界. 2017(03)
[5] HTML5與CSS3的設(shè)計(jì)模式[J].白蕾,郭清菊.智能計(jì)算機(jī)與應(yīng)用. 2016(02)
[6] 《JavaScript 語言入門教程》[J].浙江人民出版社,2019.
[7] 基于Mysql的數(shù)據(jù)庫集群設(shè)計(jì)與實(shí)現(xiàn)[D].宣振國.杭州郵電大學(xué)，2013
[8] 《SQL SERVER數(shù)據(jù)庫技術(shù)高級(jí)指南》，中國水利水電出版社，2004.2
[9] 《基于JavaWeb的超市商品管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)》 江建平 2021.1
[10] 網(wǎng)站開發(fā)技術(shù)的比較研究[J].曾志明.電腦知識(shí)與技術(shù).2010.5
[11]基于關(guān)系數(shù)據(jù)庫的關(guān)鍵詞查詢[J].林子雨,楊冬青,王騰蛟,張東站.軟件學(xué)報(bào). 2010.10
致 謝
時(shí)間飛逝，我的學(xué)習(xí)生活很快就要過去，在這四年的學(xué)習(xí)生活中，收獲了很多，而這些成績(jī)的取得是和一直關(guān)心幫助我的人分不開的。
論文從定題，收集資料到修改，完成。我的指導(dǎo)老師張智國老師即使很忙也給予我了很多幫助和指導(dǎo)，從例文到注意事項(xiàng)等等都事無巨細(xì)的給我講解了。在此我想向老師表示感謝。
同時(shí)在學(xué)校5年的學(xué)習(xí)與相處中，很多老師都給予了我很多幫助，沒有他們我沒法完成這次的論文和系統(tǒng)搭建。
同時(shí)還要感謝和我一起渡過四年大學(xué)生活得同學(xué)們，正是在平時(shí)的學(xué)習(xí)生活中大家互相幫助，共同努力，共同進(jìn)步，才一換來了今天可貴的勞動(dòng)成果和堅(jiān)實(shí)的同學(xué)情誼，在此向我的各位同學(xué)一并表示我由衷的感謝。
在此要感激我的指導(dǎo)老師張智國老師，是你的細(xì)心指導(dǎo)，督促和關(guān)懷，使我能夠順利的完成畢業(yè)論文。在我的論文的研究工作中無不傾注著教師們辛勤的汗水和心血。在此我要向我的指導(dǎo)老師致以衷心的感激和深深的敬意。
不積跬步何以至千里，我能夠很好的掌握和運(yùn)用專業(yè)知識(shí)，并在設(shè)計(jì)中得以體現(xiàn)。正是有了老師們的悉心幫助和支持，才使我的畢業(yè)論文工作順利完成，在此向信息工程系的全體老師表示由衷的謝意。感謝他們四年來的辛勤栽培。
關(guān)鍵詞：設(shè)計(jì),實(shí)現(xiàn),系統(tǒng),汽車,信息
在線咨詢