weixin_45226867的博客

原创 create-react-app项目中public文件夹中的资源调用

create-react-app项目中public文件夹中的资源调用

原创 关于Mysql更改密码报错 ERROR 1064 (42000)

问题：ERROR 1064 (42000): You have an error in your SQL syntax;在之前我刚下载完MySQL后，root默认密码为空，现在还需要查询log找到密码才能登陆。之前都是这里就基本更新好了密码，现在直接报错。后面发现这破东西指令又变了！: 后面为初始密码。

原创 nextjs 打包 run build报错问题

npm run build后终端报错打包失败：`panicked at 'The global thread pool has not been initialized.`解决：问题看不懂来源，我直接把 node_modules文件夹整个删掉；

原创 nodejs关于数据库mysql中断连接问题解决

在我开发nodejs写后台接口连接数据库时碰到一个问题，在我长时间没有链接数据库出现了一个问题：Error: Connection lost: The server closed the connection.在原先基础上加一个链接失败的重连处理机制，这样每次链接失败后都会重连，上代码。

原创 nextJs引用第三方组件问题解决方案

在正常的react项目中是完全可以的，但是我在nextJs中使用时就出现如下错误：ReferenceError: Element is not defined。当我打算使用富文本插件时，最开始使用方式是跟react项目常规使用方式一致直接import进来当作组件使用，如下。网上找解决办法吧，最后根据网上信息自己摸索出一套解决方案，开搞！作为一个第一次使用nextJs小白来说 当时给我整不会了。以上全部解决步骤，运行结果正常。...

原创 前端跨越问题

作为一个前端，首先碰到前端跨域访问限制问题，首先就要想到：找后端！如果你是自己开发的后端，已nodejs为为例子。主要就是请求头携带两个重要的配置。中间件推荐 cors。

原创 react router V5版本 的BrowserRouter，Link跳转不刷新问题

代码】react router V5版本 的BrowserRouter，Link跳转不刷新问题。

原创 AbortController-中止请求

控制器+信号机动满足AbortController和AbortSignal：const controller = new AbortController();const signal = controller.signal;控制器只有一种方法：controller.abort();当你这样做时，它会通知信号：signal.addEventListener('abort', () => { // Logs true: console.log(signal.abo

原创 vscode 配置代码块 快速开发

vscode - 首选项 - 用户代码片段 （用户片段）选择要作用的语言类型或者全局配置进入json文件配置文件简述scope：作用文件类型。就是代码块的作用文件类型，这里我们可以指定文件类型，多种类型之间用逗号隔开，比如如果指定作用范围类型"css, javascript" 那么这个代码块只能在这两种类型的文件中起作用。如果值为空，或者是不写这个属性，默认所有类型文件都支持该代码块。prefix：触发代码块的字符串。写代码的时候我们只需敲出这个字符串就会触发我们的代码块。body：代码块.

原创 vscode保存自动格式化配置

找到配置文件 文件 > 首选项 > 设置 找到settings.json文件在settings.json的[用户]下添加如下语句:“editor.formatOnType”:true,“editor.formatOnSave”:true保存即可

原创 Antd组件Select中optionFilterProp=“children“问题及解决方案

今天在应用到Select组件时碰到这样一个问题：select利用onSearch进行模糊查询（后端），后端给过来的内容不含有onsearch的value值然后会不展示，组件自动给进行了一层筛选，看图在这里插入图片描述后台数据：后台数据是不止俩条的，组件做了自动筛选，这并不是要的结果，起初我想着将optionFilterProp="children"属性注释掉，结果出现另一个问题：以上即是我碰到的问题，后面去官网找办法发现optionFilterProp还有一个属性“label”，完美的解决

原创 webpack5打包静态html中img标签引入图片不显示问题

module配置 { // 处理图片资源 // 夏泽俩个包url-loader file-load,url-loader依赖file-loader test:/\.(jpg|png|gif)$/, loader:"url-loader", // 配置 options:{

原创 less伪选择器及伪类选择器操作

return ( <div className={styles.home_box}> <div className={styles.home_Item}> <div className={styles.home_task} onClick={this.JumpTo.bind(this, "/fireworks")}> 烟花效果

原创 less/sass中属性选择器使用方法

<div className={styles.box}> <span index="2" mylabel="hello some">test</span></div>.box{ [index="2"]{ //表示该index属性为2 color:red; } [mylabel~="some"]{ //~表示该mytabel属性包含有some font-size:26px; }}...

原创 react-下载/导出excel-按钮组件封装案例

原创 git stash关于代码中bug的查找使用

基本使用stash命令可用于临时保存和回复修改，可跨分支。注：在未add之前才能执行stash！！！！git stash会把所有未提交的修改（包括暂存的和非暂存的）都保存起来，用于后续恢复当前工作目录。比如下面的中间状态，通过git stash命令推送一个新的储藏，当前的工作目录就干净了。git stash pop恢复，num是可选项，通过git stash list可查看具体值。只能恢复一次git stash apply stash@{num}恢复，num是可选项，通过g

原创 react 中父子双向传值props为整个父组件方法

思路：利用props将父元素整个组件传给子组件，这样就可以获取到父组件的state和处理函数，再让子组件通过函数传参方式将子组件状态值传给父组件父组件father.js：import React, { Component } from "react";import Children from "./Children"export default class Father extends Component { state = { pData:"父亲变量", }; // 处理函

原创 less文件中nth-child()的使用方法

首先定义一些html元素<div> <span>1</span> <span>2</span> <span>123</span></div>然后在less文件中这样用nth-childdiv{ &>span:nth-child(2){ color:red; //&表示父元素，这样就选中了第二个span标签 }}...

原创 react中鼠标右击展示自定义菜单栏

首先在元素中定义一个右击事件,注意在react中用refs来定义样式，这样不会因元素渲染而导致菜单栏展示延迟过长：render(){return( <div> <button onMouseUp={this.rigClick}>右击展示自定义菜单栏</button> <div ref="menu" style={{ position: "absolute", width: 100, height: 200,display:"none"}

原创 vue-touch手势事件

下载依赖npm install --save vue-touch@nextvue调用 var VueTouch=require('vue-touch') Vue.use(VueTouch,{name:'v-touch'})将想要手势操控的块用包裹起来 <!-- 左滑事件 --> <v-touch v-on:swipeleft="onSwipeLeft"> <div>这里是需要有手势事件的块</div> </v-touch>

原创 微信小程序request封装

增加功能：新建一个request.js文件：export const request=(params)=>{ return new Promise(function(resolve,reject){ /* 添加遮罩层 */ wx.showLoading({ title:"正在加载。。。", mask:true }) wx.request({ url:'general-url'+params.url, data:{

原创 better-scroll列表滚动优化

下载插件npm install --save better-scrollhtml<div class="scrollbox"> <ul class="scrollbody"></ul></div>css容器的高度一定要小于滚动内容的高度.scrollbox{ height: 500px; overflow: hidden;//不能是auto或者scroll po

原创 性能优化-可视区域渲染react-virtualized

react-virtualized 是流行的 “windowing” (开窗口) 库。它们提供了多个可重用组件，用于显示列表，网格和表格化数据。首先下载一下依赖包yarn add react-virtualized案例如下：import React, { Component } from "react";/* 1. 引入List组件 */import { List } from "react-virtualized";class App extends Component { /* 2.

原创 Vue中反向代理配置

创建脚手架项目$vue create myapp$cd myapp在根目录下创建vue.config.js文件并添加以下代码module.exports = { devServer: { /*凡是以 /api 开头的请求全部拦截下来代理到*<url>服务器/ proxy: { '/api': { target: '<url>', changeOrigin: true }, /*凡是以

原创 Vue中Swiper的初始化

1、引入插件 <script src="vue.js"></script> <link rel="stylesheet" href="swiper.css"> <script src="swiper.js"></script>2、初始化注意在mounted里初始化时，初始化会出现过早情况，达不到功能；可在updated生命周期中初始化，但是每次更新都将会初始化一次，只是暂时解决；我们可自行封装一个轮播图组件，让后再给组件一个k

原创 Error: Node Sass version 5.0.0 is incompatible with ^4.0问题解决

两步解决npm uninstall node-sassnpm install [email protected]

原创 高度塌陷的解决方法以及如何触发BFC

解决高度塌陷：hack1：给父元素添加声明overflow:hidden;(触发一个BFC)hack2:在浮动元素下方添加空div,并给该元素添加声明：div{clear:both; height:0; overflow:hidden;}hack3:万能清除浮动法选择符:after{content:"";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} IE8及以下无效；触发BFCfloat属性不为non

转载 css的一些兼容性

*通用选择器兼容的浏览器有IE6+，Firefox,Chrome，Safari和Opera;ID选择器兼容的浏览器有IE6+，Firefox,Chrome，Safari和Opera;类选择器兼容的浏览器有IE6+，Firefox,Chrome，Safari和Opera;XY型标签选择器兼容的浏览器有IE6+，Firefox,Chrome，Safari和Opera;X型标签选择器兼容的浏览器有IE6+，Firefox,Chrome，Safari和Opera;X+Y型毗邻元素选..