基于vue的聯(lián)通積分商城數(shù)據(jù)可視化APP設(shè)計與實現(xiàn)

目錄TOC\o"1-3"\h\u摘要 引言現(xiàn)今，科技發(fā)展勢頭迅猛，信息技術(shù)也隨之得到了進一步發(fā)展，所以數(shù)據(jù)可視化已成為當今社會極其重要的領(lǐng)域之一。在這個大數(shù)據(jù)時代，需要解決的關(guān)鍵性問題，就是如何在錯綜龐雜的數(shù)據(jù)中，高速處理、分析數(shù)據(jù)內(nèi)部的信息規(guī)律。數(shù)據(jù)可視化經(jīng)過幾代人共同的發(fā)展，由最初的計算機圖形學，發(fā)展到如今的多種表現(xiàn)形式，例如實時動態(tài)變化、用戶交互使用等，對人們而言提供了多樣選擇，而且更有助于人們認識和理解數(shù)據(jù)?，F(xiàn)在處于大數(shù)據(jù)時代，數(shù)據(jù)可視化也并不是一個新的技術(shù)，因為人們對數(shù)據(jù)分析的需求越來越強烈，所以數(shù)據(jù)可視化越發(fā)的讓人灼以重視。對于開發(fā)者來說，數(shù)據(jù)分析是一個比較困難的問題，數(shù)據(jù)可視化相對是較為容易的，但是對當今社會而言，數(shù)據(jù)可視化卻是一個重要的技術(shù)。目前來看，國內(nèi)外發(fā)展是有一定差距的。在國外，數(shù)據(jù)可視化的發(fā)展歷程已經(jīng)相當之久，其應(yīng)用范圍和影響也隨之逐漸擴大。早期，在數(shù)據(jù)可視化這個新興領(lǐng)域，國外對其重視的程度遠超國內(nèi)，他們不僅在這方面投入大量財力、物力，而且還有政府、高校為此專門成立各種研究機構(gòu)，用來探索數(shù)據(jù)奧妙。相對于國外，國內(nèi)數(shù)據(jù)可視化發(fā)展幾乎晚了近十年之久，但也取得了一定的成果。由于近幾年國內(nèi)互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，也帶動了高校、研究院、互聯(lián)網(wǎng)公司等研究機構(gòu)對數(shù)據(jù)可視化方面的研究，在數(shù)據(jù)可視化學術(shù)和應(yīng)用方面取得了很大的進步。阿里巴巴旗下DataV數(shù)據(jù)可視化，已經(jīng)頗有追趕世界一流技術(shù)的趨勢，而且學習開發(fā)愈發(fā)簡單易懂，場景模板愈加完善，數(shù)據(jù)接入方式愈加強大，例如天貓雙十一狂歡購物節(jié)，阿里巴巴總部大屏展示的各類產(chǎn)品交易額數(shù)據(jù)，實現(xiàn)對大量數(shù)據(jù)進行穩(wěn)定的實時更新，為數(shù)據(jù)可視化研究樹立了一個新的里程碑；相對于阿里巴巴這個新起之秀，我們更為熟知的百度ECharts數(shù)據(jù)可視化圖表開發(fā)，同樣是國內(nèi)數(shù)據(jù)可視化頂尖的存在，它以更強的兼容性深得數(shù)據(jù)可視化開發(fā)者的喜愛。本系統(tǒng)主要針對聯(lián)通公司積分商城APP應(yīng)用的數(shù)據(jù)可視化的設(shè)計與實現(xiàn)。數(shù)據(jù)分析交互顯示是系統(tǒng)的核心，其次能夠高速處理、分析大量數(shù)據(jù)，并通過前后端數(shù)據(jù)交互展示，實現(xiàn)數(shù)據(jù)實時更新監(jiān)控，并且創(chuàng)建有吸引力的數(shù)據(jù)圖表，通過大數(shù)據(jù)獲取意見，為用戶提供具有決策性地數(shù)據(jù)依據(jù)，創(chuàng)造商業(yè)價值。本文通過對數(shù)據(jù)可視化技術(shù)的研究，采用Web前端技術(shù)以及可視化框架實現(xiàn)了數(shù)據(jù)可視化系統(tǒng)，實現(xiàn)了數(shù)據(jù)特征以及規(guī)律易發(fā)現(xiàn)的效果REF_Ref6797\r\h[1]。本文第1章主要是對開發(fā)系統(tǒng)前端技術(shù)介紹。本章通過對前端頁面開發(fā)語言、MVVM開發(fā)模式、Vue框架、Axios技術(shù)、ECharts插件以及數(shù)據(jù)庫MySQL技術(shù)等介紹，簡單說明這些技術(shù)框架的主要功能和優(yōu)缺點。第2章則是對系統(tǒng)前端開發(fā)的具體分析，本章中簡要的介紹了對前端開發(fā)的功能與非功能性需求分析，通過前端模塊分析圖，說明了該系統(tǒng)都具備哪些功能模塊，以及提前了解好系統(tǒng)性能等方面對所產(chǎn)生的影響。第3章為前端的設(shè)計工作，主要介紹了開發(fā)架構(gòu)設(shè)計、開發(fā)系統(tǒng)各個頁面模塊功能設(shè)計以及數(shù)據(jù)庫中部分數(shù)據(jù)表設(shè)計，為接下來具體實現(xiàn)做好基礎(chǔ)說明。第4章介紹了開發(fā)系統(tǒng)的具體實現(xiàn)過程，主要對開發(fā)環(huán)境的部署和項目的創(chuàng)建進行了簡單的介紹，由此來實現(xiàn)了各頁面在實際應(yīng)用中的具體功能，在各個頁面實現(xiàn)過程中列舉了該頁面主要的一些數(shù)據(jù)接口，并在章節(jié)最后簡要的說明了該開發(fā)系統(tǒng)的創(chuàng)新點。第5章對開發(fā)系統(tǒng)的測試，本章節(jié)按照該開發(fā)系統(tǒng)各個頁面中不同的功能點進行檢查測試，在兼容性方面，主要用到Chrome瀏覽器，來完成了該項目前端性能測試。1前端技術(shù)介紹1.1前端開發(fā)語言隨著軟件開發(fā)技術(shù)的發(fā)展，Web前端開發(fā)不可避開的技術(shù)就是HTML5、CSS3、JavaScript這三個核心技術(shù)，都是基于此開發(fā)的各種技術(shù)框架和解決方案REF_Ref7215\r\h[2]。1.1.1HTML5HTML5是超文本標記語言HTML的第5代版本REF_Ref30527\r\h[3]。通過一代一代的版本變更，HTML5增加了很多非常實用的新特性和功能REF_Ref30922\r\h[4]，值得一提的是HTML5通過Canvas實現(xiàn)了動畫操作。在2010年，蘋果宣布其移動設(shè)備不支持Flash插件后，HTML5標準更是迅速成為移動網(wǎng)站打造豐富的網(wǎng)頁應(yīng)用的首選REF_Ref7389\r\h[5]REF_Ref7389\n\h。其由眾多的新特性組成，其功能也是呈現(xiàn)多樣化，因此，將其用于移動互聯(lián)網(wǎng)開發(fā)中的頁面設(shè)計，更易滿足開發(fā)人員、用戶在頁面整體視覺效果方面的需求REF_Ref7856\r\h[6]。1.1.2CSS3CSS3作為一種對網(wǎng)頁內(nèi)容的修飾技術(shù)，以便捷式的操作，得到了眾多前端開發(fā)者的追捧。不僅可以對網(wǎng)頁布局進行科學合理的控制，提高代碼重用率和網(wǎng)頁傳輸速率，而且還能簡化HTML中的繁瑣標記，避免重復勞動的現(xiàn)象發(fā)生REF_Ref8022\r\h[7]。其繼承了CSS的功能特性，而且新增了很多屬于自己的特性，其中主要新增特性有邊框圓角設(shè)置、多層背景圖片設(shè)置、多方向顏色漸變、動畫設(shè)置以及多種藝術(shù)字體設(shè)置等等。所以有效地運用CSS3技術(shù)可令網(wǎng)頁的布局更加靈活，頁面效果更新穎美觀REF_Ref32477\r\h[8]。1.1.3JavaScriptJavaScript作為一種輕量級的編程語言，是完全可以被嵌入到HTML頁面代碼中，并且?guī)缀蹩梢灾С炙袨g覽器來代為執(zhí)行。JavaScript雖然被嵌入到了HTML文檔中，但其程序的語法規(guī)則還是與java非常接近的REF_Ref8567\r\h[9]。隨著科技的發(fā)展變化，JavaScript技術(shù)在前端編程中的地位越發(fā)的重要。其能夠成為Web當中最流行的腳本編寫語言，與其自身所具備的特點是分不開的，相比于其他語言都是先進性編譯后再進行執(zhí)行操作，JavaScript則是在瀏覽器中直接進行執(zhí)行操作，同時不僅可以創(chuàng)建新的對象，還可以對已經(jīng)存在的對象進行引用操作，完全符合封裝、繼承、多態(tài)等面向?qū)ο缶幊烫卣鳌?.2MVVM開發(fā)模式MVVM模式最早由JohnGossman在2005年正式提出REF_Ref313\r\h[10]，其將數(shù)據(jù)層，業(yè)務(wù)邏輯層以及表現(xiàn)層區(qū)分開來，以最大程度的使得業(yè)務(wù)邏輯與界面分離開REF_Ref9018\r\h[11]。如同其他語言的更新過程一樣，MVVM開發(fā)模式也是由MVC模式逐漸衍生而來，不僅繼承了MVC的特性，還由此更新了屬于自己的獨特特性。基于MVVM開發(fā)模式的軟件架構(gòu)可以分離成為View、Model和ViewModel三層，如圖1.1所示，使數(shù)據(jù)和界面得到很好的分離，達到軟件設(shè)計中的“高內(nèi)聚，低耦合”的目標REF_Ref9132\r\h[12]。圖1.1MVVM模型在MVVM開發(fā)模式中，三個模塊各司其職，但是互相聯(lián)系密切，其中占主導地位的是ViewModel層，作為View層和Model層之間的溝通介質(zhì)，其作用不言而喻，扮演著數(shù)據(jù)的傳遞者，實現(xiàn)對數(shù)據(jù)的同步整理。以MVVM框架為開發(fā)基礎(chǔ)，在前端開發(fā)中，數(shù)據(jù)變化的監(jiān)聽主要通過對象的訪問器屬性來實現(xiàn)REF_Ref9449\r\h[13]。鑒于MVVM開發(fā)模式，使人們可以做到對Web的簡化開發(fā)，大大的減少了開發(fā)者對其的開發(fā)成本。1.3Vue框架Vue作為目前三大主流的前端框架之一，它是一個非常靈活開放的解決方案。它允許你以任何的方式來組織應(yīng)用程序，著重關(guān)注MVVM開發(fā)模式下，前端的View和Model模塊。作為輕量級的前端開發(fā)框架，與另外兩個主流重量級框架（ReactREF_Ref1221\r\h[14]和AngularREF_Ref1266\r\h[15]）相比，Vue的顯得更為專注于某一階段或某一方面。所以Vue框架更適合于前端開發(fā)的初學者，易于上手實踐操作。Vue通過雙向響應(yīng)數(shù)據(jù)綁定系統(tǒng)巧妙地處理了前端關(guān)于數(shù)據(jù)綁定的最大問題。Vue除了解決在對數(shù)據(jù)綁定上的問題，還有諸多可圈可點的主要功能，其中組件化是Vue的核心技術(shù)所在，比如在一個頁面中，我們可以分為若干個小模塊，并把它們作為各個通用組件，只需要在使用時將其引入即可，這樣的組件化操作，不僅利于后期維護，還可以在相同的功能模塊中進行重復利用。Vue中不僅在使用中功能強大，而且在學習過程中，也同樣的通俗易懂，其包含了大部分的HTML的語法，能夠被大部分瀏覽器解析。1.4Axios技術(shù)在Vue1.0版本時,開發(fā)者常使用的是官方推薦的ajax庫vue-resource。當Vue2.0發(fā)布之后，官方推薦開發(fā)者使用Axios，并且不再對vue-resource進行更新維護REF_Ref14939\r\h[16]，在這之后Axios被越來越多的開發(fā)者所了解。而Axios在大部分項目中都會使用到其http請求功能，Axios在使用中通常會以兩個參數(shù)字段存在（data和params），其中主要請求方式為兩種GET方法請求和POST方法請求，由此方法請求調(diào)用相對應(yīng)的接口，來實現(xiàn)前后端的交互操作。1.5EChartsECharts（Enterprise

Charts），是國內(nèi)的一款非常優(yōu)秀的的可視化圖表控件REF_Ref11395\r\h[17]，其中它不僅支持的圖標種類眾多，而且支持的繪制圖案也是種類繁多。比如ECharts官網(wǎng)所介紹的不同樣式的折線圖、顏色漸變的柱狀圖、多樣化的餅狀圖等基本圖形，還有比較高級的3D曲面圖、3D路徑圖、GL矢量場圖等復雜圖形，為開發(fā)者在實際應(yīng)用中提供更多的選擇空間。1.6數(shù)據(jù)庫技術(shù)MySQL是一種關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，關(guān)系數(shù)據(jù)庫將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個大倉庫內(nèi)REF_Ref2187\r\h[18]，在使用MySQL數(shù)據(jù)庫時，通過分布式對數(shù)據(jù)進行儲存，可以實現(xiàn)安全快速的執(zhí)行存儲操作，并且可以通過簡單地編程，實現(xiàn)復雜的判斷運算。另外，由于MySQL具備開源、簡單易用等特點，所以其使用成本較低，更促進了其應(yīng)用推廣REF_Ref8912\r\h[19]。1.7本章小結(jié)本章節(jié)介紹了該項目前端開發(fā)過程中所需的基本技術(shù)，包括了HTML5、JavaScript、CSS3、MVVM開發(fā)模式、Vue框架、Axios技術(shù)、ECharts以及數(shù)據(jù)庫MySQL技術(shù)等，在項目開發(fā)中都有所涉及，也是設(shè)計與實現(xiàn)本系統(tǒng)的重要前提。2前端開發(fā)的分析2.1功能性需求分析圖2.1前端模塊分析圖如圖2.1所示，登錄頁面，包含登錄前的個人信息驗證；首頁，主要用于統(tǒng)計顯示用戶訪問量情況，其中包括應(yīng)用積分及兌換率、應(yīng)用用戶及活躍率、收入及利潤、商品瀏覽量及訂單量等數(shù)據(jù)信息顯示功能；流量分析頁面，其中主要展示的內(nèi)容有對用戶訪問次數(shù)(VV)、獨立訪客(UV)、瀏覽次數(shù)(PV)等渠道來源分布趨勢的數(shù)據(jù)顯示功能；轉(zhuǎn)化分析頁面，其中主要展示的內(nèi)容有由訪客向消費客戶的轉(zhuǎn)化環(huán)節(jié)分布趨勢的數(shù)據(jù)顯示工能；用戶分析頁面，其中主要展示內(nèi)容有用戶應(yīng)用積分及兌換率、應(yīng)用用戶及活躍率、新老用戶頁面及客戶歸屬頁面入口等功能，新老客戶頁面，主要展示內(nèi)容為新老用戶分布趨勢，用戶歸屬頁面，主要展示內(nèi)容為用戶歸屬地數(shù)據(jù)及用戶歸屬地用戶多少排名；商品分析頁面，其中主要展示內(nèi)容有商品瀏覽量及訂單量、收入及利潤、選品推薦頁面及商品渠道頁面入口等功能，選品推薦頁面，主要展示內(nèi)容為商品品類分布趨勢，商品渠道頁面，主要展示內(nèi)容為商品銷售渠道分布趨勢。2.2非功能性需求分析開發(fā)者在進行系統(tǒng)功能性需求分析時，將不直接關(guān)系到為用戶提供服務(wù)的功能稱之為非功能性需求。非功能性需求一般與系統(tǒng)的總體特性相關(guān)，可以看作是對系統(tǒng)質(zhì)量的要求REF_Ref2400\r\h[20]。2.2.1兼容性需求在我們進行項目開發(fā)工作時，會碰到各種兼容問題，而各種瀏覽器的兼容性問題，則是前端開發(fā)者在開發(fā)時勢必會遇到麻煩。隨著科技化不斷進步，市場上的瀏覽器也呈百花爭鳴般出現(xiàn)，由于不同的瀏覽器以及不同版本的內(nèi)核都不一樣，在兼容性上可能會導致一些效果產(chǎn)生偏差或者無法實現(xiàn)REF_Ref2573\r\h[21]。因此，如何解決高版本和不同瀏覽器之間的兼容性將是前端開發(fā)者重點解決的問題。2.2.2性能需求軟件性能被廣泛應(yīng)用與改進軟件質(zhì)量、提高軟件可靠性方面REF_Ref2635\r\h[22]。在開發(fā)時，讓系統(tǒng)達到一個穩(wěn)定的性能，給用戶一個完美的體驗，是開發(fā)工程師的最終目標。綜上所述，我們要格外的重視對開發(fā)代碼的優(yōu)化處理過程。其中，主要優(yōu)化的方面有適當?shù)臏p少HTTP請求操作、減少DOM操作、數(shù)據(jù)的交換使用、合理使用CSS樣式和HTML標簽、優(yōu)化圖片等。2.3本章小結(jié)本章中簡要的介紹了對前端開發(fā)的功能與非功能性需求分析，通過前端模塊分析圖，說明了該系統(tǒng)都具備哪些功能模塊，以及提前了解好系統(tǒng)性能等方面對所產(chǎn)生的影響。3前端開發(fā)的設(shè)計3.1前端架構(gòu)設(shè)計根據(jù)該項目開發(fā)情況，本系統(tǒng)使用了MVVM開發(fā)模式，進行了前后端分離開發(fā)，其中前端開發(fā)中對CSS、HTML、JavaScript、HTTP等都有涉及。如圖3.1所示，為我們展示了本開發(fā)項目的一個整體的架構(gòu)，其中本文主要研究的是架構(gòu)中的前端工程，其余部分分別由后端開發(fā)人員和數(shù)據(jù)庫開發(fā)人員完成。圖3.1整體架構(gòu)圖3.2系統(tǒng)功能設(shè)計3.2.1登錄頁面設(shè)計登錄頁面設(shè)計，由用戶名、用戶密碼、驗證碼、忘記密碼和登錄按鈕等構(gòu)成的一個表單。當用信戶息填寫正確時，點擊登錄按鈕，跳轉(zhuǎn)首頁，實現(xiàn)登錄成功。交互設(shè)計如圖3.2所示。圖3.2登錄頁設(shè)計3.2.2首頁頁面設(shè)計首頁頁面為系統(tǒng)登錄成功所跳轉(zhuǎn)的主頁。主頁面包括首頁顯示部分和彈框隱藏頁面部分。首頁顯示主要由隱藏彈框按鈕、訪問量情況（PV、VV、UV）、輪播圖展示、公告條、應(yīng)用積分模塊（應(yīng)用積分：當日、累計、環(huán)比；兌換率：當日、累計、環(huán)比）、應(yīng)用用戶模塊（應(yīng)用用戶：當日、累計、環(huán)比；活躍率：當日、累計、環(huán)比、進度）、收入模塊（收入：當日、累計、環(huán)比；利潤：當日、累計、環(huán)比）、商品瀏覽量模塊（商品瀏覽量：當日、累計、環(huán)比；訂單量：當日、累計、環(huán)比、進度）等部分組成，實現(xiàn)系統(tǒng)數(shù)據(jù)情況的大概展示。隱藏彈框頁面，當點擊隱藏彈框按鈕，隱藏頁面彈出并覆蓋首頁。主要由姓名顯示、職位顯示、上次登錄時間顯示、修改密碼按鈕、退出登錄按鈕等部分組成。交互設(shè)計如圖3.3所示。圖3.3首頁設(shè)計3.2.3流量分析頁面設(shè)計流量分析頁面由三個模塊組成，主要通過ECharts圖表來展示數(shù)據(jù)走向趨勢，分別為渠道來源分布（PV、VV、UV）餅狀圖、渠道來源趨勢（PV、VV、UV）日期折線圖、渠道來源趨勢（PV、VV、UV）小時折線圖等實現(xiàn)當月某日某時用戶流量來源渠道分布趨勢對比。交互設(shè)計如圖3.4所示。圖3.4流量分析設(shè)計3.2.4轉(zhuǎn)化分析頁面設(shè)計轉(zhuǎn)化分析頁面由兩個模塊組成，分別為轉(zhuǎn)化環(huán)節(jié)分布象形柱圖、趨勢來源趨勢折線圖。象形柱圖主要展示內(nèi)容是各種渠道訪問用戶轉(zhuǎn)化為消費用戶的轉(zhuǎn)化率數(shù)據(jù)統(tǒng)計。折線圖展示的為每日所轉(zhuǎn)化成消費用戶的趨勢。交互設(shè)計如圖3.5所示。圖3.5轉(zhuǎn)化分析設(shè)計3.2.5用戶分析頁面設(shè)計用戶分析頁面由公告條、新老用戶子頁面入口、用戶歸屬子頁面入口、應(yīng)用積分模塊、應(yīng)用用戶模塊等部分組成，主要用于記錄當日和當月累計的應(yīng)用積分、兌換率、應(yīng)用用戶、活躍率，同時進行對比，得到環(huán)比值。新老用戶子頁面由新老用戶分布餅狀圖、新老用戶趨勢折線圖兩個模塊組成。其中餅狀圖為對新用戶和老用戶的占比對比，以餅狀圖加以展示，使人更能顯而易見的看出區(qū)別，折線圖為分時間段展示新用戶量和老客戶量增加趨勢。通過兩個模塊的分別展示，讓人更加立體清晰了解用戶趨勢。用戶歸屬子頁面由用戶歸屬地圖和用戶歸屬柱狀圖兩個模塊組成。其中可以通過地圖中各地區(qū)顏色深淺來直觀地查看某地區(qū)用戶量情況，而通過用戶歸屬柱狀圖能對各地區(qū)用戶量進行更加直白的顯示。交互設(shè)計如圖3.6所示。圖3.6用戶分析設(shè)計3.2.6商品分析頁面設(shè)計商品分析頁面由公告條、選品推薦子頁面入口、商品渠道子頁面入口、商品瀏覽量模塊、收入模塊等部分組成，主要用于記錄當日和當月累計的商品瀏覽量、訂單量、收入、利潤，同時進行對比，得到環(huán)比值。商品推薦子頁面由商品品類分布餅狀圖和商品品類趨勢折線圖兩個模塊組成，通過餅狀圖和折線圖兩個ECharts圖表分析對選品推薦的商品、積分、PV、UV等四類數(shù)據(jù)分布趨勢。商品渠道子頁面由商品渠道分布餅狀圖和商品渠道趨勢折線圖兩個模塊組成，通過餅狀圖和折線圖兩個ECharts圖表分析對商品渠道的訂單、積分、產(chǎn)品、用戶等四類數(shù)據(jù)分布趨勢。交互設(shè)計如圖3.7所示。圖3.7商品分析設(shè)計3.2.7底部導航欄設(shè)計底部導航欄設(shè)計，主要為首頁、流量、轉(zhuǎn)化、用戶、商品等五個文字加圖標的標簽，跳轉(zhuǎn)分別對應(yīng)首頁頁面、流量分析頁面、轉(zhuǎn)化分析頁面、用戶分析頁面、商品分析頁面，實現(xiàn)頁面的交互跳轉(zhuǎn)操作。通過底部標簽式導航欄的引導，用戶可以迅速的實現(xiàn)頁面之間的切換且不會迷失方向，簡單而高效REF_Ref9751\r\h[23]。交互設(shè)計如圖3.8所示。圖3.8底部導航欄設(shè)計3.3數(shù)據(jù)庫設(shè)計圖3.9數(shù)據(jù)庫ER圖如圖3.9所示，根據(jù)展示的數(shù)據(jù)庫ER圖，可以清晰地看出數(shù)據(jù)表之間的關(guān)系，通過對登錄頁、首頁、流量分析頁、轉(zhuǎn)化分析頁、用戶分析頁以及商品分析頁的功能實現(xiàn)，共創(chuàng)建21張數(shù)據(jù)表。如表3.1至表3.7所示的為數(shù)據(jù)庫設(shè)計的部分數(shù)據(jù)表，在這些列舉的數(shù)據(jù)表中，分別對其參數(shù)名、數(shù)據(jù)類型，數(shù)據(jù)說明等信息都進行了簡單的介紹。如表3.1所示，表中共有2個參數(shù)，分別為resultcode字符串參數(shù)和resultcode字符串參數(shù)，該表與修改密碼功能相互依賴，當點擊修改密碼時，會訪問到表數(shù)據(jù)。表3.1修改密碼數(shù)據(jù)表參數(shù)名類型說明resultcodeString”0000”成功，”9999”失敗，“5555”輸入?yún)?shù)格式錯誤resultdescString"success"成功,"error"失敗，“5555”輸入?yún)?shù)格式錯誤如表3.2所示，表中共有6個參數(shù)，其中4個為整數(shù)型參數(shù)，2個為字符串參數(shù)，該表與流量分析餅狀圖相互依存，當訪問流量分析頁面時，會調(diào)用該數(shù)據(jù)表。表3.2流量分析餅狀圖數(shù)據(jù)表參數(shù)名類型說明beginDateInteger開始時間endDateInteger結(jié)束時間compareTypeInteger對比周期0-不比1-同比2-環(huán)比userProvinceCodeString登陸用戶省份碼，0全國，原路回傳placeIdString地區(qū)下拉列表searchTypeInteger分析范圍1-手廳2-網(wǎng)廳3-全量如表3.3所示，表中共有7個參數(shù)，其中5個為整數(shù)型參數(shù)，2個為字符串參數(shù)，該表與流量分析日期折線圖相互依存，而與本表擁有相同的參數(shù)的流量分析小時折線圖，只是其在請求數(shù)據(jù)顯示的時候，橫坐標顯示的是以小時為單位的折線圖，當對流量分析頁面進行訪問時，同樣會調(diào)用相應(yīng)的數(shù)據(jù)表。表3.3流量分析日期折線圖數(shù)據(jù)表參數(shù)名類型說明beginDateInteger開始時間endDateInteger結(jié)束時間searchTypeInteger分析范圍1-手廳2-網(wǎng)廳3-全量compareTypeInteger對比周期0-不比1-同比2-環(huán)比userProvinceCodeString登陸用戶省份碼，0全國，原路回傳placeIdString地區(qū)下拉列表trafficTypeIdIntrger渠道類型Id（0-總量1-電商2-直接訪問）如表3.4所示，表中共有7個參數(shù)，其中4個為整數(shù)型參數(shù)，3個為字符串參數(shù)，該表與轉(zhuǎn)化分析象形柱圖相互依存，每當訪問轉(zhuǎn)化分析也面時，象形柱圖就會調(diào)用該數(shù)據(jù)表，實現(xiàn)前后端的數(shù)據(jù)交互操作。表3.4轉(zhuǎn)化分析象形柱圖數(shù)據(jù)表參數(shù)名類型說明statisticsIntegersearchTypeIntegerrateTypeInteger對比周期1-無2-對比周期3-環(huán)比beginDateString開始時間endDateString結(jié)束時間goodsAttrString商品屬性0-全量1-實物2-虛擬goodsTypeInteger產(chǎn)品類型0-全量1-通信類產(chǎn)品2-非通信類產(chǎn)品如表3.5所示，表中共有6個參數(shù)，其中2個為整數(shù)型參數(shù)，4個為字符串參數(shù)，而該頁面中的另一個部分柱狀圖所用的數(shù)據(jù)表，與該頁地圖數(shù)據(jù)表為同一個，只是用更加豐富的表現(xiàn)形式，給人以不同的體驗，該表與用戶歸屬地圖和柱狀圖相互依存，當訪問用戶歸屬頁面時，實現(xiàn)數(shù)據(jù)交互。表3.5用戶歸屬地圖數(shù)據(jù)表參數(shù)名類型說明beginDateString開始時間endDateString結(jié)束時間searchTypeInteger分析范圍1-手廳2-網(wǎng)廳3-全量compareTypeInteger對比周期0-不比1-同比2-環(huán)比userprovinceCodeString登陸用戶省份碼，0全國，原路回傳placeIdString如表3.6所示，表中共有7個參數(shù)，其中4個為整數(shù)型參數(shù)，3個為字符串參數(shù)，該表與選品推薦餅狀圖相互依賴，當訪問該頁面時，實現(xiàn)數(shù)據(jù)交互。表3.6選品推薦餅狀圖數(shù)據(jù)表參數(shù)名類型說明beginDateString開始時間yyyy-MM-ddendDateString結(jié)束時間yyyy-MM-ddgoodsAttrInteger商品屬性0:全量；1：實物；2:虛擬goodsTypeString商品類型編號（其中0為根節(jié)點）dataTypeInteger0訂單量1積分應(yīng)用量2PV3UV4轉(zhuǎn)換率compareTypeInteger0無1同比2環(huán)比scoreIntervalInteger如表3.7所示，表中共有6個參數(shù)，其中3個為整數(shù)型參數(shù)，3個為字符串參數(shù)，該表與商品渠道折線圖相互依賴，當訪問用戶歸屬頁面時，實現(xiàn)數(shù)據(jù)交互。表3.7商品渠道折線圖數(shù)據(jù)表參數(shù)名類型說明beginDateString開始時間yyyy-MM-ddendDateString結(jié)束時間yyyy-MM-ddchannelTypeInteger0全量1積分商城2電商3客服微廳4線下掃碼5產(chǎn)品輸出goodsTypeString0全量1通信類產(chǎn)品2非通信類產(chǎn)品3活動dataTypeInteger0訂單量1積分應(yīng)用量2產(chǎn)品兌換量3應(yīng)用用戶數(shù)compareTypeInteger0無1同比2環(huán)比3.4本章小結(jié)本章為前端的設(shè)計工作，介紹了開發(fā)架構(gòu)設(shè)計、開發(fā)系統(tǒng)各個頁面模塊功能設(shè)計以及數(shù)據(jù)庫中部分數(shù)據(jù)表設(shè)計，為接下來具體實現(xiàn)做好基礎(chǔ)說明。4前端開發(fā)的具體實現(xiàn)4.1系統(tǒng)開發(fā)環(huán)境4.1.1開發(fā)環(huán)境開發(fā)環(huán)境指的是在基本的硬件和軟件的支持下REF_Ref7554\r\h[24]，為開發(fā)者提供的相應(yīng)的應(yīng)用程序開發(fā)的環(huán)境。如表4.1和4.2所示，分別為系統(tǒng)開發(fā)環(huán)境的硬件和軟件所需的環(huán)境。表4.1硬件環(huán)境硬件環(huán)境操作系統(tǒng)Win10處理器IntelCorei7-4720HQ3.60GHz內(nèi)存8GB表4.2軟件環(huán)境軟件環(huán)境開發(fā)語言JavaScript前端開發(fā)框架Vue代碼編輯器VisualStudioCode調(diào)試工具GoogleChrome依賴管理Npm、Cnpm構(gòu)建打包Webpack腳手架vue-cli4.x4.1.2項目框架搭建該項目的框架搭建過程是在Windows10系統(tǒng)下進行的，在項目的開始階段，需要對Vue框架中進行腳手架vue-cli的全局安裝，執(zhí)行安裝命令如下：#全局安裝npminstall-gvue-cli#基于webpack模板創(chuàng)建名為lianxi的新項目vueinitwebpacklianxi#安裝依賴npminstall-gcnpm--registry=#運行項目npmrunserve接下來訪問http://localhost:8080，然后就可以看到創(chuàng)建的初始化項目了。4.1.3開發(fā)系統(tǒng)前端項目結(jié)構(gòu)通過開發(fā)環(huán)境搭建，系統(tǒng)會自動生成一些項目文件，其中主要目錄文件如表4.3所示。表4.3目錄結(jié)構(gòu)文件夾名/文件名功能build/build.js生成環(huán)境構(gòu)建腳本build/webpack.base.conf.jswebpack基礎(chǔ)配置build/webpack.dev.conf.jswebpack開發(fā)環(huán)境配置build/d.conf.jswebpack生產(chǎn)環(huán)境配置build/dev-server.js運行本地開發(fā)服務(wù)器config/index.js主要項目配置src/components/所有文件前端公用組件src/until/index,js工具組件、方法src/main.js入口js文件src/app.vue根組件src/index,js項目配置文件src/router/index,js前端路由src/page/所有文件前端通用組件.eslintrc監(jiān)測代碼規(guī)范package.json構(gòu)建腳本和依賴關(guān)系index.html首頁入口文件4.2通用組件的開發(fā)組件技術(shù)的應(yīng)用現(xiàn)在已經(jīng)非常廣泛，組件作為軟件開發(fā)復用的核心技術(shù)，是近幾年來隨著中間件產(chǎn)品的完善而飛速發(fā)展并受高度重視的一個分支REF_Ref16082\r\h[25]。本文將根據(jù)開發(fā)系統(tǒng)所需的功能進行相應(yīng)的組件開發(fā)，如表4.4所示，該表格記錄了本項目開發(fā)系統(tǒng)的組件簡介，同時對幾個復用率較高的組件進行單獨介紹。表4.4通用組件組件名組件功能Header開發(fā)系統(tǒng)頭部固定欄Footer開發(fā)系統(tǒng)底部固定導航欄Login開發(fā)系統(tǒng)登錄頁面Home開發(fā)系統(tǒng)登錄首頁FlowAnalysis開發(fā)系統(tǒng)流量分析頁面TransformationAnalysis開發(fā)系統(tǒng)轉(zhuǎn)化分析頁面UserAnalysis開發(fā)系統(tǒng)用戶分析頁面NewAndOldAnalysis用戶分析子頁面-新老用戶頁面UserBelongs用戶分析子頁面-用戶歸屬頁面CommodityAnalysis開發(fā)系統(tǒng)商品分析頁面CommodityRecommendation商品分析子頁面-選品推薦頁面CommodityChannel商品分析子頁面-商品渠道頁面（1）HeaderHeader是一個頁面分模塊組件，主要固定于系統(tǒng)頭部，與底部導航欄實現(xiàn)收尾呼應(yīng)的同時，雙向綁定各個頁面所展示的文字提示。layerOut()和loginOut()方法封裝的是用于系統(tǒng)頭部固定欄左邊圖標樣式，而本系統(tǒng)中分為兩種情況。一種是當瀏覽頁為首頁時，顯示的是隱藏彈框圖標，點擊時跳出隱藏框。另一種是瀏覽頁為非首頁時，顯示的是返回圖標，點擊時會返回上一級瀏覽頁面。方法代碼如下：layerOut()

{

this.$emit("layerOutFn")},loginOut()

{

this.$router.go(-1)}（2）FooterFooter組件，和Header組件功能類似，在項目的每個頁面中都有引用，主要用于幫助用戶實現(xiàn)頁面跳轉(zhuǎn)操作，每項由圖標和文字組成，當點擊跳轉(zhuǎn)成功后，圖標和文字的顏色由黑色變?yōu)榈仙?，其中圖片變色實現(xiàn)方法為每項綁定兩張只有顏色不同的圖標，再由封裝方法實現(xiàn)兩張圖片互相變化。addClassName()方法則實現(xiàn)了圖片及文字變色操作。代碼方法如下：addClassName(index)

{this.tabs.forEach((element,

key)

=>

{

if

(key

==

index)

{element.cls

=

"is-active";}

else

{element.cls

=

"";

}});}4.3開發(fā)系統(tǒng)頁面功能實現(xiàn)4.3.1登錄頁系統(tǒng)登錄頁面如圖4.3所示，本系統(tǒng)的開發(fā)源于公司需要，所以本系統(tǒng)只支持在公司內(nèi)部人員使用，通過對公司內(nèi)部員工賬號授權(quán)后，輸入正確用戶名和密碼，同時在驗證碼輸入框輸入圖片顯示的驗證碼，點擊立即登錄按鈕，即可完成登錄操作，并跳轉(zhuǎn)首頁頁面。通過checkInput

()和loginFn

()方法，來實現(xiàn)對登錄信息格式的核對，并由POST請求方式調(diào)用“/jf-statistics/JsAdmin/login”接口，實現(xiàn)登錄頁的交互操作。圖片驗證碼功能，則是由一個畫布標簽來承載，通過getNewCode()方法直接調(diào)用后臺接口“/jf-statistics/JsAdmin/kaptcha?time=”隨機生成的驗證碼圖片，在傳回前端顯示的一個過程。圖4.3登錄頁面4.3.2首頁如圖4.4所示，首頁包含訪問量情況欄、輪播圖、公告欄、用戶分析信息統(tǒng)計表、商品分析信息統(tǒng)計表、隱藏彈框等功能。訪問量情況欄用來記錄瀏覽積分商城的PV、VV、UV訪問數(shù)量，輪播圖用來介紹積分商城的活動展示，公告欄主要是每次系統(tǒng)更新改動及顯示展示數(shù)據(jù)的時間點，用戶分析統(tǒng)計表中的兩個模塊分別記錄應(yīng)用積分、兌換率、應(yīng)用用戶、活躍率等，商品分析信息統(tǒng)計表中的兩個模塊分別記錄收入、利潤、商品瀏覽量、訂單量等，隱藏彈框則記錄著用戶的姓名、職位、上次登陸時間等信息，同時可在彈框?qū)崿F(xiàn)修改密碼和退出登錄的操作。圖4.4首頁頁面(左)、首頁彈框(右)4.3.3流量分析頁如圖4.5所示，流量分析頁主要為三部分，分別為渠道來源分布餅狀圖、趨勢日期折線圖、趨勢小時折線圖。渠道來源分布餅狀圖展示的是PV、VV、UV三類訪問狀況來源的分布，主要來源有短信、電商、直接訪問、微信、引薦等。渠道來源趨勢日期折線圖展示的是在PV、VV、UV三類訪問狀況來源的分布下，當月的訪客增減趨勢變化。渠道來源趨勢小時折線圖展示的是在PV、VV、UV三類訪問狀況來源的分布下，前一天各個小時段的訪客增減趨勢變化。圖4.5流量分析頁面如表4.5所示，為該頁面ECharts圖各接口，所以直接以圖表方式，直接列舉實現(xiàn)數(shù)據(jù)接入方法。表4.5流量分析頁接口方法接口實現(xiàn)內(nèi)容請求drawPie()/jf-statistics/traffidSources/pieData餅狀圖postdrawLine()/jf-statistics/traffidSources/lineChart日期折線圖postdrawHoursLine()/jf-statistics/traffidSources/lineHours小時折線圖post4.3.4轉(zhuǎn)化分析頁如圖4.6所示，轉(zhuǎn)化分析頁分為兩部分，分別為轉(zhuǎn)化環(huán)節(jié)分布象形柱圖和渠道來源趨勢折線圖。轉(zhuǎn)化環(huán)節(jié)分布象形柱圖展示的是手機訪客數(shù)、詳情訪客數(shù)、下單量、支付量四類數(shù)據(jù)，同時得到由手機訪客數(shù)逐漸轉(zhuǎn)變詳情訪客數(shù)，成為下單客戶，最后由下單客戶成功支付過程中，客戶各級轉(zhuǎn)化情況。而渠道來源趨勢折線圖展示的內(nèi)容則是當月每日從手機訪客轉(zhuǎn)化為支付成功用戶量的增減趨勢變化。圖4.6轉(zhuǎn)化分析頁面如表4.6所示，由于本頁內(nèi)容組成都為ECharts圖，分別是以drawFunnel()和drawFunnelLine()方法直接調(diào)用相應(yīng)接口，所以直接以圖表方式，直接列舉實現(xiàn)數(shù)據(jù)接入方法。表4.6轉(zhuǎn)化分析頁接口方法接口實現(xiàn)內(nèi)容請求drawFunnel()jf-statistics/funnelPolt/searchData象形柱圖fetchdrawFunnelLine()/jf-statistics/funnelPolt/lineChart日期折線圖fetch4.3.5用戶分析頁如圖4.7所示，用戶分析頁包括公告欄、用戶分析數(shù)據(jù)統(tǒng)計表及新老用戶子頁面和用戶歸屬子頁面入口。公告欄和用戶分析數(shù)據(jù)統(tǒng)計表展示功能同首頁相同。新老用戶子頁面中分為兩部分，一部分為新老用戶分布餅狀圖，用來記錄展示用戶中新老成分所占比例，另一部分為新老用戶趨勢日期折線圖，記錄了當月每天新老用戶的增減趨勢變化。用戶歸屬子頁面中同樣分為兩部分，一部分為用戶歸屬地圖，如圖所見，通過各地區(qū)顏色深淺來區(qū)分，能直觀地看出各地區(qū)用戶的多少，深顏色地區(qū)用戶基數(shù)比較大，淺顏色地區(qū)用戶基數(shù)比較小，另一部分為用戶歸屬柱狀圖，主要展示各省市用戶多少排名情況。圖4.7用戶分析頁面(左)、新老用戶子頁面(中)、用戶歸屬子頁面(右)如表4.7所示，在新老用戶子頁面中分別以drawNewUserPie

()和drawNewUserLine

()方法來直接調(diào)用該頁面中餅狀圖和日期折線圖數(shù)據(jù)，在用戶歸屬子頁面中分別以drawMap()和drawBar()方法來直接調(diào)用該頁面中地圖和柱狀圖數(shù)據(jù)，所以直接以圖表方式，直接列舉實現(xiàn)數(shù)據(jù)接入方法。表4.7用戶分析頁接口方法接口實現(xiàn)內(nèi)容請求drawNewUserPie

()/jf-statistics/newUser/searchData餅狀圖fetchdrawNewUserLine

()/jf-statistics/newUser/lineChart日期折線圖fetchdrawMap()/jf-statistics/provinceUser/searchData地圖postdrawBar()/jf-statistics/provinceUser/searchData柱狀圖post4.3.6商品分析頁如圖4.8所示，商品分析頁包括公告欄、商品分析數(shù)據(jù)統(tǒng)計表及選品推薦子頁面和商品渠道子頁面入口。公告欄和商品分析數(shù)據(jù)統(tǒng)計表展示功能同首頁相同。選品推薦子頁面中分為兩部分，一部分為商品品類分布餅狀圖，用來展示在商品、積分、PV、UV中可兌換商品種類的占比信息，另一部分為商品品類趨勢折線圖，用來展示在商品、積分、PV、UV中可兌換商品種類增減趨勢。商品渠道子頁面，類似選品推薦頁面，展示在訂單、積分、產(chǎn)品、用戶中商品占比信息及增減趨勢。圖4.8商品分析頁面(左)、選品推薦子頁面(中)、商品渠道子頁面(右)如表4.8所示，在新老用戶子頁面中分別以drawListPie

()和drawListPie

()方法來直接調(diào)用該頁面中餅狀圖和日期折線圖數(shù)據(jù)，在用戶歸屬子頁面中分別以drawListPie()和drawListLine()方法來直接調(diào)用該頁面中餅狀圖和日期折線圖數(shù)據(jù)，所以直接以圖表方式，直接列舉實現(xiàn)數(shù)據(jù)接入方法。表4.8商品分析頁接口方法接口實現(xiàn)內(nèi)容請求drawListPie

()/jf-statistics/goods/list餅狀圖postdrawListLine

()/jf-statistics/goods/list日期折線圖postdrawListPie()/jf-statistics/goodschannel/list餅狀圖postdrawListLine()/jf-statistics/goodschannel/list日期折線圖post4.4開發(fā)系統(tǒng)的創(chuàng)新點（1）將MVVM框架應(yīng)用于Web前端開發(fā)能夠很好地達到交互界面的形成與擴展，并通過前后端分離，使前端和后端同時進行分層開發(fā)，大大節(jié)省了開發(fā)成本。（2）使用框架簡單易懂，只需引用即可擁有框架所有功能。高度的組件化可以使我們的工程易于維護、易于組合拓展，降低了開發(fā)難度。4.5本章小結(jié)本章主要對開發(fā)環(huán)境的部署和項目的創(chuàng)建進行了簡單的介紹，由此來實現(xiàn)了各頁面在實際應(yīng)用中的具體功能，在各個頁面實現(xiàn)過程中列舉了該頁面主要的一些數(shù)據(jù)接口，并在章節(jié)最后簡要的說明了該開發(fā)系統(tǒng)的創(chuàng)新點。5前端開發(fā)的系統(tǒng)測試5.1功能性測試 軟件功能性測試就是對產(chǎn)品的各功能進行驗證，根據(jù)功能性測試用例，逐項測試，檢查產(chǎn)品是否達到用戶要求的功能REF_Ref4519\r\h[26]。而該系則是針對各個頁面相應(yīng)的數(shù)據(jù)顯示部分進行逐一測試排查是否能夠正常展示，分為以下幾個模塊來測試，測試結(jié)果如表5.1所示。表5.1模塊測試表測試模塊測試功能測試操作測試結(jié)果登錄頁表單校驗功能多次輸入正確、錯誤表單輸入值功能正常登錄頁忘記密碼功能多次作出忘記密碼操作功能正常登錄頁登錄功能輸入正確登錄信息后，點擊登錄按鈕功能正常首頁輪播圖功能點擊圖片前后滑動功能正常首頁首頁數(shù)據(jù)顯示功能多次切換、點擊首頁頁面功能正常首頁隱藏彈框功能多次點擊彈框并關(guān)閉功能正常隱藏彈框彈框數(shù)據(jù)顯示功能多次點擊彈框功能正常隱藏彈框修改密碼功能多次作出修改密碼操作功能正常隱藏彈框退出登錄功能多次作出退出登錄操作功能正常流量分析頁ECharts圖分別在PV、VV、UV情況下，數(shù)據(jù)圖展示功能多次切換、點擊流量分析頁面功能正常轉(zhuǎn)化分析頁ECharts數(shù)據(jù)圖展示功能多次切換、點擊轉(zhuǎn)化分析頁面功能正常用戶分析頁用戶分析數(shù)據(jù)顯示功能多次切換、點擊用戶分析頁面功能正常用戶分析頁新老用戶子頁面ECharts數(shù)據(jù)圖展示功能多次切換、點擊新老用戶子頁面功能正常用戶分析頁用戶歸屬子頁面ECharts數(shù)據(jù)圖展示功能多次切換、點擊用戶歸屬子頁面功能正常商品分析頁商品分析數(shù)據(jù)顯示功能多次切換、點擊商品分析頁面功能正常商品分析頁選品推薦子頁面ECharts數(shù)據(jù)圖分別在商品、積分、PV、UV情況下，數(shù)據(jù)圖展示功能多次切換、點擊選品推薦子頁面功能正常商品分析頁商品渠道子頁面ECharts數(shù)據(jù)圖分別在訂單、積分、產(chǎn)品、用戶情況下，數(shù)據(jù)圖展示功能多次切換、點擊商品渠道子頁面功能正常5.2兼容性測試本項目的前端測試工作，采用了目前主流的Chrome瀏覽器。通過測試GalaxyS5、Pixel2、Pixel2XL、iPhone5/SE、iPhone6/7/8、iPhone6/7/8Plus、iPhoneX、iPad、iPadPro等機型，來完成了兼容性測試。各機型測試顯示均能正常顯示，如圖5.1所示，是在iPhone6/7/8(左)和ipad(右)中展示的首頁效果圖。圖5.1iPhone6/7/8和ipad測試機型5.3本章小結(jié)本章節(jié)按照該開發(fā)系統(tǒng)各個頁面中不同的功能點進行檢查測試。在兼容性方面，主要用到Chrome瀏覽器，來完成了該項目前端性能測試?？偨Y(jié)近年來，隨著移動互聯(lián)網(wǎng)的發(fā)展到達了高潮，移動APP開發(fā)行業(yè)競爭也更加激烈。企業(yè)發(fā)展空間逐漸變小，所以更多的企業(yè)被迫經(jīng)濟轉(zhuǎn)型，開始了對數(shù)據(jù)的運營，以便尋求更大的利益。因此本文給出使用前端漸進式框架Vue實現(xiàn)了對聯(lián)通積分商城數(shù)據(jù)可視化APP的設(shè)計與實現(xiàn)過程。本文首先通過對數(shù)據(jù)可視化的研究背景和國內(nèi)外發(fā)展情況進行介紹，來說明該開發(fā)系統(tǒng)的存在必要性。然后介紹了實現(xiàn)該系統(tǒng)的關(guān)鍵技術(shù)和框架，其中利用前端最為主流框架之一的Vue構(gòu)建了該項目的應(yīng)用框架，以及使用ECharts圖表實現(xiàn)項目大部分數(shù)據(jù)展示。接著本文對前端開發(fā)進行了分析設(shè)計，先對該系統(tǒng)的功能性和非功能性需求進行說明。之后，分別對該系統(tǒng)的前端構(gòu)架、各個頁面模塊以及數(shù)據(jù)庫進行了詳細的介紹。為前端開發(fā)系統(tǒng)的實現(xiàn)，做了充足的準備工作。根據(jù)開發(fā)系統(tǒng)需求的分析設(shè)計，本文按照設(shè)計結(jié)構(gòu)順序，分別進行了實現(xiàn)，并且通過部分函數(shù)、部分數(shù)據(jù)接口，給出頁面具體實現(xiàn)的過程。最后，對該開發(fā)系統(tǒng)各個頁面中不同的功能點進行檢查測試，保證了開發(fā)系統(tǒng)的實現(xiàn)質(zhì)量?；赩ue的聯(lián)通積分商城數(shù)據(jù)可視化APP的設(shè)計與實現(xiàn)涉及到了多方面的理論、方法和技術(shù)。在當下這個隨著移動端業(yè)務(wù)越來越復雜的時代，數(shù)據(jù)分析的復雜程度也是成倍增長。雖然本系統(tǒng)已經(jīng)能夠滿足公司對大部分的數(shù)據(jù)分析需求，但是本系統(tǒng)中還是存在很多的功能和問題需要來解決，需要不斷地在實際應(yīng)用中進一步去完善。致謝在校的這四年時間里很感謝老師們對我的淳淳教誨，是你們教會了我們勤奮學習，誠實做人，踏實做事，以寬容之心面對生活。指引著我們沿著正確方向前進。在點滴匯聚中使我逐漸形成正確、成熟的人生觀、價值觀。特別要感謝我的指導老師，朱元華老師和劉建生老師給予我很大的幫助。感謝我的家人，我永遠的支持者，正是在你們殷切目光的注視下，我才一步步的完成了求學生涯。沒有你們，就不會有今天的我！我一直很感謝你們，讓我擁有一個如此溫馨的家庭，讓我所有的一切都可以在你們這里得到理解與支持，得到諒解和分擔。你們的支持和鼓勵是我前進的動力。衷心感謝我的指導教師。本文的研究工作是在老師的悉心指導下完成的，從論文的選題、研究計劃的制定、技術(shù)路線的選擇到系統(tǒng)的開發(fā)研制，各個方面都離不開老師熱情耐心的幫助和教導。最后，由衷的感謝在百忙之中抽出時間審閱本論文的專家老師。由于本人的學識和寫作的水平有限，在本文的寫作中難免有僻陋，懇請老師和同學指教。參考文獻王水波.基于Web前端數(shù)據(jù)可視化研究與應(yīng)用[D].西安電子科技大學,2017王志任.基于Vue的開發(fā)平臺的設(shè)計與實現(xiàn)[D].廣東工業(yè)大學,2018佘東.ASP.NET精品資源共享課程的設(shè)計與實現(xiàn)[J].黑河學院學報,2017,8(12):106-107XianfengLi,ZhiqiangBao.PerformanceCharacterizationofWebApplicationswithHTML5Enhancements[P].Dependable,AutonomicandSecureComputing(DASC),2014IEEE12thInternationalConferenceon,2014黃深悅.基于HTML5的移動WebApp開發(fā)[J].圖書館雜志,2014,33(07):72-77張寧.HTML5在移動互聯(lián)網(wǎng)開發(fā)中的應(yīng)用探究[J].信息與電腦(理論版),2019(02):185-186陸郁.探析CSS技術(shù)在網(wǎng)頁制作中的應(yīng)用與代碼優(yōu)化[J].科技風,2019(01):110江玉珍,朱映輝,黃偉,陸錫聰.HTML5網(wǎng)頁設(shè)計課程的CSS3教學拓展[J].現(xiàn)代計算機(專業(yè)版),2018(03):71-74李曉薇.JavaScript在動態(tài)網(wǎng)頁設(shè)計中的應(yīng)用研究[J].信息系統(tǒng)工程,2019(01):87SoreunsenE,MikailescM.Model-view-ViewModel(MVVM)designpatternusingWindowsPresentationFoundation(WPF)technology[J].MegaByteJomal,2010,9(4):1-19劉立.MVVM模式分析與應(yīng)用[J].微型電腦應(yīng)用,2012,28(12):57-60王鶴琴,朱珍元.基于MVVM模式的Web開發(fā)研究[J].菏澤學院學報,2019,41(02):7-13易劍波.基于MVVM模式的WEB前端框架的研究[J].信息與電腦(理論版),2016(19):76-77+84AlexMatchneer.REACTVSEMBER.JS[J].Net,2014,260:96-98Balasubramanee,V.，Wimalasena,etc.TwitterbootstrapandAngularJS:Frontendframeworkstoexpeditesciencegatewaydevelopment[J].IEEEMeeting,2013,06(2):23-28張倩.信用卡代償子系統(tǒng)的設(shè)計與實現(xiàn)[D].北京交通大學,2019王子毅,張春海.基于ECharts的數(shù)據(jù)可視化分析組件設(shè)計實現(xiàn)[J].微型機與應(yīng)用,2016,35(14):46-48+51趙宏偉.中小學學生成長檔案管理系統(tǒng)的設(shè)計與實現(xiàn)[D].東北大學.2015范開勇,陳宇收.MySQL數(shù)據(jù)庫性能優(yōu)化研究[J].中國新通信,2019,21(01):57楊爍.基于圖的車險欺詐可視化分析系統(tǒng)的設(shè)計與實現(xiàn)[D].北京郵電大學.2019周乾莉,黃倩倩.基于JAVA的商城積分子系統(tǒng)的設(shè)計與實現(xiàn)[J].電腦知識與技術(shù),2019,15(10):53-55+77董秋.面向軟件可靠性的性能測試模型研究與應(yīng)用[D].長春理工大學,2014宋麗行.“嘉馳婚獵”APP界面視覺設(shè)計[D].昆明理工大學.2015王強.基于Web技術(shù)的校園信訪系統(tǒng)開發(fā)及實現(xiàn)[D].蘭州交通大學.2016何鵬飛,何平,張松陽,趙鴻博.組件技術(shù)在嵌入式系統(tǒng)中的應(yīng)用[J].計算機系統(tǒng)應(yīng)用,2014,23(06):220-223張晶瑩.軟件測試之功能性測試的研究[J].中國新技術(shù)新產(chǎn)品,2008(14):18

PowerPoint課件制作實用技巧PowerPoint是微軟公司生產(chǎn)的制作幻燈片和簡報的軟件（以下簡稱PPT）。在我們許多人看來,它只不過是一個簡單地對文字、圖形、圖片進行演示的軟件，教學中的課件制作軟件當屬Authorware、Flash。Authorware和Flash制作的動畫效果的確很好，而且它們的功能也很強大。不過這些軟件在制作課件的過程中往往非常耗時，用這些專業(yè)軟件來制作課件用于平時的教學往往效率很低。PPT就是一個非常簡單、實用的制作課件的軟件，只要你用好它,同樣能做非常棒的課件來。一、掌握基本，知道“插入”。（一）知道從“插入”菜單進入，會給PPT課件添加文字、圖片、影片和聲音等，也就會做一般的課件了。（二）圖片插入與處理1.插入圖片具體方法：a)插入剪貼畫或文件中的圖片；b)添加圖片做背景；c)給自選圖形做填充。2.處理圖片具體方法：我們用PPT制作課件時，經(jīng)常從網(wǎng)上下載圖片來用，而網(wǎng)絡(luò)中的圖片往往含有超鏈接和網(wǎng)站名稱痕跡，我們需要刪除其中超鏈接，并對圖片進行裁剪處理。在Powerpoint中，我們一般可以利用“圖片”工具欄上的“裁剪”工具進行裁剪處理，但是，這里的工具只能對圖片進行矩形裁剪，若想裁剪成圓形、多邊形等其他形狀，通常方法就無能為力了。其實這個問題在PPT中是可以解決的。我們用給自選圖形做填充圖片的方法就可以實現(xiàn)我們需要的效果。具體步驟：a)首先利用“繪圖”工具欄畫一個想要裁剪的圖形，如橢圓。b)選中橢圓后單擊“繪圖”工具欄上“填充顏色”按鈕右側(cè)黑三角，從列表菜單中單擊“填充效果”命令。c)打開選擇“圖片”選項卡，單擊〔選擇圖片〕按鈕，從“選擇圖片”對話框中找到合適的圖片，單擊〔插入〕按鈕后返回到“填充效果”對話框最后單擊〔確定〕按鈕后退出。此圖片當作橢圓圖形的背景出現(xiàn)，改變了原來的矩形形狀，獲得了滿意的裁剪圖片效果。圖片在插入PPT之前，我們可以用ACDSEE軟件進行加工，如改變大小，裁剪等操作。二、學會下載，查找方法。在制作課件過程中，我們時常需要從網(wǎng)絡(luò)上下載各種資源用以豐富課件內(nèi)容，提升課堂效果。但有許多網(wǎng)站的flash動畫都不提供下載；還有網(wǎng)站為我們提供了許多視頻素材，這些視頻素材都是FLV流媒體格式。FLV流媒體格式是一種新的視頻格式，全稱為FlashVideo。由于它形成的文件極小、加載速度極快，使得網(wǎng)絡(luò)觀看視頻文件成為可能，它的出現(xiàn)也有效地解決了視頻文件導入Flash后，使導出的SWF文件體積龐大，不能在網(wǎng)絡(luò)上很好的使用等缺點。目前各在線視頻網(wǎng)站均采用此視頻格式。如新浪播客、56、優(yōu)酷、土豆、酷6等，無一例外。FLV已經(jīng)成為當前視頻文件的主流格式。這些網(wǎng)站一般都不提供下載。我們想要這些素材，怎樣辦？1.尋找下載方法：a)在百度網(wǎng)站搜索欄中輸入下載的內(nèi)容，搜索下載方法。b)弄清格式，再搜索方法。2.具體方法推薦①flasah動畫的下載方法一：IE緩存中尋找在網(wǎng)上看過一個flash后，一般情況下都會保存在IE緩存里。右擊桌面上的IE圖標，選“屬性”命令，單擊中間的“設(shè)置”按鈕，彈出“Internet臨時文件和歷史記錄設(shè)置”面板，單擊“查看文件”，可以打開臨時文件夾，按時間排序，找到剛才打開的flash動畫文件。優(yōu)點：不需要安裝其它軟件。缺點：操作相對煩瑣。方法二：借助Flashsaver等軟件下載，這些軟件都可以快速、方便的下載你所需要的flash文件。優(yōu)點：簡單、方便、快速。缺點：需要安裝使用。②FLV視頻的獲取方法一：IE緩存中尋找，方法同flasah。方法二：flv視頻解析下載/三、學用控件，轉(zhuǎn)化應(yīng)用1.flash動畫的插入方法一：安裝flash插件，再插入flash。步驟：a)安裝“ppt插flash軟件”插件；b)單擊“插入”→“flashmovie”→打開要播放的flash文件→確定。方法二：利用控件插入flash動畫。步驟：a)插入“ShockwaveFlashObject”控件對象：右擊“工具欄”→選“控件工具箱”（或點“視圖→工具欄→控件工具箱”）；點“其他控件”（控件工具箱中最后一個形似錘子斧頭的按鈕），拖動滾動條或在英文輸入法狀態(tài)下按鍵盤上“s”鍵，快速定位到以s開頭的控件，選擇“ShockwaveFlashObject”控件。將鼠標移到幻燈片工作區(qū)，鼠標指針變成“十”字型，拖動鼠標繪制出一個形似信封的矩形。b)打開控件對象“屬性”對話框：右擊矩形控件對象，在彈出的快捷菜單中選“屬性”命令。c)正確設(shè)置控件對象屬性：主要是在“Movie”空白文本域中正確輸入演示文稿要播放的.swf動畫的完整名稱。d)將控件對象適當縮放：為了獲得比較好的播放效果，拖動控件對象的縮放點使它幾乎覆蓋整個幻燈片工作區(qū)，但要在幻燈片工作區(qū)底部保留少許空白區(qū)域。這樣既可以享受.swf動畫大屏幕播放的好處，又能夠保證幻燈片能夠順利地切換。e)一般情況下，幻燈片應(yīng)顯示出動畫的第一幀圖形。如果控件對象仍是空白的，可保存演示文稿，關(guān)閉后再打開它，按F5放映幻燈片，應(yīng)該能夠正確播放動畫。2.FLV視頻的插入FLV視頻與FLASH不一樣的。全稱是flashvideo，所用的播放器也不一樣。①利用控件插入PPT的方法也是有區(qū)別的。不同點：先要下載pptflv.swf文件，此文件是類似于網(wǎng)頁中FLV視頻播放器的一個Flash文件(可用百度搜索下載下來后記著要改文件名，保留擴展名)；例如改成：pptflv1.swf“Movie”參數(shù)值填入方法不一樣，參數(shù)值示例：pptflv.swf?file=視頻.FLV“pptflv.swf”即為步驟一下載下來的Flash文件的完整文件，“視頻.FLV”即為需要播放的FLV視頻的文件名，大家只要將pptflv.swf換成自己下載后起的文件名，將“視頻.FLV”換成自己的FLV視頻文件名，則此FLV文件就可以在PowerPoint中播放了。如播放2.flv視頻參數(shù)填法：示例：pptflv1.swf?file=2.FLV②方法二：將flv轉(zhuǎn)換成swf再插入轉(zhuǎn)換軟件：UltraFlashVideoFLVConverter3.2.0軟件說明：該軟件又叫全格式FLV轉(zhuǎn)換器，支持將幾乎所有主流視頻格式轉(zhuǎn)換為FLV或者SWF且對用戶較為關(guān)心的RealMedia(RM/RMVB...)和QuickTime(MOV/QT...)支持良好。三大特色功能：既可輸出FLV格式，也可輸出SWF格式，甚至同時輸出FLV+SWF格式。此軟件也支持創(chuàng)建調(diào)用播放的網(wǎng)頁支持導入所有的主流字幕格式。srt,*.sub,*.idx,*.ssa,*.ass,*.psb,*.smi)有字幕合成功能，你現(xiàn)在無需再使用那些繁瑣的專業(yè)軟件來合成字幕到視頻中去，字幕合成與格式轉(zhuǎn)換一氣呵成！支持視頻分割，右鍵點擊列表中的源文件，選擇[編輯視頻]，自己設(shè)置下起點終點即可對視頻進行去粗取精處理！③方法三：將flv轉(zhuǎn)換成其他格式視頻文件再插入工具：FLV轉(zhuǎn)AVI（FreeFLVtoAVIConverter1.5）作用：一個免費的將FLV轉(zhuǎn)換成AVI的軟件，簡單好用，自帶解碼器。四、學做交互，理解運用。1.利用母版進行交互母版≠模版母版和模版可以使課件統(tǒng)一整體風格，展現(xiàn)自己的個性和特點；模版是對同一類課件所做的整體風格統(tǒng)一設(shè)置，母版則是對某一部課件內(nèi)部所做的個性化統(tǒng)一設(shè)置。母版設(shè)置得好，就可以存為模版，供別人在制作同類題材時使用。修改幻燈片母板的方法和技巧。如果我們希望為每一張幻燈片添加上一項固定的內(nèi)容，并做超鏈接，可以通過修改“母板”來實現(xiàn)。a)執(zhí)行“視圖→母板→幻燈片母板”命令，進入“幻燈片母板”編輯狀態(tài)。b)插入固定內(nèi)容。例如：將圖片插入到幻燈片中，調(diào)整好大小、定位到合適的位置上。c)給這張圖片插入超鏈接，就可以進行交互了。d)單擊“關(guān)閉母板視圖”按鈕退出“幻燈片母板”編輯狀態(tài)。以后添加幻燈片時，該幻燈片上自動添加上該圖片。如果說一個PPT有它的靈魂的話，那就是PPT的母板，它的作用猶如摩天大廈的根基一般。2.在PPT演示文稿中插入PowerPoint演示文稿對象實現(xiàn)交互具體效果：①導航目錄內(nèi)容展示效果②單擊小圖片就可看到該圖片的放大圖自動縮效果《畫家鄉(xiāng)》一課五個畫面交互的具體操作方法：a)單擊“插入→對象”，在出現(xiàn)的選擇頁中選擇“MicrosoftPowerPoint演示文稿”，單擊確定。此時就會在當前幻燈片中插入一個“PowerPoint演示文稿”的編輯區(qū)域。b)在此編輯區(qū)域中我們就可以對插入的演示文稿對象進行編輯了，編輯方法與PowerPoint演示文稿的編輯方法一樣。c)在插入的演示文稿對象中創(chuàng)建所需的幻燈片?？蓪D片設(shè)置為幻燈片相同大小，退出編輯后，就可發(fā)現(xiàn)圖片以縮小方式顯示了（其實是整個插入的演示文稿對象被縮小顯示了）。d)最后，我們只需對剩余的圖片進行插入。為了提高效率，可將這個插入的演示文稿對象進行復制，并按照上面的方法對圖片進行替換即可。e)完畢后，單擊“觀看放映”命令進行演示，單擊小圖片馬上會放大，再單擊放大的圖片馬上又返回到了瀏覽小圖片的幻燈片中了。原理：這里的小圖片實際上是插入的演示文稿對象，它們的“動作設(shè)置”屬性中的“單擊鼠標”中的“對象動作”被設(shè)為了“演示”（這是默認值）。因此我們在演示時，單擊小圖片，就是等于對插入的演示文稿對象進行“演示觀看”。而演示文稿對象在播放時就會自動全屏幕顯示。所以我們看到的圖片就好像被放大了一樣，而我們單擊放大圖片時，插入的演示文稿對象實際上已被播放完了（因為只有一張），它就會自動退出，所以就回到了主幻燈片中了。3.用觸發(fā)器控制自定義動畫進行交互以前我們在使用PowerPoint制作課件時，常常發(fā)現(xiàn)制作人機交互性的課件非常麻煩。其實在PowerPoint2003里，用觸發(fā)器控制自定義動畫可以輕松地制作出交互性很強的課件。觸發(fā)器功能可以將畫面中的任一對象設(shè)置為觸發(fā)器，單擊它，該觸發(fā)器下的所有對象就能根據(jù)預先設(shè)定的動畫效果開始運動，并且設(shè)定好的觸發(fā)器可以多次重復使用。類似于Authorware、Flash等軟件中的熱對象、按鈕、熱文字等，單擊后會引發(fā)一個或者的一系列動作。例1：單擊“棱臺”后，“小球”開始按一定路徑運動。例2：分別單擊“變色一”和“變色二”，讓“笑臉”顏色。例3：單擊下面一段話的關(guān)鍵詞，讓詞語變紅色讀下面一段話，說說從哪些詞語中可以看出侵略者采用了各種野蠻手段掠奪、毀滅圓明園的？他們把園內(nèi)凡是能拿走的東西，統(tǒng)統(tǒng)掠走，拿不動的，就用大車或牲口搬運。實在運不走的，就任意破壞、毀掉。步驟：a)將原來段落中的重點詞消去；（將詞語顏色變成和背景色一樣）b)將重點詞作為單獨文本覆蓋到原來位置；c)設(shè)置重點詞自定義動畫為“添加效果→強調(diào)→更改字體顏色→紅色”d)右擊重點詞自定義動畫，選擇“效果選項”，選擇“計時”，選擇“觸發(fā)器”，選“單擊下列對象時啟動效果”，再選重點詞，按確定。五、學會截取，合理選用。（一）視頻的截取加工1.工具：萬能轉(zhuǎn)換器（英文名TotalVideoConverter）作用：可以幫助你快速的分割,修整大的AVI、MPEG、ASF或者WMV文件為一個個小的視頻文件,內(nèi)置視頻播放器,你可以很方便的按照所選擇的播放時間進行切割操作,不需要另外具備高深的技術(shù)知識,簡單容易使用!2.繪聲繪影會聲會影是一套操作最簡單，功能最強悍的DV、HDV影片剪輯軟件。不僅完全符合家庭或個人所需的影片剪輯功能，甚至可以挑戰(zhàn)專業(yè)級的影片剪輯軟件。（二）flash的片段截取有時候，在網(wǎng)絡(luò)上下載了一個課件，對自己的課堂教學有幫助，但是又不想全部應(yīng)用這個課件，只想取出其中一部分，應(yīng)該則么辦呢？先用碩思閃客精靈將.swf文件和.exe文件轉(zhuǎn)換成fla文件，再用flash8打開進行編輯，截取自己所需的片段，然后插入到ppt里面為我所用。1.碩思閃客精靈：它是一款用于瀏覽和解析Flash動畫（.swf文件和.exe文件）的工具。最新版本有著強大的功能，可以將swf文件導出成FLA文件。它還能夠?qū)lash動畫中的圖片、矢量圖、聲音、視頻（*.flv）、文字、按鈕、影片片段、幀等基本元素完全分解，最重要的是可以對動作的腳本(Actionscript)進行解析，清楚的顯示其動作的代碼，讓對Flash動畫的構(gòu)造一目了然。支持將SWF文件導出成FLA文件，幫助丟失FLA文件的影片作者重新獲得FLA文件，從而可以再編輯。完全兼容Flash8文件和動作腳本(ActionScript)2.0。碩思閃客精靈支持將包含組件的SWF文件轉(zhuǎn)換成FLA格式，用戶可以在Flash中編輯這些組件。支持解析Flash影片中的視屏(video)文件，并將Flash影片中的視頻文件導出為*.flv格式。2.碩思閃客精靈具體使用方法：①解析Flash課件，提取課件素材在Flash課件作品中有大量的圖片、聲音和視頻等資源。由于制作者擁有的資源不同，在制作課件時，很難及時、方便地尋找到適合的素材。如果可以從同類作品中將所需要的資源提取出來為己所用的話，不僅大大節(jié)約了搜集素材資源的時間，而且會極大地提高課件利用率。但是，F(xiàn)lash課件發(fā)布時一般都進行加密處理，使教師無法用普通的方式導入到Flash中進行編輯。而碩思閃客精靈可以解析出Flash作品中的元件及腳本，并且可以保存成swf格式，這樣在創(chuàng)作時就可以直接導入Flash中使用。啟動閃客精靈，單擊工具上的“快速打開”按鈕打開一個Flash動畫(可以是swf格式或exe格式)，閃客精靈會自動分解當前動畫(圖2)，包括用到的腳本語言(Actions語句)，并在資源欄中分類羅列著動畫中的各種元件(圖片、按鈕、影片和聲音等);單擊某個元件，可以在中間的窗口中預覽;勾選需要的元件，然后單擊“導出”按鈕，就可以把選中的元件分類保存到原文件所在的文件夾中。②反編譯Flash課件，獲取課件源代碼碩思閃客精靈的最大亮點就是能夠?qū)lash動畫(swf格式)還原成其源文件(Fla格式)，相信這個功能是很多朋友期待已久的。還原的方法十分的簡單，只需要打開Flash動畫，再單擊工具欄上的“導出Fla”按鈕，選擇保存位置，稍等后就完成了還原工作，此時還會提示“是否愿意用Flash打開它”，單擊“Yes”即可啟動系統(tǒng)中安裝的Flash打開還原后的源文件，此時你就可以隨心所欲地對它進行修改啦。3.用flash8進行編輯基本方法：選取需要幀，復制，粘貼到新的flash中，調(diào)試修改。上面介紹了關(guān)于破解Flash課件的一些方法和手段，有一個特定的使用范圍，即為了課堂教學服務(wù)，只有資源共享才能提高教學效率，促進教學效果的提高。不能做為商業(yè)目的，也不能將別人的課件的署名修改一下，便成為自己的作品，用于參加比賽，這是不道德的行為。在PPT演示中禁用右鍵快捷菜單和滑鼠滾動一大群與會人員正襟危坐，你豪情滿懷地進行著某個新產(chǎn)品的演示或介紹，卻不小心由于鼠標左鍵的誤操作導致幻燈片跳到了本不應(yīng)該出現(xiàn)的位置，或者本應(yīng)按下鼠標左鍵切換到下一張，卻由于按下了右鍵而出現(xiàn)一個快捷菜單。不用擔心，只要進行小小的設(shè)置，就可以將這些煩人的問題統(tǒng)統(tǒng)搞定。從任務(wù)窗格中打開“幻燈片切換”，將換片方式小節(jié)中的“單擊鼠標時”和“每隔”兩個復選項全部去除，然后將這個設(shè)置應(yīng)用于所有幻燈片，以后切換到下一張或上一張，只有通過鍵盤上的方向鍵才能進行操作。至于另外一個問題，解決的辦法也很簡單，從“工具”菜單下打開“選項→視圖”窗口，取消“幻燈片放映”小節(jié)上的“右鍵單擊快捷菜單”復選框即可?！鲈赑PT演示文稿內(nèi)復制幻燈片要復制演示文稿中的幻燈片，請先在普通視圖的“大綱”或“幻燈片”選項中，選擇要復制的幻燈片。如果希望按順序選取多張幻燈片，請在單擊時按Shift鍵；若不按順序選取幻燈片，請在單擊時按Ctrl鍵。然后在“插入”菜單上，單擊“幻燈片副本”，或者直接按下“Ctrl+shift+D”組合鍵，則選中的幻燈片將直接以插入方式復制到選定的幻燈片之后?！鯬owerpoint自動黑屏在用Powerpoint展示課件的時候，有時需要學生自己看書討論，這時為了避免屏幕上的圖片影響學生的學習注意力可以按一下“B”鍵，此時屏幕黑屏。學生自學完成后再接一下“B”鍵即可恢復正常。按“W”鍵也會產(chǎn)生類似的效果?！鰧⒒脽羝l(fā)送到word文檔1、在Powerpoint中打開演示文稿，然后在“文件”菜單上，指向“發(fā)送”，再單擊“MicrosoftWord”。2、在“將幻燈片添加到Microsoftword文檔”之下，如果要將幻燈片嵌入word文檔，請單擊“粘貼”；如果要將幻燈片鏈接到word文檔，請單擊“粘貼鏈接”。如果鏈接文件，那么在Powerpoint中編輯這些文件時，它們也會在word文檔中更新。3、單擊“確定”按鈕。此時，系統(tǒng)將新建一個word文檔，并將演示文稿復制到該文檔中。如果word未啟動，則系統(tǒng)會自動啟動word?！鲎尰脽羝詣硬シ乓宲owerpoint的幻燈片自動播放，只需要在播放時右鍵點擊這個文稿，然后在彈出的菜單中執(zhí)行“顯示”命令即可，或者在打開文稿前將該文件的擴展名從PPT改為PPS后再雙擊它即可。這樣一來就避免了每次都要先打開這個文件才能進行播放所帶來的不便和繁瑣?！鲈黾覲PT的“后悔藥”在使用powerpoint編輯演示文稿時，如果操作錯誤，那么只要單擊工具欄中的“撤消”按鈕，即可恢復到操作前的狀態(tài)。然而，默認情況下Powerpoint最多只能夠恢復最近的20次操作。其實，powerpoint允許用戶最多可以“反悔”150次，但需要用戶事先進行如下設(shè)置：在“工具－選項”，擊“編輯”選項卡，將“最多可取消操作數(shù)”改為“150”，確定?！鯬PT中的自動縮略圖效果你相信用一張幻燈片就可以實現(xiàn)多張圖片的演示嗎？而且單擊后能實現(xiàn)自動放大的效果，再次單擊后還原。其方法是：新建一個演示文稿，單擊“插入”菜單中的“對象”命令，選擇“Microsoftpowerpoint演示文稿”，在插入的演示文稿對象中插入一幅圖片，將圖片的大小改為演示文稿的大小，退出該對象的編輯狀態(tài)，將它縮小到合適的大小，按F5鍵演示一下看看，是不是符合您的要求了？接下來，只須復制這個插入的演示文稿對象，更改其中的圖片，并排列它們之間的位置就可以了?！隹焖凫`活改變圖片顏色利用powerpoint制作演示文稿課件，插入漂亮的剪貼畫會為課件增色不少。可并不是所有的剪貼畫都符合我們的要求，剪貼畫的顏色搭配時常不合理。這時我們右鍵點擊該剪貼畫選擇“顯示‘圖片’工具欄”選項（如果圖片工具欄已經(jīng)自動顯示出來則無需此操作），然后點擊“圖片”工具欄上的“圖片重新著色”按鈕，在隨后出現(xiàn)的對話框中便可任意改變圖片中的顏色?！鰹镻PT添加公司LOGO用powerpoint為公司做演示文稿時，最好第一頁都加上公司的Logo，這樣可以間接地為公司做免費廣告。執(zhí)行“視圖－母版－幻燈片母版”命令，在“幻燈片母版視圖”中，將Logo放在合適的位置上，關(guān)閉母版視圖返回到普通視圖后，就可以看到在每一頁加上了Logo，而且在普通視圖上也無法改動它了。■“保存”特殊字體為了獲得好的效果，人們通常會在幻燈片中使用一些非常漂亮的字體，可是將幻燈片拷貝到演示現(xiàn)場進行播放時，這些字體變成了普通字體，甚至還因字體而導致格式變得不整齊，嚴重影響演示效果。在powerpoint中，執(zhí)行“文件－另存為”，在對話框中點擊“工具”按鈕，在下拉菜單中選擇“保存選項”，在彈出其對話框中選中“嵌入