- 博客(91)
- 资源 (15)
- 收藏
- 关注
RSS订阅原创 vue — 课程表
功能需求是：在有对接数据的情况下显示该课程表，默认显示当前周的七天数据，并且当天的列要呈淡黄色背景。可以选择日期，必须七天，多了少了都会提示，这个是根据vant的日期选择组件进行小改动实现的，具体实现效果如下。这是默认当前周的显示：这是选择少于七天的提示信息，并且确定按钮不可点击：跟后端沟通，设计的返回数据结构如下：timeTable: { // 返回7天对应的周几数组 weekday: ["周四", "周五"..
2021-04-08 15:48:06
4279
原创 Vue cli3+Mongodb+node.js/express的登录功能
我的项目是Vue Cli3+Electron+Antd+Mongodb+expressMongodb和Studio 3T官网下载后安装。具体可谷歌或百度。然后启动Mongodb然后打开Studio 3T，连接数据库端口，右键新建一个数据库，我这里新建的数据库为login。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-olql8TPG-15742267565...
2019-11-20 13:13:54
491
原创 Node.js/Express+Socket.js：服务器响应状态404解决办法
我使用的是node.js/Express+Socket.io搭建的基本服务，启动项目后使用登录等接口都没有问题，但是控制台一直在报这样的错误：http://localhost:8080/socket.io/?EIO=3&transport=polling&t=Mw6XCn5 404 (Not Found)我的server.js文件如下：const express = req...
2019-11-20 13:11:20
1162
原创 css元素居中完全指南
如有错误请指正，更多内容查看GitHub一、元素分类首先要知道元素分三种：内联元素（行内元素）、块级元素、内联块级元素。1、内联（行内）元素可与其他元素占一行高、行高、内外边距不可更改宽度为内容所占宽度，不可更改容纳文本或其他行内元素2、块级元素独占一行高、行高、内外边距可更改不设置宽度的话宽度默认为容器的100%可容纳行内元素和块级元素3、内联块级元素可...
2019-09-27 14:30:11
562
翻译 JavaScript漫谈之你应该要知道的十大JavaScript数组方法
查看原文更多内容请关注GitHub1、forEach()循环遍历数组const ARR = [1, 2, 3, 4, 5];ARR.forEach(item => { console.log(item);// 1, 2, 3, 4, 5})2、includes()检查数组是否包含方法中传递的项const ARR = [1, 2, 3, 4, 5];ARR.i...
2019-09-16 17:25:22
134
原创 JavaScript漫谈之理解类型操作符typeof
在本文中，将简述JavaScript类型系统和数据类型，以及如何使用typeof操作符执行类型检查。还讲解了使用typeof操作符进行某些数据类型检查是不完善的，并介绍其他几种类型检查的方法。更多内容欢迎关注GitHub每种编程语言都有自己的类型系统和数据类型，但各种编程语言的数据结构常有不同之处。使用JavaScript时，其引擎会在脚本执行期间隐式强制转换执行值的类型...
2019-09-11 15:40:00
241
原创 JavaScript漫谈之执行上下文与this
this，即当前执行代码的环境对象。换句话说，执行的每个JavaScript函数都有对其当前执行上下文的引用，称为this。一、执行上下文执行上下文代表函数的调用方式，大多数情况下，函数的调用方式决定了this的值。即，执行上下文决定了this的值。要理解这个关键字this，只需要this取决于函数的调用方式，跟函数声明以及声明位置没关系。比如看下面这段代码：function per...
2019-09-10 10:47:31
343
转载 详记CSRF攻击与XSS攻击
一、CSRF（跨站请求伪造）是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。1、攻击过程跨站请求攻击，简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。这个过程可以这样来看：用户登录了sueRimn.com，并保留了登录凭证（Cookie）攻击者引诱用户点击访问了sb...
2019-09-04 15:37:56
645
原创 openlayers学习笔记（十三）—异步调用JSON数据画点、文字标注与连线
使用Openlayers 3实现调用本地json数据在地图上添加点、文字标注以及连线。生成底图地图首先得有一个地图作为底图，代码如下：let vectorSource = new ol.source.Vector({ wrapX: false });const rootLayer = new ol.layer.Tile({ source:...
2019-09-02 16:36:53
632
原创 科大讯飞语音听写—JavaScript
查看科大讯飞语音听写demo即可看见最新的js demo，适用于前端。直接下载即可食用。贴上主要代码：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
2019-08-29 11:28:47
5128
15
原创 语音识别—前端录音传给后台语音识别
实现前端录音，将音频blob传给服务器，然后在服务器端使用百度AI语音识别将结果返回给前端上一篇文章是将百度AI语音识别Nodejs SDK版的进行了一遍演示加识别结果返回给前端显示，这里是完整的进行前端录音，然后将压缩后的音频对象Blob传给服务器，在服务端使用百度AI语音识别，最后将识别结果返回给前端进行显示。本篇调用的是第三方库Recorder.js，如何调用该库捕获HTML5中的W...
2019-08-28 17:20:08
8662
5
原创 语音识别—实现百度语音识别
采用前端录音，Websocket搭建Node服务器，音频对象Blob使用Websocket传给后端服务器后写入本地音频文件，然后调用百度AI语音识别本地音频文件，最后将识别结果传给前端显示。百度语音识别查看文档知道了我想要的信息，如果想要实现实时语音识别、长时间段的语音、唤醒词功能、语义解析功能，需要使用Android、IOS SDK或者Linux C++ SDK版本，而我使用的Nodej...
2019-08-23 10:23:10
2564
4
原创 Python 语音识别
调用科大讯飞语音听写，使用Python实现语音识别，将实时语音转换为文字。参考这篇博客实现的录音，首先在官网下载了关于语音听写的SDK，然后在文件夹内新建了两个.py文件，分别是get_audio.py和iat_demo.py，并且新建了一个存放录音的文件夹audios，文件夹内存放录音文件input.wav，我的整个文件目录如下：asr_SDK(文件名)├─ Readme.html├...
2019-08-07 13:51:23
723
1
原创 Python 无法安装PyAudio问题
一、错误与原因在Windows上没有用于Python 3.7的轮子（预构建包）（有一个用于Python 2.7和3.4到3.6），因此需要在PC上准备构建环境以使用此包。因为有些软件包很难在Windows上构建，所以找到3.7的轮子更容易一些。这是安装时报的错：> pip3 install pyaudioCollecting pyaudio Using cached https:...
2019-08-05 17:13:14
5865
原创 webRTC脱坑笔记（四）— windows下Nginx对Node服务的反向代理
Nginx反向代理1、什么是反向代理当我们有一个服务器集群，并且服务器集群中的每台服务器的内容一样的时候，同样我们要直接从个人电脑访问到服务器集群服务器的时候无法访问，必须通过第三方服务器才能访问集群这个时候，我们通过第三方服务器访问服务器集群的内容，但是我们并不知道是哪一台服务器提供的内容，此种代理方式称为**反向代理2、什么是负载均衡公司会建立很多的服务器，这些服务器组成了服务器集群...
2019-07-26 17:19:11
988
原创 webRTC脱坑笔记（三）— webRTC API之RTCPeerConnection
RTCPeerConnection API是每个浏览器之间点对点连接的核心，RTCPeerConnection是WebRTC组件，用于处理对等体之间流数据的稳定和有效通信。RTCPeerConnection可以保护Web开发人员免受潜伏在其中的无数复杂性的影响。WebRTC使用的编解码器和协议可以进行大量工作，即使在不可靠的网络上也可以进行实时通信：丢包隐藏回声消除带宽适应性动态抖动缓...
2019-07-19 11:29:11
2130
原创 webRTC脱坑笔记（二）— webRTC API之MediaStream(getUserMedia)
webRTC APIWebRTC API包括媒体捕获、音频视频的编码和解码、传输层和会话管理。getUserMedia()：捕获音频和视频。MediaRecorder：录制音频和视频。RTCPeerConnection：在用户之间传输音频和视频。RTCDataChannel：用户之间的流数据。1.媒体捕获MediaStream（又名getUserMedia）MediaStre...
2019-07-19 10:24:46
1643
原创 webRTC脱坑笔记（一）— 初识webRTC
webRTC概述WebRTC--- Web browsers with Real-Time Communications (RTCWebRTC是一个开源项目，可以在Web和本机应用程序中实现音频，视频和数据的实时通信。在Firefox，Opera和Chrome桌面和Android上。WebRTC也可用于iOS和Android上的本机应用程序。有了WebRTC ，不需要任何插件或第三方软件来...
2019-07-19 09:45:54
497
原创 Electron-vue实战（二）— 请求Mock数据渲染页面
Electron-vue实战（二）— 请求Mock数据渲染页面作者：狐狸家的鱼本文链接GitHub：sueRimn一、环境搭建1、安装Mock.js如果仅仅用作脱离后台的模拟数据，就安装在开发环境中：npm install mockjs -D2、安装axios-mock-adapteraxios-moc...
2019-07-04 09:33:00
594
原创 Ubuntu上安装Git
1、安装gitapt-get install git2、配置gitgit config --global user.name "xxx"git config --global user.email "你的邮箱地址"3、创建公钥进入~/.sss目录cd ~/.ssh查看是否有ssh key，如果输出为konwn _hosts，代表没有id_rsa、id_rsa.pub文件，没有...
2019-07-03 17:55:47
3405
原创 windows下安装虚拟机和Ubuntu的图文记录
因为最近在研究webRTC，尽管它允许点对点/端对端的通信，但还是需要服务器实现，比如以下场景：信令传输：建立点对点的连接需要传输一些媒体和网络相关的元数据信息，需要通过服务器NAT和防火墙穿透：需要通过ICE框架来建立点与点之间的网络路径。用STUN/TURN服务器。WebRTC建立连接的步骤大概是这样的：客户端（浏览器）直接尝试直连；如果如果直连则通过STUN服务器进行穿透；...
2019-07-03 15:36:21
291
原创 Elecron-vue实战（二）— 请求Mock模拟数据渲染页面
一、环境搭建1、安装Mock.js如果仅仅用作脱离后台的模拟数据，就安装在开发环境中：npm install mockjs -D2、安装axios-mock-adapteraxios-mock-adapter是一款axios的请求模拟调试器，可以使用它来实现请求拦截并模拟后台回复。npm install axios-mock-adapter -D二、使用（1）建立文件在src...
2019-06-28 15:03:52
804
原创 Electron-vue实战（一）— 搭建项目与安装Element UI
一、新建项目1、初始化项目打开cmd，新建一个项目，我使用的是electron-vue，输入以下命令：vue init simulatedgreg/electron-vue my-projectmy-project就是自己随便取名的项目名。然后提示正在下载模板，下完模板之后根据提示进行操作就行，输入你该输入的东西，然后一路Enter：初始化完毕之后，根据提示进行操作，进入项目文件夹...
2019-06-28 11:12:49
5356
原创 Electron-vue实战（三）— 如何在Vuex中管理Mock数据
Electron-vue实战(三)— 如何在Vuex中管理Mock数据作者：狐狸家的鱼本文链接：Vuex管理Mock数据GitHub：sueRimn在vuex中管理mock数据关于vuex的简单理解在这篇文章中已经提过了，如何在vuex中管理mock数据呢。这是效果界面，所用的数据是mock模拟所得，使用vuex的store存储管理模拟数据。...
2019-06-25 17:41:00
261
原创 Elctron-vue实战（三）— Vuex管理Mock数据
关于vuex的简单理解在这篇文章中已经提过了，如何在vuex中管理mock数据呢。这是效果界面，所用的数据是mock模拟所得，使用vuex的store存储管理模拟数据。这是我的store目录结构，分成几个模块，以其中planList模块为例进行讲解。1.配置Vuex在modules文件夹中新建一个文件planList.js，然后在modules/index.js中导入import ...
2019-06-25 17:31:08
570
原创 关于Vuex可以这样简单理解
Vuex概念理解和大多数文章都一样，从概念解释到引出问题再举例解决问题。官网中，Vuex是状态管理模式，将所有组件的状态集中式存储管理，并在相应的规则中发生变化。在我的理解中，组件的状态就是数据，Vuex就是一个集中存储管理所有组件的数据的仓库，当组件需要数据时，从仓库中获取对应数据。如果Vuex是一个仓库，那将整个项目比作超市，每个组件比作超市里不同的货架，货架上要摆放的货物就是状态（...
2019-06-25 16:19:58
131
原创 vue学习笔记（五）— 组件通信
如果组件是一个单页面，组件之间存在父子关系，数据传递就需要根据父子不同的地位使用不同的办法。借助新建的Electron-vue项目自带的两个组件来说明。目录结构如下：其中LandingPage.vue是父组件，SystemInformation.vue是子组件。一、父组件向子组件传递数据父组件可通过Props向子组件传递数据。子组件：子组件显示从父组件获取的数...
2019-05-28 16:03:43
145
原创 OpenLayers学习笔记（十二）— 飞机速度矢量线预测（二）
之前有一篇博客简单写了一个模拟demo，根据物体当前的速度和方向预测多少时间后所在的位置，具体计算是参考《(译)计算距离、方位以及更多经纬度之间的点》，现在重新用计算公式实现，代码如下： let from, to;let createVelLine = obj => { const DEG2RAD = Math.PI / 180; const RAD2DEG = 1...
2019-05-22 10:44:55
440
原创 QML学习笔记（八）— QML实现列表侧滑覆盖按钮
QML实现列表右边滑动删除按钮，并覆盖原有的操作按钮，点击可实现删除当前项本文链接：QML实现列表侧滑覆盖按钮作者：狐狸家的鱼GitHub：八至列表实现在另一篇博客已经提及，列表可选中、拖拽、编辑，现在优化一下，实现滑动删除效果，并覆盖原有的操作按钮。主要就是对操作按钮与删除按钮之间做一个动态切换效果。管制按钮一开始就是默认显示的，代码如下： ...
2019-05-15 15:14:53
435
原创 重学JavaScript - 映射与集合
带键的集合整理自MDN文档映射Map对象一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for...of 循环在每次迭代后会返回一个形式为[key，value]的数组。1、语法new Map([iterable])iterable可以是一个数组或者其他iterable对象，其元素或为键值对，或为两个元素的数值。每个键值对都添加到新的Map。null会被当作u...
2019-05-14 13:25:32
256
原创 Openlayers API整理
一、创建地图1、地图Map创建地图底图：需要用new ol.Map({})地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI组件的控件control组成的。（1）、创建基本地图let map = new ol.Map({ target: 'map',//对象指向 layers: [//图层 new ...
2019-05-09 10:04:01
1834
1
原创 重学JavaScript - 数组
重学JavaScript - 数组 作者：狐狸家的鱼GitHub：surRimn整理自MDN文档数组数组是一种类列表对象，长度和元素类型不固定。描述访问数组JavaScript数组的索引是从0开始的，第一个元素的索引为0，最后一个为数组长度减一。如果指定的索引是一个无效值，不会报错，而是返回undefined...
2019-04-29 10:21:00
118
原创 OpenLayers学习笔记（十一）— 飞机速度矢量线预测
在机场使用的空管系统中，飞机的速度矢量线差不多是这样的：模拟飞机飞行时的速度矢量线，这里就大概做个类似效果：什么叫速度矢量线呢，个人理解就是根据飞机当前速度和航向预测它在未来一段时间内的飞机轨迹，以此来监测飞机是否偏离。如何运行代码已经在上一篇博客《动态加载JSON数据模拟航迹线》讲过了。在这个模拟DEMO中，主要存在四个图层，分别为地图底图、航迹线图层、...
2019-04-08 08:58:13
1069
5
原创 OpenLayers学习笔记（十）— 动态加载JSON数据模拟航迹线
在openlayers 3 上，加载本地json数据，动态绘制航迹线，以飞机当前位置为地图中心，此例子是模拟DEMO本文链接：动态加载JSON数据模拟航迹线作者：狐狸家的鱼GitHub：八至前提需求需要以JSON数据动态加载绘制飞机轨迹线，飞机图标以加载的坐标为当前实时位置，经过的坐标追加到轨迹线上，标牌始终跟随飞机移动。简单搭建本地服务器因为要加载本地J...
2019-04-03 09:46:33
1008
原创 JavaScript速记
JavaScript常见知识点积累，包括数据类型、数值转换、对象、原型与原型链、作用域与闭包等等，持续整理更新，如有错误请指正，甚是感激本文链接：JavaScript那些磨人的小妖精作者：狐狸家的鱼GitHub：八至数据类型一共有七种数据类型，主要为两大类：原始类型、对象类型1.基础类型（原始值）数值number：用于任何类型的数字，包括整数或浮点数 字符串...
2019-04-02 09:01:59
201
原创 面向对象编程(OPP)
面向对象编程(OPP)作者：狐狸家的鱼本文链接：面向对象编程GitHub：sueRimn面向对象编程(OPP)具有灵活、代码可复用、高度模块化等特点，易维护和开发实例对象与new命令1.对象对象是单个实物的抽象 对象是一个容器，封装了属性（prototype）和方法（method) 属性是对象的状态 方法是对象的行为 2.构造函数JavaSc...
2019-03-26 09:28:11
499
原创 (译)Flexbox（弹性盒模型）完全指南
Flexbox（弹性盒模型）布局完全指南Github:sueRimn来源：A guide to Flexbox这个指南讲诉了flexbox的所有内容，重点介绍了父元素（flex容器）和子元素（flex元素）的所有不同可能属性。它还包括历史记录、演示、模式和浏览器支持图表。背景Flexbox布局（弹性盒模型）模块的目的在于提供一种更有效的方法在容器中的项之间布局、对齐和...
2019-03-26 09:26:28
272
原创 Vue针对性笔记
Vue针对性笔记Github原文阅读MVVM(Model-View-ViewModel)模型MVVM分为Model、View、ViewModel三部分。Model代表数据模型，定义数据和业务逻辑，访问数据层 View代表视图，展示页面结构、布局和外观（UI） ViewModel代表视图模型，负责监听Model数据变化并更新视图，处理用户交互 Model和View是通过Vie...
2019-03-26 09:24:43
119
原创 React学习笔记（一）- 入门笔记
React学习笔记（一）- 入门笔记React入门指南作者：狐狸家的鱼本文链接：React学习笔记GitHub：sueRimn1.组件内部状态state的修改修改组件的每个状态，组件的render()方法都会再次运行。这样就可以修改组件内部状态，确保组件重新改渲染并且展示从内部状态获取到的正确数据 初始状态应该通过this绑定到类上class App extend...
2019-03-26 09:23:15
132
原创 （译）计算距离、方位和更多经纬度之间的点
（译）计算距离、方位和更多经纬度之间的点计算距离、方位和更多经纬度之间的点。最近在研究预测未来坐标和速度、时间之间的关系，希望这篇文章对地图应用有所帮助。作者：狐狸家的鱼本文链接：计算距离、方位和更多经纬度之间的点原文链接：Calculate distance, bearing and more between Latitude/Longitude pointsGitHub：...
2019-03-26 09:21:56
2132
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人