今年是腾讯发起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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

以我自己近期的工作为例，不妨为大家举个简单的例子：

下图是一个补贴规则的设置流程，在用户未设置补贴规则之前，明确告知用户还未设置补贴规则，当用户设置了补贴规则后，可以对补贴规则进行修改。

我认为这是一个非常简单且合理的页面路径跳转，并且在很多现有的产品中都有类似这样的逻辑存在。然而在与上下游同学对接的过程中，却遇到了不同的意见：有人认为没有必要区分用户是否设置了规则，用户未设置规则可以直接展示系统默认的补贴条件和补贴范围，如果用户认为不合理，自行修改便是。

不知道大家看到这里是什么感觉，我在听到「方案二」时的反应是：能够理解却并不认同，说不出来哪里不对，就是觉得这事它不应该这样。

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

那么为什么我会产生“感觉哪里不对，却又说不出为什么”的强烈感受呢？

最直接的原因是，这样的设计方案（方案一）是用直觉做出来的，缺少了对方案本身的思考。

直觉，指的是那些没有经过分析推理的观点，因此常常给人一种不靠谱的感觉。

可是有时候我们依赖「直觉」做事真的就完全不靠谱吗？带着这样的疑惑，我去查阅了一些相关的资料来辅助我更好理解这种直觉性思考，恰好找到了一个真实的实验案例：

根据上述实验，我们起码能发现直觉未见得不可靠，也就是说，凭借直觉出的设计方案，并不意味着不是一个正确的方案。

可是在日常沟通协作的过程中，「直觉设计」一旦遇到不同的意见，就会缺少理论支撑。决策者无法判断设计师的直觉是否可靠，从而觉得方案本身也不可靠。

遇到这种看似「死胡同」的情况，我们应该怎么去思考呢？

很简单，直觉在前，策略性推理在后。

乔纳森•海特（Jonathan Haidt），著名社会心理学家，在《正义之心》中有提到：

拿上述的方案来说，当我面对这类的质疑时，我也会有愣住，但我知道我不能惊慌，而是该让骑象人（推理）表演了。

其实仔细分析一下上述案例就会发现，方案一和方案二最本质的区别在于：

是否需要区分用户（商家）自行设置过「补贴规则 」？

百度百科对规则的定义是：

规则本身是属于利益相关者之间的约定。按照这个逻辑，「补贴规则」可以理解为用户（商家）与消费者形成的基本约定。

用户（商家）未设置规则，如果系统直接展示默认的补贴条件和补贴范围，就会给用户（商家）一种平台借以商家的名义与消费者形成了约定的印象，这与现实不符，甚至可能给用户（商家）的业务带来不必要的纷争。因此，区分用户是否设置过补贴规则是非常有必要的。

在上述场景中，虽然我的直觉先于理性给我发送了信号，但设计师如果光依靠直觉却给不出任何说明，同样会带来一系列麻烦。

汤姆·格里弗（Tom Greever）在一篇文章提到，伟大的设计往往取决于你怎么说。

描述设计不是一件容易的事情，但每个设计师都不得不向很多没有设计经验的人讲述自己的设计，并且要让他们信服自己是对的，这群人很可能是方案的决策者。决策者通常会选择那个听上去最合理的方案，所以方案的表述对于最终方案的确立至关重要。

普通设计师和顶级设计师之间的差距不仅仅是他们解决问题的能力，还在于他们能否用一种让人心服口服、并促使人们同意的方式来阐述他们是怎么解决问题的。理论上，最好的设计应该胜出，然而事实并非如此，设计评审很容易变成设计批判会，每个人都在告诉设计师要怎么设计。

最终，那些能够说服别人“我是对的”的人会胜出。设计师如果没有办法说服别人为什么他们要这么做，就不得不按照他们不同意的方式去修改设计，原因仅仅是因为他们没有办法简要的为自己的设计辩护。

听起来似乎这些决策有失公允，甚至成了设计师的辩护大会，那么对于一些有着出色能力却不善言辞的设计师而言，就真的没有任何方法了吗？

设计师要想守卫自己的设计，就要警惕那些单凭设计直觉做出来的方案。

设计直觉的形成与个人经历、阅读经历相关。遇到相似的问题，设计师如果有这方面的经验固然是好的，直接复用之前的做法可以大大提升设计效率。但我们完成设计后，最好想想哪些地方存在路径依赖，以确保自己的方案能经得住质疑。

一个最实用的可以判断自己的设计方案，是不是由直觉得来的，就是多向自己提问。

同样，我们来用实际的案例做个说明：

想想下图中「智能上传」「更多操作」按钮放在表格的左下方行不行？

很明显不行，但重点是支持这么做不行的理由是什么？

如果你的理由是：

“别的页面是将按钮放在了列表左上角的”

“放在左下角不好看呀”

“没见过有产品这么放啊”

“......”

那这个方案就是直觉设计的产物了。

想要突破直觉设计，设计师需要尽可能在每个设计点上多思考几步，比如：

为什么别的页面会将按钮放在左上角？

根据2006年NNGroup 在眼动实验中的发现，人们在网络中的阅读成F型，即用户进入页面中的第一眼，通常会落在页面的左上角，也就是说左上方的区域是页面的黄金区。「智能上传」「更多操作」属于页面的核心操作，那么放在列表左上方是非常合理的。

此外，我们可以看到页面的翻页器是可以筛选列表展示的条数，假设用户设置的条数，超出了屏幕显示范围，也就意味用户进入到页面会看不到操作选项，所以按钮放在表格的左下方也是不合理的。

为什么别的页面按钮放在左上角这个页面也要这么做？

因为我们需要保障产品的一致性，产品的核心操作方式保持一致，可以有效地降低用户的学习成本，避免不必要的思考。

在设计协作的过程中，设计师不可避免地会接收到来自四面八方的声音，而我自己也曾在设计沟通中陷入过类似困境，因此我越发明白只有清晰地表述出自己的设计思考，才可能赢得每个人的支持。

以上是关于这篇文章的关键思考总结，回到设计师个体而言，我认为我们需要对直觉设计保持警惕，因为看似简单的设计背后往往蕴含着复杂的设计原理，而一个好的设计师除了拥有过硬的设计能力，强大的设计思考力和表达能力以外，我相信同样在跨学科的研究和学习上会远强于普通设计师，否则根本无法支撑起背后的设计思考。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

数据展示有哪些？

01.徽标

是收纳消息数量的样式，一般出现在图标或者头像右上角。

02.标签

数据展示里面抽取出来的共性特征，将它们转化为标签。标签样式有线框、带不透明底或者面性。

03.走马灯

相当于c端的轮播图

04.文字提示

可以出现在鼠标悬浮按钮时候的行为解释说明，也可以是文案或者导航图标的解释说明。鼠标移入时候出现移出时候消失。

05.气泡卡片

比起文字提示可以承载更多内容，相对弹窗，气泡卡片操作更轻盈。

06.标签页/选项卡

标签页可以帮助用户在一个页面内快速切换不同类型内容，提升单个页面整体的扩展性。标签本质上就是内容区的导航。

07.折叠面板

折叠面板可以更好的收纳内容区域，提高页面利用率。可以和表格结合使用，折叠表格部分详情内容，使得纵向空间更节约。

08.表格

表格是数据展示的重要内容。当有大量结构化数据需要展示时或者需要对数据进行排序、搜索分页时可以用表格进行展现。

当笔记本过小，表格展示不全时候，可以固定首尾重要信息进行滚动。

带排序的表头，可对数量或者金额进行排序。

带分组的表格，建议带边框并且用色块区分表头和内容。

单元格可编辑

批量选中时只会选中当前页，因为分页还没加载出来，为了给用户正确的引导，可以给上提示性文案，例如“已选中XX项内容”。

如果当前页批量选中的数据量不满足要求，可以改变分页器，增加当前页数据量，从而增加选项。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务