Nikki_u-优快云博客

原创 error An unexpected error occurred: “https://registry.npmmirror.com/rxjs/-/rxjs-7.5.7.tgz: ESOCKETTI

最终的解决方案是：更改默认的构建超时。缓慢的磁盘 I/O 会导致超时。

2023-08-31 19:24:06 752

原创 “npm安装”在node-gyp重建时失败，“gyp：未检测到Xcode或CLT版本！`

【代码】“npm安装”在node-gyp重建时失败，“gyp：未检测到Xcode或CLT版本！`

2022-11-08 11:52:16 491

原创 NavigationDuplicated: Avoided redundant navigation to current location

设置路由后出现这种报错原因：查了一下说是因为路由重复（具体细节不太清楚）解决办法：首先看自己是因为什么跳转方法报错：push/replace/back......在router.js下写入下列两串代码（如果是其他跳转方法，把replace换成相应方法，例如replace换成push）大概这个样子：...

2022-07-13 11:06:56 1701

原创前端配置环境和可能出现的问题

npm i -g npm1、npm install -g yarn2、yarn --version（显示版本号则安装成功）3、如果有无法加载情况，参考文档https://blog.youkuaiyun.com/qq_30376375/article/details/1161398701、npm install vue2、创建新的vue环境包_Nikki_u的博客-优快云博客3、如果出现报错解决技巧：没有安装vue/cli4、当创建vue项目时出现一下提示依次运行以下代码安装步骤Webpack安装教程_醋黄瓜的博客-C

2022-06-22 16:23:38 431

原创怎么实现从A界面跳转到B界面，返回A界面会保留之前的状态

首先说解决方案，非常简单。使用keep-alive就可以了。第一步：在需要缓存的页面路由里面的meta属性里写上keepAlive：true。第二步：在路由出口，把需要缓存的用keep-alive进行包裹；把不需要缓存的写在keep-alive外面这里判断需不需要缓存就是用的路由里面的keepAlive......

2022-06-07 22:24:23 2284

原创 delTodo(id: number): RootThunkAction import delTodo 类型“RootThunkAction”的参数不能赋给类型“AnyAction”

(alias) delTodo(id: number): RootThunkAction import delTodo 类型“RootThunkAction”的参数不能赋给类型“AnyAction”的参数。类型 "RootThunkAction" 中缺少属性 "type"，但类型 "AnyAction" 中需要该属性

2022-06-05 16:02:23 822

原创 React路由react-router-dom

一、点击切换路由import { useEffect, useState } from "react";import CartFooter from "./components/GoodsItem";import CartHeader from "./components/GoodsItem";import GoodsItem from "./components/GoodsItem";const Parent = () => { const [path, setPath] = u

2022-05-31 11:30:20 432

原创 TS基础和类型注解

TS是type+javascript(为js提供了数据类型支持)一、什么是ts1、写代码的同时可以发现错误，减少找bug、改bug时间，提升开发效率2、程序中任何位置的代码都有代码提示3、代码的可维护性，使得重构代码更容易4、支持ECMAScript语法，优先体验最新的语法最新技术栈：React：TS+HooksVue：TS+Vue3二、安装编译TS的工具包npm i -g typescriptyarn global add typescript三、简化运行T

2022-05-31 11:29:07 4372

原创使用react进行项目开发

一、项目初始化1、创建项目npx create-react-app react-basic2、清理项目目录，根据模板搭建基本页面结构3、安装sass包 yarn add sass4、安装bootstrap包 yarn add bootstrap@4.5.0 ,导入bootstrap样式文件5、配置Redux基本配置 yarn add redux@36、如果碰到项目报错或不兼容可能需要降版本yarn add react@17.0.2 react-dom@17.0.2 --sa

2022-05-31 11:21:41 825 1

原创 redux中间件

1、为什么需要中间件默认情况下，redux只能处理同步数据流。但是实际项目开发中，状态的更新、获取、通常是使用异步操作来实现的。2、redux中间件的作用：处理具有副作用的功能，比如，异步操作就是常见的side effect3、中间件的理解：中间件，可以理解为处理一个功能的中间环节。Redux中间件用来处理状态更新，也就是在状态更新的过程中，执行一系列操作。一、redux-logger中间件（如果使用了中间件，logger应该放在最后）1、安装yarn add redux-log

2022-05-31 11:14:45 807

原创 react类组件

点击切换文字//不能直接修改状态需要借助React.Component父类的setStateclass MyComponent extends React.Component{//** constructor(props){ super(props)//** this.state={isHot:false} this.change=this.change.bind(this)//** } render(){

2022-05-31 10:59:45 143

原创 react-Redux

使用React CLI来创建项目，并安装Redux包即可1、创建React项目：npx create-react-app redux-basic2、启动项目：yarn start3、安装Redux包：yarn add redux@3一、redux核心概念action1、什么是action描述要做的事情，项目中的每一个功能都是一个 action// 计数器案例{ type： 'increment' } // +1{ type： 'decrement' } // -1//

2022-05-31 10:57:16 299

原创 react-Hooks

Hooks：钩子，是React16.8中的新功能Hooks作用：1、组件的逻辑状态复用（1）在Hooks之前，组件的状态逻辑复用经历了：mixins（混入）、HOCs（高阶组件）、render-props等模式（2）（早已废弃）mixins的问题：数据来源不清晰、命名冲突（3）HOCs（高阶组件）、render-props的问题：重构组件结构，导致组件形成jsx嵌套地狱问题2、class组件自身问题（1）选择：函数组件和class组件之间的区别以及使用（2）需要理解class

2022-05-30 11:21:58 273

原创 json-server接口和 setState

yarn add axiosnpx json-server ./data.json --port 8888 --watchdata-json写入数据import { Component } from "react";import axios from "axios";const http=axios.create({ baseURL:'http://localhost:8888'})class Parent extends Component{ state={

2022-05-30 11:16:42 252

原创 react生命周期

组件生命周期-挂载阶段执行时机：组件创建时（页面加载时）constructor-创建组件时，最先执行-作用：1、初始化state 2、创建ref 3、使用bind解决this指向问题render-每次组件渲染都会触发-作用：渲染UI（注意：在render内部不能调用setState()）**componentDidMount-组挂载后（DOM渲染完成）-作用：1、发送网络请求 2、DOM操作组件生命周期-更新阶段执行时机：1、setState() 2、forceUpdate() 3.

2022-05-30 11:14:55 1241

原创 react--props校验

之后可以使用flow或TypeScript对整个应用程序做全局检查。1、安装属性校验包yarn add prop-types2、导入prop-types包import PropTypes from 'prop-types'3、使用使用场景一：为函数添加propTypes校验使用组件名.prop-types={}来给组件List的props添加校验规则为组件添加propTypes，并通过PropTypes对象来指定属性的类型List.propTypes={ color:

2022-05-30 11:12:14 472

原创 react组件通信

因为组件数据默认自身才能使用，要实现组件的数据共享，就需要组件通信import { Component } from "react";// 给函数组件通信const Home= (props)=>{ console.log(props);/////////////接收数据 return <div>Home组件-</div>}class Home1 extends Component{ render(){ console.

2022-05-30 10:17:14 130

原创 react脚手架及使用JSX书写react

1、创建项目npx create-react-app@5 react-basic//////因为降版本了2、启动项目yarn start/npm start3、使用导入react reactDOM包降版本yarn add react@17.0.2 react-dom@17.0.2 --save4、小案例4.1className4.2ul/liimport React from "react";import ReactDOM from 'react-dom'

2022-05-30 10:12:08 250

原创受控组件、非受控组件、柯里化

原则：先使用操作状态，实在不行才操作DOM，先推荐使用受控组件一、受控组件文本框输入内容后会触发文本框发的change事件调用setState后状态会更新同时组件重新渲染render多次调用拿到最新文本框的值并且最终把最新的文本框值渲染到页面中import { Component } from 'react'import ReactDOM from 'react-dom'class Person extends Component { state = {

2022-05-30 10:10:12 135

原创 react三大核心属性

react三大核心属性之state1、state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）2、组件被称为“状态机”，通过更新组件的state来对应更多的页面显示（重新渲染组件）3、react核心理念状态不可变（专业！！）class MyComponent extends React.Component{ constructor(props){ super(props) this.state={isHot:false}

2022-05-30 10:06:20 530

原创 react模块化及类组件

//<MyComponent/>由babel翻译自动调用函数MyComponent()//babel翻译时自动开启严格模式严格模式自动禁止把this指向window 这时this指向的是undefined<script type="text/babel"> function MyComponent(){ console.log(this);//undefined return <h1>我是h1</h1>

2022-05-30 09:58:55 432

原创 react与虚拟DOM、JSX

1、采用组件化模式、声明式编码，提高开发效率及组件复用率2、在React Native中可以使用React语法进行移动端开发3、使用虚拟DOM+diff算法，减少与真实Dom的交互用虚拟dom操作页面<div id="test"></div><script src="../js//react.development.js"></script>&l

2022-05-30 09:55:51 157

原创 [rejected] master -＞ master (fetch first) failed to push some refs to 报错

cannot lock ref 'refs/heads/master': is at 8729f84ffffcba013e74c88e but expected d674d2eb3b6c33bdae9d8To 'gti仓库地址'! [remote rejected] master -> master (failed to update ref)error: failed to push some refs to在上传git时出现这个报错一般来说是因为修改了readme.md之后.

2022-05-19 15:07:05 459

原创 JS内置对象和数组方法

Math数学对象--内置对象一、圆周率Math.PI二、最大最小值2.1最大值Math.max(1,2,3,4)//42.2最小值Math.min(1,2,3,4)三、绝对值方法Math.abs() //有隐式转换四、三个取整方法4.1向下取整Math.floor(1.1)//1Math.floor(1.9)//14.2向上取整Math.ceil(1.1)//2Math.ceil(1.9)//24.3四舍五入Math.rou

2022-05-04 19:00:00 427

原创 JS高级部分回顾

1、面向对象面向过程面向过程是分析出解决问题所需要的步骤，案后一步一步解决。面向对象是把事情分成一个一个对象，对象之间分工合作实现需求。三个特性：继承性、封装性、多态性。2、严格模式（1）严格模式下全局作用域中函数的this是undefined（2）在全局作用域函数中this指向window对象（3）以前构造函数时不加new也可以调用，当普通函数，this指向全局对象（4）严格模式下，如果构造函数不加new调用，this会报错（5）new实例化的构造函数指向创建的对象实例

2022-05-04 18:55:14 324

原创 vue根据vue-admin-template封装导出excel数据文件组件

（1）由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。先需要安装如下命令npm install xlsx file-saver -Snpm install script-loader -S -D（2）导出表格地址https://github.com/PanJiaChen/vue-element-admin/blob/master/src/vendor/Export2Excel.js（3）路由懒加载懒加载：访问到当前的路由

2022-05-04 09:02:06 627

原创 JS自定义数组方法（简单运算类）

一、自定义forEachArray.prototype.myForEach = function(callback) { for(let i=0;i<this.length;i++){ callback(this[i],i,this) }}const arr1=[1,2,3]arr1.myForEach((item, index,data)=>{ console.log(item) console.log(index) console.log

2022-04-30 14:56:13 983

原创设置时间过滤器、全局注册导入组件

过滤器1、事件过滤器方法2、main.js全局引入过滤器// 批量引入过滤器import * as filters from '@/filters/index'for (const filterKey in filters) { Vue.filter(filterKey, filters[filterKey])}使用时间过滤器<el-table-column label="入职时间" prop="timeOfEntry"> <template v-sl

2022-04-30 10:10:26 109

原创 vue根据vue-admin-template封装导入excel数据文件组件

1、封装导入excel数据文件组件npm i xlsx2、vue-admin-template封装的传入文件组件，地址：https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/UploadExcel/index.vue3、全局导入组件component/index.jsimport PageTools from './PageTools'import UploadExcel from '

2022-04-30 10:06:34 771

原创 webpack里面的loader和plugin的区别？

1、loader--输入到输出的转换解析js以外的文件test是需要转换的文件use是从右往左进行文件转换2、plugin

2022-04-27 20:00:03 191

原创 JS实例、静态的属性和方法

在react类的props校验中，需要用到静态属性进行校验，这里总结了实例和静态属性及方法的不同class List { name = '实例属性' look = () => { console.log('实例方法'); } static hh = 'static属性' static see = () => { console.log('static方法'); }}const lis = new List

2022-04-27 10:41:20 1656

原创 git快速创建多个文件夹和文件

小目标：创建多个文件夹1、首先切换到想要创建文件夹的位置，点击右键，git Bash Here打开终端，输入下面一串$ mkdir departments employees setting salarys social attendances approvals permission就可以看到文件夹了2、在上面相同的终端，输入以下touch departments/index.vue employees/index.vue setting/index.vue salarys/in

2022-04-26 23:17:39 2865

原创 vue判断插槽有无进行显示隐藏、row属性

一、根据插槽有无的情况，显示图标v-if="$slots.before" mounted() { console.log(this.$slots) }二、row属性1、通过row拿到当前结构渲染的数据1.1循环渲染data数据<el-table :data="[{ name: '88' }, { name: '99' }, { name: '11' }]">1.2v-slot拿到obj对象，其下有一个row属性，该属性表示当前结构渲染的所有数据

2022-04-26 19:00:14 7113

原创使用vue插件注册通用组件

这里想要实现的效果是：注册一个全局通用组件，可以直接使用1、首先创建一个js文件，导入所有的通用组件然后进行注册// 使用vue插件的形式进行注册// 如果说想提供一个插件，供vue.use使用// 提供的插件必须是一个对象或者一个函数// 如果是一个对象的时候必须提供install方法import PageTools from '@/components/PageTools/index.vue'//组件// 方法一：提供一个插件export default { install

2022-04-26 16:03:16 386

原创 JS深拷贝--用map方法

function deepCopy(data) { const map = new Map() // 键可以是一个对象 function dp(data) { const existObj = map.get(data) // 看一下当前需要处理的数据是否已经被处理过(只要处理过了，都会通过map缓存起来) if (existObj) { // 已经被处理过了，第二次见到这个对象了(相同的引用的地址) // 只要返回上次处理之后的结果 .

2022-04-24 11:09:25 3598

原创通用的检测数据类型方法

1、instanceof2、typeof3、object原型链上的toString方法const a = {}const b = {}const c = {}b[a] = 1b[c] = 2console.log(b[a]) //2console.log(Object.prototype.toString.call(this)) //[object Object]console.log(a.toString()) //[object Object]const fn =

2022-04-24 11:05:10 125

原创 vue表单数据回显

现在需要实现的功能是：1、子组件点击编辑按钮2、传入父组件实现编辑功能3、在弹出层中根据点击的id回显对应的数据编辑回显treeTools.vue当点击编辑按钮，触发父的编辑事件，传入数据this.$emit('editDpts', this.treeData)index.vue<TreeTool :tree-data="data" @addChangeDepart="addChangeDepart" @getDpts="getDpts" @ed

2022-04-23 12:21:25 8417 3

原创 vue表单数据提交

如何提交表单数据：//1、首先验证表单，true则可以通过，false不能通过//2、写接口提交表单数据//3、关闭弹窗//4、让数据立即显示在页面上// 1、await this.$refs.formRef.validate()// 2、try { await addDepartment({ ...this.formData, pid: this.treeNode.id }) Message.success('添加部门成功')// 3、

2022-04-23 12:15:00 1287

原创 refresh无感刷新

处理token失效问题tokenrefresh_tokenrequest.interceptors.response.use( response => { // 成功的 return response }, async error => { // 对响应错误做点什么 //1 token 问题 // 失效 ? 没有token ? if (error.response.status === 401) { //

2022-04-18 10:58:37 293

原创跨域及相关知识点

跨域请求会到达服务器端，浏览器自己拦截了非同源的请求数据，服务器之间没有跨域什么样的情况下出现跨域1、协议http/https/file2、域名不一样3、端口号不一样http:默认80https:默认443解决跨域1、cors 使用比较多后端给添加跨域的响应2、jsonp 实际使用不多局限多3、代理propxy生产环境：部署前端页面域名和接口服务器域名的地址不一样不会出现跨域问题开发环境：前端域名是localhost 会出现跨域问题具体代码vue

2022-04-17 23:52:42 407

空空如也

空空如也