手機網站商城的設計摘要對于大多數人來說，網上購物是很有必要的，而且給人們的生活帶來了便利，從而出現了網上購物商城。學生、白領和工薪階層接觸網絡時間較長，很容易接受網絡購物，網購在給人們的生活帶來便捷的同時，又能夠避免現金丟失或遭到搶劫。當今，網上購物已經走進千家萬戶，人們在網上購物的依賴性愈來愈強，漸漸地成為人們獲得大量的商品信息最主要的方式，也是人們獲取信息最方便、最快捷的途徑之一。因此，對于大多數人來說，可以直接將挑選好的商品放到網站的購物車，接著可以在網上掃二維碼購買。他們能夠便捷的通過網絡來實現購物，省去了實體店，還能避免現金丟失的麻煩。據2013年12月調查顯示，現如今搭載基于Vue開發的網站商城已占有超過65.7%的市場份額，所以，使用基于Vue開發的網站商城，用戶可以非常方便的進行記錄備忘事件，為用戶的購物，瀏覽，逛到合適的商品，直接在網上下單，而且能直接配送到目的地，設計一款基于Vue的網站商城，且操作簡便，通過互聯網來進行購物是非常有必要的。本文設計就是基于Vue開發的網站商城的設計與實現，目的是為了防止用戶現金丟失，還能通過網絡實現便捷、高速、有效地購物，通過手機這個平臺，利用互聯網，而且無需現金支付，可使用支付寶，微信進行支付，大大提高購物的便捷性以及支付的安全性。關鍵詞：手機網站商城；模塊設計；購物車目錄TOC\o"1-3"\h\u5864第一章前言 I第一章前言在很長一段的時間內我們獲取新聞的方式都是以電視、報紙、媒體等方式獲取新聞，但如今的生活節奏很快，因此很難有時間或者說很難有機會坐在電視機面前關注新聞，因此如何方便的獲取新聞信息是一個很有意義的研究方向。當前在我國智能手機是及其發達的時期，據2018年新聞報道:“中國智能手機用戶數量達到13億人次”，即經過高速的發展我國除了部分不會使用智能手機的老人、幼兒之外幾乎達到了人手一部、有的還不止一部，因此可以借助智能手機發展新聞資訊app從而讓用戶在最短的時間內獲取到新聞內容，和發布新聞內容。如果使用了頭條之家app可以在各種場景下使用產品，只要用戶能連接上網絡，打開app便可以獲取到新聞內容。通過對目前市場上應用的Symbian、WindowsPhone、IOS等主流的平臺的現狀進行分析和比較。進而研究并分析了Android平臺的組件和系統架構，接著解析了Android的生命周期機制。在此基礎上設計并開發了Android平臺下的電子備忘錄。本備忘錄系統界面友好、操作方便，具有良好的擴展性和和維護性。該系統經過模擬器和真機測試，運行穩定，滿足人們對于備忘錄的操作和使用要求。第二章Vue.js系統介紹2.1Vue.js技術簡述Vue.js于2014年開始發布截止本文撰寫已更新至Vue.js3版本。Vue.js其實是JavaScript的一種框架，或者是一個整合庫。Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue采用自底向上增量開發的設計因此Vue的核心庫只關注視圖層，由于Vue的核心只關注視圖層，因此它具有輕量化的效果并且簡單容易學習，很容易與其它第三方庫或已有項目進行整合,另外，Vue具有驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁面應用，其主要的特性有以下幾點：可擴展的數據綁定將普通的JS對象作為model簡潔明了的API組件化UI構建配合別的庫使用2.2SQLite數據庫Android系統集成了一個輕量級的數據庫SQLite，它是嵌入式的數據庫引擎，專門使用在資源有限的設備上做適量的數據存儲，如手機、iPad等。SQLite具備檢索效率高，系統開銷小等特點。SQLite實現對數據庫的存取操作的過程是，由程序直接調用相應的API來實現。它是D·理查德·希普使用一個小型C

庫，開發出來的一個強有力的嵌入式關系數據庫管理體制。SQLite實現了可嵌入的、完備的、零配置的SQL數據庫引擎。第三章系統需求分析3.1功能需求（1）首頁模塊用戶在點擊進入手機商城以后，進入主界面可以看到首頁輪播圖，以及所有的手機產品，能將手機商品加入購物車，購買或者加入商品到購物車時都要先進行登錄才能實現支付訂單功能。這樣設計的好處是，讓用戶先看到內容，然后再進行內容方面的自主選擇，用戶的粘度性比較高。（2）登錄模塊用戶在進入主界面后，點擊主界面上的登錄選項，就會彈出登錄頁面，用戶可以根據提示依次輸入賬號密碼，就可直接登錄。（3）商品詳情模塊用戶進入商品詳情頁面后，可以看到每樣商品的詳細介紹，包括參數，價格，內存還有硬件介紹，還有視頻介紹。（4）購物車模塊用戶將所有商品屬性，版本，顏色等等和地址填寫好了之后，就可以之前添加到購物車，點擊購物車之后，將顯示所有商品的價格，商品的數量，就可進行查看。（5）訂單確認模塊用戶進入訂單確認頁面后，在訂單確認頁面上可以修改收貨地址，個人信息，也可實現地址增刪改查，還有確認了商品價格，數量等信息后就可以去結算商品了。（6）訂單結算模塊用戶將商品全部選擇完畢，地址選擇好了之后，就可以直接跳轉到訂單結算，包括商品信息，商品總金額，點擊支付后可以跳轉到微信，或者支付寶進行支付。3.2性能需求此基于vue.js的手機商城網面向所有用戶，在大多數電腦上都可以運行，兼容主流瀏覽器，符合大眾需求。第四章系統模塊設計4.1整體模塊設計手機商城的主要模塊是五大模塊：首頁模塊，商品詳情模塊，購物車模塊，訂單確認模塊，訂單結算模塊?；赩ue開發的網站商城的總體程序設計結構圖見表4-1所示：圖4-1程序總體設計圖4.2登錄模塊本次登錄模塊是有賬號密碼登錄的，例如用戶輸入賬號和密碼正確后就能直接登錄，如果錯誤的話，后臺就會提示報錯。用戶登錄的流程圖如圖4-2所示：圖4-2用戶登錄界面流程圖在登錄頁面，用戶需要進行填寫賬號密碼，如果賬號和密碼不相同就會登錄錯誤，這樣做的優點:一般用戶進行登錄某個軟件時，可能會忘記密碼,那么直接使用手機號碼的登錄模式，容易操作。缺點:短信的登錄模式，會造成成本的上升。4.3首頁模塊進入首頁模塊后，那么將會展示各款手機，電視商品的展示，各種內容可以進行點擊瀏覽，并進行添加購物車等等。備忘錄添加模塊的流程圖如圖4-3所示：圖4-3首頁內容瀏覽圖第五章各模塊設計實現5.1首頁模塊5.1.1登錄模塊當進入首頁時，展現的首頁頁面。并有多個子模塊，首先第一個子模塊就是登錄框，登錄框模塊是一個常見的賬號登錄狀態，輸入賬號密碼登錄成功后，將返回首頁用戶登錄界面如圖5-1所示：圖5-1用戶登錄界面用戶登錄部分代碼如下：<template><divclass="login"><divclass="container"><ahref="/#/index"><imgsrc="/imgs/login-logo.png"alt=""></a></div><divclass="wrapper"><divclass="container"><divclass="login-form"><h3><spanclass="checked">賬號登錄</span><spanclass="sep-line">|</span><span>掃碼登錄</span></h3><divclass="input"><inputtype="text"placeholder="請輸入賬號"v-model="username"></div><divclass="input"><inputtype="password"placeholder="請輸入密碼"v-model="password"></div><divclass="btn-box"><ahref="javascript:;"class="btn"@click="login">登錄</a></div><divclass="tips"><divclass="sms"@click="register">手機短信登錄/注冊</div><divclass="reg">立即注冊<span>|</span>忘記密碼？</div></div></div></div></div><divclass="footer"><divclass="footer-link"><ahref="/u/1343480"target="_blank">河畔一角主頁</a><span>|</span><ahref="/class/113.html"target="_blank">Vue全棧課程</a><span>|</span><ahref="/class/236.html"target="_blank">React全家桶課程</a><span>|</span><ahref="/class/343.html"target="_blank">微信支付專項課程（H5+小程序/云+Node+MongoDB）</a></div><pclass="copyright">Copyright?2019AllRightsReserved.</p></div></div></template> 若用戶登錄成功，將會跳轉到首頁。效果如下：用戶登錄跳轉界面如圖5-2所示：圖5-2用戶登錄跳轉界面點擊跳轉的部分代碼如下：<script>import{mapActions}from'vuex';exportdefault{name:'login',data(){return{username:'',password:'',userId:''}},methods:{login(){let{username,password}=this;this.axios.post('/user/login',{username,password}).then((res)=>{//存儲this.$cookie.set('userId',res.id,{expires:'Session'});//this.$store.dispatch('saveUserName',res.username);//觸發action行為this.saveUserName(res.username);this.$router.push({//query傳參要用path,params傳參要用namename:'index',//query就是get的傳參params:{from:'login'}});})},...mapActions(['saveUserName']),register(){this.axios.post('/user/register',{username:'admin1',password:'admin1',email:'admin@163.com'}).then(()=>{this.$message.success('注冊成功');})}}}</script>5.1.2商品購買子模塊用戶在看了詳情介紹之后，如無問題，就可以點擊購買，并查看該地址有無現貨，可以選擇版本，顏色后，就可顯示價格。手機商品購買如圖5-3所示：圖5-3購買界面如下手機購買的部分代碼如下：<template><divclass="detail"><product-paramv-bind:title=""></product-param><divclass="wrapper"><divclass="containerclearfix"><divclass="swiper"><swiper:options="swiperOption"><swiper-slide><imgsrc="/imgs/detail/phone-1.jpg"alt=""></swiper-slide><swiper-slide><imgsrc="/imgs/detail/phone-2.jpg"alt=""></swiper-slide><swiper-slide><imgsrc="/imgs/detail/phone-3.jpg"alt=""></swiper-slide><swiper-slide><imgsrc="/imgs/detail/phone-4.jpg"alt=""></swiper-slide><!--Optionalcontrols--><divclass="swiper-pagination"slot="pagination"></div></swiper></div><divclass="content"><h2class="item-title">{{}}</h2><pclass="item-info">相機全新升級/960幀超慢動作/手持超級夜景/全球首款雙頻GPS/驍龍天璣8100處理器/紅<br/>外人臉解鎖/AI變焦雙攝/三星AMOLED屏</p><divclass="delivery">小米自營</div><divclass="item-price">{{product.price}}元<spanclass="del">2399元</span></div><divclass="line"></div><divclass="item-addr"><iclass="icon-loc"></i><divclass="addr">北京北京市朝陽區清河街道</div><divclass="stock">有現貨</div></div><divclass="item-versionclearfix"><h2>選擇版本</h2><divclass="phonefl":class="{'checked':version==1}"@click="version=1">8GB+128GB全網通</div><divclass="phonefr":class="{'checked':version==2}"@click="version=2">4GB+64GB移動4G</div></div><divclass="item-color"><h2>選擇顏色</h2><divclass="phonechecked"><spanclass="color"></span>深空灰</div></div><divclass="item-total"><divclass="phone-infoclearfix"><!--版本選擇實現方式--><divclass="fl">{{}}{{version==1?'8GB+128GB全網通':'4GB+64GB移動4G'}}深灰色</div><divclass="fr">{{product.price}}元</div></div><divclass="phone-total">總計：{{product.price}}元</div></div><divclass="btn-group"><ahref="javascript:;"class="btnbtn-hugefl"@click="addCart">加入購物車</a></div></div></div></div><divclass="price-info"><divclass="container"><h2>價格說明</h2><divclass="desc"><imgsrc="/imgs/detail/item-price.jpeg"alt=""></div></div></div><service-bar></service-bar><modal:title="title"sureText="查看購物車"btnType="1"modalType="middle":showModal="showModal"@submit="goToCart"@cancel="showModal=false"><!--名為body的插槽--><templatev-slot:body><p>商品添加成功！</p></template></modal></div></template>5.2購物車模塊為完善購買功能，讓用戶體驗更為方便簡潔，故添加了購物車模塊。此模塊的用途在于當用戶想要購買其他商品之時，可以先將此商品加入購物車的同時，可以去逛其他的商品，最后在購物車里面可以先去選擇想購買哪些商品，而且多了的商品也可進行增刪。購物車模塊界面如圖5-4所示：圖5-4購物車界面購物車模塊代碼如下：<template><divclass="cart"><order-headertitle="我的購物車"><templatev-slot:tip><span>溫馨提示：產品是否購買成功，以最終下單為準哦，請盡快結算</span></template></order-header><divclass="wrapper"><divclass="container"><divclass="cart-box"><ulclass="cart-item-head"><liclass="col-1"><spanclass="checkbox"v-bind:class="{'checked':allChecked}"@click="toggleAll"></span>全選</li><liclass="col-3">商品名稱</li><liclass="col-1">單價</li><liclass="col-2">數量</li><liclass="col-1">小計</li><liclass="col-1">操作</li></ul><ulclass="cart-item-list"><!--v-for進行列表循環--><liclass="cart-item"v-for="(item,index)inlist"v-bind:key="index"><divclass="item-check"><!--v-bind判斷什么時候返回checked，如果checked為true的話，就添加checked--><spanclass="checkbox"v-bind:class="{'checked':ductSelected}"@click="updateCart(item)"></span></div><divclass="item-name"><imgv-lazy="ductMainImage"alt=""><span>{{ductName+','+ductSubtitle}}</span></div><divclass="item-price">{{ductPrice}}</div><divclass="item-num"><divclass="num-box"><ahref="javascript:;"@click="updateCart(item,'-')">-</a><span>{{item.quantity}}</span><ahref="javascript:;"@click="updateCart(item,'+')">+</a></div></div><!--這里是顯示商品的總價格--><divclass="item-total">{{ductTotalPrice}}</div><!--顯示刪除購物車商品--><divclass="item-del"@click="delProduct(item)"></div></li></ul></div><divclass="order-wrapclearfix"><divclass="cart-tipfl"><ahref="/#/index">繼續購物</a>共<span>{{list.length}}</span>件商品，已選擇<span>{{checkedNum}}</span>件</div><divclass="totalfr">合計：<span>{{cartTotalPrice}}</span>元<ahref="javascript:;"class="btn"@click="order">去結算</a></div></div></div></div><service-bar></service-