清晰且有效的數據報表可以反映出數據變化，進而幫助團隊人員確定后續的產品優化迭代方向，找出可能存在的問題。那么，產品經理應當怎么整理出清晰且直觀的數據報表？本篇文章里，作者總結了產品經理整理數據報表的可操作步驟，一起來看一下。

之前聊數據埋點的時候曾經提了一下，說是后面聊一下數據報表的事情，今兒個正好有空，捋一捋，跟大家做個分享。

上次分享的是《產品經理整理埋點需求的6個步驟》，有興趣的朋友可以進去看看。

大家都很關心數據的事情，因為數據能比較直觀地反應哪些地方發生了新的變化，能夠提醒相關人員去關注和調整，同時一個新的優化上線之后也能夠根據數據去判斷優化方向是不是正確的問題。數據是最便捷的方式。

但是你想看數據就需要先把數據報表理出來，一個業務或者一個APP會產生大量的數據，你需要根據關聯性和重要性去整理出具體的數據表，然后再去觀察，直接看明細或者日志那你得瘋。

怎么整理數據報表呢？

它需要根據核心業務流程和業務指標來梳理，然后兼顧到職級分層、部門分類、重要程度、使用頻次來分別處理。

我們以電商業務為例來簡單說說，選電商是因為大家對電商業務更熟悉。

我整理了一下，大致上可以按照以下步驟去整理數據報表系統。

第一步，確認要做哪些表。

你先確定有哪些部門需要看報表，常規來說包含市場、商務、運營、產品、客服、售后等部門。

然后你去看這些部門都會需要哪些報表，譬如市場部門需要渠道流量轉化表等，運營部門需要營銷轉化表、業務流程表、銷量排名表等，產品部門需要業務流程表、產品日常數據表等（觀察用戶留存與活躍的），客服需要用戶反饋問題進度表等、售后需要售后問題進度表等。

以上只是我不專業的一個舉例，實際上表是非常多的。

這里面有個地方需要注意一下，有些表看上去字段是差不多的，譬如渠道流量轉化表和業務流程表，很多字段都是重復的，那么要不要并表就是一個需要考慮的問題。有的公司管理比較嚴格，那么最好不并表，這樣可以通過后臺權限來控制展示，如果相對寬松那么可以向相關部門做一下確認然后決定要不要并表。

注意：數據后臺和管理后臺是分開的，不能混淆。管理后臺用來管理用戶、商品、商戶和看明細數據（用戶信息表、購買訂單表）等等，數據后臺就是用來看統計數據的。

第二步，整理不同部門報表需要展現的字段。

以業務流程表為例。

先把業務主流程的關鍵節點梳理出來，到成交算是一個流程。電商的話流程大概是用戶注冊/登錄→查看商品詳情→加入購物車→立即購買/結算→立即付款→完成付款。

那么業務流程表的字段也就清楚了：

注意：報表字段是有了，但是也需要說清楚這些字段的具體含義，譬如注冊/登錄用戶數，指的是在統計時段內，注冊+登錄用戶的人數之和，需要去重。

不要小看這個說明，這個說明決定了大家的理解能不能一致，邊界請不清晰，上面那個例子，如果沒有后面那個“需要去重”那么技術在處理的時候是不會去重的，這樣的話如果一個用戶在指定時段內登錄了多次就會統計多次。

一定要寫這個說明，不寫的話技術就自己發揮了，每個人對業務的理解是不一樣的，所以一定要寫。

第三步，去擴展報表的統計維度。

數據報表是有了，但是統計維度也需要定義，譬如需要按照日期、按渠道、按類目（商品）、按商戶、按地區等等維度去看數據，那么就需要把這些和報表相關的維度加上去，這樣就能實現按維度看數據的目的。

這個比較簡單，有什么維度加什么維度就行，但是在處理的時候需要注意，多個條件組合能不能篩選出數據的問題，這個比較細節。

第四步，整理核心轉化公式數據表。

核心轉化公式數據表是給公司高管和核心業務骨干看的，高管是不可能看什么部門表的，看不過來也沒必要，高管們看的表只需要體現核心數據和指標就可以。

高管們關心的也就是部門負責人關心的，部門負責人關心就應該是一線員工關心的，這就是一個拉齊公司內部認知的一個表，所以核心轉化公式數據表特別重要，重要到需要單列一個步驟說明。

整理核心轉化公式數據表之前就需要去梳理業務的核心轉化公式，電商業務的核心轉化公式如下：GMV=注冊登錄用戶數*購買轉化率*客單價*人均購買數量*(1-退貨率)。

這就是一個用戶從曝光到復購的一個簡化的轉化公式，這個公式的意義在于聚焦提高產值的關鍵步驟，目標不會偏。

注意：這個公式很重要，不能錯，如果自己沒把握的話可以問一下公司領導，知道弄清楚為止。

其實做KPI的時候也一定會需要這個核心轉化公式，這樣大家就能知道在哪些環節可以提高績效，分別是提高多少，由哪些部門具體負責。

根據這個核心公式就可以整理相關的字段：

這樣公司領導每天看這個數據就知道業務有沒有在向預定目標發展，以及距離目標還有多遠。

當然有了字段以后也需要加維度，這個就參考前面的步驟就可以。這里的統計維度其實是比較少用到的，但是功能還是必備。

 第五步，整理日常大盤數據表。

大盤表是給所有員工看的，可以作為數據后臺的首頁。

大盤表通常是昨日數據的匯總統計，譬如GMV、銷售訂單數、銷售商品數、退貨商品數、退貨總金額、新增商戶數、新增用戶數、新增商品數，大概看一下數據的變化，給大家一個總體的印象。

第六步，整理實時統計表。

有一些業務對于數據的實時性要求比較高，所以會涉及到需要做實時統計表，實時統計表一般每小時更新一次數據，如果流程出現問題就可以及時進行排查和修復，但是對于大部分業務來說其實不需要，如果不是發布了新的代碼，理論上是不會出現這個問題。

當然像電商APP，如果遇到雙11這種，一般來說還是需要看一下實時數據的，因為全公司都很關心當天的戰果，屬于重要時刻。所以電商APP需要做實時表，字段的話一般也就是大盤數據表上的字段就行，額外字段的話可以根據領導的要求做。

第七步，最后確認報表字段和整理成需求文檔。

把整理好的表格和各部門對一下，根據各部門的要求調整完成后制作成需求文檔。

這個步驟就不多說了，按照需求的整理流程處理就行。

以上就是整理報表系統的幾個步驟，當然因為細節太多了，其實沒有辦法在一篇文章里面講的非常清楚，但是至少80%的東西還是在了，所以還是有參考性的。希望對大家有所幫助。

實際上做報表系統是一個持續優化和新增的過程，如果是從0開始做的話就需要單獨立項然后分期做，一下子肯定是不現實的，因為工作量太大了，項目的進度不好控制，還有就是有些表并不需要馬上做的，也可以緩一緩，這樣優先級高的數據報表就會更快的上線。

如果業務不大的話甚至可以用excel先統計起來?？傊宫F形式和處理方式還是很多樣化的。

產品經理在數據方面我認為其實可以多花點功夫，形成一套比較具有實操性的方法論比較好，一個數據產品和一個APP產品在競爭力上還是有差異，實際上越細分專業度越高，競爭力越強。當然首先至少要做到及格。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

ERP系統可以幫助跟蹤、存儲信息，有助于推動后續的產品決策，而APS系統是對ERP系統的補充和優化，具體而言，APS系統和ERP系統有什么關系？本篇文章里，作者就二者的關系、區別及應用等方面做了總結，一起來看一下。

APS作為對ERP計劃系統的補充和優化，集成主要集中在與ERP計劃系統的交互層次上。二者其實有很多相似和聯系的地方。

• ERP系統是企業資源計劃的簡稱，是指建立在信息技術基礎上，集信息技術與先進管理思想于一身，以系統化的管理思想，為企業員工及決策層提供決策手段的管理平臺。
• APS系統是高級計劃與排程的簡稱，是解決企業內部生產排程和生產調度問題，常被稱為排序問題或資源分配問題。

首先，APS的需求計劃模塊從ERP的訂單輸入中獲得客戶的實際需求，然后需求計劃模塊再結合外部數據中預測需求通過APS算法計算得出預測生產計劃；同時再通過APS中的供應鏈計劃模塊中的約束條件，得到指導MRP的約束生產計劃，傳回ERP的主生產計劃模塊。

一、APS與ERP的關系

APS的制造計劃模塊與ERP的MRP通過制造訂單，結合BOM、庫存信息及采購信息等數據綜合考慮，反復交互論證，得出將要生產排產的生產任務單。

該生產任務單包含的信息為所要加工產品的數量級需求日期。APS的排產計劃模塊則會根據算法而得到工作中心的生產排單以及在制品的排隊序列。同時接受對車間活動的監測數據，實現對車間變化信息的動態反映。

二、APS與ERP的區別

ERP是依賴于MRP，主要基于無限物料、無限能力的理論，是通過缺料分析、能力分析、由人進行調整決定采取行動。APS的計劃是基于約束理論通過事先定義的約束規則，由計算機自動采取計算。另外，APS與ERP在計劃上也有許多關鍵的不同。

總之，ERP在除生產計劃外的財務管理、成本管理、采購管理、銷售管理、庫存管理、人力資源管理等方面表現出了良好的管理效率和管理規范。而APS系統作為計劃系統能夠很好地規劃基于供應鏈的長、中、短期計劃系統，但是APS系統不能獨立運行，它需要大量的基礎數據的支撐才能良好地運行。

三、APS能取代ERP系統嗎？

APS不能取代ERP系統，ERP系統采用的計劃模型確實又不能滿足目前的需要，ERP的計劃模塊的改變同時將影響到整個系統結構的變化。因此，用APS來優化ERP生產計劃系統，既可以強化ERP的計劃功能，同時又不必影響到其他成熟的商業流程。

四、APS計劃層次概覽

理論上，APS系統層次日趨立體化和豐富化，目前大多數APS包括6個主要的模塊：供應鏈戰略模塊、供應鏈計劃模塊、需求計劃、制造計劃模塊、排程計劃模塊、運輸優化模塊。

• 供應鏈戰略模塊用來支持戰略假設分析，確定生產地點、配送中心和其它實體的最優組合及選址方案，并對不同的成本和物料約束條件進行建模分析。
• 供應鏈計劃模塊通過對物料、產能、運輸以及服務水平等的諸多約束對供應鏈進行建模和最優化分析，并制定出各流程的詳細計劃。
• 需求計劃模塊：用統計工具、因果要素和層次分析等手段實現市場與客戶需求預測及管理。其關聯預測功能，甚至可以通過產品水平水平的預測推出各零部件的需求量，從而優化采購決策。
• 制造計劃模塊：根據已有數據，與 ERP 的 MRP 通過制造訂單反復交互論證，得出將要生產排產的生產任務單。
• 排程計劃模塊：考慮了生產中的產能、工序、物料及時間等約束條件制定出最優的生產計劃。
• 運輸優化模塊可確定運輸模型以進行假設分析，并在約束條件下自動建立運載數量、發貨時間、運輸路線的安排。

五、APS之車間計劃與排程計劃

車間作業計劃的目標是通過對制造過程中車間層、車間層以下各層次物流的合理計劃，排程與控制，縮短產品的制造周期，減少在制品，降低庫存，提高生產資源的利用率，最終達到提高生產率的目的。

從功能方面看，車間作業計劃層比物料需求計劃層有更具體的目標，那就是減少工件在制造系統中的“空閑時間”。

據調查，在中小批量自動化制造系統中，工件在系統中的“通過時間”主要由4部分：加工準備時間、加工時間、排隊時間和運輸時間。其中加工時間只占整個通過時間的的5%左右，大部分時間消耗在排隊時間上，從而引起系統效益大衛降低。

車間作業計劃層主要由生產作業計劃層、排程計劃層和生產活動控制層有機組成，其結構圖如下所示。其中生產作業計劃層是在戰術層下達的月、旬或周生產計劃的基礎上，根據各種生產資源的實時狀態數據，制定具體的生產作業計劃，該計劃將確定計劃期間內各種制造設施的具體使用狀況，每日/班的工件種類及數量等。

排程計劃是在生產作業計劃的基礎上確定生產任務進行加工的順序，以及加工過程中各種制造資源的實時排程。上述的生產計劃于排程都只是為了運行層內物料的流動做出計劃，雖然在規劃時期系統能運行在最優或次優狀態，但實際系統運行中總會出現各種隨機的擾動，從而使系統是實際狀態與期望狀態之間產生偏差。

所以，生產活動控制的目標就是應用反饋控制原理校正這種系統的偏差，使物料流動和系統資源利用等盡可能與生產計劃于排程計劃所期望狀況吻合。

讓我們重點關注排程計劃層，它在車間作業計劃的三個層次中起到一個承上啟下的作用，具體來說，排程計劃就是針對一項可分解的工作如產品制造，探討在盡可能滿足約束條件如交貨期、工藝路線、資源情況的前提下，通過下達生產指令，安排其組成部分操作使用哪些資源、其加工時間及加工的先后順序，以獲得產品制造時間或成本的優化。

車間排程計劃的重要性在于它保證生產計劃的有效實施，高效低耗低使用生產資源均衡生產，減少原料的加工準備、等待與傳送時間，縮短產品生產周期、確保產品交貨期，從而提高設備利用率與生產效率，同時，減少了在制品中的資金占用，降低了生產成本，使企業能更好地適應多變的市場需求。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

this是什么 

一般情況下，this 指向調用他們的那個對象 ,也就是說誰調用就指向誰。

在全局作用域下 this指向誰 window

console.log(this);

普通函數里面 this 指向 window

    


        


            


            

        

        


            

                function fn() {
            

        

    

    


        


            


            

        

        


            

                console.log(this);
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                fn();
            

        

    

定時器里面的 this 指向 window

    


        


            


            

        

        


            

                window.setTimeout(function() {
            

        

    

    


        


            


            

        

        


            

                console.log(this);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }, 3000);
            

        

    

對象的方法里面的this指向這個對象

    


        


            


            

        

        


            

                var idol = {
            

        

    

    


        


            


            

        

        


            

                myname: '某某某',
            

        

    

    


        


            


            

        

        


            

                age: '18歲',
            

        

    

    


        


            


            

        

        


            

                sex: '女',
            

        

    

    


        


            


            

        

        


            

                skill: function() {
            

        

    

    


        


            


            

        

        


            

                console.log(this);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                idol.skill()
            

        

    

給指定元素綁定事件，this指向事件綁定者 btn

    


        


            


            

        

        


            

                var btn = document.querySelector('button');
            

        

    

    


        


            


            

        

        


            

                // btn.addEventListener('click', function() {
            

        

    

    


        


            


            

        

        


            

                //     console.log(this);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // });
            

        

    

    


        


            


            

        

        


            

                btn.onclick = function() {
            

        

    

    


        


            


            

        

        


            

                console.log(this);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                };
            

        

    

構造函數里面的this指向對象的實例化 構造函數在調用的時候 使用new

    


        


            


            

        

        


            

                function Fun() {
            

        

    

    


        


            


            

        

        


            

                console.log(this);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                var fun = new Fun();
            

        

    

    


        


            


            

        

        


            

                fun.uname = 'Jack';
            

        

    

    


        


            


            

        

        


            

                fun.age = '18歲';
            

        

    

    


        


            


            

        

        


            

                fun.sex = '男';
            

        

    

    


        


            


            

        

        


            

                console.log(fun)
            

        

    

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

首先安裝上圖的插件，接著如下圖右鍵HTML文件選擇Open with Live Server即可

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

更改之前的效果圖:

更改之前瀏覽器窗口放大縮小圖表都不會進行動態的縮放，
更改之后的效果圖：

更改之后圖表就會根據瀏覽器窗口大小實時監聽進行縮放
代碼：

 topChart.setOption({ series: [ {name: '最大值',type: 'line',stack: '最大值',data: dataMax}, {name: '最小值',type: 'line',stack: '最小值',data: dataMin}, {name: '平均值',type: 'line',stack: '平均值',data: dataAvg}, ] }); window.addEventListener("resize",()=> {//監聽瀏覽器窗口大小 topChart.resize(); }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

如果有多個圖表同時渲染，給個定時器就可以了，ss[0]，ss[1]，ss[2]，ss[3]分別表示四個圖表的class

var resizeTimer = null; window.addEventListener("resize", () => { if (resizeTimer) { clearTimeout(resizeTimer) } resizeTimer = setTimeout(function(){ ss[0].resize(); ss[1].resize(); ss[2].resize(); ss[3].resize(); }, 10); }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

沒了，結束了，是不是很簡單吶，如有問題，歡迎留言。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

寫在前面

vue文件最后要空一行，不然會報錯，真的奇葩…

登錄概述

登錄業務流程

• 1.在登錄頁面輸入用戶名和密碼
• 2.調用后臺接口進行驗證
• 3.通過驗證之后，根據后臺得響應狀態跳轉到項目主頁

登錄業務的相關技術點

• http是無狀態的
• 通過cookie在客戶端記錄狀態
• 通過session在服務器端記錄狀態
• 通過token方式維持狀態

這里要清楚哦！

登錄—token原理分析

• 1.登錄頁面輸入用戶名和密碼進行登錄
• 2.服務器驗證通過之后生成該用戶的token并返回
• 3.客戶端存儲該token
• 4.后續所有的請求都攜帶該token發送請求
• 5.服務器端驗證token是否通過

登錄功能實現

登錄頁面的布局

通過Element-UI組件實現布局

• el-form
• el-form-item
• el-input
• el-button
• 字體圖標

在vscode打開終端ctrl+~

git status 查看當前git狀態
git checkout -b login 創建一個新的分支叫login
git branch 切換分支

在vue ui中啟動！

終端指令npm run serve也可以運行！

在components文件下創建一個vue文件

import Vue from 'vue' import VueRouter from 'vue-router' import login from './components/login.vue' Vue.use(VueRouter) const routes = [ {path:'/login',component:login} ] const router = new VueRouter({ routes }) export default router 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

配置路由(并添加路由重定向)

const router = new VueRouter({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: login } ] }) 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

一定要注意空格，不然會報錯，可惡?。?

頁面編寫

先給一個全局樣式表

/* 全局樣式表 */ html, body, #app{ height: 100%; margin: 0; padding: 0; } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

并在main.js中導入

import './assets/css/global.css' 


    

        1
    

完成登錄框居中

注意：translate 進行移動，完成真正的居中

.login_box{ width: 450px; height: 300px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

添加一個登錄圖標

 .avatar_box{ height: 130px; width: 130px; border: 1px solid #eee; border-radius: 50%; padding: 10px; box-shadow: 0px 0px 10px #ddd; position: absolute; left: 50%; transform: translate(-50%,-50%); background-color: #fff;
        img{ width: 100%; height: 100%; border-radius: 50%; background-color: #eee; } } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

登錄表單的布局

通過Element-UI組件實現布局

• el-form
• el-form-item
• el-input
• el-button
• 字體圖標

elements組件庫網頁
在網站里面可以找到一些可以使用的基礎模板代碼

導入組件

import Vue from 'vue'
import { Button, Form, FormItem, Input } from 'element-ui'//分開import會報錯

Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input) 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

中間form和button都是直接到上面的組件庫里面去找的

中間一些代碼不貼了，比較枯燥呀

特別地，我們的小圖標是從阿里的icon庫里面下載的

具體用法見以前寫得一篇博客
阿里巴巴icon圖標盡在掌握(前端如何引入icon庫,美麗圖標隨你處置T.T)

登錄表單的數據綁定

• 1.:model=“loginForm” 綁定一個表單
• 2.在form-item中用v-model雙向綁定數據對象
• 3.在export default中data() return表單數據

登錄表單的驗證規則

• 1.：rules="ruleForm"綁定一個規則
• 2.在form-item中用prop屬性設置為需要校驗的字段名

 // 這是表單的驗證規則對象 loginFormRules: { // 驗證用戶名是否合法 username: [ { required: true, message: '請輸入登錄名稱', trigger: 'blur' }, { min: 3, max: 10, message: '長度在 3 到 10 個字符', trigger: 'blur' } ], // 驗證密碼是否合法 password: [ { required: true, message: '請輸入登錄密碼', trigger: 'blur' }, { min: 6, max: 15, message: '長度在 6 到 15 個字符', trigger: 'blur' } ] } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

登錄表單的重置

• 1.在el-form中添加ref引用名稱，以便獲取表單
• 2.在方法中添加方法，用this.$refs.loginFormRef.resetFields()來重置表單，注意表單的值會變為data里面設置的初值

登錄預驗證

• 1.同樣的this.$refs.loginFormRef.validate()
• 2.配置axios

import axios from 'axios' // 配置請求的根路徑 axios.defaults.baseURL = 'https://127.0.0.1:8888/api/private/v1/' Vue.prototype.$http = axios 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

• 3.如下獲取查詢的結果
  使用async 和await要獲取返回結果

 this.$refs.loginFormRef.validate(async valid => { if (!valid) return const { data: res } = await this.$http.post('login', this.loginForm) console.log(res) if (res.meta.status !== 200) return console.log('登錄失敗') console.log('登錄成功') }) 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

登錄組件配置彈窗提示

• 1.在element.js中引入message并掛載到vue上

Vue.prototype.$message = Message // 掛載到了Vue上 


    

        1
    

• 2.直接調用this.$message.error(‘登錄失?。　?
  

登錄成功后的行為

1.將登錄之后的token，保存到客戶端的sessionStorage中

• 1.項目中除了登錄之外的其他API接口，必須在登錄之后才能訪問
• 2.token只應在當前網站打開期間生效，所以將token保存在sessionStorage中
  將這個token存儲到了會話存儲中