OooooYi-CSDN博客

原创无需任何三方库，在 Next.js 项目在线预览 PDF 文件

无需任何三方库，在 Next.js 项目中在线预览 PDF 文件。

2024-01-13 17:04:54 847

原创 Next.js 集成 Auth0 登入和自定义登入页面

Next.js 集成 Auth0 登入和自定义登入页面，Auth0 自定义登入页面。

2024-01-13 16:37:21 1297

原创 Zustand 状态管理

Zustand状态管理快速入门，Zustand Immer Middleware， Zustand中的selector，从store中抽离StateCreator，使用persist浏览器本地保存 State，使用shallow安全返回多个状态selector，使用 subscribeWithSelector，Zustand中使用devtools调试工具，Zustand中使用async异步方法。

2024-01-10 17:41:18 1158

vite热更新无效的解决办法，vue3+vite不热更新的解决方案，vue3+vite热更新失效问题，vue3无法热更新，1、每次更新代码都要重启项目是全量热更新的问题，如文件大小写问题、同一个文件夹下存在大驼峰小驼峰的命名方式的2种文件。2、如果刷新页面会更新，可以确认一下vite.config.js内有无配置server:{hmr:true}3、如果是页面级组件出现问题，极有可能是路由的文件或命名问题，引用组件则是组件引用地址和组件文件的写法问题！

2023-03-14 23:05:06 3736 6

原创 Vue Router4 ，prams 传参失效和报错问题

Vue3 使用 Vue Router4 时，prams 传参失效和报错问题，Discarded invalid param(s) “id“, “name“, “age“ when navigating，https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22；to save it to the History API state:

2023-01-05 17:05:28 2631 5

原创 vue3 使用 husky + commitlint 强制码提交规范

在vue3中使用使用prettier + Eslint格式化代码，使用 commitizen + husky + commitlint设置强制代码提交规范。

2022-12-23 12:04:32 2060

原创 uniapp使用vuex和模块化后访问命名空间中的state、actions、mutations、getters

uniapp使用vuex和模块化后访问命名空间中的state、actions、mutations、gettersVuex的作用统一管理项目的公用数据,任所有组件都可以随时获取这些数据。在开发中我们通常会使用vuex结合**uni.getStorageSync**来储存用户登入后的状态、用户信息(头像、昵称、手机号)等，来实现缓存效果，避免每次打开app都需跳转到Login页面。使用方法在uni-app中内置了vuex，我们只需要在main.js中引用就行了:一、首先在根目录下创建store

2022-05-15 02:36:28 5568 1

原创前端面试题总结-初级

HTTP协议说一下 http 和 http ？http 是超文本传输协议，信息是明文传输Https 是加密的、协议需要 ca 证书，费用较高。https缺点：https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。https 缓存不如 http 高效，会增加数据开销。SSL 证书也需要钱，功能越强大的证书费用越高。SSL 证书需要绑定 IP，不能再同一个 ip 上绑定多个域名，ipv4 资源支持不了这种消耗。tcp 三次握手，一句话概括TCP

2022-03-14 22:42:20 4269

原创 Js中可选链和空位运算符的使用

Js中可选链(?.)和空位运算符(??)的使用可选链(?.)这是 JavaScript 的一个新特性，在访问 JavaScript 对象的嵌套属性的时候，使用该运算符将不再需要在每个级别检查是否为 null 和 undefined。使用场景：可以完美解决访问多层对象属性时，如果属性为空会报引用错误的问题。我们在开发时，我们在接收后端返回的数据时，可能是一个数组或者对象，当然，后端返回数据的数据可能是空的，我们通常会像下面这些做判断：const list = []if (list &amp

2022-03-14 22:29:22 377

原创 Vue 路由传参总结

路由传参显示传参query : 不属于路径当中的一部分，路由不需要占位 /about?k1=v1&k2=v2隐式传值 param： 1. 传递的参数默认不显示在路由上 2. 如果需要显示在路由上，配置路由的时候需要占位，配置后就会属于于路由中的一部分 /search/v1/v2query传路由的路径，param必须传name显示传值 (query)query参数：不属于路径当中的一部分，路由不需要占位，写法类似于 ajax 当中query参数。地址栏表现为: /abou

2022-02-10 14:20:39 1684

原创 Vue 组件通信方式总结和组件通讯深入

Vue 组件通信方式总结和组件通讯深入组件通信方法：父子通信： props $parent / $children (返回数组，需要遍历) $attrs/$listeners $ref 访问组件实例 (this.$refs.xxx.data) provide / inject 子向父：自定义事件 ( 子组件通过$emit触发自定义事件,父使用$on接收)兄弟通信： Bus；Vuex跨级通信： Bus；Vuex；provide&inject 、 $attrs &am

2022-02-10 14:10:37 664

原创 vue SEO的解决方案

vue SEO的解决方案什么是 SEO搜索引擎优化，提高网站的搜索关键词排名以及公司产品的曝光度。搜索引擎的原理从 meta 标签中读取 keywords、description 的内容从HTML标签爬取和分析内容（h1-h6、strong、em等标签）读取a标签里的链接，通过a标签的链接再跳转到别的网站（深度优先：先跳转回头再爬取；广度优先：先爬取然后再依次跳转）SEO需要什么？多页面需要动态改变网页的 title、描述、关键字网站内容注意：这里网站内容从哪里来是一个

2022-02-08 13:34:36 12264

原创 Git常用命令和 GitFlow工作流

Git常用命令和 GitFlow工作流什么是 Git ：分布式代码托管平台Git 分布式的理解：大家可以提交代码， (本地也有暂存区，即使断网了也可以运行git add . 和 git commit先提交到本地)。git常用命令git init 初始化仓库(生成.git文件夹--隐藏文件夹)git config -l 查看配置 (配置的用户名，邮箱、可以用来追溯是谁提交的代码)git status 查看状态 (标记为红色说明文件没有被git管理，需要把文件添加到暂存区，绿色说

2022-02-07 14:57:07 599

原创 HTML5 Plus 移动 App开发入门

HTML5 Plus 移动 App开发入门HTML5+扩展了 JavaScript 对象 plus，使得 js 可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。【定位】获取当前位置getCurrentPosition : 获取当前设备位置信息watchPosition : 监听设备位置变化信息clearWatch : 关闭监听设备位置信息<h1>当前位置：<span i

2022-02-07 14:54:59 1010

原创 uniapp初体验

1.组件view 类似于传统html中的div viewscroll-view 可滚动的区域 scroll-viewswiper 一般用于左右滑动或上下滑动，比如banner轮播图。swipertext 用于包裹文本内容 textimage 图片类似传统html的img标签 image2.生命周期应用生命周期应用生命周期函数名说明onLaunch当uni-app 初始化完成时触发（全局只触发一次）onShow当 uni-app 启动，或从后台进入前台显

2022-02-07 14:54:05 702

原创尚硅谷前端项目开发笔记

$ref $ children 和 $parent使用，通过props实现父向之传值时为什么传入数字也需要使用 v-bind 呢？解决使用vue-router跳转后不回顶部问题；使用编程时导航+事件委派的方式实现路由跳转；封装 axios,设置请求和响应拦截器；使用getters 数据控制台出现 undefined 红色警告；使用loadsh插件实现防抖和节流；使用 watch 侦听器 +this.$nextTick()；配置导航守卫；路由独享的守卫；本地存储与会话存储区别

2022-02-05 06:09:42 1827

原创在vuex中调用element的message的消息弹框

在vuex中调用element的message的消息弹框：我们首先在vuex中打印一下 this： GETUSERINFO(state, userInfo) { console.log(this) console.log(this._vm.__proto__) },可以看到 _vm 就是vue 的实例对象，所以我们可以直接使用： GETUSERINFO(state, userInfo) { this._vm.$message.success(data.msg) // 成

2022-02-03 00:16:32 1580

原创 uni-app使用 getUserInfo 报错 fail can only be invoked by user TAP gesture 解决方法

uni-app使用 getUserInfo 报错 fail can only be invoked by user TAP gesture 解决方法:在练习项目写微信登录获取微信用户信息时点击报错, 小程序弹窗也无法调用:"fail can only be invoked by user TAP gesture"失败只能由用户点击手势调用获取用户信息失败时无法弹出微信获取信息弹窗时的原代码:解决方式:第一种 :直接删除 open-type, 改成 @tap 事件 :<butto

2022-01-13 02:16:39 3882 1

原创前端开发周记 03

项目开发笔记一、 vue 路径的配置配置方法有很多种，不同编译器大同小异,详细配置网上很多。为了方便多次使用 ../../路径，我们需要在vue.config.js 配置 @ 代表src目录：let path = require("path");module.exports = { configureWebpack: (config) => { config.resolve = { extensions: ['. js', '. json', '. vue'],

2021-12-19 12:39:54 774

原创 JavaScript 函数防抖和节流

JavaScript 函数实现防抖和节流。

2021-12-09 15:37:02 644 2

原创 Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）

Vue 介绍什么是 vue ？构建用户界面用 vue 往 html 页面中填充数据，非常的方便框架框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！要学习 vue，就是在学习 vue 框架中规定的用法！vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！vue 的两个特性数据驱动视图：数据的变化会驱动视图自动更新好处：程序员只管把数据维护好，那么页面

2021-11-22 13:58:56 13215 6

原创用 m3u8 下载网页视频直接保存为 MP4

用 m3u8 下载网页视频直接保存为 MP4一、获取 m3u8 链接(1) 使用猫抓：因为浏览器安装 crx 插件无效，所以下载 Source code (zip)在视频页开启猫抓插件获取链接(2) 浏览器自带开发者调试工具F12 → 点击Network(网络) → ctrl + r 刷新页面 → 搜索m3u8 (类型一般是xhr)右击可复制下载地址，或双击链接浏览器就会自动下载注意：你在网页上选择了什么清晰度，获取的 m3u8 就是什么清晰度。（3）使用特殊书

2021-11-20 13:51:40 9806 2

原创 ES6模块化和异步编程

ES6模块化和异步编程为什么使用模块化？规范代码，降低沟通的成本，方便各个模块之间的相互调用，利人利己。回顾：Node.js 中如何实现模块化 :遵循 CommonJS 的模块化规范导入其它模块使用 require() 方法模块对外共享成员使用 module.exports 对象ES6 模块化规范中定义：每个 js 文件都是一个独立的模块导入其它模块成员使用 import 关键字向外共享模块成员使用 export 关键字在 node.js 中体验 ES6 模块化node.

2021-11-18 01:45:00 217 3

原创前端工程化

前端工程化什么是前端工程化？把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。好处：前端开发自成体系，有一套标准的开发方案和流程。模块化（js 的模块化、css 的模块化、资源的模块化）组件化（复用现有的 UI 结构、样式、行为）规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）自动化（自动化构建、自动部署、自动化测试)Wabpack概念：webpack 是前端项目工程化的具体解决方案它提供了友好的前端模块化开发支持，以及代码

2021-11-16 09:00:00 384 2

原创 HTML5+CSS3笔记 (黑马pink老师)

HTML头部文件解释：<!DOCTYPE html><html lang="en"> <head>  <meta charset="UTF-8" /> <!-- 设置浏览器优先使用什么模

2021-11-15 09:15:30 4176 2

原创 JavaScript 进阶面向对象ES6

ES6类的本质ES6之前 → 通过构造函数 + 原型实现面向对象编程构造函数有原型对象 prototypeprototype里有 constructor 指向构造函数本身可以通过原型对象添加方法创建实例对象有__proto__原型指向构造函数的原型对象类的本质class本质还是一个 function类的所有方法都定义在类的prototype属性上类创建的实例，里面也有__ proto __指向类的prototype原型对象class 写法只是让对象原型的写法更加清晰、更像

2021-09-28 03:16:43 506 4

原创 Scray和selenium的使用

文章目录Scrapy的流程解析Scrapy 中每个模块的具体作用Scrapy 使用步骤：定义爬取的字段名【示例】：爬取虎扑新闻第一页数据Xpath 获取数据的两种方法二次请求列表的拼接的两种方法保存到Mongo保存到Excel保存到Json文件scrapy自定义方法转换为json格式Request 对象重写中间键随机UA代理IP使用selenium 自动化爬虫文件调用浏览器和发起请求发起请求后的常用属性及方法：通过id获取元素通过class获取元素通过name获取元素通过xpath路径表达式来获取元素其他

2021-05-29 00:05:27 427 1

原创 Github+jsDelivr+PicGo 打造稳定快速高效免费图床

什么是图床？图床，也就是专门提供存储图片的地方，我们只要通过图床提供的 API 接口，把图片上传上去，就可以通过外链访问了，根本不用操心图片是怎么存的，硬盘空间不够了，硬盘坏了，访问速度比较慢等等问题，这些图床都会帮我们搞定，他们会用各种技术帮我们做图片相关的优化和服务，比如多机互备、CDN 加速、图片处理、图片鉴黄、文本识别等等。对于我们个人用户来说，要求也没那么高，图床已经完全能满足我们的需求了.前言GitHub图床是个不错的选择，利用jsDelivr CDN加速访问（jsDelivr 是一个免

2021-04-30 22:05:12 266 2

Ly