- 博客(35)
- 收藏
- 关注
原创 three.js初探
关于Three.jsThree.js是基于原生WebGL封装运行的三维引擎,WebGL只能绘制点、线和三角形;Three.js封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能,相对于WebGL方便简单了不少。建立基本场景 在Three.js中有三要素:场景、摄像机和渲染器,我们创建好场景(Scene)和一个摄像机(Camera)到渲染器(Renderer)中就可以渲染三维维场景渲染成一个二维图片显示在画布上。相关文档THREE.JS 教程:https://threejsfu
2021-11-16 19:50:06
1354
1
原创 TypeScript实现观察者模式
观察者模式观察者模式(Observer Pattern)定义了一种一对多的关系,让多个订阅者对象同时监听某一个主对象,这个主对象的状态发生变化时就会通知所有观察自己的观察者(订阅者)对象,定义发布者类 ConcreteSubject 和观察者(订阅者)类RealizeObserver实现ConcreteSubjectadd,remove主要是添加和移除观察者notify 主要是通知数组observers中所有的贯彻者对象的changName用于改变主对象名称,同时在改变名称之后通知所有观察者up
2021-09-15 21:23:01
663
原创 vue3初探----vue3的一些变化
ue3的一些变化(部分)、生命周期的变化、全局配置的变化、指令的变化、v-model 的变化 v-model参数
2021-08-29 11:11:39
1122
原创 TypeScript中的一些高阶类型 Omit Pick ReturnType Parameters
TypeScript中的一些高阶类型 Omit Pick ReturnType Parameters更多高阶类型查看官网https://www.tslang.cn/docs/handbook/advanced-types.htmlOmit(删除)Omit<T, K> 类型让我们可以从另一个对象类型中剔除某些属性,并创建一个新的对象类型interface UserInfo { name: string, age: number, imei: number | str
2021-08-29 10:17:12
2474
原创 vue3初探----(vue3项目)vuex4.x中使用typescript最终写法
vue3初探----(vue3项目)vuex4.x中使用typescript最终版,vuex4中类型的定义commit、getters、dispatch的typescript类型定义;state、actions、mutations、getters的使用
2021-08-27 23:30:20
2236
原创 vue3初探---在vue3和vuex4.x中使用typescript
vue3初探---在vue3和vuex4.x中使用typescript,主要是介绍vue3中如何使用vuex4和typescript
2021-08-26 23:01:28
1381
原创 vue3初探---vue3新特性学习
vue3新特性:向后兼容,兼容vue2的写法性能提升,TypeScript的支持,Composition API,本文对setup,reactive,toRefs,ref,toRef,watchEffect,watch,等新属性、方法、变化等进行简单的介绍和代码示例使用,简单介绍setup语法糖和vue新组件Teleport Fragment Suspense
2021-08-25 21:42:08
17947
4
原创 vue自定义校验,校验图片宽高
FileReader.readAsDataURL()readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。instanceOfFileReader.readAsDataURL(blob);参数blob:即将被读取的 Blob 或 File 对象。Image()Image()函
2020-12-05 13:04:50
1323
原创 使用Socket.io发送消息
服务端消息发送//给本次链接自己发送消息socket.emit()//给某个房间内所有人发消息(包括自己)io.in(room).emit()//除本连接自己之外,给某个房间内所有人发消息(不包括自己)socket.to(room).emit()//除本连接外,给所有人发消息(不包括自己的整个个站点其他人)socket.broadcast.emit()客户端处理消息服务端发送action命令 客户端监听action之后调用相应方法S:socket.emit('action');
2020-10-04 21:27:52
2565
原创 webrtc 三------音视频录制及下载
MediaRecoder构造函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 对象var mediaRecorder = new MediaRecorder(stream[, options]);开始录制mediaRecorder.start(timeslice);//timeslice设置时间片(number)可选停止录制mediaRecorder.stop();stream:音视频流options:限制选项示例<!DOCTYPE ht
2020-10-04 14:41:37
488
原创 webrtc 二------从视频中获取图片
从视频中获取图片用到canvas。将video当作源使用drawImage截取一帧数据就实现拍照功能。//html<video autoplay playsinline id="player"></video><button id="snapshot">拍照</button><canvas id="picture"></canvas>//js'use strict'if (!navigator.mediaDevice
2020-10-04 10:28:15
591
原创 centos使用node搭建https服务
使用node搭建https服务,购买证书后下载,将证书放在还在项目的中(包括一个证书和一个密钥)配置安全组,允许防火墙放行443端口,启动服务(要使用root用户,1024以下的端口监听需要root权限),查看443端口有没有被监听
2020-10-04 08:40:26
1183
原创 webrtc 一------相关api获取音视频设备采集音视频数据
webrtc相关api,enumerateDevices音视频设备信息的获取,getUserMedia音视频的获取,getUserMedia()适配
2020-10-03 21:36:46
966
原创 搜索结果中关键字高亮显示
使关键字高亮显示主要是给搜索结果中的关键字加一个标签并给他加上特定的样式。主要以在vue中为例给关键字添加span标签的方法 wraperkeyword(k, v) { function highlight(value) { console.log(value); return `<span style="color:#1890ff">${value}</span>`; } return v.replac
2020-07-02 08:55:26
1760
1
原创 node express 使用multer实现图片上传接口(上传到服务器和上传到阿里云对象存储oss)
在上传图片时主要是客户端将图片的二进制文件通过文件上传接口上传到服务器,服务器存储文件并返回文件地址,这里我们们主要是实现图片上传接口实现图片上传主要分为上传到服务器上传到阿里云对象存储oss上传到服务器路由//上传中间件const multer = require('multer')//上传npm i multerconst uplod = multer({ dest: __dirname + '/../../uplodes' })router.post('/uplod', upl
2020-06-20 17:17:53
1317
1
原创 vue+node+mysql校园信息交流平台(毕业设计)
校园信息交流平台(涵盖二手信息,交流问答,新闻文章,校内活动,招聘信息)。毕业设计项目,使用vue+node+mysql为主要技术
2020-06-20 10:34:32
9465
53
原创 vue项目实战(个人博客)七------给v-html中渲染的文章(html代码段)中图片添加点击事件(事件委托)
由于在vue中v-html渲染的html代码段中添加的事件是无效的所以我们不能给html代码段中拼接点击事件实现功能刚开始想用正则匹配出图片然后用图片浏览插件实现图片反大,最后还是换了别的方法我们可以吧点击事件添加到他们的父标签上,通过事件冒泡判断标签是不是img从而添加点击事件事件委托事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown…)的函数委托到另一个元素;...
2019-10-06 20:35:26
3776
原创 vue项目实战(个人博客)六------对一条数据中的某一条数据进行逗号分割且只渲染前三条
后台返回的数据字符串分割再渲染时由于label中有多条数据使用‘,’号隔开的所以要进行字符串分割使用js的split(",")方法var str = 'The quick brown fox jumps over the lazy dog.';var words = str.split(' ');实现方法最有效的方法是在数据请求到之后就把数据处理好先用split(' ,');...
2019-09-06 10:44:56
3083
原创 vue项目实战(个人博客)五------使用媒体查询实现响应式设计
使用媒体查询@media only screen and (min-width: 768px) 加载css样式的最小屏幕宽度@media only screen and (max-width: 768px)加载css样式的最大屏幕宽度/** 平板 **/@media only screen and (min-width: 768px) and (max-width: 1024px) {...
2019-09-01 09:43:15
14353
原创 vue项目实战(个人博客)四------vue中组件和路由的使用以及默认路由与路由重定向
vue项目中组建一般在src/components中在vue中组件一般有两种用法 第一种是直接引用 第二种是通过路由调用直接引用导入用使用的组件文件夹,然后声明组建,就可以直接使用了<template> <div id="app"> <tou></tou> </div></template>&l...
2019-09-01 09:08:32
951
原创 vue项目实战(个人博客)三------Git 版本管理工具(coding)在vs.code使用git
Git 版本管理工具Git 版本管理工具有很多如github 码云 coding 等,我用的是coding,在实习公司用的是coding而且github在国内网速太慢,coding相对使用起来简单把自己的项目上传到coding新建仓库进入coding官网注册账号新建一个仓库下载GIT安装右键用git打开自己的那个项目在当前项目的目录中生成本地的git管理,输入git init...
2019-08-31 18:38:55
1237
原创 vue项目实战(个人博客)二------环境搭建
安装node.js百度搜索node.js第一个就是,下载一个自己想要的版本(建议不要下载最新的版本,最新版本可能会遇到一些问题)下载完成全部是默认一路点击下一步就行安装淘宝cnpm输入命令npm install -g cnpm --registry=https://registry.npm.taobao.org当时这一步的时候电脑只要一输入这个命令就卡死也不知道怎么办,然后重装系...
2019-08-31 17:33:50
1291
原创 JavaScript接收其他页面传递过来的参数
JavaScript接受其他页面传递过来的参数方法如下 function getQueryVariable(variable) { var query = window.location.search.substring(1);//接受传递的数据 var vars = query.split("&");用地址符分割 fo...
2019-07-22 23:17:41
872
原创 【php】php操作XML文件
php读取xml文件读取请求id的相关内容<?php $id=$_GET['id']; var_dump($id); header('content-type:text/html;charset=utf8'); $xml=simplexml_load_file('./xml/neirong.xml'); $neirong=$xml->neirong[(...
2019-06-11 14:42:22
117
原创 【计算机网络】http
B/S 架构:Browser(浏览器) ←→ Server(服务器),C/S 架构:Client(客户端) ←→ Server(服务器),约定内容请求方法 —— GET / POST响应状态 —— 200 / 404 / 302 / 304约定形式客户端通过随机端口与服务端某个固定端口(一般为80)建立连接 三次握手客户端通过这个连接发送请求到服务端(这里的请求是名词)服务端监听...
2019-06-06 11:43:37
174
原创 【javascript】继承
原型式继承可以用call()和 Object.create()实现call()基本上,这个函数允许调用一个在这个文件里别处定义的函数。第一个参数指明了在运行这个函数时想对“this”指定的值,也就是说,您可以重新指定您调用的函数里所有“this”指向的对象。其他的变量指明了所有目标函数运行时接受的参数。call的详细介绍https://blog.youkuaiyun.com/qq_41154298/...
2019-06-02 11:10:15
175
原创 【javascript】数组中涉及的算法------数组去重
数组去重中涉及到查看数组中有没有某个元素Javascript中有indexOf() 内置函数可以完成indexOf() 方法indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,如果要检索的字符串值没有出现,则该方法返回 -1。indexOf() 方法对大小写敏感!点击查看indexOf()的详细介绍方法一、新建一新数组,遍历传入数组,值不在新数组就push进该新...
2019-06-01 13:24:10
177
原创 【javascript】基本类型和引用值类型(动态属性,复制与传递参数)
基本类型(值类型)Undefined , Null ,Boolean , Number ,String复杂类型(引用类型)Object, Array , Date ,Function(这只是部分常见的)类型检测typeofinstanceofObject.prototype.toString.call()动态属性var person =newObject();pe...
2019-05-31 11:26:09
246
原创 【javascript】伪数组
伪数组拥有 length 属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,伪数组同样有 length 属性,也有 0、1、2、3 等属性的对象,看起来就像数组一样,但不是数组,伪数组不具有数组所具有的方法比如:var Array = { "0": "first", "1": "second", "2": "third", length: 3}; ...
2019-05-30 19:59:17
465
原创 【javascript】数组中涉及的的算法-----合并两个有序数列
方法一,将两个数组合并然后排序在JS中数组合并有以下几种方式1.concat(js中 Array的内置方法)var c = a.concat(b);缺点:旧数组仍存在,在进行多次数组合并时有内存浪费的问题2.for循环遍历其中一个数组,把该数组中的所有元素依次添加到另外一个数组中for(var i in b){ a.push(b[i]);}3.apply方法利用函数...
2019-05-07 21:04:44
341
原创 【javascript】数组中涉及的的算法-----寻找数组中第二大的数
方法一将数组从大到小排序然后找第二个<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>网页</title> <script>var arr=[5,2,10,8,0,4,7,11,9,1];funct...
2019-05-05 20:15:36
2642
2
原创 【javascript】属性成员的搜索原则:原型链
属性成员的搜索原则:原型链每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性 搜索首先从对象实例本身开始如果在实例中找到了给定名字的属性,就会返回该属性的值如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性如果一直到原型链的末端还没有找到到,则返回 `undefined。...
2019-04-29 14:14:01
439
原创 【javascript】构造函数、实例、原型三者之间的关系
任何函数都具有一个 prototype 属性,该属性是一个对象构造函数的 prototype 对象默认都有一个 constructor 属性,指向 prototype 对象所在函数通过构造函数得到的实例对象内部会包含一个指向构造函数的 prototype 对象的指针 __proto__所有实例都直接或间接继承了原型对象的成员...
2019-04-27 20:19:33
118
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人