基于web的購(gòu)物商城的開發(fā)與實(shí)現(xiàn)

摘要網(wǎng)上購(gòu)物的人員越來(lái)越多大,各種網(wǎng)上購(gòu)物系統(tǒng)的浮現(xiàn),使人們能夠足不出戶的進(jìn)行購(gòu)物.這種現(xiàn)象對(duì)于各單位而言,無(wú)論是企業(yè)與客戶之間的交易,還是企業(yè)之間的交易,可以通過(guò)網(wǎng)上交易的方式,使交易速度得到大幅度提高,并達(dá)到節(jié)約成本的目的.現(xiàn)階段,隨著信息產(chǎn)業(yè)和計(jì)算機(jī)網(wǎng)絡(luò)數(shù)據(jù)庫(kù)技術(shù)的不斷發(fā)展,網(wǎng)上購(gòu)物的形式越來(lái)越多樣.文章主要對(duì)基于Web的網(wǎng)上購(gòu)物系統(tǒng)進(jìn)行分析,使其能夠?yàn)槿藗兊娜粘Ｉ钐峁└喾奖?。關(guān)鍵詞：網(wǎng)上購(gòu)物系統(tǒng)WEBvue-clithinkphpJavaScript引言1.1購(gòu)物商場(chǎng)的設(shè)計(jì)思想本人基于目前手機(jī)對(duì)應(yīng)大家來(lái)說(shuō)幾乎是形影不離的情況下，設(shè)計(jì)一個(gè)便捷的移動(dòng)端網(wǎng)上購(gòu)物商城系統(tǒng)，讓它也有機(jī)會(huì)與大家息息相關(guān)。該購(gòu)物系統(tǒng)使用前后端分離的設(shè)計(jì)思想，先設(shè)計(jì)好前端的每個(gè)頁(yè)面結(jié)構(gòu)，在開始畫頁(yè)面，結(jié)合前端代碼與前端框架進(jìn)行開發(fā)，代碼與圖片的相結(jié)合完成前端的結(jié)構(gòu)。后端先收集好各種數(shù)據(jù)，再把后端管理系統(tǒng)的界面設(shè)計(jì)好，把各類功能整理出來(lái)，根據(jù)需要的功能做出對(duì)應(yīng)的功能實(shí)現(xiàn)模塊，在開始做數(shù)據(jù)的處理。1.2商城開發(fā)工具的選用和介紹在當(dāng)今人人手機(jī)不離身的時(shí)代下，我將寫一個(gè)基于移動(dòng)端的一個(gè)購(gòu)物系統(tǒng)，它的開發(fā)主要包括后端數(shù)據(jù)庫(kù)的建立，后端管理以及前端頁(yè)面的Web設(shè)計(jì)。系統(tǒng)采用了我比較熟悉的VScode,Editplus,Apacheservices,pyCharm,photoshop等開發(fā)工具，做出詳細(xì)的結(jié)構(gòu)分析，前端頁(yè)面的劃分，前端頁(yè)面的功能，提供給用戶的信息做出詳細(xì)的整合，使用Vue3.0框架對(duì)前端做開發(fā)；數(shù)據(jù)的收集使用python進(jìn)行爬取,大量收集json數(shù)據(jù);后端系統(tǒng)使用PHP語(yǔ)言,采用thinnkphp5.0框架對(duì)后端數(shù)據(jù)做主要的處理，通過(guò)apache提供服務(wù)器接口，完成主要的基本功能。改購(gòu)物系統(tǒng)主要包括用戶管理功能，商品信息，店家信息展示，購(gòu)物車管理，訂單管理4大主要模塊。用戶管理實(shí)現(xiàn)了用戶的注冊(cè)，登陸，退出等主要功能；商品信息展示主要實(shí)現(xiàn)了顯示商品，商品的詳細(xì)信息，店家詳細(xì)信息，商品選購(gòu)等主要功能；購(gòu)物車管理實(shí)現(xiàn)查看商品，修改數(shù)量，刪除商品等主要功能；訂單管理包括改訂單的詳細(xì)信息，地址的填寫等主要功能。該系統(tǒng)簡(jiǎn)介有效，處于移動(dòng)端使用，符合當(dāng)代人生活習(xí)慣。2購(gòu)物商城的概要設(shè)計(jì)2.1項(xiàng)目背景介紹2.1.1網(wǎng)上商城的背景近年來(lái)，隨著網(wǎng)絡(luò)時(shí)代的迅速崛起，互聯(lián)網(wǎng)已經(jīng)成為了收集和提供信息的重要渠道并已經(jīng)深入到了傳統(tǒng)的流通領(lǐng)域。所謂時(shí)勢(shì)造英雄。各種時(shí)代化的流行領(lǐng)域迅速發(fā)展起來(lái)，尤為大家熟知的電子商務(wù)更是如日中天，在很短的時(shí)間內(nèi)就遍布全國(guó)，小到5歲，大到65，基本都熟知網(wǎng)購(gòu)，然后消費(fèi)者主要接觸的就是電子商務(wù)的前端商務(wù)平臺(tái)，在其整個(gè)流程中有著舉足輕重的作用。而購(gòu)物商場(chǎng)的騰空出現(xiàn)，為新一代的購(gòu)物方式提供了一種全新的購(gòu)物平臺(tái)。我要為大家詳細(xì)介紹的就是如何建設(shè)一個(gè)全新的網(wǎng)上購(gòu)物系統(tǒng)。網(wǎng)上購(gòu)物是一種具有交互功能的商業(yè)信息系統(tǒng)。它向用戶展示了大量的信息，包括各種各樣的商品信息，買家賣家信息等等等等，這些主要是一些靜態(tài)信息；當(dāng)然還有些較為重要的動(dòng)態(tài)信息，商品報(bào)價(jià)的實(shí)時(shí)更新，各種節(jié)日活動(dòng)折扣信息等等等等；除此之外還有較為完善的交互功能，能讓商家客服和用戶做出詳細(xì)的交流，客服為用戶對(duì)改商家的商品答疑解問(wèn)，進(jìn)一步促進(jìn)了商品成交的成交率。讓網(wǎng)購(gòu)實(shí)現(xiàn)更人性化接近化的感覺(jué)。隨著網(wǎng)絡(luò)經(jīng)濟(jì)時(shí)代的高速發(fā)展，互聯(lián)網(wǎng)已逐步深入人心，大家都熱衷與網(wǎng)上購(gòu)物，網(wǎng)上購(gòu)物已經(jīng)基本在12-60歲的人都熟悉的使用，基本實(shí)現(xiàn)了人人會(huì)網(wǎng)購(gòu)的情況出現(xiàn)。信息技術(shù)的快速發(fā)展，讓很多的人都開始采用了網(wǎng)上銷售和管理等方式。網(wǎng)上購(gòu)物極大的方便了人們的生活狀態(tài)，現(xiàn)在很多的工作黨常年的工作，基本抽不出時(shí)間到外面花大量的時(shí)間逛實(shí)體店尋找自己要的東西來(lái)購(gòu)買，而網(wǎng)上購(gòu)物則可以輕松解決這種問(wèn)題，只要一部手機(jī)，正常上網(wǎng)則可以百里挑一，輕松便捷的找到合適自己的東西，而且類型齊全，價(jià)格方面甚至都比實(shí)體店占據(jù)了很大的優(yōu)勢(shì)。網(wǎng)上購(gòu)物對(duì)社會(huì)的發(fā)展有著無(wú)比重大的意義，它完全顛覆了以前傳統(tǒng)的購(gòu)物行為與方式，它引領(lǐng)了一個(gè)跨時(shí)代的進(jìn)步。2.2模塊設(shè)計(jì)2.2.1前端模塊前端模塊的設(shè)計(jì)主要分為頁(yè)面結(jié)構(gòu)，頁(yè)面樣式，頁(yè)面功能3大結(jié)構(gòu)。頁(yè)面結(jié)構(gòu)主要分為首頁(yè)，分類，購(gòu)物車，個(gè)人首頁(yè)4大部分；首頁(yè)有各種商品展示，又分為流行，新款，精選類商品，選中該商品點(diǎn)擊即可進(jìn)入商品詳情頁(yè)面，在商品詳情頁(yè)，可以點(diǎn)擊該商品加入購(gòu)物車；也可以直接進(jìn)行購(gòu)買，可以與客服進(jìn)行交流，可以進(jìn)店看看，也可以對(duì)該商品進(jìn)行收藏。分類頁(yè)面主要用于展現(xiàn)更為詳細(xì)的物品分類，包括全身的帽子，衣服，鞋子等等等等，在每一類中還細(xì)分為3大類，包括綜合，新品和銷量，每一樣都類型多多；購(gòu)物車頁(yè)面則可以看到加入購(gòu)物車的物品，也可以在這里把該物品移除購(gòu)物車，或者添加數(shù)量，在購(gòu)物車頁(yè)面內(nèi)也可以取消選中某類商品，在下面有一個(gè)全選功能，該全選功能在本來(lái)已經(jīng)全部選中的狀態(tài)下是全部不選中的作用，其他情況均為全部選中，同行內(nèi)，還有一個(gè)合計(jì)價(jià)格，右側(cè)還有一個(gè)取計(jì)算的按鈕等功能；個(gè)人首頁(yè)則主要用來(lái)展示該用戶登陸后的個(gè)人信息，有未登陸前的頁(yè)面本身的信息，有登陸成功后該用戶的信息，其中包括他的個(gè)人余額，優(yōu)惠劵，積分等信息，還設(shè)計(jì)了一些小功能，包括一些積分商城，積分可兌換商品，和會(huì)員卡等小功能，這些是主要前端模塊的設(shè)計(jì)思想。2.2.2后端模塊后端模塊的設(shè)計(jì)主要分為三大部分，首先第一部分是收集數(shù)據(jù)；第二部分則是對(duì)后端模塊的結(jié)構(gòu)頁(yè)面的設(shè)計(jì)；第三部分則是對(duì)數(shù)據(jù)的處理，即主要是對(duì)數(shù)據(jù)的增刪改查。數(shù)據(jù)的來(lái)源主要是使用python爬取蘑菇街的大量信息，把大量信息存入數(shù)據(jù)庫(kù)，利用thinkphp5.0對(duì)數(shù)據(jù)做對(duì)應(yīng)方法的增刪改查。收集數(shù)據(jù)主要采用python對(duì)蘑菇街的信息進(jìn)行爬取，以json的格式進(jìn)行保存下拉；后端數(shù)據(jù)庫(kù)的設(shè)計(jì)主要是通過(guò)下載phpMyadmin，利用它創(chuàng)建數(shù)據(jù)庫(kù)，創(chuàng)建對(duì)應(yīng)的數(shù)據(jù)表做整體數(shù)據(jù)的存儲(chǔ)和管理；數(shù)據(jù)的處理則是使用TP5框架，利用Sql語(yǔ)句，封裝好對(duì)應(yīng)的增刪改查方法，對(duì)后端數(shù)據(jù)做出處理。后端中有管理員身份的功能模塊，也有數(shù)據(jù)處理模塊，比如有更改商品價(jià)格的功能，有更改對(duì)商品信息描述的功能等等，這是設(shè)計(jì)后端模塊的思想。

3詳細(xì)設(shè)計(jì)3.1前端模塊設(shè)計(jì)3.1.1前端的搭建前端采用vuecli3.0創(chuàng)建項(xiàng)目:首先全局下載node.js,node版本大于8.9,然后開始下載全局的npm依賴，可以在dos里使用命令:npminstall-g@vue/cli,默認(rèn)下載最新版本,或者在VScode里面的終端里面安裝,同樣安裝完之后可以使用vue-V檢測(cè)當(dāng)前安裝的版本。有了這些前提條件之后，我們可以在新建文件下開始創(chuàng)建項(xiàng)目，同樣在VScode的終端下使用命令:vuecreatemy-project-save-dev,包含開發(fā)時(shí)依賴，測(cè)試依賴；創(chuàng)建項(xiàng)目的過(guò)程有各種選項(xiàng)選擇，各個(gè)選項(xiàng)可以使用空格選擇，typescript支持使用typescript書寫源碼，router支持vue-router,vuex支持vuex;還有各種個(gè)人信息可以填寫到項(xiàng)目里面,包括作者，郵箱等個(gè)人信息，當(dāng)我們選擇好各類選項(xiàng)之后，開始安裝直到項(xiàng)目下載完成。于是我們的vue-cli3.0就已經(jīng)安裝完成，我們還可以補(bǔ)充許多開發(fā)時(shí)經(jīng)常用到的文件信息，例如，創(chuàng)建一個(gè)assests文件，里面存放一些公共css文件和一些圖片img，各種小圖標(biāo)logo，包括封裝一些常用的js方法，例如時(shí)間的格式化等一些常用的方法；在該文件下通常也會(huì)封裝該項(xiàng)目所需的大部分組件，有依賴該項(xiàng)目的文件可以放到components/content下,若不存在較強(qiáng)的依賴性，可以獨(dú)立封裝到components/common文件下，該文件夾中的組件均可以直接使用到其他項(xiàng)目中去；我們繼續(xù)可以創(chuàng)建一個(gè)network文件用于發(fā)送網(wǎng)絡(luò)請(qǐng)求的文件，里面封裝好發(fā)送網(wǎng)絡(luò)請(qǐng)求的方法，便于我們請(qǐng)求接口的數(shù)據(jù)；可以創(chuàng)建一個(gè)store文件用于對(duì)要使用到vuex的功能進(jìn)行封裝；創(chuàng)建一個(gè)view用于對(duì)各個(gè)主頁(yè)進(jìn)行統(tǒng)一的存放；可以創(chuàng)建一個(gè)vue.config.js文件，在該文件內(nèi)全局導(dǎo)出一個(gè)個(gè)文件夾目錄的別名，方便項(xiàng)目開發(fā)的時(shí)候劍神對(duì)路徑的依賴；到此可以進(jìn)行前端的開發(fā)。3.1.2前端中各頁(yè)面的設(shè)計(jì)每個(gè)頁(yè)面都使用photoshop把每個(gè)頁(yè)面大致外觀描繪出來(lái)，通過(guò)各種小格局的不斷調(diào)試，最終完善每個(gè)頁(yè)面的設(shè)計(jì)。第一步首先做好PSD，根據(jù)自己所畫的頁(yè)面，確定哪些位置將有圖片來(lái)完成，哪些位置是代碼能夠完成的，一些動(dòng)態(tài)效果需要用到j(luò)avascript來(lái)實(shí)現(xiàn)，這樣步步為營(yíng)，先把準(zhǔn)備工作完成，在開始前端的開發(fā)。3.1.3前端中各頁(yè)面中的小圖標(biāo)的獲取前端頁(yè)面中涉及很多的小圖標(biāo)，比如首頁(yè)，分類購(gòu)物車，分類，我的，和返回按鈕等，其中還包括該選項(xiàng)是否處于活躍狀態(tài)的時(shí)候的圖標(biāo)。而我對(duì)這些圖標(biāo)的選擇則在阿里巴巴矢量官網(wǎng)庫(kù)里面選擇合適的圖標(biāo)采用svg格式下載到本地使用。3.1.4前端中導(dǎo)航欄組件的封裝與使用前端的單頁(yè)面中主要使用組件化的開發(fā)思想，為了方便維護(hù)，使用地內(nèi)聚，高耦合的組件化封裝，基本實(shí)現(xiàn)一個(gè)功能一個(gè)組件，類似功能則直接導(dǎo)出封裝好的組件使用即可。而其中的導(dǎo)航欄則封裝為一個(gè)MainTabBar的一個(gè)獨(dú)立組件，其中使用了四個(gè)插槽為了分別顯示首頁(yè)，分類，購(gòu)物車，我的，四個(gè)主要頁(yè)面，其中每個(gè)頁(yè)面都有自己對(duì)應(yīng)的小圖標(biāo)，并且小圖標(biāo)都分別有兩種不同的顏色，紅色代表處于活躍狀態(tài)的時(shí)候，黑色代表處于非活躍狀態(tài)的時(shí)候。在這里先配置好路由，在router文件下的index.js文件中，每一個(gè)頁(yè)面跳轉(zhuǎn)都使用路由懶加載的方式，減輕服務(wù)器的壓力，用于在這4個(gè)頁(yè)面中跳轉(zhuǎn)，其中每一個(gè)跳轉(zhuǎn)對(duì)應(yīng)了其中的子組件，其中包括首頁(yè)-Home.vue;購(gòu)物車-Cart.vue;分類-Category.vue;我的-Profile.vue,在配置路由時(shí)候，每當(dāng)點(diǎn)擊哪里即可跳轉(zhuǎn)至哪里，其路徑的方式為history，在此還定義一個(gè)redirect重定向主要作用于默認(rèn)在首頁(yè).。到此為止，主要的4大部分內(nèi)容即可分好。3.1.5前端中首頁(yè)的開發(fā)首頁(yè)開始首先是頂部的開發(fā)，頂部中間顯示的是購(gòu)物車，也是該項(xiàng)目的主要作用，它是一個(gè)組件為NavBar.vue，該組件在頭部還分為左中右三部分，三部分均用插槽作用，這里使用插槽的主要原因是為頭部封裝一個(gè)獨(dú)立的組件，該項(xiàng)目封裝的組件均設(shè)計(jì)有默認(rèn)的樣式，可能在其他頁(yè)面也會(huì)被使用到，到時(shí)候在直接調(diào)用該組件即可；下面則是輪播圖，該輪播圖也封裝成一個(gè)獨(dú)立的組件，其輪播中的圖片在調(diào)用接口后返回?cái)?shù)據(jù)，接收到圖片使用封裝好的組件Scroll.vue開始輪播，其設(shè)計(jì)原理主要是采用了定時(shí)器，每張圖的播放時(shí)間為2.5秒，點(diǎn)擊到圖片時(shí)，定時(shí)器清除，圖片停止播放，放開即繼續(xù)播放，當(dāng)把其中的圖片向左或向右滾動(dòng)至1/3位置時(shí)，即可滑到下一張圖片，當(dāng)我們直接點(diǎn)擊其中的輪播圖后，則會(huì)跳轉(zhuǎn)至該輪播圖所在的詳情頁(yè)信息，對(duì)應(yīng)該輪播圖攜帶的主要信息測(cè)展示；接下來(lái)是一個(gè)圖片的組件HomeSwiper.vue，該組件內(nèi)部的圖片展示是調(diào)用Swiper.vue組件與他的子組件SwiperItem.vue為該組件做一個(gè)展示的結(jié)果，在整體圖片外面包裹一個(gè)<a>標(biāo)簽；接下來(lái)同樣是接口返回的一張圖片，作為一個(gè)本周流行內(nèi)容，調(diào)用了RecommendVie.vue組件，在點(diǎn)擊這張整體圖片后會(huì)跳轉(zhuǎn)至一個(gè)本周流行的商品展示頁(yè)面，展示的是本周流行的商品詳細(xì)信息；下面到了三個(gè)小分類數(shù)據(jù)，這里封裝了一個(gè)TabControl.vue組件，包括其中的流行，新款，精選三種數(shù)據(jù)的展示，當(dāng)點(diǎn)擊新款則展示新款數(shù)據(jù)，其他兩類也是如此，其中點(diǎn)擊其中的一種展示的樣式也是不一樣的，展示的樣式為紅色和下劃線，而展示的內(nèi)容包括圖片，標(biāo)題，價(jià)格和收藏量，它們用一個(gè)GoodsList.vue組件和其子組件GoodsListItem.vue進(jìn)行展示，它們均為接口返回?cái)?shù)據(jù)，當(dāng)用戶一直往下來(lái)的時(shí)候則，流行，新款，精選，三個(gè)選項(xiàng)會(huì)有一個(gè)吸頂效果，持續(xù)下拉該三項(xiàng)會(huì)停留在購(gòu)物街的下面位置，而上拉回來(lái)的時(shí)候又回消失在該位置，當(dāng)下拉到一定程度時(shí)候，右下角會(huì)出現(xiàn)一個(gè)回到頂部的小箭頭按鈕，該小按鈕也是一個(gè)封裝好的BackTop.vue的組件，當(dāng)點(diǎn)擊該按鈕時(shí)則會(huì)在200毫秒的時(shí)間回到頂部，其中當(dāng)用戶持續(xù)下拉找尋更多商品的時(shí)候會(huì)觸發(fā)上拉加載更多的時(shí)間，繼續(xù)回調(diào)接口返回更多的數(shù)據(jù)展示，可謂是任君挑選，這樣的流程下來(lái)后，首頁(yè)開發(fā)完成。3.1.6前端中BetterScroll的使用首頁(yè)中的滾動(dòng)采用的是BetterScroll作為滾動(dòng)效果，沒(méi)有采取JavaScript中的原生的滾動(dòng)，這是一個(gè)開發(fā)者已經(jīng)持續(xù)開發(fā)和維護(hù)中的一個(gè)比較好用的插件，該插件的使用方法較為簡(jiǎn)單便捷，直接在終端輸入下載命令即可，然后把BetterScroll組件直接引用進(jìn)來(lái)，在Components里面注冊(cè)，把需要滾動(dòng)的部分放到該組件內(nèi)即可，選擇該組件還有一個(gè)重要的原因，是因?yàn)樵摻M件在下拉或上拉到頂?shù)臅r(shí)候有一個(gè)回彈的效果，在移動(dòng)端中比較適用；betterScroll在使用的過(guò)程中存在不少的bug，我們?cè)谑褂眠@個(gè)組件的時(shí)候必須給定滾動(dòng)內(nèi)容一個(gè)指定高度，不能像原生滾動(dòng)一樣，以文本內(nèi)容支撐高度，而better-scroll在計(jì)算可滾動(dòng)高度時(shí)時(shí)在該組件掛載完之后，所以在內(nèi)容較長(zhǎng)，圖片較多的頁(yè)面往往會(huì)產(chǎn)生一個(gè)滾動(dòng)滾到一定位置不能繼續(xù)往下滾的bug，為了解決這個(gè)bug，我們必須在之前監(jiān)聽該首頁(yè)的圖片加載完成事件，而在我們監(jiān)聽完這個(gè)事件后，我們?cè)陂_啟調(diào)用該方法，才能保證該滾動(dòng)效果沒(méi)出現(xiàn)類似的bug。3.1.7前端中的詳情頁(yè)當(dāng)點(diǎn)擊首頁(yè)中的某一個(gè)商品的時(shí)候，它會(huì)攜帶其中的一個(gè)iid來(lái)到詳情頁(yè)面，根據(jù)攜帶過(guò)來(lái)的iid顯示該商品的詳情部分信息在此頁(yè)面做展示。該頁(yè)面頭部有5個(gè)小部分，由一個(gè)封裝好的DetailNavBar.vue組件，從左到右依次是一個(gè)返回按鈕，商品，參數(shù)，評(píng)論，推薦，這5大選項(xiàng)，其中每一個(gè)都對(duì)應(yīng)其相對(duì)的信息；其中商品詳情數(shù)據(jù)包括大量的穿著效果圖片、標(biāo)題、價(jià)格、優(yōu)惠價(jià)格、銷量、折扣信息、運(yùn)險(xiǎn)，退貨，包郵等等信息；參數(shù)信息則包括，胸圍、腰圍、褲長(zhǎng)、衣長(zhǎng)、肩寬、腰圍、圖案、顏色、季節(jié)、材質(zhì)、領(lǐng)型、袖長(zhǎng)、風(fēng)格、尺碼、版型等具體參數(shù)信息的展示；而評(píng)論信息則可以展示買家的評(píng)論信息內(nèi)容，包括該用戶的id、圖像、評(píng)論內(nèi)容和評(píng)論時(shí)間、評(píng)論圖片等內(nèi)容，同行內(nèi)還有可以點(diǎn)擊顯示更多評(píng)論內(nèi)容；而最后的推薦內(nèi)容展示風(fēng)格和首頁(yè)的上拉加載更多展示的風(fēng)格一致，而在推薦列表中則沒(méi)有做圖片的上拉加載更多，只有固定數(shù)量圖片的展示。詳情頁(yè)中的滾動(dòng)同樣是采用BetterScroll作為滾動(dòng)效果，在這里也直接調(diào)用回到頂部的組件BackTop.vue，在下拉到一定距離后則會(huì)顯示一個(gè)回到頂部按鈕，回到頂部后該按鈕消失；其中這里詳情頁(yè)的設(shè)計(jì)還有一個(gè)重點(diǎn)就是頂部四大項(xiàng)的點(diǎn)擊，同樣點(diǎn)擊其中的一項(xiàng)會(huì)有紅色的樣式作為標(biāo)志，未選中的則為黑色，而當(dāng)你點(diǎn)擊其中的一項(xiàng)時(shí)候，該詳情頁(yè)會(huì)在200毫秒跳到相應(yīng)的位置，其中的BackTop.vue組件也會(huì)在點(diǎn)擊對(duì)應(yīng)選項(xiàng)時(shí)滾動(dòng)到的位置做一個(gè)顯示；然后我們并未選擇點(diǎn)擊頂部選項(xiàng)的方式來(lái)瀏覽詳情頁(yè)的相應(yīng)內(nèi)容，選擇下拉瀏覽的時(shí)候，當(dāng)你下拉到相應(yīng)的位置時(shí)，上面的選項(xiàng)也會(huì)根據(jù)你下拉到的位置顯示相應(yīng)位置的紅色樣式。該詳情頁(yè)的導(dǎo)航欄部分則有5大部分，分別是客服、店鋪、收藏、加入購(gòu)物車、購(gòu)買功能。其中的客服功能，主要的是賣家于買家的簡(jiǎn)要溝通，兩者可以在此做一些簡(jiǎn)單的商品方面的詢問(wèn)信息等，該功能由一個(gè)Cheap.vue組件完成；店鋪信息，就是在同一家店中，找尋該店的其他商品，包括一些類似的商品，這里有GoodsList.vue和其子組件GoodsListItem.vue組件共同完成該功能。這里的收藏功能的話，在你點(diǎn)擊收藏按鈕的時(shí)候，會(huì)把該商品收藏到你的收藏夾里面，在收藏夾中展示的信息與購(gòu)物車展示的方式一樣，同樣采用CartList.vue和其子組件CartListItem.vue做一個(gè)收藏夾的展示。3.1.8前端中的購(gòu)物車購(gòu)物車頁(yè)面的頂部和首頁(yè)中的頂部使用同一個(gè)組件NavBar.vue，購(gòu)物車頁(yè)面頂部展示的是購(gòu)物車和數(shù)量，展示購(gòu)物車的的組件為CartList.vue和其子組件CartListItem.vue，該數(shù)量為所有購(gòu)物車內(nèi)的種類數(shù)量，包括選中和未選中的商品；該頁(yè)面滾動(dòng)部分也是使用BetterScroll作為滾動(dòng)；其中購(gòu)物車頁(yè)面展示的是一個(gè)圖片和部分說(shuō)明信息，價(jià)格和數(shù)量，在每一項(xiàng)的左邊還有一個(gè)選擇按鈕，當(dāng)你加在詳情頁(yè)加入購(gòu)物車后，詳情頁(yè)在中間位置會(huì)有一個(gè)吐司效果，該效果是一個(gè)Toast.vue的組件，如果選擇一個(gè)新商品添加到購(gòu)物車，則顯示添加購(gòu)物車成功，如果同一種商品多選，則會(huì)顯示選擇該商品數(shù)量+1，均在1.5秒后消失該提示信息；購(gòu)物車頁(yè)面在貼住底部導(dǎo)航欄中還有一個(gè)全選按鈕和一個(gè)合計(jì)信息和一個(gè)去計(jì)算的數(shù)量信息，由一個(gè)CartBottomBar.vue的組件完成，全選則用于對(duì)購(gòu)物車中的商品做一個(gè)全部選擇作用，如果購(gòu)物車中的所有商品已經(jīng)是全部選擇狀態(tài)，則該按鈕為全部不選擇的作用；合計(jì)信息主要是總價(jià)格的計(jì)算，用每個(gè)商品的單價(jià)乘與數(shù)量產(chǎn)生總價(jià)格；去計(jì)算按鈕則是選中的數(shù)量，與頂部的數(shù)量不是同一個(gè)作用。3.1.9前端中的分類分類頁(yè)面中的頂部依然是調(diào)用和首頁(yè)頂部相同的組件NavBar.vue，展示的信息是商品分類。而下面開始則分為左右結(jié)構(gòu)，左邊顯示商品的類別，右側(cè)則顯示你選中的類別的商品部分信息的展示。左側(cè)商品的選項(xiàng)為豎著方向的日常的穿著用品名稱，包括第一項(xiàng)統(tǒng)一性的正在流行，然后依次是上衣，褲子，裙子，內(nèi)衣，女鞋，男友，包包，運(yùn)動(dòng)，配飾，美妝，個(gè)護(hù)，家居，百貨，母嬰，食品等等，其中主要的是女性衣飾品，由一個(gè)TabMenu.vue組件展示，當(dāng)點(diǎn)擊其中的任意一項(xiàng)時(shí)，該項(xiàng)的樣式則發(fā)生改變，該選項(xiàng)左側(cè)有左劃線，字體顏色為紅色，字體大小也有明顯的變大；來(lái)到右邊部分，展示的則是你在左側(cè)選中的選項(xiàng)的對(duì)應(yīng)信息，右側(cè)展示對(duì)應(yīng)的信息時(shí)還細(xì)分為三大類，包括綜合數(shù)據(jù)，新品數(shù)據(jù)和銷量數(shù)據(jù)，這些數(shù)據(jù)的展示則是用TabControl.vue組件，這是前面也已經(jīng)封裝好的組件，而這里和首頁(yè)傳過(guò)去的參數(shù)不一樣，這里傳的是綜合，新品和銷量，這里也體現(xiàn)了復(fù)用組件的便捷性，而我們?cè)谧髠?cè)選擇自己想要的類型的時(shí)候來(lái)到右側(cè)又有三大類型挑選，可謂是內(nèi)容多多，用戶則可以在所需的對(duì)應(yīng)的商品中選擇合適自己的進(jìn)行購(gòu)買，而在我們點(diǎn)擊了心儀的商品之后，會(huì)跳轉(zhuǎn)至商品的詳情頁(yè)，該詳情頁(yè)的設(shè)計(jì)思想與在首頁(yè)中選中的商品點(diǎn)擊跳轉(zhuǎn)的詳情頁(yè)一致都是使用DetailShopInfo.vue等組件一起做一個(gè)展示，同樣來(lái)到了詳情頁(yè)之后可以選擇添加至購(gòu)物車或者直接購(gòu)買。3.1.10前端中的個(gè)人我的商城頁(yè)面中的頂部信息依然是首頁(yè)頂部的組件NavBar.vue，展示的信息為我的商城。我的商城下面則是個(gè)人信息，包括個(gè)人信息的頭像和登陸注冊(cè)功能和綁定手機(jī)號(hào)作用，其中主要由一個(gè)UserInfo.vue組件組成。在下面則展示的信息是我的余額和我的優(yōu)惠卷，還有我的消費(fèi)積分，這里的信息則是在當(dāng)前組件內(nèi)用DIV+CSS做一個(gè)結(jié)構(gòu)布置和頁(yè)面樣式，把內(nèi)容展示出來(lái)。再來(lái)到下面則依次是我的消息，積分商城，會(huì)員卡，我的購(gòu)物車，下載購(gòu)物App等功能，這里的幾大功能都是封裝好一個(gè)ListView.vue組件組成，由該組件進(jìn)行內(nèi)容的展示。3.1.11前端中的支付和支付成功我們?cè)谠斍轫?yè)面選擇好自己心儀的商品后，想對(duì)該商品進(jìn)行購(gòu)買，或者在購(gòu)物車點(diǎn)擊購(gòu)買所需的物品，則可以來(lái)到購(gòu)買頁(yè)面，這里由于支付的接口個(gè)人申請(qǐng)不到，則統(tǒng)一為購(gòu)買后直接跳轉(zhuǎn)至支付成功頁(yè)面，在支付成功后可以看到該商品的下單事件，花費(fèi)的價(jià)錢，商品的描述信息等，類似于購(gòu)物車頁(yè)面的商品信息，這里又一個(gè)SurePull.vue組件完成該功能。3.2后端模塊設(shè)計(jì)3.2.1后端的搭建在windows系統(tǒng)上，后端采用thinkphp5.0作為開發(fā)框架。首先下載Apache作為服務(wù)器，構(gòu)建虛擬主機(jī)，更改vhost和host配置文件，配置一個(gè)自己的端口號(hào)，方便預(yù)覽。開始下載TP5框架，把下載好的框架拉到Editplus進(jìn)行開發(fā)。下載phpMyadmin，在phpMyadmin中創(chuàng)建數(shù)據(jù)庫(kù)，創(chuàng)建對(duì)應(yīng)的數(shù)據(jù)表，準(zhǔn)備階段將完成。后端的搭建基本完成。3.2.2后端的數(shù)據(jù)收集后端大量數(shù)據(jù)的收集主要來(lái)源于蘑菇街，采用python在該系統(tǒng)中爬取相關(guān)的數(shù)據(jù)，在爬取的過(guò)程中需要選擇高網(wǎng)速的網(wǎng)絡(luò)，否則將會(huì)出現(xiàn)錯(cuò)誤，爬取的信息不齊，獲取爬取失敗，包括大量的圖片，圖片標(biāo)題，圖片的分類，流行的，精選的，新款的，還有詳細(xì)分類中的上衣，褲子等尺碼，評(píng)論，時(shí)間等各種描述信息，商品價(jià)格，銷售量等信息，爬取到的JSON數(shù)據(jù)存入phpMyadmin中相應(yīng)的數(shù)據(jù)庫(kù)中的數(shù)據(jù)表內(nèi)，收集好的數(shù)據(jù)將作用于項(xiàng)目的主要開發(fā)來(lái)源。3.2.3后端數(shù)據(jù)庫(kù)和表的創(chuàng)建后端采用phpMyadmin創(chuàng)建數(shù)據(jù)庫(kù)，創(chuàng)建的數(shù)據(jù)庫(kù)庫(kù)為supermall，在次數(shù)據(jù)庫(kù)內(nèi)創(chuàng)建相對(duì)應(yīng)的表，每一種分類數(shù)據(jù)對(duì)應(yīng)一張表，在對(duì)應(yīng)的數(shù)據(jù)表中，創(chuàng)建許多的字段對(duì)應(yīng)相應(yīng)的內(nèi)容，比如，前端中的輪播圖中的圖片使用一個(gè)字段，本周流行也對(duì)應(yīng)一個(gè)字段，流行，新款，精選等都有相應(yīng)的字段對(duì)應(yīng)，其中每個(gè)圖片還有對(duì)應(yīng)的id作為唯一標(biāo)識(shí)，用作于該表的主鍵。許多的數(shù)據(jù)表，基于這種結(jié)果，在對(duì)應(yīng)的需求中逐漸的添加，逐漸的修改完善。3.2.4后端中的管理頁(yè)面設(shè)計(jì)后端中，打開后端管理系統(tǒng)，則需要管理員登陸，在成功登陸后則進(jìn)入到后端管理系統(tǒng)中，該管理系統(tǒng)采用左右布局的方式，左側(cè)為管理選項(xiàng)，右側(cè)為管理信息，其中包括管理員管理，包括數(shù)據(jù)的管理，在右側(cè)的管理列表中也相對(duì)應(yīng)數(shù)據(jù)表中的各個(gè)字段做相應(yīng)的內(nèi)容展示，便于管理。后端頁(yè)面設(shè)計(jì)較為簡(jiǎn)介，樣式和布局的規(guī)劃簡(jiǎn)介明了。3.2.5后端系統(tǒng)中的主要功能后端系統(tǒng)中，有登陸功能，有修改密碼功能，在需要更改登陸密碼的時(shí)候可以使用修改密碼功能，對(duì)管理系統(tǒng)的登陸密碼進(jìn)行修改；在成功登陸進(jìn)系統(tǒng)之后，在左側(cè)的選項(xiàng)欄中可以看到有管理員模塊和數(shù)據(jù)模塊，管理員模塊中主要有添加管理員，刪除管理員，修改管理員信息等功能；而數(shù)據(jù)模塊中則有許多的功能，分別都是對(duì)數(shù)據(jù)的處理功能，包括各種圖片的路徑，圖片的標(biāo)題信息，描述信息，商品尺碼，買家評(píng)論，庫(kù)存，銷量，價(jià)格等大量的信息，此功能模塊即可對(duì)這些信息，做相應(yīng)的更改，例如，更改某商品的價(jià)格，添加商品的庫(kù)存，添加新款上市衣服等對(duì)這戲數(shù)據(jù)信息處理的功能。3.2.6后端系統(tǒng)中功能的實(shí)現(xiàn)后端系統(tǒng)中功能的實(shí)現(xiàn)，首先打開Editplus把下載好的thinkphp5.0框架拉到editplus編譯器中，開始進(jìn)行開發(fā)，對(duì)后端頁(yè)面陳述的功能的實(shí)現(xiàn)。首先找到配置文件database.php文件，在其return中，把數(shù)據(jù)庫(kù)名改為在phpMyadmin中創(chuàng)建好的數(shù)據(jù)庫(kù)名supermall，把表前綴也改為與創(chuàng)建的數(shù)據(jù)表的前綴名字一致，其他配置信心基本保持默認(rèn)，核對(duì)有沒(méi)有不一致的信息，TP5框架基本為我們寫好配置信息。在正確連接上數(shù)據(jù)庫(kù)后，我們可以開始進(jìn)行開發(fā)。我們可以在common.php中先封裝好常用的方法，例如對(duì)數(shù)據(jù)的刪除和添加兩種，而修改和查詢分為兩類方法，一個(gè)是普通查詢，一個(gè)是高級(jí)查詢，修改同樣也分普通和高級(jí)修改，這樣的處理分式，對(duì)于數(shù)據(jù)有著良好的接納性。針對(duì)于管理員功能中，我們要為管理員修改登陸密碼，即可用封裝好的普通修改密碼的方法即可，在后端頁(yè)面系統(tǒng)中，登陸頁(yè)面中則有修改密碼安妮，當(dāng)管理員需要修改密碼時(shí)，則可以使用；管理員系統(tǒng)中，還可以添加管理員，同樣點(diǎn)擊添加管理員，即在頁(yè)面輸入數(shù)據(jù)表中對(duì)應(yīng)的字段信息，則將保存到數(shù)據(jù)庫(kù)，新的管理員也就誕生了；如是該管理員離職，則需要移除賬號(hào)是，同樣，點(diǎn)擊移除該管理員，使用封裝好的刪除的方法，即可將該數(shù)據(jù)從數(shù)據(jù)庫(kù)中移除掉。一個(gè)管理員系統(tǒng)中的管理員功能的基本功能就完成了。我們要對(duì)數(shù)據(jù)模塊功能做處理，首先對(duì)于圖片的包裝，我將爬取到的各類數(shù)據(jù)，進(jìn)行詳細(xì)的分類，例如，爬取到的輪播圖中的圖片，我在數(shù)據(jù)表中創(chuàng)建了一個(gè)字段用于保存，而在用TP5框架處理的時(shí)候，則用一個(gè)數(shù)組用來(lái)保存，當(dāng)有圖片要更新或替換的時(shí)候，會(huì)在后端系統(tǒng)中有更換輪播圖的按鈕，點(diǎn)擊之后，依舊調(diào)用common.php中封裝好的方法，用于更新輪播圖的圖片。對(duì)于其他的分類，例如流行類，該類圖片設(shè)計(jì)的字段更多，其中包括有該圖片的url,title,height,link,keywords,等等很多的信息，我們單獨(dú)為它創(chuàng)建一個(gè)表，創(chuàng)建對(duì)應(yīng)的字段，給予一個(gè)主鍵用于確定它的唯一性，給定一個(gè)id，讓我們明確的分類好各鐘圖片，而我的后端系統(tǒng)中，并未對(duì)該圖片的每一項(xiàng)信息，都做對(duì)應(yīng)的更改功能，選擇部分需要常用的功能，例如價(jià)格，款式，顏色等，有變更，直接在后端做變更，同樣調(diào)用封裝好的方法，其他的新款，或者精選還有其他的分類信息，均采用該方式，對(duì)數(shù)據(jù)的處理，然后實(shí)現(xiàn)后端的功能模塊。

感謝語(yǔ)經(jīng)過(guò)這一次的項(xiàng)目開發(fā)，我有學(xué)到了很多的知識(shí)，對(duì)vue.js的理解更加深刻，對(duì)于項(xiàng)目的需求有了更加的嚴(yán)謹(jǐn)性，充分練習(xí)了我的邏輯能力，對(duì)于一個(gè)人的獨(dú)立項(xiàng)目，涉及的知識(shí)面比較寬廣，意識(shí)到自己的知識(shí)領(lǐng)域相當(dāng)?shù)莫M隘，而且對(duì)于許多新的知識(shí)也不夠了解，讓我有了對(duì)新知識(shí)的迅速學(xué)習(xí)感。在此除了自我學(xué)習(xí)外，老師也給予了我很大的技術(shù)直到和經(jīng)驗(yàn)，對(duì)于一些不自覺(jué)產(chǎn)生的bug老師總能憑著自己豐厚的經(jīng)驗(yàn)，給我我思路，根據(jù)老師提供的思路，總結(jié)bug可能產(chǎn)生的原因，根據(jù)實(shí)際情況解決bug。在此，深深的感謝我的指導(dǎo)老師，在他的指導(dǎo)下順利完成畢業(yè)設(shè)計(jì)。非常謝謝老師。參考文獻(xiàn)[1]在vue.js教科書里面參考許多方法的實(shí)現(xiàn)，功能的實(shí)現(xiàn)，了解vue.js的生命周期函數(shù)。[2]百度尋找疑惑的不解的問(wèn)題。通過(guò)找尋別人的開發(fā)經(jīng)驗(yàn)，參考我的問(wèn)題所在，做出正確的修改方案。[3]在CSS3的書本里面參考部分新出的樣式功能，相對(duì)于以前的使用javascript實(shí)現(xiàn)的效果來(lái)說(shuō)，css3簡(jiǎn)單的樣式就能實(shí)現(xiàn)這些功能，使得代碼更加的簡(jiǎn)潔。

附錄資料：不需要的可以自行刪除HYPERLINK不用鼠標(biāo)怎么用鍵盤操作電腦.有哪些快捷鍵?快捷鍵大全F1顯示當(dāng)前程序或者windows的幫助內(nèi)容。F2當(dāng)你選中一個(gè)文件的話，這意味著“重命名”F3當(dāng)你在桌面上的時(shí)候是打開“查找：所有文件”對(duì)話框F10或ALT激活當(dāng)前程序的菜單欄windows鍵或CTRL+ESC打開開始菜單CTRL+ALT+DELETE在win9x中打開關(guān)閉程序?qū)υ捒駾ELETE刪除被選擇的選擇項(xiàng)目，如果是文件，將被放入回收站SHIFT+DELETE刪除被選擇的選擇項(xiàng)目，如果是文件，將被直接刪除而不是放入回收站CTRL+N新建一個(gè)新的文件CTRL+O打開“打開文件”對(duì)話框CTRL+P打開“打印”對(duì)話框CTRL+S保存當(dāng)前*(糙)*作的文件CTRL+X剪切被選擇的項(xiàng)目到剪貼板CTRL+INSERT或CTRL+C復(fù)制被選擇的項(xiàng)目到剪貼板SHIFT+INSERT或CTRL+V粘貼剪貼板中的內(nèi)容到當(dāng)前位置ALT+BACKSPACE或CTRL+Z撤銷上一步的*(糙)*作ALT+SHIFT+BACKSPACE重做上一步被撤銷的*(糙)*作Windows鍵+M最小化所有被打開的窗口。Windows鍵+CTRL+M重新將恢復(fù)上一項(xiàng)*(糙)*作前窗口的大小和位置Windows鍵+E打開資源管理器Windows鍵+F打開“查找：所有文件”對(duì)話框Windows鍵+R打開“運(yùn)行”對(duì)話框Windows鍵+BREAK打開“系統(tǒng)屬性”對(duì)話框Windows鍵+CTRL+F打開“查找：計(jì)算機(jī)”對(duì)話框SHIFT+F10或鼠標(biāo)右擊打開當(dāng)前活動(dòng)項(xiàng)目的快捷菜單SHIFT在放入CD的時(shí)候按下不放，可以跳過(guò)自動(dòng)播放CD。在打開word的時(shí)候按下不放，可以跳過(guò)自啟動(dòng)的宏ALT+F4關(guān)閉當(dāng)前應(yīng)用程序ALT+SPACEBAR打開程序最左上角的菜單ALT+TAB切換當(dāng)前程序ALT+ESC切換當(dāng)前程序ALT+ENTER將windows下運(yùn)行的MSDOS窗口在窗口和全屏幕狀態(tài)間切換PRINTSCREEN將當(dāng)前屏幕以圖象方式拷貝到剪貼板ALT+PRINTSCREEN將當(dāng)前活動(dòng)程序窗口以圖象方式拷貝到剪貼板CTRL+F4關(guān)閉當(dāng)前應(yīng)用程序中的當(dāng)前文本（如word中）CTRL+F6切換到當(dāng)前應(yīng)用程序中的下一個(gè)文本（加shift可以跳到前一個(gè)窗口）在IE中：ALT+RIGHTARROW顯示前一頁(yè)（前進(jìn)鍵）ALT+LEFTARROW顯示后一頁(yè)（后退鍵）CTRL+TAB在頁(yè)面上的各框架中切換（加shift反向）F5刷新CTRL+F5強(qiáng)行刷新激活程序中的菜單欄F10執(zhí)行菜單上相應(yīng)的命令A(yù)LT+菜單上帶下劃線的字母關(guān)閉多文檔界面程序中的當(dāng)前窗口CTRL+F4關(guān)閉當(dāng)前窗口或退出程序ALT+F4復(fù)制CTRL+C剪切CTRL+X刪除DELETE顯示所選對(duì)話框項(xiàng)目的幫助F1顯示當(dāng)前窗口的系統(tǒng)菜單ALT+空格鍵顯示所選項(xiàng)目的快捷菜單SHIFT+F10顯示“開始”菜單CTRL+ESC顯示多文檔界面程序的系統(tǒng)菜單ALT+連字號(hào)(-)粘貼CTRL+V切換到上次使用的窗口或者按住ALT然后重復(fù)按TAB，切換到另一個(gè)窗口ALT+TAB撤消CTRL+Z使用“Windows資源管理器”的快捷鍵如果當(dāng)前選擇展開了,要折疊或者選擇父文件夾左箭頭折疊所選的文件夾NUMLOCK+負(fù)號(hào)(-)如果當(dāng)前選擇折疊了，要展開或者選擇第一個(gè)子文件夾右箭頭展開當(dāng)前選擇下的所有文件夾NUMLOCK+*展開所選的文件夾NUMLOCK+加號(hào)(+)在左右窗格間切換F6可以使用Microsoft自然鍵盤或含有Windows徽標(biāo)鍵的其他任何兼容鍵盤的以下快捷鍵。在任務(wù)欄上的按鈕間循環(huán)WINDOWS+TAB顯示“查找：所有文件”WINDOWS+F顯示“查找：計(jì)算機(jī)”CTRL+WINDOWS+F顯示“幫助”WINDOWS+F1顯示“運(yùn)行”命令WINDOWS+R顯示“開始”菜單WINDOWS顯示“系統(tǒng)屬性”對(duì)話框WINDOWS+BREAK顯示“Windows資源管理器”WINDOWS+E最小化或還原所有窗口WINDOWS+D撤消最小化所有窗口SHIFT+WINDOWS+M關(guān)閉所選文件夾及其所有父文件夾按住SHIFT鍵再單擊“關(guān)閉按鈕（僅適用于“我的電腦”）向后移動(dòng)到上一個(gè)視圖ALT+左箭頭向前移動(dòng)到上一個(gè)視圖ALT+右箭頭查看上一級(jí)文件夾BACKSPACE五、使用對(duì)話框中的快捷鍵目的快捷鍵取消當(dāng)前任務(wù)ESC如果當(dāng)前控件是個(gè)按鈕，要單擊該按鈕或者如果當(dāng)前控件是個(gè)復(fù)選框，要選擇或清除該復(fù)選框或者如果當(dāng)前控件是個(gè)選項(xiàng)按鈕，要單擊該選項(xiàng)空格鍵單擊相應(yīng)的命令A(yù)LT+帶下劃線的字母單擊所選按鈕ENTER在選項(xiàng)上向后移動(dòng)SHIFT+TAB在選項(xiàng)卡上向后移動(dòng)CTRL+SHIFT+TAB在選項(xiàng)上向前移動(dòng)TAB在選項(xiàng)卡上向前移動(dòng)CTRL+TAB如果在“另存為”或“打開”對(duì)話框中選擇了某文件夾，要打開上一級(jí)文件夾BACKSPACE在“另存為”或“打開”對(duì)話框中打開“保存到”或“查閱”F4刷新“另存為”或“打開”對(duì)話框F5選擇項(xiàng)目時(shí)，可以使用以下快捷鍵。目的快捷鍵插入光盤時(shí)不用“自動(dòng)播放”功能按住SHIFT插入CD-ROM復(fù)制文件按住CTRL拖動(dòng)文件創(chuàng)建快捷方式按住CTRL+SHIFT拖動(dòng)文件立即刪除某項(xiàng)目而不將其放入SHIFT+DELETE“回收站”顯示“查找：所有文件”F3顯示項(xiàng)目的快捷菜單APPLICATION鍵刷新窗口的內(nèi)容F5重命名項(xiàng)目F2選擇所有項(xiàng)目CTRL+A查看項(xiàng)目的屬性ALT+ENTER或ALT+雙擊可將APPLICATION鍵用于Microsoft自然鍵盤或含有APPLICATION鍵的其他兼容鍵七、Microsoft放大程序的快捷鍵這里運(yùn)用Windows徽標(biāo)鍵和其他鍵的組合。Windows徽標(biāo)+PRINTSCREEN將屏幕復(fù)制到剪貼板（包括鼠標(biāo)光標(biāo)）Windows徽標(biāo)+SCROLLLOCK將屏幕復(fù)制到剪貼板（不包括鼠標(biāo)光標(biāo)）Windows徽標(biāo)+PAGEUP切換反色。Windows徽標(biāo)+PAGEDOWN切換跟隨鼠標(biāo)光標(biāo)Windows徽標(biāo)+向上箭頭增加放大率Windows徽標(biāo)+向下箭頭減小放大率八、使用輔助選項(xiàng)快捷鍵目的快捷鍵切換篩選鍵開關(guān)右SHIFT八秒切換高對(duì)比度開關(guān)左ALT+左SHIFT+PRINTSCREEN切換鼠標(biāo)鍵開關(guān)左ALT+左SHIFT+NUMLOCK切換粘滯鍵開關(guān)SHIFT鍵五次切換切換鍵開關(guān)NUMLOCK五秒用AIT+TAB還有微軟微標(biāo)的個(gè)鍵，方向鍵。最多的是用到AITF1顯示當(dāng)前程序或者windows的幫助內(nèi)容。F2當(dāng)你選中一個(gè)文件的話，這意味著“重命名”F3當(dāng)你在桌面上的時(shí)候是打開“查找：所有文件”對(duì)話框F10或ALT激活當(dāng)前程序的菜單欄windows鍵或CTRL+ESC打開開始菜單CTRL+ALT+DELETE在win9x中打開關(guān)閉程序?qū)υ捒駾ELETE刪除被選擇的選擇項(xiàng)目，如果是文件，將被放入回收站SHIFT+DELETE刪除被選擇的選擇項(xiàng)目，如果是文件，將被直接刪除而不是放入回收站CTRL+N新建一個(gè)新的文件CTRL+O打開“打開文件”對(duì)話框CTRL+P打開“打印”對(duì)話框CTRL+S保存當(dāng)前*(糙)*作的文件CTRL+X剪切被選擇的項(xiàng)目到剪貼板CTRL+INSERT或CTRL+C復(fù)制被選擇的項(xiàng)目到剪貼板SHIFT+INSERT或CTRL+V粘貼剪貼板中的內(nèi)容到當(dāng)前位置ALT+BACKSPACE或CTRL+Z撤銷上一步的*(糙)*作ALT+SHIFT+BACKSPACE重做上一步被撤銷的*(糙)*作Windows鍵+M最小化所有被打開的窗口。Windows鍵+CTRL+M重新將恢復(fù)上一項(xiàng)*(糙)*作前窗口的大小和位置Windows鍵+E打開資源管理器Windows鍵+F打開“查找：所有文件”對(duì)話框Windows鍵+R打開“運(yùn)行”對(duì)話框Windows鍵+BREAK打開“系統(tǒng)屬性”對(duì)話框Windows鍵+CTRL+F打開“查找：計(jì)算機(jī)”對(duì)話框SHIFT+F10或鼠標(biāo)右擊打開當(dāng)前活動(dòng)項(xiàng)目的快捷菜單SHIFT在放入CD的時(shí)候按下不放，可以跳過(guò)自動(dòng)播放CD。在打開word的時(shí)候按下不放，可以跳過(guò)自啟動(dòng)的宏ALT+F4關(guān)閉當(dāng)前應(yīng)用程序ALT+SPACEBAR打開程序最左上角的菜單ALT+TAB切換當(dāng)前程序ALT+ESC切換當(dāng)前程序ALT+ENTER將windows下運(yùn)行的MSDOS窗口在窗口和全屏幕狀態(tài)間切換PRINTSCREEN將當(dāng)前屏幕以圖象方式拷貝到剪貼板ALT+PRINTSCREEN將當(dāng)前活動(dòng)程序窗口以圖象方式拷貝到剪貼板CTRL+F4關(guān)閉當(dāng)前應(yīng)用程序中的當(dāng)前文本（如word中）CTRL+F6切換到當(dāng)前應(yīng)用程序中的下一個(gè)文本（加shift可以跳到前一個(gè)窗口）在IE中：ALT+RIGHTARROW顯示前一頁(yè)（前進(jìn)鍵）ALT+LEFTARROW顯示后一頁(yè)（后退鍵）CTRL+TAB在頁(yè)面上的各框架中切換（加shift反向）F5刷新CTRL+F5強(qiáng)行刷新激活程序中的菜單欄F10執(zhí)行菜單上相應(yīng)的命令A(yù)LT+菜單上帶下劃線的字母關(guān)閉多文檔界面程序中的當(dāng)前窗口CTRL+F4關(guān)閉當(dāng)前窗口或退出程序ALT+F4復(fù)制CTRL+C剪切CTRL+X刪除DELETE顯示所選對(duì)話框項(xiàng)目的