qianlingvip-CSDN博客

原创 react路由拦截（路由守卫）

最近在做项目时候，遇到了返回时候如果用户没有保存表单，需要拦截路由跳转，并给出提示信息是否要退出。相信做过vue项目的小伙伴都对vue的路由守卫并不陌生，react中如何实现呢？

2022-10-21 19:00:32 12928 1

原创小程序和h5通信

随着HTML5兴起，其独特的新特性，完全能够满足app开发需求，并且，相比于原生更容易入门，缩短开发周期，现在很少有纯原生的APP。

2022-07-25 11:14:36 5774

react18-ssr一、服务端渲染我们的页面DOM结构由服务端产生的，就是服务端渲染。const express = require("express");const app = express();app.get("/", (req, res) => { res.send("<html><body><h2>hello</h2></body></html>");});app.listen(8300, ()

2022-04-22 19:29:20 2069

原创 react18新特性

前言：最近在忙于项目，又接了一个谷歌浏览器插件开发的任务，一直没有时间看新的技术更新，突然发现react已经更新到了18，随着react18正式版本发布，我们可以使用新版带来的新特性，快来一起看看都提供了哪些新的特性供我们使用吧。注意：学习用例使用vite + react18搭建项目一、初始化项目1、初始化一个项目npm init -y2、安装react和react-domnpm install react react-dom --save3、安装vite和可以react热更新的@vi.

2022-04-21 23:33:34 4510

原创初探Web Components

原生组件封装

2022-03-30 16:12:20 1318

原创前端开发cli知识汇总

命令行开发该学习笔记主要记录从零基础完成一个前端工具cli的开发，开发一个cli大致需要几步，输出版本号，加入一些命令行，拉代码，完成。下面逐一了解开发工具。一、命令行工具 commander使用1、输出版本号const program = require("commander");// 通过version定义版本号program.version('1.0.0');// parse方法用来解析命令行中传入的参数program.parse(process.argv);也可以借助chalk字

2021-09-06 14:34:25 990

原创 react项目启动时候，显示启动进度条

前言：当我们做一个新的react项目时候，安装插件越多，启动越慢。如果没有一个进度条来显示目前项目启动进度，没有目的地等待是很让人着急的。因此，使用webpack进度显示插件非常有必要，下面就介绍两种常用的插件。1、webpack-progress-ora-plugin相信做过cli的人都比较熟悉ora插件，可以友好的提示cli进度以及当前所处的节点信息。webpack-progress-ora-plugin插件则是专门用来显示webpack编译进度的。1.1、安装npm install webpa

2021-09-04 09:46:42 938 1

原创 forwardRef解决封装组件无法传递ref的问题

前言：有时候我们封装一个组件，组件中需要使用父级传进来ref属性，来做一些事情，然而，简单通过props.ref是无法获取传递过来的ref属性的，怎么办呢？组件中又使用hoc进行了包裹，这时候传递ref作为属性传值能传递过来吗？场景重现：import { useRef, useState } from "react";const MyInput = (props) => { console.log(props.ref, 'ref') // undefined return ( &

2021-08-17 11:24:16 4667 1

原创 js的函数组合

一、组合简介1、需求场景我们需要将函数a的返回结果作为b的参数，然后将b的返回值作为c的参数： function a(number) { return number + 1; } function b(number) { return number + 2; } function c(number) { return number + 3; } console.log(c(b(a('a')))); //a1232、

2021-07-31 22:04:09 563

原创使用react-three-fiber加载glb格式3D文件，并播放3D模型自带动画

一、react-three-fiber简介使用可重用、自包含的组件以声明方式构建您的场景，这些组件对状态做出反应、易于交互并且可以利用 React 的生态系统。没有任何限制，一切工作在three.js这里将无一例外地工作。生态完善。二、安装npm install three @react-three/fiber三、基础语法1、创建场景import { Canvas } from '@react-three/fiber'export default function App() {

2021-06-21 18:04:10 5652 4

原创前端使用jest做单元测试

一、单元测试1、安装jest库npm install jest -g2、使用首先加入目录结构如下：同文件夹下有一个index.js文件，还有一个__test__文件夹，__test__文件夹中有一个名为index.spec.js的测试文件，如下图所示：测试文件命名规则是前边要与测试文件名相同。index.js内容const hello = 'hello world';console.log(hello);module.exports=hello;index.spec.js文件

2021-05-27 17:18:52 747

原创在react hooks中使用mobx

一、定义store创建文件名为mobxStore的js文件import { observable, action, computed, decorate } from 'mobx';class MyStore { queryLoading = false; releaseLoading = false; tableList = []; setQeuryLoading(status) { this.queryLoading = status; } setRel

2021-04-23 16:39:09 2407

原创前端实现水平垂直居中几种方法总结

以下所有实例都是基于这种DOM结构完成的 <div class="box"> <div class="son">12</div> </div>1、使用position: absolute实现 .box{ height: 100vh; width: 100vw; position: relative; } .box .son{ width: 20%; height:

2021-04-15 15:28:01 696

原创构造函数返回值问题

1、请问p.name是：var fun = function(){ this.name = 'ling'; return { name: 'ge' };}var p = new fun();考察的是构造函数的返回值的问题，每个函数都有返回值，如果使用了return语句，则返回return后跟的值，如果没有使用return，则默认返回undefined.特别的，如果这个函数是构造函数，则默认返回this对象，如果构造函数内使用了return语句，并且retur

2021-04-08 14:11:54 1691

原创 mobx学习笔记

一、相关知识补充1、什么是decoratordecorator是在声明阶段实现类和类成员注解的一种语法。2、decorator修饰类decorator有一个参数target，代表被修饰的类。例如：在调用add方法前后打印东西，可以写一个类修饰器。function log(target){ const desc=Object.getOwnPropertyDescriptors(target.prototype);// 获取自身的所有属性描述，背后的赋值方法或者取值方法一同拷贝过来。转成对

2021-04-03 17:03:45 323

原创从输入url到看到页面经历了什么？

一、url解析1、地址解析https://www.baidu.com:80/game/index.html？name=“ling”#video协议： https，http，ftp。https协议，ssL加密。FTP传输一些大文件域名端口号：0-65535之间。http默认端口号默认是80，https默认端口号是443，ftp默认端口号是21请求资源路径：index.html查询参数：问号后东西哈希值： #后东西，可以利用哈希跨域2、编码对于有些域名参数中还有url，这样就会在解析时候出现

2021-04-02 10:34:37 142

原创前端跨域总结

跨域（1）跨域存在的意义：前后端分离服务器分离，数据服务，图片服务，web服务。云信息共享，第三方接口。跨域是浏览器对ajax安全的限制。（2）、解决跨域方法修改本地host，本地默认是127.0.0.1：8080。如果，修改为和求情后端地址相同则，将会欺骗浏览器，越过拦截。dns预解析会先找本地，然后，才找线上dns服务器，因此，可以本地配置host，就是本地的dns。http://www.baidu.com/api:8081 127.0.0.1:3000随着项目越来越大，

2021-03-26 23:19:19 218

原创 ajax基于promise简单封装

function myAajx(option={}) {const defaults = {url: “”,method: “get”,data: null,};option=Object.assign(defaults, option);option.data=queryString.stringify(option.data); // x-www-fromlet isGet=/^(GET|DELETE|OPTIONS|HEAD)/i.test(option.method);if(isG

2021-03-26 22:14:21 129

原创前端遍历对比

1、for与forEachfor循环是自己控制循环过程。使用var声明变量时候，for和while循环性能差不多，不确定循环此时时候，建议使用while来处理。使用let声明变量时候，for循环性能要比while循环性能好。原理是没有创建全局不释放的变量。forEach是es6新增的用来遍历数组方法，它的性能要比for差很多。命令式编程和函数式编程：命令式编程是可以控制整个过程，break和continue都可以使用，受自己控制。函数式编程注重结果，执行过程被内部封装，只需要调用即可，使用起来

2021-03-20 13:07:26 440

原创前端this指向问题总结

1、this的五种情况分析（this是执行主题，就是谁把他执行的，和在哪创建在哪执行都没关系）函数执行：看方法执前边是否有点，如果没有点指向window（严格模式下指向undefined）。有点，点前边是谁，this就指向谁。const fn=function func(){ console.log(this);}const obj={ name: 'ling', fn:fn,}fn();// this是windowobj.fn();// this是obj给某

2021-03-20 13:05:37 301

原创前端使用input上传文件本地预览

当我们需要使用input的file做图片上传时候，想要看一下上传的图片，该如何实现呢？具体实现有两种方法1、使用readAsDataURLfunction handleChange() { const myFile = document.querySelector("input[type=file]").files[0]; const img = new Image(); const reader = new FileReader(); // 读取文件资源 if (my

2021-03-12 16:14:23 770 1

原创 react实现复制input输入框内容到粘贴板

整体流程分为如下几步：1、创建新的input输入框2、设置新创建输入框value为需要复制的文本3、将新创建input输入框添加到body里。4、选择中该input区域文本内容5、使用document.execCommand(‘copy’)将文本内容复制到粘贴板6、成功之后移除新创建的input输入框，复制完成。import "./App.css";import {useRef} from 'react';function App() { const myInput=useRef(nu

2021-02-26 15:48:38 1134

原创前端打印踩坑小记

** 提起来前端打印，不得不说api太少了。可供参考的东西也是很少，我在项目上做前端打印有一年多时间，将打印遇到问题总结如下**打印插件选择react项目建议使用react-to-print插件，也可以使用从插件中提炼出来的如下方法；import { findDOMNode } from 'react-dom';// import { delay } from 'core-js';const printElement = (options) => { const { con

2021-02-03 15:43:07 1275

原创 linux系统使用ssh拉取gitLab代码

1、进入.ssh文件夹cd ~/.ssh2、查看该文件夹下是否存在存在id_rsa.pub文件ls 3、如果没有，则执行命令创建ssh-keygen4、创建完成后复制id_rsa.pub内容，复制到gitLab里settings----->ssh Keys里新加进入，然后，再用ssh拉代码就不用输入密码了。...

2020-12-22 19:18:31 2038

原创如何在vue3中使用aframe

随着互联网的发展，现在浏览器已经能够很好的加载3D文件了，提起3D我们首先想到是webGL，使用threejs来绘制3D图形。然而原生的threejs使用起来比较的繁琐，相机，场景，纹理，光线，集合体好多概念，用来的不是太友好。aframe可以使用标签来写3D场景，像使用html标签一样。aframe对threejs做了封装，这样，我们使用aframe就可以简单快捷的来实现我们想要的3D效果，那么，如何在vue3中使用aframe呢？首先，你要使用vite-app来创建一个vue3项目，根据提示下载依.

2020-11-23 17:44:00 2968 1

原创不是通过路由切换过来的组件中，如何在props中获取history

withRouter作用首先，我们需要知道withRouter作用，把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上。在下边例子中如果不通过withRouter函数props中没有history对象。withRouter使用方式：首先要引入import { withRouter } from 'react-router-dom';将不是通过路由切换过来的组件，但是又需要获取history对象组件通过w

2020-10-08 15:21:19 1022

原创 vue3项目中如何使用less来写样式

首先安装vue3项目可以使用create-vite-app来初始化vue3项目npm install -g create-vite-app安装完成后使用如下命令初始化项目名为vite-demo项目create-vite-app vite-demo之后进入到项目中cd vite-demo执行yarn进行初始化，执行yarn dev启动项目yarnyarn dev此时项目已经启动，但是我们想用less预编译工具进行写样式，测试可以先停掉项目，执行如下命令进行安装less和less-lo

2020-09-17 11:13:49 18610 1

原创 react的portals传送门实现模态框

引言：有时候我们需要使用某个组件不是按照正常的层级来显示，比如，我们在一个左侧为菜单，右侧为功能的系统里使用弹出框（类似于antdPro），如果弹出框按照层级展示在功能里，他的位置就会显得有些奇怪，我们想要的是弹出框在整个屏幕中间弹出来，而不是在功能里中心位置展示。想要实现这个需求，必须打破常规。将弹出框在body中展示，这样弹出框和#root是同级的，就不再受左侧菜单的制约。代码实现传送门组件import React, { Component } from "react";import { c

2020-09-07 17:23:44 369

原创 typeScript简单入门

ts不能赋值为原来已有的数据类型为其它数据类型。1、ts类型转换首先使用在项目中使用ts是需要配置的，具体怎么配置这里不做讲解。2、live serve插件，能实时刷新本地文件修改，并自动刷新浏览器。3、TS中基本数据类型：number数值类型，let num=5;等同于let num:number=5;boolean 布尔类型，let isLogin=false;等同于let isLogin:boolean=false。string字符串，let name=“hello”;等

2020-07-09 16:11:54 239

原创 react实现路由懒加载（异步组件）

正如标题，我最近在做一个项目在打包完成后发现chunk.js问价比较大，导致打开首页需要时间比较久，因此，需要进行优化。其实仔细考虑一下不难发现，由于打包后将所有资源都打包到了一个chunk.js下，导致所有资源都一起加载了，所以，进入页面会很慢。咱们的预期目标是进入首页只加载首页的资源，进入详情页至加载详情页的资源。那么，react-loadeable是你不错的选择。1、首先，要想使用它需要先安装它。yarn add react-loadable根据npm官网找到react-loadeable完

2020-07-07 13:52:53 4059

空空如也

空空如也