手機商城官網(wǎng)的設(shè)計與實現(xiàn)

手機商城官網(wǎng)的設(shè)計與實現(xiàn)手機商城官網(wǎng)的設(shè)計與實現(xiàn)摘要隨著人們生活水平的不斷提高，網(wǎng)絡(luò)不斷成熟網(wǎng)上購物不斷成熟網(wǎng)上商城也越來越多，人們開始懂得了什么事真正的方便快捷，所以使網(wǎng)上商城現(xiàn)不斷走向成功，也因此在網(wǎng)上購物成為一大熱點。例如淘寶商城、京東商城、亞馬遜等各大網(wǎng)上購物網(wǎng)站都做的相當(dāng)成熟，覆蓋面也很全面。自己通過網(wǎng)上購物的感受到的了網(wǎng)上購物的便捷，思來想去產(chǎn)生了創(chuàng)建網(wǎng)上手機購物商城的想法。為了滿足消費者通過網(wǎng)上方式可以足不出的購買的自己想要的產(chǎn)品，現(xiàn)開發(fā)手機網(wǎng)上商城。手機網(wǎng)上商城為商家提供網(wǎng)上銷售平臺、管理商品信息等，網(wǎng)上手機購物系統(tǒng)還為方便用戶的使用提供了在線注冊、網(wǎng)上搜索及手機的訂購，提供了購物車及快捷的結(jié)賬功能，為不同用戶的提供不同的服務(wù)，為不同用戶設(shè)置不同權(quán)限一次來使用戶享受不同優(yōu)惠政策。使用戶感覺比在實體店面里還舒服、快捷以及可靠。因此決定開發(fā)此商城。具體實現(xiàn)：首先，從選材方面做了詳細(xì)的調(diào)研，結(jié)合當(dāng)下的網(wǎng)上購物情況的成熟以及其今后的發(fā)展做出了開發(fā)此商城的想法；因為是購物商城考慮到安全性所以選擇HTML來作為開發(fā)語言；其次用的工具是HBuilderx，主打前端頁面的設(shè)計與功能。用戶可以在平臺注冊，登錄瀏覽商品，也可以將心儀的商品加入到購物車進(jìn)行結(jié)算，又或者到前臺的新聞?wù)緝?nèi)查找新商品信息等。關(guān)鍵詞手機商城前臺后臺用戶設(shè)置HTMLWebJavaScript此頁無頁碼

此頁無頁碼目錄1. 引言 引言網(wǎng)上購物越來越受歡迎了而且成為一種潮流,網(wǎng)上購物是網(wǎng)絡(luò)發(fā)展的必然趨勢。網(wǎng)上購物的平臺有B2B的，有B2C的。大家耳熟能詳?shù)挠刑詫毦W(wǎng)、卓越網(wǎng)、當(dāng)當(dāng)網(wǎng)、易趣網(wǎng)、拍拍網(wǎng)還有一些較大網(wǎng)上商城如湖北天天電視購物等。它的發(fā)展是一種趨勢,隨著人們生活水平的不斷提高網(wǎng)絡(luò)的不斷成熟時網(wǎng)上購物也不斷成熟也越來越多。網(wǎng)上購物會出現(xiàn)兩種不同的發(fā)展趨勢：一種是走低價格路線像超市一樣有物美價廉的商品另一種是銷售高檔消費商品。隨著人民文化和生活水平的不斷提高在人們生活必需品消費價格越來越低的情況下人們對于高檔消費品的需求也會不斷提高而網(wǎng)上購物也會為這部分需求提供服務(wù)。因此網(wǎng)上購物將會向這兩個不同的方向發(fā)展擁有各自的客戶群體并且都可能會做得很好。2開發(fā)工具簡介2.1Jsp簡介JSP技術(shù)使用Java編程語言編寫類XML的tags和scriptlets，來封裝產(chǎn)生動態(tài)網(wǎng)頁的處理邏輯。網(wǎng)頁還能通過tags和scriptlets訪問存在于服務(wù)端的資源的應(yīng)用邏輯。JSP將網(wǎng)頁邏輯與網(wǎng)頁設(shè)計的顯示分離，支持可重用的基于組件的設(shè)計，使基于Web的應(yīng)用程序的開發(fā)變得迅速和容易。JSP（JavaServerPages）是一種動態(tài)頁面技術(shù)，它的主要目的是將表示邏輯從Servlet中分離出來。JSP頁面由HTML代碼和嵌入其中的Java代碼所組成。服務(wù)器在頁面被客戶端請求以后對這些Java代碼進(jìn)行處理，然后將生成的HTML頁面返回給客戶端的瀏覽器。JavaServlet是JSP的技術(shù)基礎(chǔ)，而且大型的Web應(yīng)用程序的開發(fā)需要JavaServlet和JSP配合才能完成。JSP具備了Java技術(shù)的簡單易用，完全的面向?qū)ο?，具有平臺無關(guān)性且安全可靠，主要面向因特網(wǎng)的所有特點。自JSP推出后，眾多大公司都支持JSP技術(shù)的服務(wù)器，如IBM、Oracle、Bea公司等，所以JSP迅速成為商業(yè)應(yīng)用的服務(wù)器端語言。Div+css模式介紹DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用術(shù)語之一，div+css是一種網(wǎng)頁的布局方法，這一種網(wǎng)頁布局方法有別于傳統(tǒng)的HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式，可實現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。XHTML是TheExtensibleHyperTextMarkupLanguage（可擴(kuò)展超文本標(biāo)識語言）的縮寫。XHTML基于可擴(kuò)展標(biāo)記語言（XML），是一種在HTML基礎(chǔ)上優(yōu)化和改進(jìn)的的新語言，目的是基于XML應(yīng)用與強大的數(shù)據(jù)轉(zhuǎn)換能力，適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。在XHTML網(wǎng)站設(shè)計標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實現(xiàn)各種定位。2.2HTML5基礎(chǔ)html是web前端頁面的基礎(chǔ)，html本身是只是一套標(biāo)記的符號或者是代碼集，這些標(biāo)記符和代碼構(gòu)成了web前端中的標(biāo)題，段落。每個標(biāo)記代碼都是獨立的并且有特定的功能，一個獨立的標(biāo)記代碼被稱作一個元素或者一個標(biāo)記。他們的大多都是成對出現(xiàn)，被<和>括起來。例如<h></h>、<p></p>。也有一些標(biāo)記代碼是獨立出現(xiàn)的，它們每一個都有專門的屬性例如<hr/>代表的是換行功能。2.3JavaScript簡述JavaScript是web中的一種腳本編程語言，也是一種跨平臺的，通用的，基于對象和事件驅(qū)動并具有安全性的腳本語言。它的用法很特殊，它不需要編譯而是直接鑲嵌在HTML頁面中，將靜態(tài)頁面轉(zhuǎn)變成用戶交互并響應(yīng)相應(yīng)事件的動態(tài)網(wǎng)頁。通常情況下JavaScript在web中有3種用法：一種是直接嵌入JavaScript代碼，一種是作為特點的標(biāo)簽屬性值使用，還有一種是鏈接外部JavaScript文件。其中直接嵌入JavaScript代碼的方法是在HTML文檔中用<script></scrpt>標(biāo)記將JavaScript的腳本直接嵌入當(dāng)中，在文檔中使用多個<script>標(biāo)記，每個標(biāo)記可以包含多個JavaScript的代碼集合，而且每個標(biāo)記之間也可以相互訪問。3需求分析3.1可行性分析可行性分析的任務(wù)是明確開發(fā)應(yīng)用項目的必要性和可行性。必要性來自實現(xiàn)開發(fā)任務(wù)的迫切性，而可行性則取決于實現(xiàn)應(yīng)用系統(tǒng)的資源和條件。這項工程需要建立在初步調(diào)查的基礎(chǔ)上。（1）經(jīng)濟(jì)可行性采用計算機管理不但可以提高工作效率，而且還可以節(jié)省人力、物力、財力，降低了人工處理產(chǎn)生的錯誤。由于所開發(fā)的系統(tǒng)是一個單機版的系統(tǒng)，在計算機配置方面的要求也不是很高，所以企業(yè)在軟、硬件和開發(fā)經(jīng)費上不需要進(jìn)行大的投入，并且本系統(tǒng)實施后可以顯著地提高會員管理效率，通過信息共享可以不受距離的限制，有助于實現(xiàn)信息的網(wǎng)絡(luò)化管理。（2）技術(shù)可行性該系統(tǒng)是基于B/S結(jié)構(gòu)的管理系統(tǒng)，在技術(shù)上是可以實現(xiàn)的。該系統(tǒng)是在WindowsXP系統(tǒng)環(huán)境和基于WEB的網(wǎng)絡(luò)編程開發(fā)技術(shù)jsp實現(xiàn)的，同時使用MSMysql來持久化數(shù)據(jù)。（3）操作可行性隨著科學(xué)技術(shù)的不斷發(fā)展，計算機科學(xué)的日漸成熟，其強大的功能已經(jīng)為人們深刻認(rèn)識，它己進(jìn)入人類社會的各個領(lǐng)域并發(fā)揮著越來越重要的作用。使用計算機對信息進(jìn)行管理，具有手工管理所無法比擬的優(yōu)點。因為開發(fā)所采用的工具全是可視化工具，開發(fā)出的應(yīng)用程序均是圖形化界面，界面簡潔可操作性強，操作員幾乎不用記任何命令就可以操作此系統(tǒng)。3.2功能及性能需求本系統(tǒng)是購物系統(tǒng)，有三方面的功能需求：（1）前臺商品頁面：實現(xiàn)各類手機的展示，用戶的查看，加入購物車，商品投訴信息設(shè)置。（2）后臺管理：管理商品的增刪改查，用戶的權(quán)限等。（3）庫存管理：實現(xiàn)手機進(jìn)入，出庫，銷售等。有二方面的性能需求：（1）界面風(fēng)格要求：網(wǎng)頁用戶界面。用戶界面友好，美觀且比較人性化，便于操作；（2）適用性要求：該管理軟件適用于WindowsXP及以上操作系統(tǒng)。3.3運行需求（1）用戶界面：本系統(tǒng)采用基于WEB的Jsp設(shè)計，界面簡潔，可操作性強，有強大的導(dǎo)航功能。（2）硬件接口：運行本系統(tǒng)的硬件基本要求，CPU：IntelP4及以上、內(nèi)存：2GB及以上、硬盤：500GB及以上。4系統(tǒng)設(shè)計系統(tǒng)概要設(shè)計的目的是確定系統(tǒng)如何完成預(yù)定的任務(wù)，也就是確定系統(tǒng)的物理配置方案，并且進(jìn)而確定組成系統(tǒng)的每個程序的結(jié)構(gòu)。進(jìn)行軟件結(jié)構(gòu)設(shè)計，確定軟件由哪些模塊組成以及這些模塊之間的動態(tài)調(diào)用關(guān)系。進(jìn)行軟件結(jié)構(gòu)設(shè)計時應(yīng)該遵循的最主要的原理是模塊獨立原理，也就是說：軟件應(yīng)該由一組完成相對獨立的子功能模塊組成，這些模塊之間的接口關(guān)系應(yīng)盡量簡單。自頂向下逐步求精是進(jìn)行軟件結(jié)構(gòu)設(shè)計的常用途經(jīng)，在進(jìn)行詳細(xì)的過程設(shè)計和編寫程序之前，首先進(jìn)行結(jié)構(gòu)設(shè)計，其好處在于可以在軟件開發(fā)的早期站在全局高度對軟件結(jié)構(gòu)進(jìn)行優(yōu)化，在這個時期進(jìn)行優(yōu)化付出的代價不高，卻可以使軟件質(zhì)量得到重大改進(jìn)。4.1設(shè)計原則為了使本系統(tǒng)功能齊全完備，操作簡單，最大限度的提高軟件質(zhì)量，從而滿足用戶的實際需要，在設(shè)計開發(fā)過程中遵循了以下原則：（1）準(zhǔn)確性原則：對輸入的相關(guān)資料建立檢錯機制，及時報錯，使用戶能夠及時準(zhǔn)確的輸入合法的數(shù)據(jù)。（2）易操作原則：要求設(shè)計的系統(tǒng)功能齊全，界面友好，操作方便，必要的地方進(jìn)行提示。（3）源代碼可讀性強：為了便于其他設(shè)計，維護(hù)人員讀懂代碼和以后的代碼修改，軟件升級維護(hù)，盡可能做好代碼注釋工作。4.2系統(tǒng)的功能模塊圖根據(jù)需求分析，系統(tǒng)功能模塊結(jié)構(gòu)如圖4-1所示。圖4-1功能結(jié)構(gòu)圖5系統(tǒng)實現(xiàn)5.1主頁以及登陸界面進(jìn)入系統(tǒng)的主界面在這里用戶可以進(jìn)行賬號登錄及注冊等主要功能模塊。如圖5-1 登錄頁的格式是用表格table標(biāo)簽和input標(biāo)簽聯(lián)合使用排版，再使用a標(biāo)簽超鏈接和注冊頁面。另外登錄的頁面有校驗功能：圖5-1登錄頁面5.2注冊界面本頁面是為用戶提供注冊的，只能瀏覽不能購買本站商品。如圖5-2注冊頁的格式是用p標(biāo)簽和input標(biāo)簽聯(lián)合使用排版，再使用a標(biāo)簽超鏈接和注冊頁面。圖5-2注冊頁面5.3主頁面這是登陸成功以后的主界面用戶可以看到各個商品的信息。如圖5-3 主頁面采用spring插件的方式可以使頂部的菜單框隨著用戶下拉頁面而跟隨著一直保持著置頂?shù)奈恢脠D5-3主頁面5.4購物車界面此頁面是用戶選擇好商品就可以看到詳細(xì)的信息，并選擇款式。之后加入到購物車的頁面。如圖5-4其中商品的圖片使用是輪播圖，可以使商品的照片隨著時間而切換圖片，也可以手動切換圖片<scripttype="text/javascript">classSwiper{constructor(){this.w=$('.swiper-item').width();this.num=0;this.len=$('.swiper.swiper-item').length-1;this.timer=null;}init(){//設(shè)置定時器this.setTime();//滑上停止定時器this.hover();//點擊指示this.pointClick();//點擊左右箭頭this.lrClick();}setTime(){this.timer=setInterval(()=>{this.num++; if(this.num>this.len){this.num=0;}letcssTrx=-this.num*this.w; $('.swiper-point-item.point').eq(this.num).addClass('active').siblings().removeClass('active');$('.swiper').css({transform:`translateX(${cssTrx}px)`})},3000)}hover(){$('.swiper-contione').hover(()=>{clearInterval(this.timer)},()=>{this.setTime();});}pointClick(){letthat=this;$('.swiper-point-item.point').click(function(){that.num=$(this).index();letcssTrx=-that.num*that.w; $(this).addClass('active').siblings().removeClass('active');$('.swiper').css({transform:`translateX(${cssTrx}px)`})})}lrClick(){$('.swiper-leftimg').click(()=>{this.num--;if(this.num<0){this.num=this.len;};console.log(this.num)letcssTrx=-this.num*this.w; $('.swiper-point-item.point').eq(this.num).addClass('active').siblings().removeClass('active');$('.swiper').css({transform:`translateX(${cssTrx}px)`})}); $('.swiper-rightimg').click(()=>{this.num++;if(this.num>this.len){this.num=0;}letcssTrx=-this.num*this.w; $('.swiper-point-item