自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

xyphf的博客

不断学习,追求卓越

  • 博客(647)
  • 资源 (29)
  • 论坛 (3)
  • 收藏
  • 关注

原创 从零启动一个JAVA SSM项目详细步骤目录

详解大型互联网项目服务端架构演进历程 JAVA环境配置1、Linux软件源配置操作2、Linux系统 jdk安装实操3、Linux系统tomcat安装4、Linux下Maven项目构建与管理工具5、Linux下vsftpd文件服务器安装与配置实操6、Linux下nginx反向代理服务器安装与配置实操7、Lunix下nginx反向代理服务器域名解析配置实操8、...

2018-07-29 15:25:35 3786 4

原创 HTML5&CSS3.0基础部分目录-xyphf

[置顶] CSS3.0入门笔记 [置顶] animate.css动画库使用方法介绍 [置顶] 聊一聊HTML5的表单,话说这些表单你都用过吗? [置顶] 聊一聊HTML5存储的那些事儿! [置顶] canvas入门系列1、H5标签 音效audio - HTML5&CSS3.0基础部分-xyphf http://blog.csdn.net/xyphf/article/details/7429

2017-07-05 09:47:51 817 1

原创 Vue3之Composition API的ref,reactive,toRefs,readonly,toRef,context(attrs, slots, emit) 响应式引用的用法和原理

ref, reactive 响应式的引用原理,通过 proxy 对数据进行封装,当数据变化时,触发模版等内容的更新ref 处理基础类型的数据reactive 处理非基础类型的数据toRefs作用:reactive处理的对象是响应式的,但是里面具体的值不是响应式的,所以把这个值导出去,把这个值改了的时候它不会改变,出来这个问题所以用到toRefs,下面是用toRefs对nameObj做个包装,然后在解构导出去,这时候值变化它也会跟着变化toRefs 可将 proxy({name: 'del

2021-05-18 11:22:48 3

原创 Vue3的Composition API 之 Setup函数

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Composition API 之 Setup函数</title> <script src="https://unpkg..

2021-05-18 10:11:42 2

原创 vue实现项目对不同设备展示的缩放

我们看到我们当前的网站在iphone6/7/8上基本上没什么问题但是在ipad上展示效果就不尽如人意了我们希望我们的网站能够针对不同的设备类型能够展示不同的展示效果的一个网站我们的整个项目都通过rem来进行页面布局base.scsshtml { font-size: 100px; // rem的大小是相对于这个根姿态的fontSize的}body { font-size: .12rem;}我们要检查一下项目里面有没有笔误的地方使用了px,把它改成rem

2021-05-14 12:03:22 41 2

原创 钉钉小程序如何调用罗盘陀螺仪

dd.onCompassChange简介dd.onCompassChange 是监听罗盘数据变化事件的 API。接口调用后会自动开始监听,回调间隔为500ms,可使用 dd.offCompassChange() 停止监听。使用限制基础库 1.9.0 或更高版本;客户端 10.1.32 或更高版本,若版本较低,建议采取 兼容处理。接口调用示例代码// .jsdd.onCompassChange(function (res) { console.log(res.directio

2021-04-02 16:52:56 63

原创 详解ES6模块化

第一步:初始化项目,使得能被npm管理npm init -y第二步:配置.babelrc{ "presets": ["es2015"], "plugins": []}

2021-03-27 16:35:41 55

原创 h5网页跳转微信小程序的方法,wx-open-launch-weapp按钮不显示

最近踩了一条大坑啊,h5页面跳转微信小程序wx-open-launch-weapp下面的按钮一直不显示,琢磨了好久,查看微信开发者社区差不多有30页同问?微信h5页面是怎么跳转微信小程序的?1、打开微信开发者jssdk文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#212、看 2.1 跳转小程序:wx-open-launch-weapp3、我在看一下JS-SDK的说明文

2021-03-25 08:54:11 997 3

原创 如何封装一个vue3组件,以Toast弹框为例

1、建一个components文件夹,里面建一个Toast.vue文件<template> <div class="toast">{{message}}</div></template><script>import { reactive } from 'vue'export default { props: ['message']}export const useToastEffect = () => {

2021-03-21 19:43:51 178

原创 抹平各个浏览器之间差异的插件,浏览器差异解决方案

npm install normalize.css --save安装好之后在main.js中引入import 'normalize.css'建立一个base.scss文件这里是在html上建立一个根字体大小,因为后期的自适应大小的计算是rem1rem的大小等于1个html根字体的大小1rem = 100px比如说:2rem = 2 * 100px = 200pxhtml { font-size: 100px;}在main.js中引入这个文...

2021-03-15 00:37:28 47

原创 vue3集成axios,添加拦截器

文档>>npm install axios --save在main.ts中引入import { createApp } from 'vue'import axios from 'axios' // 1、引入import router from './router'import store from './store'import App from './App.vue'axios.defaults.baseURL = 'http://localhost:7001/ap

2021-03-08 08:05:00 114

原创 vue3.0配置路由导航守卫和路由元信息

文档接入>>需求:当没登录的时候就跳转到登录页面去import { createRouter, createWebHistory } from 'vue-router'import axios from 'axios'import Home from './views/Home.vue'import Login from './views/Login.vue'import Signup from './views/Signup.vue'import ColumnDetail

2021-03-07 15:45:59 216

原创 vue3.0集成vuex

1、第一步:安装npm install vuex --save2、main.ts引入import { createApp } from 'vue'import { createRouter, createWebHistory } from 'vue-router'// import { createStore } from 'vuex'import Home from "./views/Home.vue"import Login from "./views/Login.vue"im

2021-03-07 15:12:34 58

原创 vue3.0配置vue-router

第一步:安装集成安装包npm install vue-router --save第二步:我们去package.json去看一下,如果vue-router是4.0.0以上的就是支持vue3的文档>>第三步:向应用中添加vue-router的实例1、打开main.ts引入vue-routerimport { createApp } from 'vue'import { createRouter, createWebHistory } from 'vue-router

2021-03-07 11:53:04 278

原创 VueCompilerError: Element is missing end tag.

该错误是由标签没有闭合导致的写成这样就好了好好检查一下吧

2021-02-26 08:21:09 400

原创 它可以通过把vue文件转换为typescript文件,通过languageServer来分析typeScript语法,最后再把结果转换回vue文件,这样就可以实现template来实现自动分析和补全,

"vetur.experimental.templateInterpolationService": true,它可以通过把vue文件转换为typescript文件,通过languageServer来分析typeScript语法,最后再把结果转换回vue文件,这样就可以实现template来实现自动分析和补全,来支持ts的类型打开vscode,搜索vetur,点击齿轮选择选择添加一行 "vetur.experimental.templateInterpolati..

2021-02-13 09:53:33 64

原创 vue/cli命令行和图形化界面两种方式创建vue3项目

使用vue/cli创建npm install -g @vue/cli然后输入vue --version版本需要在4.5.4以上,创建vue3项目sudo vue create vue3-basic会出现三个选项,特别要注意你的选项中有没有vue3的版本,如果没有说明vue/cli版本过旧,需要更新❯ Default ([Vue 2] babel, eslint) vue2的模版 Default (Vue 3 Preview) ([Vue 3] babel, esli...

2021-02-09 11:49:11 217

原创 Vue3新特性盘点简介

Vue3支持vue2的大多数特性,你可以像使用vue2一样原封不动的使用vue3Vue3官方网站https://v3.vuejs.org/Vue3的性能提升代码打包大小减少了41%;初次渲染快了55%,更新快133%;内存使用减少54%;这得益于重写虚拟Dom的实现;Vue3 Composition API在vue2中遇到问题,复杂组件的代码变得越来越难以维护,缺少一种干净的,在多个组件之间提取和复用逻辑的机制都有一些弊端;所有Vue3推出了Composition API;.

2021-02-09 09:27:44 96

原创 TS的枚举类

const enum Direction { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT',}const value = 'UP'if (value === Direction.Up) { console.log('go up!')}

2021-02-08 22:15:04 54

原创 ES6 面向对象封装、继承、多态案例

类 Class类(Class) : 定义了一切事物的抽象特点对象(Object):类的实例面向对象(OOP)三大特性:封装、继承、多态封装就是将数据操作的细节隐藏起来,只暴露对外的接口,外界调用端不需要也不可能知道细节,只能通过通过对外暴露的接口来访问该对象;继承表示子类继承父类,子类除了拥有父类所有的特征以外,还有一些更具体的特性;多态:由继承产生的多个不同的类,对同一个方法可以有不同的响应,比如猫和狗都可以继承自Animal,但是它们分别实现了自己的eat(吃)方法;此时针对某一

2021-02-08 22:05:43 61

原创 前端宏任务和微任务详解

宏任务(macro-task)定义消息队列中的任务称为宏任务。产生宿主环境提供的方法是宏任务,例如setTimeout, setInterval。这些都是浏览器或者Node环境实现的。执行不断从消息队列中取出并被事件循环执行。类型 浏览器 Node I/O 宏任务 宏任务 setTimeout 宏任务 宏任务 setInterval 宏任务 宏任务 requestAnimationFrame 宏任务 ...

2021-02-03 09:55:08 343 1

原创 详解作用域和作用域链-xyphf

JS中有一个被称为作用域(Scope)的特性。对于许多新手来说,作用域的概念并不是很容易理解,我会尽量用最简单的方式来解释作用域和作用域链。JS的作用域1、什么是作用域作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。换句话说,作用域决定了代码区块中变量和其他资源的可见性。可能这两句话并不好理解,我们先来看个例子:function outFun2() { var inVariable = "内层变量2";}outFun2();//要先执行这个函数,否则根本不知道

2021-02-03 08:19:58 70 1

原创 常用的基础样式border.css和reset.css

如何解决移动端1px(1像素)问题border.css该css样式用于解决移动端1像素边框问题。问题分析:有些手机的屏幕分辨率较高,是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下,显示的并不是1个物理像素,而是2个物理像素。为了解决这个问题,引入border.css是非常有必要的。@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.borde

2021-02-02 16:45:50 34

原创 强制使用https访问的方法-xyphf

Nginx服务器,在server { ... } 中插入rewrite ^(.*)$ https://$host$1 permanent;.htaccess文件,适用于Apache 配置文件的<Directory>标签内RewriteEngine onRewriteBase /yourfolderRewriteCond %{SERVER_PORT} !^443$RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [..

2021-01-27 19:38:45 103

原创 前端面试基础

说一下盒模型?盒模型是css中重要的基础知识,也是必考的基础知识盒模型的组成,由里向外content,padding,border,margin.在IE盒子模型中,width表示content+padding+border这三个部分的宽度在标准的盒子模型中,width指content部分的宽度box-sizing的使用? box-sizing: content-box 是W3C盒子模型 box-sizing: border-box 是IE盒子模型box-sizing...

2021-01-19 09:13:53 60

原创 微信小程序app.js如果调用页面里面的方法

看了大量文章,说的都是怎么从页面调用app.js里面的方法,就是没说app.js怎么调用指定页面里面的方法,研究了好久终于研究了出来;说一下需求场景,最近在做一个音视频通话的小程序,集成的SDK方法都写在app.js里面作为全局的,这个时候对方呼叫我,我得拉开被呼叫页面,或者别人呼叫到一半我还没接人家就中途取消呼叫了,那我得关闭被被呼叫页面啊。也就是说app.js里面的监听方法收到对方发过来的信令,这个时候app.js里面是要调用指定页面里面的方法去做一些操作的。琢磨了好久发现下列方法可行:

2020-12-25 08:17:58 866

原创 2010-2020管理类联考MBA/MEM英语大作文范文模版

2020年管理类联考MBA/MEM英语大作文范文模版As is apparently demonstrated in the chart above, we are informed some information concerning college students reading intentions with mobile phones in a certain university. To be more specific, with the help of cell phones, the

2020-12-20 19:07:23 381

原创 管理类联考历年英语小作文范文

2020年管理类MBA/MEM联考英语小作文范文47. Directions:Suppose you are planning a tour of a historical site for a group of international students. Write. An email totell them about the site,and give them some tips for the tourPlease write your answer on the ANS...

2020-12-20 18:58:49 837

原创 Browserslist: caniuse-lite is outdated. Please run the following command: `npm update`

中途接手一个react项目,没有任何交接,没有原型和UI,只有源码,但是遇到一个巨恶心的问题,其中有一个页面本地npm start的时候正常运行,但是npm run build构建之后,运行构建后的文件,一直有一个页面显示的是白板,控制台和console都不报错。非常恶心,一直找不到原因。但是每次构建都会报这个Browserslist: caniuse-lite is outdated. Please run the following command: `npm update`npm

2020-10-23 09:16:22 2307

原创 10个好用的 HTML5 特性

在本文中,我列出了十个我过去没用过的HTML5功能,但现在发现它们很有用,废话不多说,让我们开始吧。detais 标签<details>标签向用户提供按需查看详细信息的效果。如果需要按需向用户显示内容,简单的做法就是使用此<details>标签。默认情况下,它是收起来的,打开后,它将展开并显示被隐藏的内容。事例:<details> <summary>Click Here to get the user details</summar

2020-10-12 08:33:55 110

原创 vue打印局部区域样式CSS错乱不生效

最近vue项目要实现打印网页中局部区域的要求,但是用下列方式的时候显得样式全部都没有作用上 printContent(){ let subOutputRankPrint = document.getElementById('print'); // 要打印区域的元素id console.log(subOutputRankPrint.innerHTML); let newContent =subOutputRankPrint.innerHTML; le

2020-09-17 14:13:28 1257

原创 实现1V1音视频实时互动直播系统 十二、第四节 实现1V1音视频实时互动信令服务器

server.js'use strict'var http = require('http');var https = require('https');var fs = require('fs');var express = require('express');var serveIndex = require('serve-index');var USERCOUNT = 3;//socket.iovar socketIo = require('socket.io');..

2020-09-03 12:47:39 172

原创 WebRTC addIceCandidate入参解析

基本格式aPromise = pc.addIceCandidate(candidate);candidate属性 说明 candidate 候选者描述信息 sdpMid 与候选者相关的媒体流的识别标签(代表每一路流,比如我们的视频video就是0) sdpMLineIndex 在SDP中的 m = 的索引值 (表示第几个m,比如说我们sdp中一共有两个,一个视频一个音频,那么视频是第1个、音频是第2个,那么引入音频的话就是2,视频就是1) username

2020-09-03 12:11:51 792

原创 WebRTC PeerConnection入参解析

基本格式pc = new RTCPeerConnection([configuration]);dictionary RTCConfiguration { sequence<RTCIceServer> iceServers; RTCIceTransportPolicy iceTransportPolicy; RTCBundlePolicy bundlePolicy; RTCRtcpMuxPolicy rtcpMuxPolicy; DOMString peerIden

2020-09-03 11:54:33 313

原创 2020前端测试题

1、什么是原型继承?提供代码进行讲解关键是理解Javascript对象使用的两个阶段,以及.prototype和.__proto__在各个阶段的作用。对象的创建依赖.prototype:,对象一旦建立,它的.__proto__指针就指向这个原型。原型只是普通的对象而已,作为新对象的蓝本,并没有什么特别的;只是有时候从代码看不明显而已,因为这个过程很多时候发生在JS内部。原型只是普通的对象而已,作为新对象的蓝本,并没有什么特别的;只是有时候从代码看不明显而已,因为这个过程很多时候发生在JS内部。va

2020-09-01 23:28:40 299

原创 H5页面直接扫码二维码插件

H5页面直接扫码二维码插件https://github.com/wkl007/vue-scan-demo

2020-08-31 12:53:40 622

原创 WebRTC之搭建coturn服务遇到的问题【转】

https://blog.csdn.net/qq_28880087/article/details/106960293

2020-08-16 14:02:46 223

原创 vue.config.js webpack配置 px2rem-loader自适应处理

config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('sv...

2020-08-11 14:10:37 1049

原创 实现1V1音视频实时互动直播系统 十二、第十一节 共享远程桌面

上节我已经将一对一的直播的整个过程与实现给大家介绍完了,那么下面我们就来留个作业 :看如何在我们直播系统中增加共享远桌面,其中共享远程桌面这个API我们此前已经做了介绍了,这里我们再来回顾一下,基本格式var promise = navigator.mediaDevices.getDisplayMedia(constraints);与我们获取音视频基本的API基本上是一致的,这里获取桌面就是getDisplayMedia,后面的参数也是constraints,有一个限制,constr.

2020-08-06 23:49:07 158 1

原创 实现1V1音视频实时互动直播系统 十二、第十节 直播客户端的实现

今天我们继续完成我们上节没有完成的任务,上节我们已经将连接和信令的处理逻辑都处理完成了,今天我们来完成媒体协商。那么首先我们要写一个媒体协商的call方法,这个call方法也不干什么特别重要的事,它就是创建一个Offer,然后最终这个Offer创建成功之后通过端对端消息发送给对端,如果我们想创建这个Offer,那首先我们要判断一下我们的状态,那必须是要在joinconnction这个状态下我们才能调用call;而这个call是必须在调用者,如果两端的话调用者,如果是两端的话,调用者才能调用这个call,就是

2020-08-06 22:40:58 151 5

Java多线程_ServerSocket服务端与客户端通信案例

ServerSocket服务端与客户端通信DEMO,讲述如何使用多线程的方式,使得多个客户端与服务端通信。

2017-10-24

vue总结.xmind

vue思维导图,主要涉及1、MVVM思想 2、vue常见指令 3、Vue生命周期的介绍 4、组件间通信 5、路由的使用 vue-router 6、vue发送 ajax请求 7、计算属性,方法与侦听器 8、组件间绑定原生事件 9、vue常见插件 10、全局事件的绑定与解绑 11、vue递归组件实现 12、vue动画特效 13、vue移动端开发注意点 14、flex布局 15、vue的事件及事件修饰符 16、vue性能优化

2020-03-22

electron打包window应用.exe文件demo

electron.js打包成window应用的具体方法和案例,附带代码以及简约操作文档。

2018-11-30

mongodb的工具mongovue

mongodb的工具mongovued安装包,含有激活方式

2018-11-18

Spring Cloud微服务架构图.xmind原件,可增改

Spring Cloud微服务架构体,详细的说明了Spring Cloud微服务从概念到实际操作,包含服务拆分、服务注册、服务发现、服务消费、网关配置、集中配置中心、熔断机制、自动扩展等方面

2018-10-12

webserver10.zip

WebRTC端对端1V1传输基本流程 本机内的一对一音视频互通 https://blog.csdn.net/xyphf/article/details/107743111

2020-08-02

图片懒加载svg-loading图片

loading-svg图片,使用方法见https://blog.csdn.net/xyphf/article/details/84197748

2018-11-18

webserver10.zip

端对端1V1传输基本流程 十、第五节 获取 offer/answer 创建的 SDP https://blog.csdn.net/xyphf/article/details/107745274

2020-08-02

eclipse编辑前端JavaScript代码提词器插件

将压缩包解压后,将features文件夹和plugins文件夹的内容,复制到eclipse安装目录的对应文件夹,你的eclipse就有了JS的提示词功能了!

2017-11-22

chatroom.zip

WebRTC信令服务器实现- WebRTC信令服务器的实现 https://blog.csdn.net/xyphf/article/details/107292309

2020-07-11

mongodb win64位

windows 64位mongodb数据库,mongodb-win32-x86_64-2008plus-ssl-3.4.4-signed.msi

2018-11-18

开发基于vue的npm插件demo

vue插件demo,发布到npm的demo,就是一个简单的demo而已

2018-12-09

webrtctest6.zip

WebRTC音视频数据采集 MediaStreamAPI及获取视频约束 https://blog.csdn.net/xyphf/article/details/107131986

2020-07-04

webrtctest7.zip

WebRTC采集屏幕数据 录屏功能 https://blog.csdn.net/xyphf/article/details/107240467

2020-07-09

Java文件上传案例

详细的Java文件上传案例和读取案例,涉及jsp,Servlet和Jdbc工具类以及相关Jar包

2018-01-01

webrtctest6.zip

WebRTC音视频数据采集 六、第八节 WebRTC只采集音频数据 https://blog.csdn.net/xyphf/article/details/107131684

2020-07-04

webrtctest7.zip

WebRTC音视频录制实战 录制音视频实战 https://blog.csdn.net/xyphf/article/details/107238200

2020-07-09

mongodb的工具MongoHub.app.zip

mongodb的工具MongoHub.app.zip

2018-11-18

webrtctest6.zip

获取webrtp的视频帧图片,截图DEMO https://blog.csdn.net/xyphf/article/details/107131297

2020-07-04

SpringMVC文件上传案例

SpringMVC文件上传案例

2018-01-07

windows32位mongodb

window 2位系统 mongodb-win32-i386-3.2.4-signed.mis安装包

2018-11-18

Demonew rainbow DEMO

Demonew rainbow 视频聊天、文件分享、视频会议、IM聊天DEMO

2020-03-22

webrtctest6.zip

WebRTC音视频数据采集, 视频参数调-视频约束https://blog.csdn.net/xyphf/article/details/107074736

2020-07-02

webrtctest6.zip

WebRTC音视频数据采集 , 获取音视频设备的访问权限https://blog.csdn.net/xyphf/article/details/107074313

2020-07-01

视频录像机

教程录屏软件,教学录屏软件,录屏分析软件,截图软件

2017-11-21

batarang Angular调试工具

Angular 调试工具:batarang,在chrome浏览器调试AngularJS开发的WebApp时使用,直接打开Chrome,点击更多工具-扩展程序,将该文件拉入浏览器即可。

2017-09-12

rainbow SDK

rainbow SDK hub.myopenrainbow.com.cn/#/documentation/doc/sdk/web/guides/Getting_Started

2020-03-22

好用文件上传JQ插件

文件上传插件,判断文件类型,获取文件路径,获取文件大小,显示文件预览图

2016-07-21

JAVA生成二维码工具类DEMO以及相关jar包

JAVA生成二维码工具类,以及core-3.1.0.jar Qrcode_swetake.jar

2018-02-28

最近文章为啥只显示最近三年的列表,三年以前的呢?

发表于 2020-11-08 最后回复 2020-11-08

xyphf_和派孔明的留言板

发表于 2020-01-02 最后回复 2020-04-23

博客文中插入的GIF图片不显示了

发表于 2017-10-30 最后回复 2017-10-30

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除