Vue语音数据平台
vue项目实战!
一只没有感情的小杀手
我不告诉你略略略~
展开
-
jwt鉴权
什么是JWT(Json web token): JWT是目前最流行的跨域认证解决方案。基于json的开放标准(RFC7用于519),以token的方式代替传统的session-cookie模式,用于服务器,客户端传递信息签名验证。传统的cookie-session鉴权:1.客户端使用用户名和密码登录 2.服务器端验证账号密码通过后,在session里保存一些数据(比如说用户UID,登录时间等等) 3.服务器向用户返回一个se...转载 2020-05-22 18:15:53 · 445 阅读 · 0 评论 -
使用WebAudio实现音频音波可视化
之前在做验收数据平台的时候,有使用过Wavesurfer.js这个插件来实现音频变为可视化音波的形式,对这种转换突然比较感兴趣,所以去看了看有没有相应的实现方案~第一种:没有audio标签,利用AudioContext生成。AudioContext是Web Audio API的核心对象1.创建audiocontex,canvas (第一种和第二种都需要创建这些东东)const myCanvas = document.getElementById('myCanvas');const canv.转载 2020-05-22 15:03:18 · 2362 阅读 · 0 评论 -
vue项目——vue-cli3中使用VueLazyload图片懒加载的路径问题
一、提出问题:使用最新的脚手架vue-cli3构建项目的时候发现,对图片懒加载插件的使用按照老方法不成功。故而进行多方搜索尝试最后成功了。二、解决问题:步骤如下… …2.1 安装插件:npm install vue-lazyload --save-dev2.2 vue-cli2中main.js中引入:import VueLazyload from 'vue-lazyload'Vu...原创 2019-12-30 12:14:21 · 2068 阅读 · 0 评论 -
vue项目——vue中使用animate.css
1.安装npm install animate.css --save2.引入使用2.1. 全局引入使用import animate from 'animate.css'Vue.use(animate)2.2.局部引入使用(比较推荐这种方式)<style lang="scss" scoped> @import '../../node_modules/animate...原创 2019-12-02 11:22:13 · 439 阅读 · 0 评论 -
vue项目——双向数据绑定原理/Object.defineProperty()函数
1.Object.defineProperty()函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue双向数据绑定原理</title></head><body> <i...原创 2019-11-27 18:52:32 · 119 阅读 · 1 评论 -
vue项目——自定义全局消息框组件
1.发现问题在进行移动端适配的时候,为了在各个型号的设备上能够更好的提现结构排版,决定采用rem布局。采用rem布局的时候html的字体font-size是有一个标准的。我这边用的是750px的设计稿,就采用1rem = 100px。在使用的过程中会用到一些第三方UI组件,而第三方UI组件是以px单位为标准的。使用时发现:本来应该细长的提示语句变得很大!最后发现可能是因为这个...原创 2019-11-21 17:54:05 · 740 阅读 · 1 评论 -
vue项目——键盘事件深究
Question:项目开发中有个需求,需要在当前页中实现键盘全控制(当前有个input输入框) 中文输入法 键码值229此事件中刚开始使用keyCode键码值进行控制,不涉及input的时候一切都还可以。而当焦点在input中的时候,英文输入法的啥情况下keyCode一切都好,但是当按shift切换成中文输入法的时候,数字键+字母键(大部分键)的键码值都成了229。等于说当焦点...原创 2019-11-18 16:14:13 · 251 阅读 · 0 评论 -
vue项目——利用vue-cli3构建的项目打包上线
1.vue-cli3打包上线在项目完成得差不多得时候,就可以开始打包部署了。通常执行命令npm run build就可以完成打包,项目中生成一个dist文件夹。这个dist文件夹里面的东西就是我们前端的所有东西了。2.vue-cli3打包报错console.log()查阅资料发现,项目在编译打包上生产环境的时候是不能有console.log()信息打印输出的,但是我们在开发环境有时候调试代码...原创 2019-11-18 15:01:23 · 2226 阅读 · 0 评论 -
Recorder.js HTML5+JS实现网页录音
最近项目有个需求,想要通过网页形式实现录音功能,经过多方查阅资料。总结可得,目前IOS系统不支持此功能,一部分浏览器和安卓支持。我们在网页端实现播放音频/视频现在已经没那么难了,但是有的奇怪需求,比如想要你实现在网页上录音/录视频/拍照,这些就没那么轻而易举了。1. 经过查阅得知,以前进行媒体音视频得录制,通常是使用Flash和Sliverlight等等进行的。如果想进行网页录音/录视频,M...原创 2019-11-08 15:09:28 · 2879 阅读 · 1 评论 -
vue项目——ipad采集语音(移动端真机调试)
目前在做一个移动端网页,主要是在ipad上面使用,项目是用vue-cli3搭建的。当我在WebStorm中运行了之后,现在手机(或者ipad)上面试一下效果。找了很多方法都比较麻烦。想起之前一个简单的方法:1.首先确保你的手机和电脑使用的同一个网络(局域网)2.打开package.json文件,在启动命令后加上"–host 0.0.0.0"这段话2.运行之后,如果电脑是windows系统的...原创 2019-11-07 17:25:04 · 634 阅读 · 1 评论 -
vue项目——路由传参与router-link传参 多种方式详解
最近项目中涉及到跨页面传参数和后台进行数据交互,经过多方搜索参考决定用路由传参来解决。Vue中给我们提供了三种路由传参方式,: 方法一:params传参(只能由name引入)1.params传参、使用name:this.$router.push({ name:"Check", params:{id:item.id, num:item.num}}...原创 2019-10-30 12:22:31 · 937 阅读 · 0 评论 -
vue项目——router-link传参 多种方式
简单来说,router-link是个导航器,利用to属性导航到目标组件,并且在渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就可以渲染不同的标签,可以浏览器端查看到。router-link传值几种方式:(还有其他方式的话小伙伴可以告诉我哟!)方式一:route.js内的路由配置:(需要在路径后定义上要穿的属性名) /: 属性名{ path: ‘/che...原创 2019-10-30 11:55:19 · 1351 阅读 · 0 评论 -
vue项目——多次跨域 反向代理
1.项目开发中,我们访问后端接口时域名通常和我们本地运行不同,这里就涉及了跨域。2.本项目使用vue-cli3脚手架搭建,搭建完成时需要自己新建一个vue.config.js文件,文件里进行相应的配置(反向代理)。大概配置如下:module.exports = { devServer: { open: true, // 配置自动启动浏览器 proxy: { ...原创 2019-10-29 18:37:57 · 1470 阅读 · 0 评论 -
vue项目——解决按下空格键执行上一次鼠标点击事件
在做这个数据平台验收部分的时候,测试环节发现了一个bug。在这个页面中我需要用"空白键"来控制中间按钮的播放与暂停,而当我点击"通过"按钮之后,再按下"空白键"的时候就会执行前面的点击事件,音频直接变成下一个的加载(相当于再次的点击操作)在网上搜了解决方案,但是好像都没有比较适合我这个问题的解决方案。参考链接:https://houbean.github.io/2016/09/...原创 2019-10-29 17:52:06 · 2315 阅读 · 0 评论 -
html标签之img,input标签
在做项目的过程中总会发现很多小知识点,例如我在引入img标签时,可以设置它的宽高而且也显示独占一行,但是他确实是行内元素,于是进行多方查询,解开疑惑。1.img是行内元素2.img行内元素,但同时它也是置换元素,置换元素一般内置宽高属性,因此可以设置其宽高3.置换元素置换元素是指:浏览器根据元素的标签和属性,来决定元素的具体显示内容。例如:浏览器根据<img&...原创 2019-10-17 14:45:56 · 628 阅读 · 0 评论 -
vue项目——devDependencies和dependencies区别
当我们项目需要下载一个模块的时候,我们安装npm包(在项目目录下面npm install module_name)的时候,很多时候我们会在后面加上–save-dev 或 –save。这两个参数代表什么呢?初识相信很多人都会回答:npm install module-name -save 自动把模块和版本号添加到dependencies部分npm install module-nam...转载 2019-10-12 15:46:26 · 3829 阅读 · 0 评论 -
vue项目——scoped及穿透方法
1.何为scoped?在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。我们在加了 scoped 之后样式会自动添加一个hash...转载 2019-10-10 19:16:59 · 144 阅读 · 0 评论