飞鱼日记-优快云博客

原创 vue3+ts+vite2项目实战探坑干货

1.Vite创建vue3项目使用 NPM:npm init @vitejs/app使用 Yarn:yarn create @vitejs/app默认构建好的目录结构是不包含router和vuex的需要手动安装并创建对应目录,使用命令：npm i vue-router@next vuex@next -S注意：vue3.0只支持router和vuex必须是4.0及以上版本下面是我创建好的实战项目目录，仅供参考：2.配置别名aliasvite构建的vue默认是没有@别名的，所以需要我们手

2021-05-06 17:45:58 5303 1

原创 js事件委托（事件代理）详解

1.介绍事件冒泡： JS中当出发某些具有冒泡性质的事件是，首先在触发元素寻找是否有相应的注册事件，如果没有再继续向上级父元素寻找是否有相应的注册事件作出相应，这就是事件冒泡。事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。优势：1.减少DOM操作，提高性能。2.随时可以添加子元素，添加的子元素会自动有相应的处理事件。2.举例：例子：页面上有这么一个节点树，div>ul>li>a比如给最

2021-04-09 14:29:06 310

原创 vue接口请求axios实例封装

const apiList = [ 'system/v2/markes', // 马上获取留学方案表单提交接口]let urlStr, apiName, API = {}apiList.forEach(path => { /** * apiName使用正则取到接口路径的最后一个子串，比如: markes即为接口调用方法名 * * 使用方法： * 组件引入：import { API } from '~/assets/api/api.js'; * 参数：data（

2021-04-01 15:42:34 334

原创 Flutter SDK 下载

下载特别慢，所以查了一下，使用以下命令下载很快：git clone https://github.com/flutter/flutter.git -b stable --depth 1Get the Flutter SDK

2021-03-25 23:15:50 1173

原创【vue进阶】优雅自动引入自动注册Vue组件

随着项目的不断变大，可能有些人会把插件的引入和全局组件的注册都放到main.js中，导致后面main.js里面一大坨引入代码，看起来杂乱无比，也不利于后期进行维护，所以我们尽可能的让main.js看起来整洁些。此处就用到webpack的require.context功能，实现Vue自动注册全局组件及插件，方便全局组件和插件的管理。在Vue项目开发中，经常需要import或者export各种模块，当一个页面中组件很多时，我们可能会这样引入组件：import A from 'components/A.v.

2021-03-17 18:48:10 2085

原创 localstorage sessionstorage和cookie的区别

1.基本概念cookie：是网景公司的前雇员在1993年发明。它的主要用于保存登陆信息，比如登陆某个网站市场可以看到’记住密码’，这就是通过在cookie中存入一段辨别用户身份的数据来实现的。sessionStorage：会话，是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是页面关闭后，sessionStorage中的数据就会被清空。localStorage：是HTML5标准中新加入的技术，当然早在IE6时代就有一个userData的东西用于本地存储，而当时考虑到浏览器的兼容性，更通

2021-02-04 16:56:24 143

原创一篇搞懂深拷贝和浅拷贝

1.定义深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。假设B复制了A，修改A的时候，看B是否发生变化：如果B跟着也变了，说明是浅拷贝（修改了堆内存中的同一个值）如果B没有改变，说明是深拷贝（修改了堆内存中的不同的值）2.区别浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个

2021-02-03 23:59:36 199

原创微信小程序实现循环列表折叠面板

效果展示：wxml：<view class="fold__panel"> <block wx:for="{{dataList}}" wx:key="LMF_ID" wx:for-item="dataInfo" wx:for-index="dataIndex"> <view class="fold__items" data-index="{{dataIndex}}" catchtap="listDataClick">

2020-09-14 19:24:11 2505 1

原创前端性能优化一篇搞定【面试题】

衡量网页的性能是一个比较琐碎的事情，因为没有某一个指标或数字可以直接告诉我们网页的性能怎样。优化的目的在于让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源。简短的概括：前端性能优化前端性能监控框架性能优化正文从这里开始~~~一、前端性能优化文件加载的更少缓存，CDN （详细资料：解析Web缓存及其最佳实践）图片优化静态问件优化浏览器优化文件合并压缩等常规操作代码执行的更少1）节流防抖（详.

2020-09-14 15:25:47 770

原创微信小程序自动检测新版本并静默更新，及热启动和冷启动

举个栗子，小程序发现紧急bug经修改后上线一个新版本，如果新用户还好打开就会是你新上线的最新版本，但是老用户手机上的小程序还是之前的旧版本，到此你就会想，怎样才能让老用户知道小程序版本更新了呢？1.运行机制前台/后台状态小程序启动后，界面被展示给用户，此时小程序处于前台状态。当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有完全终止运行，而是进入了后台状态，小程序还可以运行一小段时间。当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台。但如果用户很.

2020-09-01 16:07:25 4196 2

原创 ios端微信小程序背景音频调用stop或自然播放结束后无法重新播放bug

问题：微信小程序背景音频BackgroundAudioManager调用stop或自然播放结束后重新播放无效。原因：经测试发现：在iOS和微信调试工具调用stop或自然播放结束后，音频地址被清空了，而在安卓音频地址不为空。解决方案：设置一个变量resetBgAudio判断是否重置音频，在onStop和onEnded监听事件中标记resetBgAudio为true，在onPlay监听事件中标记resetBgAudio为false，点击播放按钮时，判断resetBgAudio为true的话重置音频。解.

2020-08-24 19:23:39 1969

原创一篇彻底搞懂什么是函数防抖和节流，及应用场景

函数防抖和节流是优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。1.防抖 (debounce)防抖，顾名思义，防止抖动，以免把一次事件误执行多次，影响性能，比如敲键盘就是一个每天都会接触到的防抖操作。应用场景登录、发短信等按钮避免用户点击太快，以致.

2020-08-24 15:54:05 2026 4

原创 vue中input用v-model双向数据绑定后，数据是怎么传输的

大家都知道Vue可以用v-model可以实现双数据绑定，但它能实现绑定的原理到底是什么呢？比如input用v-model双向数据绑定后，数据是怎么传输的？根据官方文档介绍，v-model本质上就是语法糖，即利用v-model绑定数据后，其实就是既绑定了数据，又添加了一个input监听事件handle自定义事件也可以用于创建支持v-model的自定义输入组件，如：<input type="text" v-model="value">等价于：<input type=.

2020-08-24 11:55:51 1434

原创浏览器输入url地址后发生了什么

1.浏览器中输入网址2.域名解析（DNS），找到IP服务器3.发起TCP连接，HTTP三次握手,发送请求（Request）4.服务器响应HTTP(Response)5.浏览器下载资源 html css js images等6.浏览器解析代码（如果服务器有gzip压缩，浏览器先解压）7.浏览器渲染呈现给用户...

2020-08-17 11:58:18 400

原创 vue中html转pdf并下载功能

1、模板调用方式/** * @param pdfDom 要生成 pdf 的DOM元素（容器） * @param pdfName PDF文件生成后的文件名字 * */<div class="saveBtn transition" @click="downloadPDF('pdfDom',pdfName)">下载</div>2、js文件代码// 下面两个package要单独安装import html2Canvas from 'html2canvas

2020-08-14 14:10:58 629

原创前端常用数据算法js函数片段合集【持续更新】

1、数组去重function noRepeat(arr) { return [...new Set(arr)];}2、查找数组最大function arrayMax(arr) { return Math.max(...arr);}3、查找数组最小function arrayMin(arr) { return Math.min(...arr);}4、返回已 size 为长度的数组分割的原数组function chunk(arr, size = 1) {return Array

2020-08-13 19:29:41 854

原创网站前端常用js效果整理【持续更新】

整理一些网站上常用到的js整理，原生js和jq的方法都有，大家用时自行判别1. 判断页面加载是否完成document.onreadystatechange = loadingChange;//当页面加载状态改变的时候执行这个方法. function loadingChange() { if (document.readyState == "complete") { //当页面加载状态为完全结束时进入 $(".loading").hide();//当页面加载完成后将l.

2020-08-13 18:16:26 691

原创 css3+js制作好看的时钟效果

css3+js制作好看的时钟效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t

2020-08-10 16:15:41 290

原创 svg绘制向下图标动画

svg绘制向下图标动画效果展示css3代码.down { -webkit-animation: bounce 4s 2s infinite; animation: bounce 4s 2s infinite; color: hsla(0,0%,100%,.8); height: 34px; width: 34px; position: absolute; bottom: 10px; cursor: pointer}.down:hover { color: #fff

2020-08-10 00:04:57 394

原创 nodejs token验证登录状态中间件 jwt-simple 包使用详解

一、简介JWT(JSON Web Token) 编码解码模块二、使用安装npm install --save jwt-simple生成token & 解析tokenconst tokenExpiresTime = 1000 * 60 * 60 * 24 * 7//秘钥const jstSecret = 'jstSecret'//需要加密的对象const payload = { user:'wang', environment:'web', expir

2020-08-09 22:52:45 1886

原创 js判断移动端是ios或安卓

JS实现下面功能：首先判断是否为微信浏览器，然后在判断是ios还是安卓，同事执行不同的下载app的链接js是无法判断是否安装了某个App的，网上找的的什么设置延时执行，iframe等根！本！没！用！也看了一些大厂的如网易新闻，今日头条等还是需要先跳转到App store里如果你已下载App显示的事打开字样，如果未下载显示的去下载 function openApp() { var ua = window.navigator.userAgent.toLowerCase();

2020-08-08 23:55:33 312

原创【前端常用js】jq tab切换

jq tab切换html  <ul class="tab-hd"> <li class="active">切换1</li> <li>切换2</li> <li>切换3</li> </ul> <ul class="tab-bd"> <li>展示1</li&

2020-08-08 23:14:33 146

原创 linux安装jdk详细流程

总结下最近在玩linux时安装nginx的最新稳定版1.16.1版Linux的使用相信大家都要用到java吧！在使用java前我们得先安装jdk以及配置环境变量等工作????下面小编给大家分享关于Linux安装jdk的详细步骤：1.准备工作Linux系统环境上官网下载jdk压缩包https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 如果嫌官网下载慢的话可以选择国内大

2020-08-06 15:58:35 495 1

原创 Navicat连接到远程服务器mysql

以连接阿里云mysql为例1.ip地址填写公网IP2.SSH默认端口22不用修改3.用户名注意哦，不是你的Xshell或者第三方控制台的用户名，而是你服务器的用户名哦，一般没有修改都是Root4.输入你设置的阿里云SSH远程控制密码详细步骤如下图顺序：接着如下图步骤：最后点击链接测试就成功了可以愉快的玩耍啦...

2020-08-06 14:23:55 553

原创跨站攻击XSS和CSRF

跨站脚本攻击（XSS，是Cross Site Scripting的缩写），一旦网站允许用户提交内容，并且会在网站的某些页面上显示用户提交的内容，比如留言或者博客，那么不做防范的话，就有可能受到跨站脚本攻击。恶意用户会在提交内容时在内容中夹带一些恶意JavaScript脚本，当其他用户访问页面时，浏览器会运行这些恶意脚本，恶意脚本有可能会窃取用户的Cookie、页面上的用户隐私信息等，并发送到恶意用户的服务器。他们可以通过这些窃取来的信息模拟用户身份完成非法操作。这就是跨站脚本攻击。

2020-08-06 14:22:13 124

原创内网穿透ngrok工具的使用

相信大家都遇到过项目或者页面制作完成了，需要测试测试时，由于项目又在本地无法在别的电脑访问，只能在你电脑访问查看这样很不方便????下面小编给大家分享关于内网穿透ngrok工具的详细步骤：1.什么是内网穿透？首先，我们生活中的网络从应用上可以分为内网和外网；内网就是你自己的网络环境，就你自己能访问，比如你本地测试进行的localhost；外网就不言而喻了，你看网页，视频等这些网址都是外网。那么什么又是内网穿透呢？简单的说就是通过访问一个外网地址，然后穿透到你的内网地址。2

2020-08-06 14:14:23 681

原创 linux安装jdk8详细步骤

总结下最近在玩linux时安装java的jdk1.8版Linux的使用相信大家都要用到java吧！在使用java前我们得先安装jdk以及配置环境变量等工作????下面小编给大家分享关于Linux安装jdk的详细步骤：1.准备工作Linux系统环境上官网下载jdk压缩包https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 如果嫌官网下载慢的话可以选择国内大厂的jdk镜

2020-08-06 14:10:24 16004 3

原创解决mac系统git push/git clone代码速度太慢问题

关于mac系统一、解决git push/git clone代码速度太慢:1.使用管理员权限打开hosts文件sudo vim /etc/hosts2.在该文件末尾空一行填入修改之后速度由10k20k左右增到500k-1000k左右二、检出大项目报错,curl的postBuffer默认值太小:error: RPC failed; curl 18 transfer closed with outstanding read data remaining fatal: The remote en

2020-08-06 14:07:31 1730

原创 github库创建步骤、git bash常用命令总结

1.github上创建仓库（公开）首先注册一个github账户点击github右上角的+号里面的New repository创建一个公开库至此一个github仓库就创建好了，当然目前github私有库已经全面免费，(ps:微软给力啊-_-)如果你不想别人看到你的提交的代码你可以在创建时选择private即可那么创建完了怎么把公开改为私有呢点击Setting选择2.用git创建仓库$ mkdir test #仓库名$ cd test$ git init #初始化仓库$ gi

2020-08-06 14:05:24 360

原创 Mac 终端显示git分支名称

之前都是在window上搭建git项目在用git bash控制项目版本时目录后面都会默认跟随当前分支的名称，这样是挺方便的一目了然，但最近想在自己mac上搭建一个git项目却发现mac是没有git bash的，使用的是mac os系统自带的终端集成默认是不显示分支名称的，这很不方便查看分支，怎么办呢？????下面是解决方法：步骤：1.进入你的home目录cd ~2.编辑.bashrc文件vi .bashrc3.将下面的代码加入到文件的最后处function git_branch {

2020-08-06 14:01:19 2018

原创 Git push 项目输入账号密码后无法再次弹出认证窗口的解决办法

记录今天在用git push项目时突然弹出一个window认证窗口结果一激动密码输错了一提交代码就报：fatal: Authentication failed for ‘http://gitlab.bailitop.com/bailitop/baili.git/’怎么弄都报这个错，此时心里…此处省去一万字废话不多说直接上图：点击管理您的凭据选择然后回到项目目录执行git push重新弹出认证窗口，把正确的用户名密码输进去敲回去，神奇的push成功了，fuck。。。...

2020-08-06 13:56:43 893

飞鱼日记的博客