基于web的購物網(wǎng)站系統(tǒng)設(shè)計與實現(xiàn)

目錄TOC\o"1-3"\h\u2082摘要： 210821英文摘要： 3220391.引言 437391.1開發(fā)背景與意義 464201.2國內(nèi)外研究現(xiàn)狀 4260601.3研究內(nèi)容 5252591.4論文架構(gòu) 632422系統(tǒng)開發(fā)技術(shù)與環(huán)境 740422.2前端語言 767252.3后端技術(shù) 7147682.4開發(fā)框架 8285552.5系統(tǒng)數(shù)據(jù)庫 8244732.6運行環(huán)境 8124812.6.1硬件環(huán)境 858312.6.2軟件環(huán)境 8245542.7本章總結(jié) 9153113系統(tǒng)分析 10182743.1可行性分析 10141653.1.1經(jīng)濟可行性 1077203.1.2技術(shù)可行性 10147453.1.3操作可行性 10234773.2需求分析 11111433.2.1功能需求分析 1180173.2.2性能需求分析 12187243.3系統(tǒng)流程分析 13284823.3.1系統(tǒng)開發(fā) 13144833.3.2登錄 13302873.3.3系統(tǒng)業(yè)務流程圖 14189473.3.4數(shù)據(jù)流程圖 15231383.4數(shù)據(jù)流程分析 17123533.4.1數(shù)據(jù)流圖 17239013.4.2數(shù)據(jù)流圖 18160813.4.3數(shù)據(jù)流圖 19167213.5本章總結(jié) 19296304系統(tǒng)設(shè)計概要 20256234.1系統(tǒng)開發(fā)軟件的選擇 20244524.2系統(tǒng)總體功能設(shè)計 2018564.3系統(tǒng)數(shù)據(jù)庫設(shè)計 209424.3.1概念模型設(shè)計 20118874.3.2數(shù)據(jù)庫結(jié)構(gòu)設(shè)計 2174854.4后端數(shù)據(jù)庫交互介紹 23220314.4.1跨域解決方案 23257534.4.2數(shù)據(jù)庫建立連接 24296744.4.3讀取數(shù)據(jù)表 2490524.4.4查詢數(shù)據(jù)表 2446754.4.5增加數(shù)據(jù)表記錄 24198514.4.6修改數(shù)據(jù)表記錄 25175844.5本章總結(jié) 25196895系統(tǒng)詳細設(shè)計和實現(xiàn) 26196895.1用戶模塊設(shè)計 26112405.1.1用戶登陸注冊模塊設(shè)計 2614054實現(xiàn)系統(tǒng)登錄模塊主要代碼： 28148945.1.2系統(tǒng)首頁模塊設(shè)計 28120265.1.3系統(tǒng)商品信息模塊設(shè)計 30210855.1.4系統(tǒng)商品購買模塊設(shè)計 31107095.2管理員模塊設(shè)計 32188735.2.1訂單管理模塊設(shè)計 32301015.2.2門店管理模塊設(shè)計 3351425.2.3商品管理模塊設(shè)計 34174805.3bootstarp框架應用 369085.4本章總結(jié) 39128536系統(tǒng)測試 39239316.1功能測試 39112986.2測試實例 39126596.3本章總結(jié) 41260167總結(jié)和展望 41299287.1總結(jié) 4169317.2展望 4126170參考文獻 4124253致謝 42摘要：在信息化爆炸發(fā)展的當下，互聯(lián)網(wǎng)新技術(shù)層出不窮。與此同時，電子商務的地位也是逐年升高，產(chǎn)值迅速增長。我們周遭的所有商品大都能通過互聯(lián)網(wǎng)實現(xiàn)購買需求，京東、美團、淘寶等平臺提供著我們?nèi)粘Ｐ枰姆?。網(wǎng)購的平臺種類繁多。隨著更新?lián)Q代的發(fā)展，它們已經(jīng)包含了非常多的功能。但這同時也將成為一把雙刃劍，繁多的功能在方便我們操作同時也給我們帶來了一些不便。針對于現(xiàn)在的網(wǎng)購平臺功能繁多雜亂的問題。如何開發(fā)一款使用簡單、頁面簡潔，不管是前臺還是后臺，相應的操作人員都能輕松上手的網(wǎng)上購物系統(tǒng)便成為了當下備注矚目的問題。對此，本文擬開發(fā)一款采用B/S結(jié)構(gòu)，不需要安裝指定客戶端便可以運行，同時操作簡單的網(wǎng)上購物系統(tǒng)。本文將從所用編譯語言入手，然后做出系統(tǒng)所對應的需求任務。之后，再進行具體的開發(fā)設(shè)計，詳細探討本文系統(tǒng)的功能模塊、數(shù)據(jù)流程等，并且針對主要的功能模塊進行剖析說明。以HTML+MYSQL+PHP的模式實現(xiàn)一款B2C模型的線上購物系統(tǒng)。關(guān)鍵詞：基于web的購物系統(tǒng)；B/S；PHP；HTML；MYSQL英文摘要：Withtheexplosivedevelopmentofinformationtechnology,newInternettechnologiesemergeoneafteranother.Atthesametime,thestatusofe-commerceisalsoincreasingyearbyyear,andtheoutputvalueisgrowingrapidly.MostofthegoodsarounduscanbepurchasedthroughtheInternet.Jingdong,MeiTuan,Taobaoandotherplatformsprovidetheservicesweneedeveryday.Therearemanykindsofonlineshoppingplatforms.Withthedevelopmentofupgrading,theyhaveincludedmanyfunctions.Butitwillalsobecomeadouble-edgedsword.Variousfunctionsnotonlyfacilitateouroperation,butalsobringussomeinconvenience.Aimingattheproblemofvariousandmessyfunctionsofthecurrentonlineshoppingplatform.Howtodevelopanonlineshoppingsystemwithsimpleuseandsimplepages,whichcanbeeasilyusedbythecorrespondingoperators,whetherintheforegroundorbackground,hasbecomeanoticeableproblematpresent.Inthisregard,thispaperintendstodevelopanonlineshoppingsystemwithB/Sstructure,whichcanrunwithoutinstallingthespecifiedclientandsimpleoperationatthesametime.Thispaperwillstartwiththecompilerlanguageused,andthenmaketherequirementsandtaskscorrespondingtothesystem.Afterthat,thespecificdevelopmentanddesignarecarriedout,thefunctionalmodulesanddataflowofthesystemarediscussedindetail,andthemainfunctionalmodulesareanalyzedandexplained.AnonlineshoppingsystembasedonB2CmodelisrealizedinthemodeofHTML+MySQL+PHP.Keywords:Web-basedshoppingwebsitesystem；B/S；PHP；HTML；MYSQL引言1.1開發(fā)背景與意義在當前國際社會中，信息化發(fā)展程度在一定程度上已經(jīng)可以代表一個國家科技發(fā)達、社會現(xiàn)代化的程度。表明在當前的科技發(fā)展趨勢下，互連網(wǎng)已經(jīng)是當今社會不可或缺的一部分?，F(xiàn)如今在我們?nèi)粘Ｉ钪校W(wǎng)絡(luò)已經(jīng)占據(jù)了重要地位，我們周遭的所有服務或者商品大都能通過互聯(lián)網(wǎng)實現(xiàn)，比如京東、美團、淘寶等等平臺都提供了我們?nèi)粘Ｐ枰囊恍┓?。從我們身邊的這些現(xiàn)象也能清楚的看到未來互連網(wǎng)可以起到絕對關(guān)鍵的作用，將徹底成為我們?nèi)粘Ｉ罨蛘呤强萍及l(fā)展不可或缺的一部分。再從互聯(lián)網(wǎng)的發(fā)展走進我們生活中，對于大多數(shù)用戶，互聯(lián)網(wǎng)最直接的應用就是網(wǎng)購，可以是各種形式的網(wǎng)購，購買生活用品、外賣、飛機票等等，網(wǎng)購的形式非常之多，同時，網(wǎng)購的平臺也是種類繁多。隨著一代一代網(wǎng)購平臺的發(fā)展，這些小小的軟件已經(jīng)包含了非常多的功能。但這同時也將成為一把雙刃劍，非常多的功能能方便我們操作同時也能讓我們的操作帶來一些不便，現(xiàn)在的大型網(wǎng)購平臺的功能的繁多雜亂，因此，本文擬開發(fā)一款可以做到使用簡單、頁面簡潔，不管是前臺還是后臺，相應的操作人員都能直接輕松上手使用的網(wǎng)絡(luò)購物系統(tǒng)，力圖進一步簡化網(wǎng)絡(luò)購物的功能和后臺系統(tǒng)的操作。1.2國內(nèi)外研究現(xiàn)狀縱觀國內(nèi)外對于電子商務的研究和發(fā)展，美國得益于互聯(lián)網(wǎng)技術(shù)的早期發(fā)展，其電子商務方面也已成為互聯(lián)網(wǎng)世界的核心組成，在全球范圍內(nèi)有明顯的優(yōu)勢，比如世界最大的電子商務平臺亞馬遜REF_Ref17458\r\h[1]。國內(nèi)雖然起步較晚，但依靠快速的發(fā)展，如今在電子商務領(lǐng)域內(nèi)也已名列前茅。與此同時，電商平臺的發(fā)展格局也在不斷變化。2000年ebay收購了易趣，2004年卓越被亞馬遜所收購，2005年阿里巴巴全面地收購了雅虎中國等。REF_Ref20616\r\h[2]在表明電子商務快速發(fā)展的同時，也不難看出電商激烈的競爭環(huán)境，需要我們不斷發(fā)現(xiàn)創(chuàng)造創(chuàng)新點REF_Ref21452\r\h[3]。再從當下國內(nèi)發(fā)展較好的平臺去看，比如京東、淘寶等等購物網(wǎng)站，它們經(jīng)過數(shù)代更新發(fā)展，如今平臺上囊括了各種功能。對于京東之類的網(wǎng)站，主營的是B2C的模式，界面清晰、分類詳細，主營電子產(chǎn)品的同時也有服裝、食品等等分類的商品，并且強調(diào)商品的高質(zhì)量、高可信度。REF_Ref23807\r\h[4]使得相關(guān)商品銷量節(jié)節(jié)高增，銷售范圍也逐步擴大，為旗下分銷商打下良好信譽度。淘寶作為典型C2C的平臺，主要是入駐的商家與買家之間的交易。商家信譽度一般由品牌支撐，商品數(shù)目眾多，種類繁雜，當然價格也會隨著品質(zhì)有較大的落差。旗下天貓也以B2C的方式進行電子商務，但主要還是駐扎在平臺上的商家提供服務。這種模式不僅為消費者提供了更多的商品選擇，同時也提供了更多的工作崗位，緩解了當下社會的就業(yè)壓力?？芍^實現(xiàn)了雙贏。當下國內(nèi)外在線上交易平臺的設(shè)計上常見為如下兩種，B/S結(jié)構(gòu)和C/S結(jié)構(gòu)，B/S是瀏覽器和服務器，C/S即客戶機和服務器。最初的開發(fā)模式都是C/S結(jié)構(gòu)，主要流行于90年代初，而后才有B/S結(jié)構(gòu)。但現(xiàn)在來看，B/S結(jié)構(gòu)事實上也是C/S演變而來，而且，它相較于C/S改進了許多方面，從而發(fā)展至今。B/S結(jié)構(gòu)的用戶界面就是瀏覽器的界面，它使用瀏覽器代替了原先的客戶端，并且通過瀏覽器實現(xiàn)了原先需要客戶端才能實現(xiàn)的前后端通信，比如與數(shù)據(jù)庫的交互。如今，基于B/S模式構(gòu)建的系統(tǒng)已經(jīng)支持許多種不同的主流瀏覽器，比如：Chrome、IE、Safari、Firefox等等，并且同時支持不同的操作系統(tǒng)如windows10和MacOS10等等。REF_Ref21452\r\h[3]由于不需要客戶端，B/S結(jié)構(gòu)在很大程度上降低了用戶組的操作難度，減少了許多使用步驟。本文主要著眼于網(wǎng)購系統(tǒng)的簡便性，本文擬開發(fā)一款采用B/S結(jié)構(gòu)，不需要安裝指定客戶端便可以運行，同時操作簡單的網(wǎng)上購物系統(tǒng)。1.3研究內(nèi)容本系統(tǒng)的設(shè)計與實現(xiàn)包括以下幾個階段：設(shè)計、分析以及最后的實現(xiàn)。同時為了保證各個階段任務的順利完成，比如各個功能模塊的實現(xiàn)，相對應的說明文檔是不可或缺的。通過實現(xiàn)文檔與目標預期文檔的比對來查漏補缺，從而一步一步進行各個階段的開發(fā)。保證每一步都不出錯，盡量不在后續(xù)階段返回重新改變前面階段的成果。在本系統(tǒng)設(shè)計的最初階段，主要結(jié)合所學的知識，進行相關(guān)資料的查閱之后，首先確定下后續(xù)所要使用的開發(fā)工具與方法。其次便是完成本系統(tǒng)的需求分析。在確定下開發(fā)工具與系統(tǒng)需求之后，再實際地進入到系統(tǒng)的實現(xiàn)中，也就是網(wǎng)絡(luò)購物系統(tǒng)的設(shè)計與實現(xiàn)。經(jīng)過確定，本系統(tǒng)的前端頁面主要采用ps進行設(shè)計，html5、css3語言實現(xiàn)。數(shù)據(jù)庫依靠mysql提供支持，包括相應數(shù)據(jù)的搜索查詢刪除改變以及相應用戶的權(quán)限查詢改變。動態(tài)頁面實現(xiàn)依靠php對頁面與數(shù)據(jù)庫的交互進行實現(xiàn)。在完成上述步驟即最終完成了系統(tǒng)的實現(xiàn)之后，最后的階段就是調(diào)試測試以及細節(jié)上的優(yōu)化了。1.4論文架構(gòu)本文結(jié)構(gòu)組織如下：第1章為引言，主要介紹本文研究的背景和意義，國內(nèi)外研究現(xiàn)狀和本文研究的主要內(nèi)容。第2章為系統(tǒng)開發(fā)技術(shù)與環(huán)境，主要介紹實現(xiàn)本文系統(tǒng)的關(guān)鍵技術(shù)和框架，以及開發(fā)環(huán)境。第3章為需求分析，主要包括可行性分析，功能需求分析和流程分析。第4章為系統(tǒng)設(shè)計概要，將對應于各個需求進行各個功能模塊的設(shè)計。第5章為詳細設(shè)計與系統(tǒng)實現(xiàn)，將從數(shù)據(jù)庫、視圖等多個方面闡述系統(tǒng)的開發(fā)與實現(xiàn)，對系統(tǒng)進行詳細的介紹。第6章為系統(tǒng)測試，在系統(tǒng)完成后對系統(tǒng)進行功能測試，確保功能的實現(xiàn)。第7章是全文的總結(jié)。2系統(tǒng)開發(fā)技術(shù)與環(huán)境本章節(jié)主要介紹實現(xiàn)本系統(tǒng)的主要開發(fā)技術(shù)和環(huán)境配置。會先介紹本系統(tǒng)采用的各個編譯語言，并說明其被選擇的原因。后介紹實現(xiàn)本系統(tǒng)時用到的編譯軟件和硬件環(huán)境。2.2前端語言HTML中文也叫超文本標記語言。REF_Ref25684\r\h[5]不像c++、java之類的編程語言，HTML是作為標記語言來進行工作與開發(fā)的。所謂標記語言就是把文本和其他的一些數(shù)據(jù)信息進行結(jié)合，從而描述出一些電腦操作處理的電腦編碼。REF_Ref26014\r\h[6]HTML作為標記語言，使用標記標簽比如<html></html>來進行編寫。相類似還有許多，各種功能標簽，這些標簽共同組成了html。也可以簡單理解為標記語言就是一套標簽。而html5的意思就是HTML發(fā)展的5.0版本，也是現(xiàn)在最新的版本，加入了許多新的標簽比如<video>，使得HTML開發(fā)更簡單更貼近現(xiàn)如今開發(fā)趨勢。由于使用的是文本與文本標簽，HTML最終處理實現(xiàn)的結(jié)果也是一個文本，通常為.html、.htm的后綴。HTML實現(xiàn)的是頁面的結(jié)構(gòu)，而頁面的美化就交給了CSS，CSS也叫層疊樣式表。作為HTML的皮膚，它描述了HTML各個結(jié)構(gòu)的樣式，比如位置、大小、顏色形狀等等。為網(wǎng)頁元素布局節(jié)省了大量工作。REF_Ref26070\r\h[7]CSS3作為新一代CSS，增加的動畫效果更是節(jié)約了許多工作量。Javascript是編程語言，雖然名字帶有Java，事實上，這是完全不同的、沒有聯(lián)系的兩門語言。JAVAscript也簡稱為Js，Js最大的應用就是嵌入于HTML中，相較于HTML作為骨架，CSS作為皮膚，Js是作為動作的存在，來響應HTML元素的事件對象的實現(xiàn)，或者是讀寫HTML元素。2.3后端技術(shù)PHP也叫做超文本預處理器，其最大的特點是可以嵌入到HTML中來作為服務器編程語言。由于PHP語言開發(fā)之初的目的就是讓人們可以更加快速簡潔方便地開發(fā)自己的網(wǎng)站，因此PHP可以同時用于面向?qū)ο蠡蛘呤沁^程的開發(fā)，在使用上非常的靈活。更重要的是PHP是一個開源軟件項目，配套的軟件基本也都是開源免費的，對于初入的學者，可以節(jié)約大量經(jīng)費。雖然作為開源軟件缺少了大型科技公司的支持，但是PHP社區(qū)發(fā)展到現(xiàn)在已經(jīng)非常完善，足以解決各種疑難雜癥。REF_Ref25929\r\h[8]而且用PHP開發(fā)會使得軟件的跨平臺型很強，可以做到不經(jīng)修改同時運行在UNIX、LINUX、WINDOWS下。2.4開發(fā)框架Bootsrap作為一種前端框架，一般被用于移動開發(fā)中。其不僅僅包含了豐富的web組件，最重要的用途是用于響應式布局的開發(fā)。REF_Ref25684\r\h[5]即通過一種布局使網(wǎng)頁可以正常顯示在手機、pc端。主要靠的是Bootstrap的柵格化的布局，通過像柵欄一樣把網(wǎng)頁分成幾份，配合media媒體查詢使得屏幕在不同分辨率下呈現(xiàn)出不同的柵欄格局。從而使得pc網(wǎng)頁即使運行在手機端也能正常顯示。正是因為對于響應式布局的重要作用，Bootstrap一經(jīng)推出就成為了github上重要的開源項目，一直活躍到現(xiàn)在。2.5系統(tǒng)數(shù)據(jù)庫毫無疑問，MySQL是當下使用最為廣泛的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)之一。和PHP一樣，MySQL也是開源的，不需要授權(quán)費用也因此被使用非常廣泛，不論是學習還是商用，都能看到MySQL的影子。體積小速度快也是本系統(tǒng)選擇的原因。盡管功能不如大型數(shù)據(jù)庫如SQLServer完善，但對于小型公司或者項目來說，已經(jīng)是綽綽有余。MySQL使用標準的

SQL數(shù)據(jù)語言形式，而且還提供了許多PHP的API，使用小巧方便，查詢速度也很快。REF_Ref26223\r\h[9]2.6運行環(huán)境2.6.1硬件環(huán)境本系統(tǒng)開發(fā)硬件設(shè)備如下：處理器為InterCOREI7，內(nèi)存8GB，硬盤空間50G以上。較低的配置帶來的是極高的適用性，使得用戶體驗更好。2.6.2軟件環(huán)境軟件環(huán)境指的是開發(fā)人員在開發(fā)軟件的時候用到的工具。提前確定軟件環(huán)境的原因就是如果可以篩選出自己較為熟悉的方案，那么會大量節(jié)約開發(fā)的人力物力。也可以大量減少會遇到的問題。因為選擇適合自己的開發(fā)環(huán)境會對開發(fā)產(chǎn)生非常大的影響。做到不產(chǎn)生嚴重的bug，而是類似于查漏補缺的學習與開發(fā)狀態(tài)。REF_Ref26324\r\h[13]本系統(tǒng)在開發(fā)時的軟件環(huán)境主要如下：操作系統(tǒng)：window10系統(tǒng)開發(fā)工具：vscode數(shù)據(jù)庫：Mysql軟件開發(fā)語言：htmlphp2.7本章總結(jié)在本章所述工作結(jié)束之后，關(guān)于本系統(tǒng)所采用的技術(shù)、框架皆已介紹完畢。通過介紹完上述內(nèi)容，本文已完成了對系統(tǒng)開發(fā)的前期準備工作，后續(xù)內(nèi)容將全部圍繞本系統(tǒng)來進行說明。3系統(tǒng)分析系統(tǒng)分析是工程作業(yè)中不可或缺的環(huán)節(jié)。是以全局最優(yōu)化為目標，對系統(tǒng)的各個環(huán)節(jié)進行定性或者定量分析。在本文中，系統(tǒng)分析包括可行性分析，此環(huán)節(jié)分析系統(tǒng)的各個實現(xiàn)可行性，保證后續(xù)工作的順利進行。然后是功能的需求分析，即分析本系統(tǒng)受眾所需要的功能模塊并完成設(shè)計。然后是系統(tǒng)流程分析，對所設(shè)計的模塊進行實際的演示記錄，將功能落實到各個具體的模塊上。最后是數(shù)據(jù)流程分析，此環(huán)節(jié)講述了本系統(tǒng)中數(shù)據(jù)的主要傳遞方向，也是各個功能模塊之間聯(lián)系的橋梁，具有重要意義。3.1可行性分析3.1.1經(jīng)濟可行性由于該系統(tǒng)簡潔的功能面板和操作方式，因此對經(jīng)濟方面并沒有特別高的要求。同時，簡潔的功能面板使得該購物網(wǎng)站系統(tǒng)還具有良好的擴展空間，并且結(jié)構(gòu)清晰使得業(yè)務擴展更為方便，相較于較低的開發(fā)成本，帶來的效益將遠高出成本，經(jīng)濟可行性是比較強的。同時在成本方面，mysql，php等等都是開源免費的語言或工具，同時，獲得商品的詳細信息的成本也可以忽略。多個方面都可以證實本系統(tǒng)的經(jīng)濟可行性。3.1.2技術(shù)可行性在技術(shù)可行性方面，html+php+mysql的開發(fā)模式已經(jīng)是比較成熟的了，被許多開發(fā)人員所中意。html寫前端頁面，mysql提供數(shù)據(jù)庫支持，php寫后端交互，這樣的開發(fā)模式清晰簡單，可以快速上手操作，同時，發(fā)展完善的php社區(qū)也能解決遇到的疑難雜癥，種種方面都證實了本系統(tǒng)的技術(shù)可行性。3.1.3操作可行性對于服務于普通客戶的網(wǎng)站系統(tǒng)來說，操作可行性毋庸置疑是非常重要的。而且，操作方面的簡易程度很大程度上決定了系統(tǒng)的將來的推廣程度、推廣難度。所以，我們在開發(fā)系統(tǒng)的時候必須考慮操作可行性。而對本系統(tǒng)而言，操作可行性毋庸置疑是成立的。首先，本系統(tǒng)基于web開發(fā)，通過瀏覽器即可使用。使用戶與管理員都只需要通過瀏覽器而不需要安裝指定客戶端就可以進行相關(guān)操作。而且系統(tǒng)運行也只需要一臺設(shè)備就能穩(wěn)定實現(xiàn)。簡潔的功能面板也使得此系統(tǒng)操作根本不需要相關(guān)指導培訓就能立刻上手。在功能面板也是做好了需要的按鈕提示等等。而且，網(wǎng)購模式對受眾來說，已經(jīng)是一種非常普及的方式了，操作方式也是類似，而且比目前的大多數(shù)購物系統(tǒng)更加簡潔簡單，非常好上手。多個方面來看，本系統(tǒng)的操作可行性是成立的。3.2需求分析系統(tǒng)的需求分析是系統(tǒng)計劃中一個重要的階段，是開發(fā)人員經(jīng)過深思熟慮，充分了解用戶的需求和對系統(tǒng)的定位并且確認之后，將用戶口述化的需求等信息以具體實際的功能描述記錄下來。通俗來講此階段就是分析出系統(tǒng)將要做什么，去實現(xiàn)什么，而不是先去考慮怎么實現(xiàn)。系統(tǒng)需求分析應該要做到非常完善的程度，而不是已經(jīng)在開發(fā)階段了再來修改需求，這是不允許的。系統(tǒng)需求在確立了之后，要求對其的修改要降到最低，盡量不改需求才能帶來最高的開發(fā)收益。正是基于這些原因，系統(tǒng)需求是開發(fā)的全部階段里非常重要的一部分。這要求了我們對需求的分析非常細致認真，同時不能出錯，在記錄下需求的時候不能出現(xiàn)矛盾的內(nèi)容，同時需求內(nèi)容應該以模塊化的方式進行分析編寫，以帶來良好的代碼或者功能追溯性以及后續(xù)的可擴展性。3.2.1功能需求分析首先做的是系統(tǒng)中將會存在的角色以及不同角色所對應的操作的介紹，包括在前臺進行功能實現(xiàn)的用戶和在后臺登錄操作的管理員。具體功能模塊如下：圖3-1前臺普通用戶角色和操作圖3-2后臺管理員角色和操作3.2.2性能需求分析在性能需求分析中，我們應該要具備如下要求的功能性：（1）安全需求由于在本系統(tǒng)中存儲了許多的信息，不僅僅是商品商家信息，更重要的還有用戶的隱私信息，比如用戶的電話號碼、郵箱或者是訂單，都具有較高的隱私要求。對此，我們必須要有良好的安全性，同時對用戶的權(quán)限做出限制，絕不能出現(xiàn)越權(quán)操作。要核實用戶身份的真實性之后才可以進行操作。（2）便捷性由于本系統(tǒng)的受眾是普通用戶，因此系統(tǒng)里的所有功能必須要簡介易上手易操作，而不需要操作手冊等等的說明或者培訓。對此，本系統(tǒng)在兼顧簡介大方的同時，在功能模塊方面，所有的功能也都是一目了然簡潔易懂，操作簡單，可以使用戶操作起來非常方便，可以快速上手。（3）擴展性由于用戶對系統(tǒng)的需求往往具有時效性，當下的需求與未來的功能需求可能會出現(xiàn)矛盾等情況。而系統(tǒng)的開發(fā)設(shè)計實現(xiàn)等都是以當前的需求進行的，對此，我們必須要考慮系統(tǒng)擴展簡易程度或者能否進行后續(xù)的功能擴展。同時，在未來進行功能擴展的時候，不能對當前的功能結(jié)構(gòu)產(chǎn)生比較大的影響。對此，系統(tǒng)的功能設(shè)計等等要做到模塊化開發(fā)，以此來方便未來的擴展維護。（4）穩(wěn)定性系統(tǒng)在劃分功能模塊的時候，要做到“高內(nèi)聚，低耦合”，從而確保各個模塊功能的獨立性，即使一個功能模塊出現(xiàn)了異常，也可以只修改相應模塊并且不會對整體功能造成影響。這樣系統(tǒng)在以后才能穩(wěn)定運行。才能保證系統(tǒng)的可靠穩(wěn)定。3.3系統(tǒng)流程分析3.3.1系統(tǒng)開發(fā)在系統(tǒng)實際開發(fā)中，我們首先要把需求分析放在第一位，以此為基礎(chǔ)進行開發(fā)方式、流程的選擇、制定。在選擇好系統(tǒng)開發(fā)技術(shù)和模型之后，我們再設(shè)計數(shù)據(jù)庫以及編寫各個需求的功能模塊的代碼。在上述流程都完成了之后再進行最后的測試，在測試方面，往往通過黑盒測試，即忽視掉代碼，只關(guān)注于系統(tǒng)的視圖層進行各個功能的測試，在走完全部流程并且沒有異常發(fā)生的時候，系統(tǒng)開發(fā)才算完成。具體的開發(fā)流程如下圖所示圖3-3系統(tǒng)開發(fā)流程圖3.3.2登錄在登陸流程方面，由于存在前臺與后臺兩個視圖，因此也有兩個登錄頁面，但是不論是前臺的登錄界面還是后臺的登錄界面，其實現(xiàn)流程都是相同的。在輸入相關(guān)的賬號密碼之后，系統(tǒng)會識別用戶的角色，然后給予其登錄相應界面的權(quán)限，而不會出現(xiàn)越權(quán)訪問的情況。如果錯誤則會出現(xiàn)響應錯誤提示，相關(guān)的流程圖例如下：圖3-4登錄流程圖3.3.3系統(tǒng)業(yè)務流程圖在業(yè)務流程中，我們最主要關(guān)注的是商品信息（包括詳情、評價等等）、訂單信息、交易流程。這也是本系統(tǒng)的核心業(yè)務功能，其他所有的功能都是基于服務這幾個功能的情況下開發(fā)設(shè)計的。因此也是做出了相關(guān)的購買流程圖例，如下所示：圖3-5商品購買流程圖3.3.4數(shù)據(jù)流程圖對于數(shù)據(jù)庫中傳遞的數(shù)據(jù)，包括訂單信息、商品信息、用戶信息等等的讀取流程圖示如下：圖3-6數(shù)據(jù)讀取流程圖除了要讀取相關(guān)數(shù)據(jù)之外，同時對于這些數(shù)據(jù)我們還要進行數(shù)據(jù)庫的寫入，即用戶把數(shù)據(jù)傳遞給數(shù)據(jù)庫并記錄，數(shù)據(jù)寫入的流程圖示如下所述：圖3-7數(shù)據(jù)寫入流程圖除了對于商品相關(guān)數(shù)據(jù)信息的讀取與寫入之外，還有很重要的數(shù)據(jù)內(nèi)容是具體的不同的個人用戶所對應的信息的讀取和寫入。不論是前臺普通用戶還是后臺管理員用戶，對其身份信息都要進行核驗之后才能分配相關(guān)權(quán)限。過下圖所示，如果登錄判斷中，所登錄角色為普通用戶，則允許登陸前臺并對商品收藏評價購買或者自己的訂單具有讀取修改權(quán)限。如果是管理員角色，則允許登錄后臺管理系統(tǒng)，并對系統(tǒng)中的商品訂單等具體信息進行增刪改查的操作。除了對商品訂單，管理員用戶還可以在后臺的用戶列表查詢所有前臺注冊的用戶并對用戶信息進行增刪改查的操作，同時分配角色權(quán)限。用戶的賬號正常注冊界面是在前臺，但是注冊的賬號僅僅是普通用戶的賬號信息。也無法修改權(quán)限。管理員的權(quán)限只能通過后臺增加管理員用戶的操作來進行管理員賬號的添加或者刪除。具體的數(shù)據(jù)流程圖示如下：圖3-8角色數(shù)據(jù)流程圖3.4數(shù)據(jù)流程分析根據(jù)上述數(shù)據(jù)流向分析，做出本系統(tǒng)的隔層的數(shù)據(jù)流圖。3.4.1數(shù)據(jù)流圖首先是用戶登錄模塊的簡單邏輯和數(shù)據(jù)流圖，圖示如下：圖3-9數(shù)據(jù)流圖用戶在登錄時，賬號密碼信息會在數(shù)據(jù)庫中進行查詢操作并返回結(jié)果。如果查詢成功則依據(jù)查詢到的角色信息展現(xiàn)相關(guān)的個人頁面并展示相關(guān)數(shù)據(jù)。登錄完成之后，在用戶或者管理員對商品信息等進行操作的時候，數(shù)據(jù)首先傳遞給sql語句并完成相應的操作，添加或者刪除等等最后再把數(shù)據(jù)返回給師徒展現(xiàn)相關(guān)操作的結(jié)果。3.4.2數(shù)據(jù)流圖數(shù)據(jù)流圖是用圖示的方式來簡潔地表面系統(tǒng)中數(shù)據(jù)的傳遞和功能的邏輯實現(xiàn)。下圖是系統(tǒng)主要的數(shù)據(jù)走向也一些功能模塊的數(shù)據(jù)流演示。主要數(shù)據(jù)源為用戶和管理員。用戶更多是對數(shù)據(jù)的查詢操作，而管理員除了查詢還包含對數(shù)據(jù)的修改操作。圖示如下：圖3-10數(shù)據(jù)流圖3.4.3數(shù)據(jù)流圖然后是管理員部分的數(shù)據(jù)流圖介紹，在管理員部分，除了有用戶管理的模塊之外，還有商品訂單門店的數(shù)據(jù)管理。數(shù)據(jù)流主體還是用戶和管理員，具體數(shù)據(jù)流程圖如下所示：圖3-11數(shù)據(jù)流圖3.5本章總結(jié)在完成本章系統(tǒng)分析之后，系統(tǒng)的需求基本已經(jīng)落實到了各個功能模塊上。數(shù)據(jù)在各個功能模塊之間的傳遞方向也清晰易見。即完成了將需求從口頭化到紙面化的轉(zhuǎn)化。后續(xù)，在有了具體的功能模塊的需求之后，本文將開展對于系統(tǒng)功能模塊設(shè)計的介紹。

4系統(tǒng)設(shè)計概要4.1系統(tǒng)開發(fā)軟件的選擇在開發(fā)過程中，我主要采用的編譯工具是vscode，這是一款能在桌面上運行的跨平臺源代碼編輯器，而且具有豐富的語言支持和擴展生態(tài)，支持html與php的編譯。數(shù)據(jù)庫選用了mysql來提供系統(tǒng)數(shù)據(jù)支持，同時用navicat來編譯數(shù)據(jù)庫。navicat是一款用戶界面設(shè)計良好的數(shù)據(jù)庫管理工具，非常容易學習。還能以單一管理工具連接多個數(shù)據(jù)庫，在實際開發(fā)中應用廣泛。4.2系統(tǒng)總體功能設(shè)計在認真思考了系統(tǒng)的全部需求并修改完善之后，正式劃分出系統(tǒng)的功能模塊，具體內(nèi)容如下圖所示：圖4-1系統(tǒng)功能圖4.3系統(tǒng)數(shù)據(jù)庫設(shè)計4.3.1概念模型設(shè)計結(jié)束需求部分之后，首先設(shè)計的是數(shù)據(jù)庫部分。具體來說，就是用自己所選用的數(shù)據(jù)庫管理系統(tǒng)，即navicat來設(shè)計并且建立需要的數(shù)據(jù)表。確定好字段和表關(guān)聯(lián)，最后要求做到數(shù)據(jù)存儲一目了然并且可以正確地從數(shù)據(jù)庫中拿到自己需要的數(shù)據(jù)。實現(xiàn)數(shù)據(jù)庫正確傳值，完成系統(tǒng)的數(shù)據(jù)部分的功能。在正式設(shè)計的第一步就是要確立我們需要的實體。實體指的是一類事物的集合，在數(shù)據(jù)庫中也會用到這個概念，那么此系統(tǒng)數(shù)據(jù)庫中的實體分別為以下幾個部分：圖4-2商品實體圖圖4-3分類實體圖圖4-4訂單實體圖圖4-5門店實體圖4.3.2數(shù)據(jù)庫結(jié)構(gòu)設(shè)計確立完實體之后就要結(jié)合實體與系統(tǒng)需求，分析實體與數(shù)據(jù)之間的關(guān)系、流向，然后進行數(shù)據(jù)庫結(jié)構(gòu)設(shè)計，除了要規(guī)范命名、控制字段的引用之外，最后完成的數(shù)據(jù)庫結(jié)構(gòu)還要盡量減少重復無用的數(shù)據(jù)，并且要能夠穩(wěn)定運行。以下是主要的數(shù)據(jù)表設(shè)計：表4-6：管理員信息表admin序號字段名數(shù)據(jù)類型長度主鍵允許空說明1user_idint5是否id作為主鍵，自動生成2usernamechar16否管理員名3passwordchar32否管理員密碼4namechar60否管理員昵稱5emailchar60否管理員郵箱6creat_dateint10否管理員創(chuàng)建時間表4-7：用戶信息表user序號字段名數(shù)據(jù)類型長度主鍵允許空說明1user_idint8是否id根據(jù)注冊順序由系統(tǒng)自動生成2user_namechar16否用戶名3passwordchar32否用戶密碼4emailchar60否用戶郵箱5mobileint11否用戶手機號碼表4-8：商品信息表goods序號列名數(shù)據(jù)類型長度主鍵允許空說明1goods_idint8是否id根據(jù)插入順序自動生成2cate_idint5否商品種類id3goods_namechar100否商品名4now_pricedecimal10否商品現(xiàn)價5original_pricedecimal10否商品原價6goods_imagechar30否商品圖片7goods_briefchar255否商品詳情8goods_kucunint4否商品庫存數(shù)表4-9：訂單信息表order序號列名數(shù)據(jù)類型長度主鍵允許空說明1idint10是否id根據(jù)插入順序自動生成2order_idchar15否訂單號由系統(tǒng)隨機生成并且不重復3user_idmediumint8否用戶id6order_statusint1否訂單狀態(tài)（1、未付款；2、未發(fā)貨；3、未收貨；4、已完成）7goods_amountdecimal10否商品總價格9order_amountdecimal10否訂單總價格10beizhuvarchar240否訂單備注11created_dateint10否訂單創(chuàng)建日期4.4后端數(shù)據(jù)庫交互介紹4.4.1跨域解決方案由于瀏覽器是按照同源策略工作的，即無法執(zhí)行其他網(wǎng)站的腳本行為。因此我們需要修改header，以使得系統(tǒng)接受任何網(wǎng)站的訪問請求，包括POST、GET等請求方式header('Content-Type:

text/html;charset=utf-8');header('Access-Control-Allow-Origin:*');header('Access-Control-Allow-Methods:POST,GET,OPTIONS');

header('Access-Control-Allow-Credentials:

true');

header('Access-Control-Allow-Headers:

Content-Type');4.4.2數(shù)據(jù)庫建立連接在建立數(shù)據(jù)庫鏈接之后，通過定義參數(shù)method來作為后續(xù)數(shù)據(jù)庫增刪改的標志，以區(qū)分對數(shù)據(jù)庫的操作，并打包數(shù)據(jù)庫操作函數(shù)使得函數(shù)可以重復調(diào)用，節(jié)省工作量。$conn

=

new

mysql($servername,$username,$password,$dbname);if($conn->connect_error){

die("連接失敗",$conn->connect_error);}$method

=

$_POST['method'];4.4.3讀取數(shù)據(jù)表執(zhí)行時判斷參數(shù)為getlist時，執(zhí)行查詢語句，進行數(shù)據(jù)表讀取操作。將返回結(jié)果存入arr數(shù)組后，將結(jié)果打包為json格式傳遞給前端。同時通過code參數(shù)判斷函數(shù)是否成功調(diào)用。if($method=='getlist'){

$sql="SELECT

*

FROM

sql";

$arr

=array();

$res=$conn->query($sql);

if($res->num_rows>0){

while($row=$res->fetch_assoc()){

array_push($arr,$row);

}

}

echo

json_encode(array('code'=>200,'data'=>$arr));}4.4.4查詢數(shù)據(jù)表method參數(shù)為detail時執(zhí)行查詢一條記錄的函數(shù)，和上述讀取數(shù)據(jù)類似。if($method=='detail'){

$id

=

$_POST['id'];

$sql

=

"SELECT

*FROM

sql

where

id

=

$id";

echo

json_encode(array('code'=>200,'data'=>$conn->query($sql)->fetch_assoc()));}

4.4.5增加數(shù)據(jù)表記錄method參數(shù)為add是需要執(zhí)行“增”的操作，即把前端傳遞來的數(shù)據(jù)加入數(shù)據(jù)庫中。若插入成功，則code返回200，否則，返回300，以此判斷函數(shù)是否執(zhí)行成功。同時返回插入記錄的id。if($method

=

'add'){

$title

=

$_POST['title'];

$neirong

=

$_POST['neirong'];

$sql

=

"INSERT

into

sql

(title,neirong)

VALUES

('$title','$neirong')";

echo

json_encode(array('code'=>$conn->query($sql)?200:300,'data'=>$conn->insert_id));}4.4.6修改數(shù)據(jù)表記錄修改操作與上述增加操作類似。將前端返回數(shù)據(jù)插入需要執(zhí)行的數(shù)據(jù)庫語句中參與執(zhí)行。最后給出結(jié)果參數(shù)，判斷是否執(zhí)行成功。if($method

=

"xiugai"){

$title=$_POST['title'];

$neirong=$_POST['neirong'];

$id

=

$_POST['id'];

$sql

=

"UPDATE

sql

set

title

=

'$title',neirong='$neirong'

where

id

=$id";

echo

json_encode(array('code'=>$conn->query($sql)?200:300));}4.5本章總結(jié)至此，本系統(tǒng)的需求皆已經(jīng)落實到具體的功能模塊上。再落實系統(tǒng)需求完畢之后，就是依據(jù)上述概要設(shè)計進行各個功能模塊的詳細設(shè)計。

5系統(tǒng)詳細設(shè)計和實現(xiàn)5.1用戶模塊設(shè)計5.1.1用戶登陸注冊模塊設(shè)計首先是登錄模塊，登錄模塊同時也包括注冊模塊。首先，注冊界面會提示用戶輸入必要的個人信息進行注冊，個人信息會在用戶需要修改密碼的時候被引用進行身份認證。填寫完注冊相關(guān)信息，賬號密碼用于登錄驗證，郵箱用于在修改用戶密碼時候的驗證。填寫完畢后，如果信息格式無誤并且賬號郵箱并未被使用過，則會提示注冊成功并且跳轉(zhuǎn)到登錄頁面。此時也代表注冊的用戶信息已被成功加入數(shù)據(jù)庫中。在登陸頁面則是對數(shù)據(jù)庫的查詢操作，如果輸入的賬號密碼與數(shù)據(jù)庫中的用戶信息表匹配，則登陸成功并且跳轉(zhuǎn)到系統(tǒng)主頁進行購買瀏覽商品的操作。如果系統(tǒng)沒有查到相關(guān)賬號，則提示登錄失敗并提示用戶先進行注冊。用戶的注冊界面如下圖所示：圖5-1系統(tǒng)注冊模塊界面實現(xiàn)系統(tǒng)注冊主要程序段：<dl><dt><label

for="username">用戶名：</label></dt><dd><input

name="username"

id="username"

type="text"

/><p></p></dd><dt><label

for="email">郵箱：</label></dt><dd><input

name="email"

id="email"

type="text"

placeholder="@"

/><p>電子郵箱地址</p></dd><dt><label

for="password">設(shè)置密碼：</label></dt><dd><input

name="password"

id="password"

type="password"

/><p>密碼長度為6~32個字符</p></dd></dl><dl><dt><label

for="repassword">確認密碼：</label></dt><dd><input

name="repassword"

id="repassword"

type="password"/><p>確認密碼</p></dd></dl>圖5-2系統(tǒng)登錄模塊界面實現(xiàn)系統(tǒng)登錄模塊主要代碼：<h2>用戶登錄</h2><dl><dt><i></i></dt><dd><input

name="username"

id="username"

type="text"

placeholder="請輸入用戶名"

/></dd></dl><dl><dt><i

class="icon"></i></dt><dd><input

name="password"

id="password"

type="password"

placeholder="請輸入密碼"

/></dd></dl>5.1.2系統(tǒng)首頁模塊設(shè)計在登陸之后會首先展示初始頁也就是首頁。首頁上分布了跳轉(zhuǎn)到各個功能頁面的鏈接按鈕。用戶不但可以在首頁瀏覽商品，也能進入自己的個人信息頁進行信息的修改查詢。首頁決定了用戶能否方面地使用系統(tǒng)。在此系統(tǒng)中，基本的功能都已經(jīng)在首頁完成了展示，可以讓用戶快速了解系統(tǒng)的各個功能，方便用戶使用。首頁視圖如下：圖5-3系統(tǒng)首頁設(shè)計模塊界面商品首頁展示主要代碼塊：<li><div><a

href="<{url

c='goods'

a='index'

id=$v.goods_id}>"><img

alt=""

src="<{$common.baseurl}>/upload/goods/prime/150x150/<{$v.goods_image}>"

/></a></div><h3><a

href="<{url

c='goods'

a='index'

id=$v.goods_id}>"><{truncate($v.goods_name,

40)}></a></h3><p

class="price"><i>￥</i>

<{$v.now_price}></p>5.1.3系統(tǒng)商品信息模塊設(shè)計然后是主要的商品信息部分，在這里，用戶可以明了地看到各個商品。在首頁點擊不同的分類按鈕也會顯示不同的商品列表。在商品列表頁或者是首頁點擊商品圖片都可以跳轉(zhuǎn)到商品的詳情介紹頁面進行購買，操作十分便捷。商品列表頁如下圖所示：圖5-4商品信息模塊界面商品列表展示主要代碼塊：<ul><{foreach

$goods_list

as

$v}><li><div

class="im"><a

href="<{url

c='goods'

a='index'

id=$v.goods_id}>"><img

alt=""

src="<{$common.baseurl}>/upload/goods/prime/150x150/<{$v.goods_image}>"

/></a></div><h3><a

title="<{$v.goods_name}>"

href="<{url

c='goods'

a='index'

id=$v.goods_id}>"><{truncate($v.goods_name,

40)}></a></h3><p

class="price"><i>￥</i>

<{$v.now_price}></p></li><{/foreach}></ul>5.1.4系統(tǒng)商品購買模塊設(shè)計商品之后就是購物車模塊，在購物車界面中，用戶可以簡潔明了地直接看到自己選擇的所有商品?？梢栽诖隧撁嫘薷纳唐返臄?shù)量或者是刪除商品，從此頁面也可以直接跳轉(zhuǎn)到付款頁面進行后續(xù)付款操作。商品購買界面如圖所示：圖5-5商品購買模塊界面購物車功能主要程序段如下：<tr

class="cart-row"

data-key="${k}"><td><a

href="<{url

c='goods'

a='index'

id='${v.goods_id}'}>"

target="_blank"><img

src="<{$common.baseurl}>/upload/goods/prime/50x50/${v.goods_image}"

/></a> </td><td><div><a

href="<{url

c='goods'

a='index'

id='${v.goods_id}'}>"

target="_blank">${v.goods_name}</a><p

class="opts

c999

mt5">{@each

v.opts

as

o}<span

class="mr5">[${o.type}:

<font>${o.opt_text}</font>]</span>{@/each}</p></div></td><td><font>${v.now_price}

</font></td><td><button

type="button">-</button><input

type="text"

value="${v.qty}"

/><button

type="button">+</button></td><td><font>${v.subtotal}</font></td><td><a>刪除</a></td></tr>5.2管理員模塊設(shè)計5.2.1訂單管理模塊設(shè)計在后臺管理系統(tǒng)中，管理員在登陸之后可以在列表中的訂單管理中看到近期的所有訂單并對訂單進行相應操作，如查看詳情或者進行發(fā)貨操作。圖5-6訂單管理模塊界面訂單展示主要代碼段：

<td><a>${v.order_id}</a></td>

<td>$${v.created_date}</td>

<td><b>${v.order_amount}</b></td>

<td>

<p>${v.receiver}

<font

>(<b>${v.mobile}</b>)</font>

</p>

<p>${vince}

${v.city}

${v.borough}

${v.address}</p>

<p>${v.zip}</p>

</td>

<td>${v.order_status}</td>5.2.2門店管理模塊設(shè)計本系統(tǒng)還新增添了線下門店的介紹模塊，在后臺用管理員身份上傳門店信息之后，用戶在前臺便可瀏覽線下門店的信息。同時后臺管理用戶也可以對這些信息進行增刪改操作。具體操作界面如下圖所示：圖5-7門店管理界面實現(xiàn)門店信息主要程序段：

<td

width="20"><input

name="id[]"

type="checkbox"

value="${v.id}"

/></td>

<td

width="40">${v.id}</td>

<td><a

class="blue"

href="<{url

m=$MOD

c='article'

a='edit'

id='${v.id}'}>">${v.title}</a></td>

<td>$${v.cate_id|cate_text}</td>

<td

>$${v.created_date|format_date}</td>

<td>正常</td>5.2.3商品管理模塊設(shè)計此功能模塊是用來進行對商品的增刪改操作的，服務對象為后臺管理員用戶，可以簡單地使用ui即可完成對數(shù)據(jù)庫的增刪改操作，在這里，管理員可以直接看到所有商品并且可以簡便地直接對商品進行增刪改查等等操作，商品管理界面具體視圖如下所示：圖5-8商品管理界面實現(xiàn)商品信息展示功能，主要代碼如下：<td

width="20"><input

name="id"

type="checkbox"

value="${v.goods_id}"

/></td><td

width="40">${v.goods_id}</td><a

href="index.php?m=<{$MOD}>&c=goods&a=edit&id=${v.goods_id}">${v.goods_name}</a><span

class="sign">新品</span><span

class="sign">推薦</span><span

class="sign">特價</span></td><td>${v.goods_sn}</td><td

class="red">${v.now_price}</td><td>${v.stock_qty}</td><td>上架</td><td>$${v.created_date|format_date}</td>

5.3bootstarp框架應用bootstrap核心原理是網(wǎng)格系統(tǒng)，即把父容器平均分為12份，按照自己的想法把他們分給子容器，結(jié)合媒體查詢還可以進行容器的二次分配，就可以制作出強大的響應式網(wǎng)頁視圖。同時bootstap有大量的組件樣式可以調(diào)用，使得頁面布局更加簡單方便快捷。同時api文檔非常詳細，調(diào)用方便。以下為bootstrap骨架文件<!doctypehtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>Bootstrap101Template</title><!--Bootstrap--><linkrel="stylesheet"href="/bootstrap/3.4.1/css/bootstrap.min.css"integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"crossorigin="anonymous"></head><body><h1>helloworld</h1><