今年是騰訊發起99公益日的第七個年頭。騰訊公益不僅在配捐機制、產品體系、企業聯動、公益基礎建設上全面升級，還連接數億網友、近萬家慈善組織和愛心企業，為全民公益交出一張漂亮的成績單：

數據顯示，小紅花互動人次超1.25億，送小紅花、答公益題目等行為公益實現破圈傳播，億萬愛心網友共同領取了超9000萬朵助力小紅花，共計有超過6870萬人次在99公益日期間捐出35.69億元，加上騰訊公益慈善基金會的6億元資金支持，共募得善款41.69億元。

99 公益日為何能實現破圈傳播，作為騰訊公益日和 99 公益日的品牌符號，小紅花的設計背后又傳達了怎樣的思考？今天就來聊聊小紅花那些事。

2015年9月9日，騰訊公益聯合國內數百家公益組織、知名企業共同發起了中國第一個互聯網公益日。

為了讓用戶了解互聯網公益的核心特色與參與方式，讓更多的人參與到互聯網公益中，第一屆 99 公益日的活動主題定調為“一起愛”，在logo的設計中也借用了“無限”符號表示“愛無止境”的含義。

在前三年的 99 公益日中，募款額度得到了廣度上的增長，在用戶已經了解到互聯網公益低門檻、多形式、透明度、可記錄的特點之后，如何留住用戶，對互聯網公益形成日常習慣和持久投入，就成為了設計亟需解決的問題。

“小紅花”是騰訊公益平臺在2018年給出的答案。因為小紅花作為國人的集體回憶，關聯著你我兒時從老師那里收獲到的鼓勵。每一朵小紅花背后，是我們完成的一件“好事”。

延續小紅花的記憶線索進行延展，在公益中，小紅花是對用戶的捐贈給予的最大肯定，是受助者正在發生的改變。在傳播上，小紅花是記錄用戶每一次公益行為的符號，通過「戴小紅花，一塊做好事」而得到成就感的有效激勵。

于是，2018年99公益日的主視覺上，無數的愛心化為花瓣，匯聚成一朵小紅花，這是小紅花在騰訊公益平臺的初次綻放。

為了讓品牌有延續性，加深用戶對小紅花和99公益日的認知，小紅花作為核心品牌元素開始貫穿在每一年99公益日的主視覺中，并通過不同的畫面故事表達每一年的主題。

比如，2018年的主題是積小善，成大愛，于是在設計中，讓很多愛心小花匯聚在一起，讓小的愛心變成大愛；2019年的主題是一塊做好事，通過每個人的善意匯聚成小紅花……

在2019年，“小紅花”正式成為騰訊公益與99公益日的品牌符號。

從2020年開始，小紅花開始發力于傳播，聯動外部品牌 IP 如QQ、微信、Bilibili、狐妖小紅娘等開啟推廣，在各種不同的場景，詮釋“一塊做好事”的內涵。

這一年，小紅花之歌火了，同名神曲MV播放量超1億次；在線下，小紅花也開到喜茶等連鎖品牌的店里。

而2021年，屬于用戶獨特的小紅花愛心賬戶上線了，用戶在騰訊公益平臺做好事打卡，向好友發起集小紅花的自發傳播，從而爭取更大的配捐額，在增強用戶捐款積極性的同時，撬動更多用戶了解并參與到活動中來。

小紅花愛心賬戶

用戶還可將積累的小紅花兌換周邊禮品。在推廣上則從創作入手，發起共繪小紅花的活動。

可以說，小紅花串聯起了用戶從感知、到行動、到反饋的全流程，保證了用戶參與互聯網公益的動機和動力。

在預熱推廣階段，騰訊公益推出一支小紅花為主角的宣傳片，試圖為小紅花是什么，做出來自官方的定義。

不管是線上線下征集用戶繪制的小紅花，“每個人的小紅花”畫展，還是在感恩日隨證書送出的小紅花畫作，都讓用戶全方位地感受到騰訊公益小紅花的“玩法”，也為小紅花元素賦予了豐富的內涵。

征集到的部分小紅花作品

寄出公益榮譽證書

愛心用戶的開箱視頻

99公益日期間，小紅花與騰訊新聞、微保、騰訊視頻、騰訊會議等多產品的玩法聯動，讓小紅花開遍“地球村”。

多款產品聯動一塊做好事

而在線下，小紅花也伴隨系列廣告，落地在線上下，IP聯盟、異業合作、核心城市燈光投影秀等，讓小紅花無處不在。

部分城市地標燈光投影秀

最后，小紅花這一品牌形象的成功，不僅在公益設計這一領域上有借鑒的意義，在品牌IP的設計上同樣有值得學習的地方。

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

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

以我自己近期的工作為例，不妨為大家舉個簡單的例子：

下圖是一個補貼規則的設置流程，在用戶未設置補貼規則之前，明確告知用戶還未設置補貼規則，當用戶設置了補貼規則后，可以對補貼規則進行修改。

我認為這是一個非常簡單且合理的頁面路徑跳轉，并且在很多現有的產品中都有類似這樣的邏輯存在。然而在與上下游同學對接的過程中，卻遇到了不同的意見：有人認為沒有必要區分用戶是否設置了規則，用戶未設置規則可以直接展示系統默認的補貼條件和補貼范圍，如果用戶認為不合理，自行修改便是。

不知道大家看到這里是什么感覺，我在聽到「方案二」時的反應是：能夠理解卻并不認同，說不出來哪里不對，就是覺得這事它不應該這樣。

以上，就是在我工作中發生的一次非常具體的案例。

那么為什么我會產生“感覺哪里不對，卻又說不出為什么”的強烈感受呢？

最直接的原因是，這樣的設計方案（方案一）是用直覺做出來的，缺少了對方案本身的思考。

直覺，指的是那些沒有經過分析推理的觀點，因此常常給人一種不靠譜的感覺。

可是有時候我們依賴「直覺」做事真的就完全不靠譜嗎？帶著這樣的疑惑，我去查閱了一些相關的資料來輔助我更好理解這種直覺性思考，恰好找到了一個真實的實驗案例：

根據上述實驗，我們起碼能發現直覺未見得不可靠，也就是說，憑借直覺出的設計方案，并不意味著不是一個正確的方案。

可是在日常溝通協作的過程中，「直覺設計」一旦遇到不同的意見，就會缺少理論支撐。決策者無法判斷設計師的直覺是否可靠，從而覺得方案本身也不可靠。

遇到這種看似「死胡同」的情況，我們應該怎么去思考呢？

很簡單，直覺在前，策略性推理在后。

喬納森?海特（Jonathan Haidt），著名社會心理學家，在《正義之心》中有提到：

拿上述的方案來說，當我面對這類的質疑時，我也會有愣住，但我知道我不能驚慌，而是該讓騎象人（推理）表演了。

其實仔細分析一下上述案例就會發現，方案一和方案二最本質的區別在于：

是否需要區分用戶（商家）自行設置過「補貼規則 」？

百度百科對規則的定義是：

規則本身是屬于利益相關者之間的約定。按照這個邏輯，「補貼規則」可以理解為用戶（商家）與消費者形成的基本約定。

用戶（商家）未設置規則，如果系統直接展示默認的補貼條件和補貼范圍，就會給用戶（商家）一種平臺借以商家的名義與消費者形成了約定的印象，這與現實不符，甚至可能給用戶（商家）的業務帶來不必要的紛爭。因此，區分用戶是否設置過補貼規則是非常有必要的。

在上述場景中，雖然我的直覺先于理性給我發送了信號，但設計師如果光依靠直覺卻給不出任何說明，同樣會帶來一系列麻煩。

湯姆·格里弗（Tom Greever）在一篇文章提到，偉大的設計往往取決于你怎么說。

描述設計不是一件容易的事情，但每個設計師都不得不向很多沒有設計經驗的人講述自己的設計，并且要讓他們信服自己是對的，這群人很可能是方案的決策者。決策者通常會選擇那個聽上去最合理的方案，所以方案的表述對于最終方案的確立至關重要。

普通設計師和頂級設計師之間的差距不僅僅是他們解決問題的能力，還在于他們能否用一種讓人心服口服、并促使人們同意的方式來闡述他們是怎么解決問題的。理論上，最好的設計應該勝出，然而事實并非如此，設計評審很容易變成設計批判會，每個人都在告訴設計師要怎么設計。

最終，那些能夠說服別人“我是對的”的人會勝出。設計師如果沒有辦法說服別人為什么他們要這么做，就不得不按照他們不同意的方式去修改設計，原因僅僅是因為他們沒有辦法簡要的為自己的設計辯護。

聽起來似乎這些決策有失公允，甚至成了設計師的辯護大會，那么對于一些有著出色能力卻不善言辭的設計師而言，就真的沒有任何方法了嗎？

設計師要想守衛自己的設計，就要警惕那些單憑設計直覺做出來的方案。

設計直覺的形成與個人經歷、閱讀經歷相關。遇到相似的問題，設計師如果有這方面的經驗固然是好的，直接復用之前的做法可以大大提升設計效率。但我們完成設計后，最好想想哪些地方存在路徑依賴，以確保自己的方案能經得住質疑。

一個最實用的可以判斷自己的設計方案，是不是由直覺得來的，就是多向自己提問。

同樣，我們來用實際的案例做個說明：

想想下圖中「智能上傳」「更多操作」按鈕放在表格的左下方行不行？

很明顯不行，但重點是支持這么做不行的理由是什么？

如果你的理由是：

“別的頁面是將按鈕放在了列表左上角的”

“放在左下角不好看呀”

“沒見過有產品這么放啊”

“......”

那這個方案就是直覺設計的產物了。

想要突破直覺設計，設計師需要盡可能在每個設計點上多思考幾步，比如：

為什么別的頁面會將按鈕放在左上角？

根據2006年NNGroup 在眼動實驗中的發現，人們在網絡中的閱讀成F型，即用戶進入頁面中的第一眼，通常會落在頁面的左上角，也就是說左上方的區域是頁面的黃金區?！钢悄苌蟼鳌埂父嗖僮鳌箤儆陧撁娴暮诵牟僮?，那么放在列表左上方是非常合理的。

此外，我們可以看到頁面的翻頁器是可以篩選列表展示的條數，假設用戶設置的條數，超出了屏幕顯示范圍，也就意味用戶進入到頁面會看不到操作選項，所以按鈕放在表格的左下方也是不合理的。

為什么別的頁面按鈕放在左上角這個頁面也要這么做？

因為我們需要保障產品的一致性，產品的核心操作方式保持一致，可以有效地降低用戶的學習成本，避免不必要的思考。

在設計協作的過程中，設計師不可避免地會接收到來自四面八方的聲音，而我自己也曾在設計溝通中陷入過類似困境，因此我越發明白只有清晰地表述出自己的設計思考，才可能贏得每個人的支持。

以上是關于這篇文章的關鍵思考總結，回到設計師個體而言，我認為我們需要對直覺設計保持警惕，因為看似簡單的設計背后往往蘊含著復雜的設計原理，而一個好的設計師除了擁有過硬的設計能力，強大的設計思考力和表達能力以外，我相信同樣在跨學科的研究和學習上會遠強于普通設計師，否則根本無法支撐起背后的設計思考。

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

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

防抖事件

定義：持續觸發事件，一定時間內沒有觸發事件，事件處理函數只會執行一次，
當設定的時間內觸發過一次事件后會重新開始延時。
例：輸入框的事件（2s顯示內容，不是實時刷新顯示內容），對比輸入框的內容事件。
實時刷新的效果

 <div class="container"> <div class="left"> <p>實時刷新顯示內容</p> <input type="text" id="leftInput" /> <div class='textDiv' id="textShow"></div> </div> <div class="right"></div> </div> <script> var inputDom=document.getElementById('leftInput'); inputDom.addEventListener('keyup',function(e){ var textDom=document.getElementById('textShow'); console.log(e.target.value); textDom.innerText=e.target.value; }) </script>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

輸入123456會依次打印123456的金字塔

防抖（1s內顯示輸入內容）

 <div class="container"> <div class="left"> <p>防抖（1s內顯示輸入內容）</p> <input type="text" id="leftInput" /> <div class='textDiv' id="textShow"></div> </div> <div class="right"></div> </div> <script> // 防抖 var inputDom = document.getElementById('leftInput'); // 函數柯里化 function debounce(delay, callback) { let timer return function(value) { //閉包內存泄漏 clearTimeout(timer) timer = setTimeout(function() { //執行 callback(value) }, delay) } } // 顯示內容的函數 function showText(value) { var textDom = document.getElementById('textShow'); console.log(value) textDom.innerText = value; } var debounceFunc = debounce(1000, showText); inputDom.addEventListener('keyup', function(e) { let value = e.target.value debounceFunc(value) }) </script>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

1s內輸入123456只會打印一次123456

節流事件

定義：一段時間直只調用一次事件處理函數
實際用例：提交事件 、游戲的技能cd（在游戲cd中點擊n次都不會發動技能）

// 節流
            var skillDom = document.getElementById('skillTriger');
            function throttle(wait,callback) {
                let timeOut;
                return function(value) {
                    if (!timeOut) {
                        timeOut = setTimeout(function() {
                            callback(value);
                            //執行一次，時間段內的都不知執行
                            timeOut = null;
                        }, wait)
                    }
                }
            }
            function skillEvent(value){
                var textDom = document.getElementById('skillEventId');
                console.log(value)
                ++count
                textDom.innerText = value+count;
            }
            var skillAc=throttle(3000,skillEvent)
            var count=0
            skillDom.addEventListener('click', function(e) {
                let value = e.target.value
                skillAc(value)
            })  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

完整的html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>防抖與節流</title> </head> <style> * { margin: 0; padding: 0; } .container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; height: 400px; background: #262626; display: flex; } .left { position: relative; width: 50%; height: 100%; background: #00cec9; box-sizing: border-box; overflow: hidden; } .right { position: relative; width: 50%; height: 100%; background: #b2bec3; } </style> <body> <div class="container"> <div class="left"> <p>防抖（1s內顯示輸入內容）</p> <input type="text" id="leftInput" /> <div class='textDiv' id="textShow"></div> </div> <div class="right"> <p>節流（3s內觸發一次）</p> <input type="submit" id="skillTriger" value="發動技能" /> <div class='skillEvent' id="skillEventId"></div> </div> </div> <script> // 防抖 var inputDom = document.getElementById('leftInput'); // 函數柯里化 function debounce(delay, callback) { let timer return function(value) { //閉包內存泄漏 clearTimeout(timer) timer = setTimeout(function() { //執行 callback(value) }, delay) } } // 顯示內容的函數 function showText(value) { var textDom = document.getElementById('textShow'); console.log(value) textDom.innerText = value; } var debounceFunc = debounce(1000, showText); inputDom.addEventListener('keyup', function(e) { let value = e.target.value debounceFunc(value) }) // 節流 var skillDom = document.getElementById('skillTriger'); function throttle(wait, callback) { let timeOut; return function(value) { if (!timeOut) { timeOut = setTimeout(function() { callback(value); //執行一次，時間段內的都不知執行 timeOut = null; }, wait) } } } function skillEvent(value) { var textDom = document.getElementById('skillEventId'); console.log(value) ++count
                textDom.innerText = value + count; } var skillAc = throttle(3000, skillEvent) var count = 0 skillDom.addEventListener('click', function(e) { let value = e.target.value skillAc(value) }) </script> </body> </html>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

    

        65
    

    

        66
    

    

        67
    

    

        68
    

    

        69
    

    

        70
    

    

        71
    

    

        72
    

    

        73
    

    

        74
    

    

        75
    

    

        76
    

    

        77
    

    

        78
    

    

        79
    

    

        80
    

    

        81
    

    

        82
    

    

        83
    

    

        84
    

    

        85
    

    

        86
    

    

        87
    

    

        88
    

    

        89
    

    

        90
    

    

        91
    

    

        92
    

    

        93
    

    

        94
    

    

        95
    

    

        96
    

    

        97
    

    

        98
    

    

        99
    

    

        100
    

    

        101
    

    

        102
    

    

        103
    

    

        104
    

    

        105
    

    

        106
    

    

        107
    

    

        108
    

    

        109
    

    

        110
    

    

        111
    

    

        112
    

    

        113
    




      




    


    

1

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

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

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

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

前言：

        這個章節內容是比較多的，分為前端部分和后端部分。

目錄：

實現效果：增刪改查

 一、后端部分：

（1）數據庫：

        新建一張表user,設置幾個字段，效果如下：

 （2）egg邏輯部分：

提供的接口：http://localhost:7001/setUserList

 （3）egg具體實現步驟：

1、router.js中添加：

2、新建：app / controller / new / user.js

（1）查，模糊查詢 

（2）增

 （3）改

 （4）刪

 user.js 源碼：

3、引入mysql:點我

4、跨域問題解決：點我

 二、前端部分：

新建vue文件：testApi.vue

1、初始化查詢列表數據：頁面展示列表，列表數據mouted獲取

2、頁面點擊新增：展示彈框，并將彈框內容去除掉，點擊新增，將彈框內容發送給后端

 3、頁面點擊列表里面具體數據的編輯：彈框，并回填數據，修改將當前數據的id和表格數據傳給后端

4、刪除按鈕，點擊出現二次確認彈框，點擊確認將當前數據的id給后端就行 

 testApi.vue 源碼：

實現效果：增刪改查

 一、后端部分：

（1）數據庫：

        新建一張表user,設置幾個字段，效果如下：

 （2）egg邏輯部分：

提供的接口：http://localhost:7001/setUserList

1. get 請求，獲取數據，支持模糊查詢
2. post 請求，新增數據
3. put 請求，給后端當前數據id，修改內容
4. delete 請求，根據數據id刪除當前條數據

 （3）egg具體實現步驟：

1、router.js中添加：

 


    


        


            


            

        

        


            

                /** 
            

        

    

    


        


            


            

        

        


            

                 * 路由配置 
            

        

    

    


        


            


            

        

        


            

                 * @param app 
            

        

    

    


        


            


            

        

        


            

                 */ 
            

        

    

    


        


            


            

        

        


            

                module.exports = app => {
            

        

    

    


        


            


            

        

        


            

                const { router, controller } = app;
            

        

    

    


        


            


            

        

        


            

                //-------------------------------------------------- 
            

        

    

    


        


            


            

        

        


            

                // server接口 
            

        

    

    


        


            


            

        

        


            

                //-------------------------------------------------- 
            

        

    

    


        


            


            

        

        


            

                app.get('/setUserList', controller.new.user.getUserList);
            

        

    

    


        


            


            

        

        


            

                app.post('/setUserList', controller.new.user.postUserList);
            

        

    

    


        


            


            

        

        


            

                app.put('/setUserList', controller.new.user.putUserList);
            

        

    

    


        


            


            

        

        


            

                app.delete('/setUserList', controller.new.user.deleteUserList);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

2、新建：app / controller / new / user.js

（1）查，模糊查詢 

select * from user where name like ? % 內容 %

（2）增

this.app.mysql.insert('表名'，內容)

 （3）改

UPDATE loginlist SET `password` = 'Ad123456' WHERE id = 2

 （4）刪

delete from user where id = 1

 user.js 源碼：

 


    


        


            


            

        

        


            

                /** 
            

        

    

    


        


            


            

        

        


            

                 *  用戶信息路由 
            

        

    

    


        


            


            

        

        


            

                 * @param app 
            

        

    

    


        


            


            

        

        


            

                 * @returns {HomeController} 
            

        

    

    


        


            


            

        

        


            

                 */ 
            

        

    

    


        


            


            

        

        


            

                const Controller = require('egg').Controller;
            

        

    

    


        


            


            

        

        


            

                class NewsController extends Controller {
            

        

    

    


        


            


            

        

        


            

                async getUserList() {
            

        

    

    


        


            


            

        

        


            

                //查詢庫里的user表 
            

        

    

    


        


            


            

        

        


            

                let params = this.ctx.query //獲取路徑后面的參數 
            

        

    

    


        


            


            

        

        


            

                console.log('用戶的參數：');
            

        

    

    


        


            


            

        

        


            

                console.log(params);
            

        

    

    


        


            


            

        

        


            

                let sql = 'select * from user' 
            

        

    

    


        


            


            

        

        


            

                let initSql = sql
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                let content = [];//參數 
            

        

    

    


        


            


            

        

        


            

                let isMore = false;//是否有多個查詢參數 
            

        

    

    


        


            


            

        

        


            

                /** 
            

        

    

    


        


            


            

        

        


            

                 * @模糊查詢-量大的時候效率低 
            

        

    

    


        


            


            

        

        


            

                 * select * from user where name like ? % 內容 % 
            

        

    

    


        


            


            

        

        


            

                 * 在user表中全局查找name值 == 內容的 
            

        

    

    


        


            


            

        

        


            

                 * % 內容 % 全局查找內容 
            

        

    

    


        


            


            

        

        


            

                 *   內容 %  查找以 內容 開頭的數據 
            

        

    

    


        


            


            

        

        


            

                 * */ 
            

        

    

    


        


            


            

        

        


            

                if(params.name){
            

        

    

    


        


            


            

        

        


            

                sql += " where name like ?";
            

        

    

    


        


            


            

        

        


            

                content.push( "%"+params.name+"%" );
            

        

    

    


        


            


            

        

        


            

                isMore = true;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                if(params.age){
            

        

    

    


        


            


            

        

        


            

                if(isMore){//true代表有多個參數 
            

        

    

    


        


            


            

        

        


            

                sql += "and age LIKE ?";//and是兩個條件都必須滿足，or是或的關系 
            

        

    

    


        


            


            

        

        


            

                }else{
            

        

    

    


        


            


            

        

        


            

                sql += " WHERE age LIKE ?";
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                content.push( "%"+params.age+"%" )
            

        

    

    


        


            


            

        

        


            

                isMore = true;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                if(params.address){
            

        

    

    


        


            


            

        

        


            

                if(isMore){//true代表有多個參數 
            

        

    

    


        


            


            

        

        


            

                sql += "and address LIKE ?";//and是兩個條件都必須滿足，or是或的關系 
            

        

    

    


        


            


            

        

        


            

                }else{
            

        

    

    


        


            


            

        

        


            

                sql += " WHERE address LIKE ?";
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                content.push( "%"+params.address+"%" )
            

        

    

    


        


            


            

        

        


            

                isMore = true;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                if(params.phone){
            

        

    

    


        


            


            

        

        


            

                if(isMore){//true代表有多個參數 
            

        

    

    


        


            


            

        

        


            

                sql += "and phone LIKE ?";//and是兩個條件都必須滿足，or是或的關系 
            

        

    

    


        


            


            

        

        


            

                }else{
            

        

    

    


        


            


            

        

        


            

                sql += " WHERE phone LIKE ?";
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                content.push( "%"+params.phone+"%" )
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //開啟分頁 
            

        

    

    


        


            


            

        

        


            

                if(params.page || params.pageSize){
            

        

    

    


        


            


            

        

        


            

                let current = params.page;//當前頁碼 
            

        

    

    


        


            


            

        

        


            

                let pageSize = params.pageSize;//一頁展示多少條數據 
            

        

    

    


        


            


            

        

        


            

                sql += " limit ?,?";
            

        

    

    


        


            


            

        

        


            

                content.push((current-1)*pageSize,parseInt(pageSize));
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                let allList = await this.app.mysql.query(initSql);
            

        

    

    


        


            


            

        

        


            

                let userList= await this.app.mysql.query(
            

        

    

    


        


            


            

        

        


            

                sql,content
            

        

    

    


        


            


            

        

        


            

                );
            

        

    

    


        


            


            

        

        


            

                this.ctx.body = {
            

        

    

    


        


            


            

        

        


            

                code:200,
            

        

    

    


        


            


            

        

        


            

                masg:'success',
            

        

    

    


        


            


            

        

        


            

                data: {
            

        

    

    


        


            


            

        

        


            

                list:userList,
            

        

    

    


        


            


            

        

        


            

                total:allList.length
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                /** 
            

        

    

    


        


            


            

        

        


            

                 * 新增用戶信息 
            

        

    

    


        


            


            

        

        


            

                 * INSERT INTO loginlist (aaa,bbb,ccc) VALUES ('"'+111+'","'+222+'","'+333+'"') 
            

        

    

    


        


            


            

        

        


            

                 * this.app.mysql.insert('表名'，內容) 
            

        

    

    


        


            


            

        

        


            

                 * this.app.mysql.insert('表名'，{ 
            

        

    

    


        


            


            

        

        


            

                 *   name:123, 
            

        

    

    


        


            


            

        

        


            

                 *   age:1, 
            

        

    

    


        


            


            

        

        


            

                 *   address:西安 
            

        

    

    


        


            


            

        

        


            

                 * }) 
            

        

    

    


        


            


            

        

        


            

                 */ 
            

        

    

    


        


            


            

        

        


            

                // 
            

        

    

    


        


            


            

        

        


            

                async postUserList() {
            

        

    

    


        


            


            

        

        


            

                console.log(this.ctx.request.body);
            

        

    

    


        


            


            

        

        


            

                //新增數據-user表 
            

        

    

    


        


            


            

        

        


            

                let data = this.ctx.request.body
            

        

    

    


        


            


            

        

        


            

                data.id = parseInt(Math.random()*100000)
            

        

    

    


        


            


            

        

        


            

                let insertResult = await this.app.mysql.insert(
            

        

    

    


        


            


            

        

        


            

                'user', data
            

        

    

    


        


            


            

        

        


            

                );
            

        

    

    


        


            


            

        

        


            

                this.ctx.body = {
            

        

    

    


        


            


            

        

        


            

                code:200,
            

        

    

    


        


            


            

        

        


            

                masg:'success',
            

        

    

    


        


            


            

        

        


            

                data:insertResult
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                /** 
            

        

    

    


        


            


            

        

        


            

                 * 修改用戶信息 
            

        

    

    


        


            


            

        

        


            

                 * UPDATE loginlist SET `password` = 'Ad123456' WHERE id = 2（唯一值），修改一個 
            

        

    

    


        


            


            

        

        


            

                 * UPDATE loginlist SET username = 'admins', `password` = 'Ad123456' WHERE id = 2，修改多個 
            

        

    

    


        


            


            

        

        


            

                 */ 
            

        

    

    


        


            


            

        

        


            

                async putUserList(){
            

        

    

    


        


            


            

        

        


            

                //新增數據-user表 
            

        

    

    


        


            


            

        

        


            

                let id = this.ctx.query.id //獲取路徑后面的參數 
            

        

    

    


        


            


            

        

        


            

                let data = this.ctx.request.body
            

        

    

    


        


            


            

        

        


            

                let sql = 'update user set ' 
            

        

    

    


        


            


            

        

        


            

                let isMore = false;//是否有多個查詢參數 
            

        

    

    


        


            


            

        

        


            

                if(!id){
            

        

    

    


        


            


            

        

        


            

                this.ctx.body = {
            

        

    

    


        


            


            

        

        


            

                code:200,
            

        

    

    


        


            


            

        

        


            

                masg:'warning',
            

        

    

    


        


            


            

        

        


            

                data:'id沒有傳' 
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                return 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                //姓名 
            

        

    

    


        


            


            

        

        


            

                if(data.name){
            

        

    

    


        


            


            

        

        


            

                sql += 'name = "'+data.name+'"' 
            

        

    

    


        


            


            

        

        


            

                isMore = true 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                //年齡 
            

        

    

    


        


            


            

        

        


            

                if(data.age){
            

        

    

    


        


            


            

        

        


            

                if(isMore){
            

        

    

    


        


            


            

        

        


            

                sql += ',age = "'+data.age+'"' 
            

        

    

    


        


            


            

        

        


            

                }else{
            

        

    

    


        


            


            

        

        


            

                sql += 'age = "'+data.age+'"' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                isMore = true 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                //地址 
            

        

    

    


        


            


            

        

        


            

                if(data.address){
            

        

    

    


        


            


            

        

        


            

                if(isMore){
            

        

    

    


        


            


            

        

        


            

                sql += ',address = "'+data.address+'"' 
            

        

    

    


        


            


            

        

        


            

                }else{
            

        

    

    


        


            


            

        

        


            

                sql += 'address = "'+data.address+'"' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                isMore = true 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                //手機號 
            

        

    

    


        


            


            

        

        


            

                if(data.phone){
            

        

    

    


        


            


            

        

        


            

                if(isMore){
            

        

    

    


        


            


            

        

        


            

                sql += ',phone = "'+data.phone+'"' 
            

        

    

    


        


            


            

        

        


            

                }else{
            

        

    

    


        


            


            

        

        


            

                sql += 'phone = "'+data.phone+'"' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                isMore = true 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                //郵箱地址 
            

        

    

    


        


            


            

        

        


            

                if(data.email){
            

        

    

    


        


            


            

        

        


            

                if(isMore){
            

        

    

    


        


            


            

        

        


            

                sql += ',email = "'+data.email+'"' 
            

        

    

    


        


            


            

        

        


            

                }else{
            

        

    

    


        


            


            

        

        


            

                sql += 'email = "'+data.email+'"' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                sql += ' where id = ' + id
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                let insertResult = await this.app.mysql.query(sql)
            

        

    

    


        


            


            

        

        


            

                this.ctx.body = {
            

        

    

    


        


            


            

        

        


            

                code:200,
            

        

    

    


        


            


            

        

        


            

                masg:'success',
            

        

    

    


        


            


            

        

        


            

                data:insertResult
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                /** 
            

        

    

    


        


            


            

        

        


            

                 * 注銷用戶接口 
            

        

    

    


        


            


            

        

        


            

                 * DELETE FROM loginlist WHERE username = 'superman' 
            

        

    

    


        


            


            

        

        


            

                 */ 
            

        

    

    


        


            


            

        

        


            

                async deleteUserList(){
            

        

    

    


        


            


            

        

        


            

                //查詢庫里的user表 
            

        

    

    


        


            


            

        

        


            

                let params = this.ctx.query //獲取路徑后面的參數 
            

        

    

    


        


            


            

        

        


            

                console.log('用戶的參數：');
            

        

    

    


        


            


            

        

        


            

                console.log(params);
            

        

    

    


        


            


            

        

        


            

                let sql = 'delete from user where id = '+ params.id
            

        

    

    


        


            


            

        

        


            

                let res = await this.app.mysql.query(
            

        

    

    


        


            


            

        

        


            

                sql
            

        

    

    


        


            


            

        

        


            

                );
            

        

    

    


        


            


            

        

        


            

                this.ctx.body = {
            

        

    

    


        


            


            

        

        


            

                code:200,
            

        

    

    


        


            


            

        

        


            

                masg:'success',
            

        

    

    


        


            


            

        

        


            

                data:res
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /** 
            

        

    

    


        


            


            

        

        


            

                 * 模糊查詢封裝方法 
            

        

    

    


        


            


            

        

        


            

                 * @params = auth 
            

        

    

    


        


            


            

        

        


            

                 * */ 
            

        

    

    


        


            


            

        

        


            

                async query( auth ) {
            

        

    

    


        


            


            

        

        


            

                const TABLE_NAME = 'user';
            

        

    

    


        


            


            

        

        


            

                const QUERY_STR = 'id, name, age, phone, address';
            

        

    

    


        


            


            

        

        


            

                let sql = `select ${QUERY_STR} from ${TABLE_NAME} where authName like "%${auth.authName}%"`;
            

        

    

    


        


            


            

        

        


            

                const row = await this.app.mysql.query(sql);
            

        

    

    


        


            


            

        

        


            

                return row;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                module.exports = NewsController;
            

        

    

    


        


            


            

        

        


            


            

        

    

3、引入mysql:點我

4、跨域問題解決：點我

 二、前端部分：

新建vue文件：testApi.vue

1、初始化查詢列表數據：頁面展示列表，列表數據mouted獲取

 


    


        


            


            

        

        


            

                <el-table 
            

        

    

    


        


            


            

        

        


            

                :data="tableInfo.list" 
            

        

    

    


        


            


            

        

        


            

                style="width: 100%">
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                type="index" 
            

        

    

    


        


            


            

        

        


            

                label="序號" 
            

        

    

    


        


            


            

        

        


            

                align="center">
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                prop="name" 
            

        

    

    


        


            


            

        

        


            

                label="姓名" 
            

        

    

    


        


            


            

        

        


            

                align="center">
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                prop="age" 
            

        

    

    


        


            


            

        

        


            

                label="年齡" 
            

        

    

    


        


            


            

        

        


            

                align="center">
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                prop="address" 
            

        

    

    


        


            


            

        

        


            

                label="地址">
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                prop="phone" 
            

        

    

    


        


            


            

        

        


            

                label="手機號">
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                prop="email" 
            

        

    

    


        


            


            

        

        


            

                label="郵箱">
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                label="操作" 
            

        

    

    


        


            


            

        

        


            

                width="100">
            

        

    

    


        


            


            

        

        


            

                <template slot-scope="scope"> 
            

        

    

    


        


            


            

        

        


            

                <el-button type="text" size="small" @click="editFun(scope.row)">編輯</el-button> 
            

        

    

    


        


            


            

        

        


            

                <el-button type="text" size="small" @click="deleteFun(scope.row)">刪除</el-button> 
            

        

    

    


        


            


            

        

        


            

                </template> 
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                </el-table> 
            

        

    

 


    


        


            


            

        

        


            

                mounted(){
            

        

    

    


        


            


            

        

        


            

                this.initPage()
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                methods: {
            

        

    

    


        


            


            

        

        


            

                /*** 
            

        

    

    


        


            


            

        

        


            

                 * 獲取列表數據 
            

        

    

    


        


            


            

        

        


            

                 */ 
            

        

    

    


        


            


            

        

        


            

                initPage() {
            

        

    

    


        


            


            

        

        


            

                let params = {
            

        

    

    


        


            


            

        

        


            

                page: this.tableInfo.page, //當前頁 
            

        

    

    


        


            


            

        

        


            

                pageSize: this.tableInfo.pageSize //一頁展示多少條 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                this.$axios.get('http://localhost:7001/setUserList',{
            

        

    

    


        


            


            

        

        


            

                params
            

        

    

    


        


            


            

        

        


            

                }).then(res => {
            

        

    

    


        


            


            

        

        


            

                this.tableInfo.list = res.data.data.list
            

        

    

    


        


            


            

        

        


            

                this.tableInfo.total = res.data.data.total
            

        

    

    


        


            


            

        

        


            

                }).catch(error => {
            

        

    

    


        


            


            

        

        


            

                this.$message(error.data.message)
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

2、頁面點擊新增：展示彈框，并將彈框內容去除掉，點擊新增，將彈框內容發送給后端

 3、頁面點擊列表里面具體數據的編輯：彈框，并回填數據，修改將當前數據的id和表格數據傳給后端

4、刪除按鈕，點擊出現二次確認彈框，點擊確認將當前數據的id給后端就行 

 testApi.vue 源碼：

 


    


        


            


            

        

        


            

                <template> 
            

        

    

    


        


            


            

        

        


            

                <div class="pro_body"> 
            

        

    

    


        


            


            

        

        


            

                <el-button type='success' @click="addModal">新增</el-button> 
            

        

    

    


        


            


            

        

        


            

                <el-table 
            

        

    

    


        


            


            

        

        


            

                :data="tableInfo.list" 
            

        

    

    


        


            


            

        

        


            

                style="width: 100%">
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                type="index" 
            

        

    

    


        


            


            

        

        


            

                label="序號" 
            

        

    

    


        


            


            

        

        


            

                align="center">
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                prop="name" 
            

        

    

    


        


            


            

        

        


            

                label="姓名" 
            

        

    

    


        


            


            

        

        


            

                align="center">
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                prop="age" 
            

        

    

    


        


            


            

        

        


            

                label="年齡" 
            

        

    

    


        


            


            

        

        


            

                align="center">
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                prop="address" 
            

        

    

    


        


            


            

        

        


            

                label="地址">
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                prop="phone" 
            

        

    

    


        


            


            

        

        


            

                label="手機號">
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                prop="email" 
            

        

    

    


        


            


            

        

        


            

                label="郵箱">
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                <el-table-column 
            

        

    

    


        


            


            

        

        


            

                label="操作" 
            

        

    

    


        


            


            

        

        


            

                width="100">
            

        

    

    


        


            


            

        

        


            

                <template slot-scope="scope"> 
            

        

    

    


        


            


            

        

        


            

                <el-button type="text" size="small" @click="editFun(scope.row)">編輯</el-button> 
            

        

    

    


        


            


            

        

        


            

                <el-button type="text" size="small" @click="deleteFun(scope.row)">刪除</el-button> 
            

        

    

    


        


            


            

        

        


            

                </template> 
            

        

    

    


        


            


            

        

        


            

                </el-table-column> 
            

        

    

    


        


            


            

        

        


            

                </el-table> 
            

        

    

    


        


            


            

        

        


            

                <el-pagination 
            

        

    

    


        


            


            

        

        


            

                class="work_pagination" 
            

        

    

    


        


            


            

        

        


            

                background 
            

        

    

    


        


            


            

        

        


            

                :layout="'total,prev, pager, next,sizes'" 
            

        

    

    


        


            


            

        

        


            

                :total="tableInfo.total" 
            

        

    

    


        


            


            

        

        


            

                :hide-on-single-page="false" 
            

        

    

    


        


            


            

        

        


            

                :current-page="tableInfo.page" 
            

        

    

    


        


            


            

        

        


            

                :page-size="tableInfo.pageSize" 
            

        

    

    


        


            


            

        

        


            

                @current-change="pageChange" 
            

        

    

    


        


            


            

        

        


            

                @size-change="pageSizeChange" 
            

        

    

    


        


            


            

        

        


            

                >
            

        

    

    


        


            


            

        

        


            

                </el-pagination> 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <!--彈框部分--> 
            

        

    

    


        


            


            

        

        


            

                <el-dialog 
            

        

    

    


        


            


            

        

        


            

                custom-class="modalName" 
            

        

    

    


        


            


            

        

        


            

                :visible.sync="modal.show" 
            

        

    

    


        


            


            

        

        


            

                :width="modal.type === 'delete'? '470px' : '800px'">
            

        

    

    


        


            


            

        

        


            

                <h3 v-if="modal.type === 'add'" slot="title">新增</h3> 
            

        

    

    


        


            


            

        

        


            

                <h3 v-if="modal.type === 'edit'" slot="title">修改</h3> 
            

        

    

    


        


            


            

        

        


            

                <h3 v-if="modal.type === 'delete'" slot="title">提示</h3> 
            

        

    

    


        


            


            

        

        


            

                <div v-if="modal.type !== 'delete'" class="editNameBody"> 
            

        

    

    


        


            


            

        

        


            

                <el-form class="editNameFrom" :model="modalFrom" label-width="120px" label-position="right"> 
            

        

    

    


        


            


            

        

        


            

                <el-form-item label="姓名："> 
            

        

    

    


        


            


            

        

        


            

                <el-input v-model="modalFrom.name"></el-input> 
            

        

    

    


        


            


            

        

        


            

                </el-form-item> 
            

        

    

    


        


            


            

        

        


            

                <el-form-item label="年紀："> 
            

        

    

    


        


            


            

        

        


            

                <el-input v-model="modalFrom.age"></el-input> 
            

        

    

    


        


            


            

        

        


            

                </el-form-item> 
            

        

    

    


        


            


            

        

        


            

                <el-form-item label="手機號："> 
            

        

    

    


        


            


            

        

        


            

                <el-input v-model="modalFrom.phone"></el-input> 
            

        

    

    


        


            


            

        

        


            

                </el-form-item> 
            

        

    

    


        


            


            

        

        


            

                <el-form-item label="郵箱："> 
            

        

    

    


        


            


            

        

        


            

                <el-input v-model="modalFrom.email"></el-input> 
            

        

    

    


        


            


            

        

        


            

                </el-form-item> 
            

        

    

    


        


            


            

        

        


            

                <el-form-item label="地址："> 
            

        

    

    


        


            


            

        

        


            

                <el-input v-model="modalFrom.address" type="textarea"></el-input> 
            

        

    

    


        


            


            

        

        


            

                </el-form-item> 
            

        

    

    


        


            


            

        

        


            

                </el-form> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                <div v-if="modal.type === 'delete'"> 
            

        

    

    


        


            


            

        

        


            

                <i class="el-icon-warning" style="margin-right:7px;color:#FFAA00;font-size: 16px;"></i>請確認是否刪除
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                <div slot="footer" class="dialog-footer"> 
            

        

    

    


        


            


            

        

        


            

                <el-button @click="modal.show = false">取 消</el-button> 
            

        

    

    


        


            


            

        

        


            

                <el-button v-if="modal.type === 'add'" type="primary" @click="addUserList">新增</el-button> 
            

        

    

    


        


            


            

        

        


            

                <el-button v-if="modal.type === 'edit'" type="primary" @click="editUserList">修改</el-button> 
            

        

    

    


        


            


            

        

        


            

                <el-button v-if="modal.type === 'delete'" type="primary" @click="deleteUserList">確 認</el-button> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </el-dialog> 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template> 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script> 
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                tableInfo:{
            

        

    

    


        


            


            

        

        


            

                columns:[
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                title: '序號',
            

        

    

    


        


            


            

        

        


            

                type: 'index',
            

        

    

    


        


            


            

        

        


            

                },{
            

        

    

    


        


            


            

        

        


            

                title: '姓名',
            

        

    

    


        


            


            

        

        


            

                prop: 'name',
            

        

    

    


        


            


            

        

        


            

                align: 'center' 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                title: '年齡',
            

        

    

    


        


            


            

        

        


            

                prop: 'age',
            

        

    

    


        


            


            

        

        


            

                align: 'center' 
            

        

    

    


        


            


            

        

        


            

                },{
            

        

    

    


        


            


            

        

        


            

                title: '地址',
            

        

    

    


        


            


            

        

        


            

                prop: 'address',
            

        

    

    


        


            


            

        

        


            

                align: 'center' 
            

        

    

    


        


            


            

        

        


            

                },{
            

        

    

    


        


            


            

        

        


            

                title: '郵箱',
            

        

    

    


        


            


            

        

        


            

                prop: 'email',
            

        

    

    


        


            


            

        

        


            

                align: 'center' 
            

        

    

    


        


            


            

        

        


            

                },{
            

        

    

    


        


            


            

        

        


            

                title: '手機號',
            

        

    

    


        


            


            

        

        


            

                prop: 'phone',
            

        

    

    


        


            


            

        

        


            

                align: 'center' 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                {//內容slot 
            

        

    

    


        


            


            

        

        


            

                slot: 'operateT' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                ],
            

        

    

    


        


            


            

        

        


            

                list:[],
            

        

    

    


        


            


            

        

        


            

                page:1,
            

        

    

    


        


            


            

        

        


            

                pageSize:10,
            

        

    

    


        


            


            

        

        


            

                total:0,
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                modal:{
            

        

    

    


        


            


            

        

        


            

                show:false,
            

        

    

    


        


            


            

        

        


            

                type:'add' 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                modalFrom:{
            

        

    

    


        


            


            

        

        


            

                name:'',
            

        

    

    


        


            


            

        

        


            

                age:'',
            

        

    

    


        


            


            

        

        


            

                phone:'',
            

        

    

    


        


            


            

        

        


            

                address:'',
            

        

    

    


        


            


            

        

        


            

                email:'' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                mounted(){
            

        

    

    


        


            


            

        

        


            

                this.initPage()
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                methods: {
            

        

    

    


        


            


            

        

        


            

                /*** 
            

        

    

    


        


            


            

        

        


            

                 * 獲取列表數據 
            

        

    

    


        


            


            

        

        


            

                 */ 
            

        

    

    


        


            


            

        

        


            

                initPage() {
            

        

    

    


        


            


            

        

        


            

                let params = {
            

        

    

    


        


            


            

        

        


            

                page: this.tableInfo.page, //當前頁 
            

        

    

    


        


            


            

        

        


            

                pageSize: this.tableInfo.pageSize //一頁展示多少條 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                this.$axios.get('http://localhost:7001/setUserList',{
            

        

    

    


        


            


            

        

        


            

                params
            

        

    

    


        


            


            

        

        


            

                }).then(res => {
            

        

    

    


        


            


            

        

        


            

                this.tableInfo.list = res.data.data.list
            

        

    

    


        


            


            

        

        


            

                this.tableInfo.total = res.data.data.total
            

        

    

    


        


            


            

        

        


            

                }).catch(error => {
            

        

    

    


        


            


            

        

        


            

                this.$message(error.data.message)
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                /** 
            

        

    

    


        


            


            

        

        


            

                 * 當前頁發生改變 
            

        

    

    


        


            


            

        

        


            

                 * */ 
            

        

    

    


        


            


            

        

        


            

                pageChange(page) {
            

        

    

    


        


            


            

        

        


            

                this.tableInfo.page = page
            

        

    

    


        


            


            

        

        


            

                this.initPage() //刷新列表數據 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                /** 
            

        

    

    


        


            


            

        

        


            

                 * 當前第幾頁發生改變 
            

        

    

    


        


            


            

        

        


            

                 * */ 
            

        

    

    


        


            


            

        

        


            

                pageSizeChange(pageSize) {
            

        

    

    


        


            


            

        

        


            

                this.tableInfo.page = 1 
            

        

    

    


        


            


            

        

        


            

                this.tableInfo.pageSize = pageSize
            

        

    

    


        


            


            

        

        


            

                this.initPage() //刷新列表數據 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                //新增彈框 
            

        

    

    


        


            


            

        

        


            

                addModal(){
            

        

    

    


        


            


            

        

        


            

                this.modalFrom ={
            

        

    

    


        


            


            

        

        


            

                name:'',
            

        

    

    


        


            


            

        

        


            

                age:'',
            

        

    

    


        


            


            

        

        


            

                phone:'',
            

        

    

    


        


            


            

        

        


            

                address:'',
            

        

    

    


        


            


            

        

        


            

                email:'' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                this.modal.show  = true 
            

        

    

    


        


            


            

        

        


            

                this.modal.type  = 'add' 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                //修改彈框 
            

        

    

    


        


            


            

        

        


            

                editFun(row){
            

        

    

    


        


            


            

        

        


            

                this.modalFrom = row
            

        

    

    


        


            


            

        

        


            

                this.modal.show  = true 
            

        

    

    


        


            


            

        

        


            

                this.modal.type  = 'edit' 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                //刪除彈框 
            

        

    

    


        


            


            

        

        


            

                deleteFun(row){
            

        

    

    


        


            


            

        

        


            

                this.modalFrom = row
            

        

    

    


        


            


            

        

        


            

                this.modal.show  = true 
            

        

    

    


        


            


            

        

        


            

                this.modal.type  = 'delete' 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                addUserList(){
            

        

    

    


        


            


            

        

        


            

                this.$axios({
            

        

    

    


        


            


            

        

        


            

                method:'post',
            

        

    

    


        


            


            

        

        


            

                url:'http://localhost:7001/setUserList',
            

        

    

    


        


            


            

        

        


            

                data:this.modalFrom
            

        

    

    


        


            


            

        

        


            

                }).then(res => {
            

        

    

    


        


            


            

        

        


            

                this.$message.success('新增成功')
            

        

    

    


        


            


            

        

        


            

                this.initPage() //刷新數據 
            

        

    

    


        


            


            

        

        


            

                this.modal.show  = false 
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                editUserList(){
            

        

    

    


        


            


            

        

        


            

                this.$axios({
            

        

    

    


        


            


            

        

        


            

                method:'put',
            

        

    

    


        


            


            

        

        


            

                url:'http://localhost:7001/setUserList',
            

        

    

    


        


            


            

        

        


            

                params:{
            

        

    

    


        


            


            

        

        


            

                id:this.modalFrom.id
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                data:this.modalFrom
            

        

    

    


        


            


            

        

        


            

                }).then(res => {
            

        

    

    


        


            


            

        

        


            

                this.$message.success('修改成功')
            

        

    

    


        


            


            

        

        


            

                this.initPage() //刷新數據 
            

        

    

    


        


            


            

        

        


            

                this.modal.show  = false 
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                deleteUserList(){
            

        

    

    


        


            


            

        

        


            

                this.$axios({
            

        

    

    


        


            


            

        

        


            

                method:'delete',
            

        

    

    


        


            


            

        

        


            

                url:'http://localhost:7001/setUserList',
            

        

    

    


        


            


            

        

        


            

                params:{
            

        

    

    


        


            


            

        

        


            

                id:this.modalFrom.id
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }).then(res => {
            

        

    

    


        


            


            

        

        


            

                this.$message.success('刪除成功')
            

        

    

    


        


            


            

        

        


            

                this.initPage() //刷新數據 
            

        

    

    


        


            


            

        

        


            

                this.modal.show  = false 
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script> 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style lang='scss'> 
            

        

    

    


        


            


            

        

        


            

                .modalName{
            

        

    

    


        


            


            

        

        


            

                h3{
            

        

    

    


        


            


            

        

        


            

                padding:10px;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </style> 
            

        

    

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

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

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

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

數據成為了日常工作的一大重要角色，越來越多的公司以數據驅動產品進行迭代。但令人困惑的是可視化圖表無處不矮，但卻給大家帶來了誤導。作者分享了一些簡單的思路與方法，以此來改善這些問題，希望對你有所幫助。

越來越多的公司以數據驅動產品進行迭代，從中我們能看出數據的重要性。

日常工作中，無論是匯報還是設計，都離不開圖表的使用。但令人困惑的可視化圖表無處不在，往往給人帶來誤導性，通過遵循下面這些簡單的思路和方法可以有效改善這些問題。

一、選擇正確的圖表類型

選擇錯誤的圖表類型，或默認使用最常見的類型，可能會混淆用戶對數據產生誤解。

一組數據可以有多種表示方式，具體類型取決于用戶希望看到的內容。

二、根據正負值確定方向

當數據中出現正負值時，要先確定基線的位置，再確定數據位置，將正值分布在基線上側（X軸）或右側（Y軸），負值分布在下側（X軸）或左側（Y軸）。

避免在基線的同一側同時添加正值和負值，造成用戶對圖表信息理解錯誤。

三、始終從零開始繪制條形圖

單看左側的條形圖，能發現B的值比D的值要多3倍以上，但在右側從零開始的條形圖中，實際差異要小得多。從零開始可確保用戶獲得更準確的數據展示。

四、折線圖使用自適應Y軸

對折線圖來說，如果始終將Y軸的比例限制為從零開始，一旦數據波動幅度很小，那整個折線圖會看起來很平坦，效果不明顯。

折線圖主要用來表現趨勢，根據給定時間的數據調整比例，并保持折線區域能占到Y軸范圍的三分之二。

五、使用折線圖時考慮時間間隔

折線圖是由一條條小線段連接組成，這些線段展示了在短時間內數據是如何變化的。當時間間隔很大或數據更新不頻繁時，就要慎重考慮是否使用折線圖。

例如想表示年收入，左側的兩個折線圖樣式都不太合適，每個月的收入是固定的數字，而折線圖展現的數據更像是收入的變化，相反右側的條形圖更適合來展示每月具體的收入。

六、不要使用平滑的折線

平滑的折線圖可能看著很舒服，但它們歪曲了背后的實際數據，而且過粗的線條掩蓋了真正的節點。

七、謹慎使用雙軸折線圖

當兩組數據出現X軸代表的信息相同但Y軸不同時，為節省空間我們可能會考慮用雙軸圖。

但大部分雙軸圖難以閱讀，只是感覺圖表上有很多數據，但遠遠沒有單個圖表展示的清晰。

八、限制餅圖的切片數量

餅圖是最受歡迎但經常被誤用的圖表之一。在使用餅圖時，首先要注意切片的數量最好保持在5-7片。

如果還有很多占比很小的切片，可以將這些全部歸到“其他”切片中。

九、直接在圖表上標注

如果沒有正確的標注，無論圖表設計的多好看都沒有意義。

直接在圖表上標注數據或信息對使用者來說更直觀，更節省時間和精力。

十、不要在切片上標注

將數值放在切片上雖然很直觀，但可能會導致很多問題，例如左側餅圖數值的可讀性問題、切片太薄無法添加數值等，對比來看，右側餅圖添加標注的方式更合適。

現代人的生活離不開應用程序，我們的手機中有著各種各樣的app幫我們處理各種瑣事。各大互聯網公司開發多種應用商店，努力使我們的生活變得有趣，但要想提高整體的用戶體驗，還需要注意五點，不然再好的app也會讓用戶放棄使用。

1.禁止使用大段的功能介紹

我們必須要提示一下：如果一個應用程序要在手機屏幕上發揮作用——必須簡單。這個應用需要使用冗長的功能介紹，才能讓用戶熟悉使用起來，那很可能是開發人員在這個版本中設置太多功能。用戶并不介意多次更新程序，適應新版本，但他們也不可能為了使用程序而閱讀長如圣經般的介紹。

2.牢記用戶需求

如果想要急于求成，跳過用戶調研，上線新的應用，那么失敗的概率會大大增加。大多數應用開發團隊都容易犯這樣的錯誤，只拿到了用戶發送給支持團隊的數據。通過分析數據，就能迅速確定用戶所需的功能，使用缺陷等，但是，總的來說，聯系支持團隊的用戶是那些產生挫敗感的人；那么99%（或更多）的用戶從來沒有和支持部門談過？難道你不愿意讓他們一直滿意，而是花費時間，只讓使用支持功能的1%用戶滿意？

即使你認為自己了解用戶需求，也需要與他們進行溝通。

3.使用屏幕技術

當人們花費了近萬元買了一部智能手機時，他們希望能使用手機上的所有功能。所以制作這款手機時沒有任何借口在視覺內容上偷工減料（或忽視任何技術能力）。這就是用戶花錢的原因，要想提高用戶體驗，就需要滿足用戶期望。

4.停用費時的設置向導

設置向導的本意是為用戶提供更好的內容，更能讓用戶獲取自己想要的。為了優化用戶體驗可以讓用戶填寫一些內容，但并不意味著暴露全部隱私。最好在需要時索取，而非提前取得全部數據。

5.減少通知次

每個軟件都想要發送通知，但是每一個通知都是必要的嗎？每隔兩秒鐘就有一些應用告知用戶一些無用消息，比如誰誰誰又發了微博，誰誰誰上線了，又或者誰誰誰開始直播了，可以根據用戶的興趣選取推送而不是一股腦全部告知用戶，所以請盡量減少的通知消息吧！

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

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

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

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

數據展示有哪些？

01.徽標

是收納消息數量的樣式，一般出現在圖標或者頭像右上角。

02.標簽

數據展示里面抽取出來的共性特征，將它們轉化為標簽。標簽樣式有線框、帶不透明底或者面性。

03.走馬燈

相當于c端的輪播圖

04.文字提示

可以出現在鼠標懸浮按鈕時候的行為解釋說明，也可以是文案或者導航圖標的解釋說明。鼠標移入時候出現移出時候消失。

05.氣泡卡片

比起文字提示可以承載更多內容，相對彈窗，氣泡卡片操作更輕盈。

06.標簽頁/選項卡

標簽頁可以幫助用戶在一個頁面內快速切換不同類型內容，提升單個頁面整體的擴展性。標簽本質上就是內容區的導航。

07.折疊面板

折疊面板可以更好的收納內容區域，提高頁面利用率?？梢院捅砀窠Y合使用，折疊表格部分詳情內容，使得縱向空間更節約。

08.表格

表格是數據展示的重要內容。當有大量結構化數據需要展示時或者需要對數據進行排序、搜索分頁時可以用表格進行展現。

當筆記本過小，表格展示不全時候，可以固定首尾重要信息進行滾動。

帶排序的表頭，可對數量或者金額進行排序。

帶分組的表格，建議帶邊框并且用色塊區分表頭和內容。

單元格可編輯

批量選中時只會選中當前頁，因為分頁還沒加載出來，為了給用戶正確的引導，可以給上提示性文案，例如“已選中XX項內容”。

如果當前頁批量選中的數據量不滿足要求，可以改變分頁器，增加當前頁數據量，從而增加選項。

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

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

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

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

前言

“直播”作為一個大熱領域，用戶規模早在 2020 年就突破了 5 億大關，在“直播+”的模式下，電商、教育甚至是醫美，都能在直播領域下找到新賽道，并產生持續性獲客。但就是這樣一個核心領域，具體要怎么分析復盤，卻鮮少看到系統化的文章。本文主要是結合我近期參與產品直播項目的思考，總結了自己的一套直播復盤方法論和大家分享。

為什么要做直播復盤？

雖然“直播+”模式已成為行業趨勢，但在產品接入直播模塊而產生的付費效益又不明顯時，其存在的意義和價值仍時常被挑戰，因此首要的就是驗證其價值；

同時，新領域缺乏可復用的方法論，只有不斷探索、優化、沉淀才能促進其健康化生長；

最后，在產品范圍下的直播領域，定向吸引的還是產品用戶為主，持續挖掘探索直播能為產品開辟的新賽道，為產品帶來拉新，是“直播+”模式對于產品的直接價值體現。

直播復盤怎么做？

直播具備快節奏性和強競爭性，在兼顧快速復盤的同時，還需要考慮階段性的整體化的對直播數據進行監控，因此需要將直播復盤分為快速復盤和階段復盤 2 個大方向。

1. 快速復盤

在直播結束當天或隔天對昨日數據進行快速復盤，此時重點關注單期直播下的直觀數據表現和用戶反饋。目的是獲得沉淀當天直播的經驗并快速應用至后續直播中，是一個不斷 PDCA 的過程。

在復盤維度上，可以分為數據側和用戶側：

數據側中我們重點聚焦本期的數據表現，同時橫向對比其他直播期，去明確本期的數據表現

1）橫向對比時，需要將直播關注的 3 大核心數據（總人數、最高在線人數、評論人數、在線時長均值）與其他期對比，明確該期直播的“優劣”。

當期直播核心數據

2）聚焦本期時，重點關注直播數據的整體在線人數變化趨勢，定位到最高在線點，和直播內容擬合，能夠幫助我們定位直播的“高光點”。

用戶側中則更關注主播在播、用戶在聽和答的過程，包含：

• 直播過程中，用戶情緒、反饋異常的節點（如消極發言等），定位用戶可能存在的痛點。
• 固定同學作為“直播觀眾”時，察覺到的異常問題（如信息銜接不自然等），及時復盤。
• 在直播間的互動評論中，呼聲最高的內容，可以作為后續直播可以“返場”的內容，納入直播內容需求池中。

2. 階段復盤

在累計多場直播后，此時最需要的就是階段性的復盤，從宏觀角度對多期直播進行收斂分析，能夠幫助我們明確直播對于產品的核心價值，并定位核心用戶圈層、吸引點及直播應該要有的“節奏”。

在階段復盤中，除了數據側、用戶側外，我們還需要關注市場側：

數據側—不同于快速復盤，數據側我們關注整體宏觀角度上直播對產品的價值，以及直播整體的數據表現，熱點分布等

1）從直播對產品價值定位來說，在未探索付費的情況下，直播能為產品做的就是吸引新用戶，增加用戶活躍、延長用戶在產品內停留的時長上。

價值定位時關注的數據范圍

在明確價值后，就應該明確后續要如何把直播做的更好，這里數據上可以分為 2 個大的方向，一是熱點分析，二是直播節奏分析。

2）熱點分析上，需要從單期、分類、詞項拆解上看。首先，單期直播就是簡單地對單期直播數據進行排序，找到“好”的直播提煉其特征性；其次，分類分析上關注各類直播數據間的橫向對比，能從分類數據對比上，看出哪一類直播更吸引用戶；最后，通過對每期直播的標題進行詞項拆解，篩除掉無意義的詞項，再乘以對應期直播的人數，對每個出現 2 次及以上的詞項數據取出其對應的單期直播人數均值，即可定位到用戶最關注、最能吸引用戶的核心關鍵詞。

熱點分析

3）直播節奏分析上，得益于階段性復盤的龐大數據量，我們可以聚類出多期直播聚類下的直播趨勢線，在趨勢線上，亦關注 3 大核心點 “拉新、增長、流失”。

a. 用戶進入直播的高峰期（即新增高峰），可用于定位直播亮點，并對應布局以留住用戶

用戶進入直播節奏分析

b. 通過直播數據排序后的高于中位數直播、低于中位數直播的 2 種直播數據走勢的對比，我們能夠看出好的直播應有的數據走勢應該是什么樣的。以我這次分析的直播為例，能夠直觀看出，“差”的直播在增長黃金期都“爬”的很慢，而在黃金期后直播數據逐漸平緩，“差”的直播數據就成了定局。因此要做的就是在增長黃金期，去盡量促進增長。

用戶流入流出關系分析

c. 那么在增長黃金期，從產品策略來看，要做的是留住用戶？還是盡量去拉新？從數據上，我們有 2 種方式判別，分別是相關性分析和假設分析。在相關性分析中，將新增人數/流失率對標最高在線人數，以數據模型分析其相關性，從相關系數來看哪個指標與最高在線人數相關性最高，即影響最大；在假設分析中，我們可以將“低于中位數”的直播數據中的新增人數/流失率分別對標“高于中位數”直播的數據，其他保持不變，看哪種情況下，最高在線人數是更高，數據是更好的，就可以定位出更應該在哪塊發力。

用戶側—要明確直播受眾及用戶圈層，并針對這部分受眾的觀看體驗，進行服務體驗走查，更能夠幫我們明確后續業務重心、范圍及宣傳模式。

在用戶圈層上，我們對觀眾數據清洗，從年齡、性別、地域、渠道等各項維度去定位觀眾的特征。同時，考慮到直播本身是以產品為載體，其用戶圈層基本上與產品本身重合，但會存在一定差異性。因此，此處可以結合 TGI 分析，可以定位到直播用戶圈層相較于產品來說的差異點，從而更針對受眾進行直播內容調整。

用戶圈層分析

同時，直播本身因其特殊性質，也可類比至服務體驗設計的思維，因此在用戶側分析時，從直播前-中-后 3 個大環節上分析用戶行為、需求、痛點、快點，從而定位到各個環節直播優化的機會點，推進優化。

直播-體驗地圖

市場側—在市場分析時，我們不僅需要關注那些在直播領域做的好的同類競品，同時也要去多分析在受眾群體中，最近的熱門話題是什么，有助于后續在宣發時引出直播核心話題，也能夠帶領我們思考直播的新賽道，以協助產品拓寬其用戶圈層。

小結

直播作為互聯網新賽道，直播+的模式可用于產品宣發、獲客、促活等各個方面，挑戰與機遇并存。但正因為是新賽道，也相對缺乏體系化的方法論。本文主要是分享我在工作中沉淀下來的直播復盤方法論，也歡迎大家有什么見解或者想法也可以與我分享。

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

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

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

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

在我們了解JSONP 和 CORS 之前我們先明確一下：

我們為什么要使用cors和jsonp呢？

實際上，cors和jsonp都是用于解決跨域問題，當兩個頁面的協議、域名、端口號中有一個不一致時就存在了跨域，一旦出現跨域，瀏覽器發送跨域請求后，請求回來的數據都會被瀏覽器所攔截，準備一張圖給大家看看：

核心點：如何實現跨域數據請求？(?????)

現下實現跨域數據請求，最主要的兩種解決方案分別是 JSONP 和 CORS 。

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html lang="en">
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                    <meta charset="UTF-8">
                

            

        

        


            


                


                

            

            


                

                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                

            

        

        


            


                


                

            

            


                

                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                

            

        

        


            


                


                

            

            


                

                    <title>Document</title>
                

            

        

        


            


                


                

            

            


                

                    <script src="jquery.min.js"></script>
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <button class="get">get請求</button>
                

            

        

        


            


                


                

            

            


                

                    <button class="post">post請求</button>
                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                    $('.get').on('click', function() {
                

            

        

        


            


                


                

            

            


                

                    $.ajax({
                

            

        

        


            


                


                

            

            


                

                    method: 'get',
                

            

        

        


            


                


                

            

            


                

                    url: 'http://127.0.0.1/api/get?name=hua&age=18',
                

            

        

        


            


                


                

            

            


                

                    success: function(res) {
                

            

        

        


            


                


                

            

            


                

                    console.log(res);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    $('.post').on('click', function() {
                

            

        

        


            


                


                

            

            


                

                    $.ajax({
                

            

        

        


            


                


                

            

            


                

                    method: 'post',
                

            

        

        


            


                


                

            

            


                

                    url: 'http://127.0.0.1/api/post',
                

            

        

        


            


                


                

            

            


                

                    data: {
                

            

        

        


            


                


                

            

            


                

                    name: 'lajitong',
                

            

        

        


            


                


                

            

            


                

                    age: '111'
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                

                    success: function(res) {
                

            

        

        


            


                


                

            

            


                

                    console.log(res);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

    


        


            


                


                

            

            


                

                    // 導入 express 模塊
                

            

        

        


            


                


                

            

            


                

                    const express = require('express')
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    // 創建 express 的服務器實例
                

            

        

        


            


                


                

            

            


                

                    const app = express()
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    // 導入中間件
                

            

        

        


            


                


                

            

            


                

                    const cors = require('cors')
                

            

        

        


            


                


                

            

            


                

                    // 配置中間件
                

            

        

        


            


                


                

            

            


                

                    app.use(cors())
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    // 配置解析表單數據的中間件
                

            

        

        


            


                


                

            

            


                

                    app.use(express.urlencoded({ extended: false }))
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    // 導入路由模塊（被單獨分離后導入）
                

            

        

        


            


                


                

            

            


                

                    const router = require('./apiRouter')
                

            

        

        


            


                


                

            

            


                

                    // 把路由模塊，注冊到 app 上
                

            

        

        


            


                


                

            

            


                

                    app.use('/api', router)
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    // 調用 app.listen 方法，指定端口號并啟動 web 服務器
                

            

        

        


            


                


                

            

            


                

                    app.listen(80, () => {
                

            

        

        


            


                


                

            

            


                

                    console.log('http://127.0.0.1')
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

    

    


        


            


                


                

            

            


                

                    const express = require('express');
                

            

        

        


            


                


                

            

            


                

                    const router = express.Router();
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    router.get('/get', (req, res) => {
                

            

        

        


            


                


                

            

            


                

                    const query = req.query;
                

            

        

        


            


                


                

            

            


                

                    res.send({
                

            

        

        


            


                


                

            

            


                

                    status: 0,
                

            

        

        


            


                


                

            

            


                

                    msg: 'get請求成功',
                

            

        

        


            


                


                

            

            


                

                    data: query
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    router.post('/post', (req, res) => {
                

            

        

        


            


                


                

            

            


                

                    // const body = req.body;  //獲取客戶端請求的數據
                

            

        

        


            


                


                

            

            


                

                    res.send({
                

            

        

        


            


                


                

            

            


                

                    status: 0,
                

            

        

        


            


                


                

            

            


                

                    msg: 'post請求成功',
                

            

        

        


            


                


                

            

            


                

                    data: req.body
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    module.exports = router;
                

            

        

    

    


        


            


                


                

            

            


                

                    //導入express模塊
                

            

        

        


            


                


                

            

            


                

                    const express = require('express');
                

            

        

        


            


                


                

            

            


                

                    //創建express服務器實例
                

            

        

        


            


                


                

            

            


                

                    const app = express();
                

            

        

        


            


                


                

            

            


                

                    //掛載路由
                

            

        

        


            


                


                

            

            


                

                    app.get('/jsonp', (req, res) => {
                

            

        

        


            


                


                

            

            


                

                    // 通過解構req.query客戶端通過查詢字符串的形式發送到客戶端的參數fn
                

            

        

        


            


                


                

            

            


                

                    const { callback } = req.query
                

            

        

        


            


                


                

            

            


                

                    //在服務器端定義一個obj對象
                

            

        

        


            


                


                

            

            


                

                    const obj = {
                

            

        

        


            


                


                

            

            


                

                    uname: 'zjj',
                

            

        

        


            


                


                

            

            


                

                    age: '18'
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    //obj對象轉為res.send可處理的字符串形式后從服務器端相應回調函數至客戶端
                

            

        

        


            


                


                

            

            


                

                    res.send(`${callback}(${JSON.stringify(obj)})`)
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    app.listen(80, () => {
                

            

        

        


            


                


                

            

            


                

                    console.log('http://127.0.0.1');
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

    

    


        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                    function fn(res) {
                

            

        

        


            


                


                

            

            


                

                    console.log(res);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

        


            


                


                

            

            


                

                    <script src="http://127.0.0.1/jsonp?callback=fn"></script>
                

            

        

    

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

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

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

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