这个加密还是很复杂的，但是放在前端依旧不安全，在真实的线上环境， UserSig 的计算代码应该放在业务服务器上，然后由 App 在需要的时候向服务器获取实时算出的 UserSig。有些童鞋被本地数据流和远端数据流的概念困扰，这里简单说一下，本地数据流可以理解为自己的声音和图像，远端数据流就是房间中其他人的声音和图像。这里已经对本地的数据流进行了采集和播放，并指定了摄像头和麦克风，页面此时可以看到自己了，当然，为了不影响你们的学习兴趣，我自己马赛克了 😃。当然了，到这一步只能算万里长征的第一步。

写在前面某天，某人正在认真的写 bug突然，线上环境有个问题，测试环境无法复现。测试说，莫得办法，连上线上环境自己搞下？某人：那不就跨域了吗？？赶紧翻翻 vue-cli 的跨域咋配置的？module.exports = { devServer: { proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/fo

背景不管是在移动端还是 pc 端，都有一些需要缓存数据的场景。比如，在一个数据展示页，这是一个 table，当用户点击某一行会进入这个条目的详情。当用户返回展示页的时候，我们希望能帮助用户留住之前的诸如：筛选条件、跳转页数 等数据。vue 的 keep-alive 可以帮我们做这个事情。现在，这个 table 中有些数据很长。比如一段携带参数的 url ：https://www.baidu.com/link?url=tsptvz-cU2m2HFPFwje315C6Y8BLh0nPi5xD8t-RL

经过测试，官方的办法不能引入highlightjs/styles/github.min.css，所以导致代码片段不能添加高亮的样式因此，直接改成使用 css 的 @import url() 方法来引入另外，不需要按照官方的办法使用copy-webpack-plugin 将代码从 /node_modules 复制到 /dist 下。因为 vue-cli 中打包的时候，/public 下的内容会直接放到打包后的 /dist 目录下，因此，我们直接从浏览器的 source 下把代码复制到项目的 /publi

需求简介楼层效果在购物网站比较常见。典型的楼层效果，需要照顾两个需求：就是点击某个楼层，则页面滚动到相对应的位置页面滚动到某个位置，对应的楼层要有高亮的提示效果来张图示意一下：当我点击右侧的楼层按钮: 为你推荐，则页面滚动到“为你推荐”这个位置。实现难点这玩意说实话不复杂，直接锚点跳转<a href="#id" ></a>就可以。但是在 vue 项目中，路由的实现占据了hash，那么再使用锚点跳转，路由也会跟着改变。这显然不是我们想要实现的效果。另外，页面

背景一般表格比较多的项目中，多会涉及到分页和条件检索。如果每个表格单独配置一个分页，后期维护起来比较繁琐，而且，写代码也是copy来copy去，十分烦恼。因此，基于elementui 的分页组件的二次封装就应时而生了。子组件代码在分页子组件中，我只关心当前页是第几页，以及共有多少页。很显然，默认的分页，当前页肯定是第一页，而共有多少页，需要看后台返回的数据总数量，除以每页显示的数据量简单来说，就是Math.ceil(count / pageSize)下面是分页组件具体的代码。<tem

有一个通用的 form 组件，内部渲染了海量的 form 元素，有input、checkbox、select，radio 等。这样一个组件，我肯定不能手动排版啊。果断跟后台商量一下，通过后台返回的 json 数据来动态渲染，另外一些不方便放回的，本地写个json。写完美滋滋。一提交数据，发现后端验证不通过，杀人.jpg打开 network，看看何方妖孽在兴风作浪？发现由于 vue 中，所有的表单数据都会定义在 data 函数的 form属性下data(){ return { form:

在后台管理系统中，开发人员面临最多的开发任务，table 数据管理应有一席之地。而随之而来的，就是数不清的筛选，排序操作。而且每个table，都会配置一个分页用来更好的显示数据。本文就从这个需求触发，来聊一聊时间组件和分页组件的二次封装。为什么要二次封装elementui 的各种组件做的很友好，但偶尔神经的产品就是不喜欢大众风格，非得独树一帜这时候，在每个有 table 的位置都去做一个繁琐的分页，可以想像一下发生的问题：代码量增加不少，阅读就会很繁琐；工作量也增加不少；更重要的是，不利于

小球飞入购物车，是购物类 APP 常见的效果，飞入的动画效果可以有多种方式来实现。1、技术方案css 有两种方法可以实现同样的效果：1、利用 animation 动画2、利用 transform 和 transitionjavascript 中也有运动函数的概念https://blog.youkuaiyun.com/zhai_865327/article/details/89249138张鑫旭大神有一篇博客，讲的也是 js 抛物线运动，写的非常详细：JavaScript与元素间的抛物线轨迹运动

背景往往在管理后台系统中，vue-router 要做更多的事情挂载组件到页面根据不同的用户角色，如：超级管理员，审计用户，普通用户等来做权限管理生成复杂的侧边栏那么，如何使用一套定义好的 router 来做到以上三个需求呢？分析首先，我们来细致的分析一下这三个需求有哪些具体需要挂载组件到页面中想必不用多说了，vue-router 本来就是做这个的区分不同用户角色用户角色是用户登录后后台返回的，比如这个字段是user_role，那么，首先，我们可以把这个字段首先存储在 vuex

问题javaScript 中有很多异步操作，比如ajax获取数据。假如有一个获取表格数据的请求，基于这个请求获取一个数据的详情axios.get('/api/table_list') .then(res=>{ let id = res[0].tableId axios.get('/api/table_detail?id='+id) .then(res=>{ randerToView(res) }) .catch(err=>handelErr(err

MVVM 的设计模式非常多见，这里就不细说其出处了。学生反馈一个面试题，说实现一个简单的 类似 vue 的 MVVM demo，自己尝试了一下，做个记录吧。响应式原理首先，先要理解 vue 的响应式原理，是数据劫持，即数据变化的时候，自动重新渲染相关页面。其实这个需求是非常容易的，只要理解了 Object.defineProperty，大部分人都可以实现。let data = {}, temp = ''Object.defineProperty(data, key1, { set(value

问题setInterval 是间隔调用，与之类似的还有 setTimeout。这两个 API 通常用来做 ajax 短连接轮询数据。比如有一个 logs.vue 是用来展示某个正在执行的进程产生的日志：<template> <div> <p v-for="item in logList" :key="item.time"> <span>{{"[" + item.time + "]"}}</span> <span&gt

需求提的比较着急，匆忙看了一些相关文章就开始上手，踩了些坑，不过好歹是完成了。先说一下踩得坑吧一般来说，语言环境存储在本地还是服务器上是个值得根据产品来思考的事情。最开始，我是把用户设置的语言存储在 cookies 和 localstorage 中，当用户刷新的时候，可以保持当前的语言不变。出现的问题是当用户手动清除了浏览器的缓存，那么语言就会设置为初始值，不过经过产品的讨论，认为这样...