自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

1234Wu--Blog

前端小本本

  • 博客(113)
  • 资源 (1)
  • 论坛 (7)
  • 收藏
  • 关注

原创 umi Cannot find module ‘antd-mobile/es/button/style‘

用UMI创建React项目之后引入ant-mobile报错找不到样式文件说:官方给了解决方法:如果你的项目中依赖了 @umijs/preset-react (可以在 package.json 文件中看到),那么请把它升级到最新版如果你的项目中依赖了 @umijs/plugin-antd (可以在 package.json 文件中看到),那么请把它升级到最新版如果你的项目中上述两个 npm 包都没有依赖,那么可以安装最新版的 @umijs/plugin-antd-mobile 插件但是并没有

2022-05-03 01:29:49 257

原创 nvm管理node版本 node/npm不是内部或外部命令,也不是可运行的程序

nvm管理node版本 node/npm不是内部或外部命令,也不是可运行的程序open D:\nvm\v16.9.1\node64.exe: The system cannot find the path specified.mkdir D:\nvm\temp: Access is denied.Error while downloading https://panic: runtime error: invalid memory address or nil pointer dere

2022-04-25 00:25:10 424

原创 vscode import 自动引入文件路径

设置vscode import 自动引入文件路径在根目录下创建jsconfig.json文件配置文件,记得每次修改之后都要重新启动vscode,才能生效{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": [ "./src/*" ] }, }, "include": [ "./src/**/*", ],贴图:更多的,参考:不再

2022-04-22 18:10:24 663

原创 vsCode 自定义用户片段snippet

vsCode 自定义用户片段snippet最近的项目每个页面相似度很高,虽然封装了公共组件,但是就每次复制调用公共组件的方法,也让我觉得很麻烦。自定义vsCode的snippet,只要一个单词,省去翻来覆去找文件copy的烦恼,用了几次,上瘾了。。。1. 打开命令ctrl+shift+p键输入:snippet2.选择首选项,命名文件看情况,选择建在全局还是项目文件夹里面;选择 ==> 输入文件名3.文件配置直接打开Example:进行配置。{ // Place your gbi

2022-04-22 17:51:02 1371

原创 前端处理二进制文件流,预览图片、PDF

原生js实现预览图片、PDF服务返回二进制流,用axios处理,指定blob类型,然后再转换成URL( 处理后会变成blob://... 这种格式);图片的话,作为src地址可以直接实现;预览PDF需要服务端的响应头Content-Type 为PDF类型application/pdf,不指定这种类型会直接下载,不能预览;实例:axios指定responseType为blob类型接收响应:axios.get('url',{ params:{ key:this.key },

2022-04-13 23:38:48 2773

原创 ES2020 实用新特性

ES2020 新特性1. ?? 判断运算符??与 || 类似,但是更严格。用来判断运算符左侧是否为null或undefined时,才会返回右侧的值。适用场景:'' ?? 1 // '''' || 1 // 10 ?? 1 // 00 || 1 // 1null ?? 1 // 1undefined ?? 1 // 12. ?.链式判断运算符?.判断左侧对象是否为null或undefined。如果是则返回null或undefined;否则,返回右侧的值适用场景:简化 &am

2022-04-12 01:48:45 682

原创 web页面--前端明水印

采用canvas绘制图片,observe监听页面元素改变重新添加。<template> <div id="water_mater" ref="Watermakr"></div></template><script>export default { data() { return {} }, methods: { createWaterMark() { const { loginIp = '',

2022-04-07 00:41:11 388

原创 VS Code Pettier设置换行最大宽度

.prettierrc 文件这里修改的都是与默认值不同的,没有修改到的就是启用默认值.prettierrc 文件是使用 json 格式,如果报错了,该配置文件在编辑器里面是不会生效的{ "bracketSpacing": true, "printWidth": 120, "semi": false, "singleQuote": true}如图:...

2022-03-23 17:28:48 110

原创 前端面试题_2022-02

目录一、JS部分:1.原型链2.闭包3.手写Promise4.数据类型判断5.Map和Set6.垃圾回收机制7.安全随机数8.贪心算法9.js循环10.数组新方法二、HTML部分三、Css部分1.垂直居中2.弹性布局3.grid布局四、浏览器部分五、Vue部分1.$nextTick2.$set3.取消请求4.vue3.0新特性5.vue新指令一、JS部分:1.原型链2.闭包3.手写Promise4.数据类型判断typeof:返回7种数据类型:number,str

2022-02-16 03:15:28 1973 1

原创 js扁平数据结构转Tree

js扁平数据结构转Tree无意间看到的一道题,实际业务有这种场景,就打开看了看,不过我们这种数据都是中台在处理,然后返回给前台的。let arr = [ { id: 1, name: "部门1", pid: 0 }, { id: 2, name: "部门2", pid: 1 }, { id: 3, name: "部门3", pid: 1 }, { id: 4, name: "部门4", pid: 3 }, { id: 5, name: "部门5

2022-02-13 03:03:39 335

原创 ES6数组新方法

ES6数组新方法目录ES6数组新方法1. `forEach()`和`map()`2. `filter()`3. `reduce()`4. `some()`5. `every()`6. `Array.from()`7. `Array.of()`8. `copyWithin()`9. ` find() `和 `findIndex()`10. `fill()`11. `entries()`,`keys() `和 `values()`12. `includes()`13. `flat()`,`flatMap()`

2022-02-06 21:16:22 509

原创 React 生命周期

React 生命周期1、生命周期图react生命周期函数挂载、卸载只会执行一次,更新会执行多次。2、生命周期的三个阶段1)挂载时(创建)执行时机:组件创建时(页面加载时)执行顺序:Constructor() --> render() --> componentDidMount()钩子函数触发时机作用constructor ()创建组件时1,初始化state; 2.为事件处理程序绑定thisrender ()每次组件渲染都会触发渲染UI(

2022-01-30 23:36:26 782

原创 React-context

Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。在一个典型的 React 应用中,数据是通过 props 属性由上向下(由父及子)的进行传递的,但这对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI主题),这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式,而不必通过组件树的每个层级显式地传递 props 。

2022-01-11 02:35:28 17

原创 React组件通信--props

React组件通信1、props接收数据ReactDOM.render( <App name='传递数据' age={19} color={[1,2,3]} fn={()=>{console.log('函数')}} tag={<p>段落</p>} />,document.getElementById("root"));函数组件:propsfunction App(props) { function myClick(e)

2021-12-30 00:01:29 394

原创 React组件基础

React组件1.创建组件1)使用函数创建组件函数名必须大写、开头必须有返回值、使用函数名作为标签名let MyComponent = () => { return <div>myComponent</div>;};ReactDOM.render(<MyComponent />, document.getElementById("root"));在这里插入代码片2)使用Class创建组件大写字母开头、类组件要继承React.Componen

2021-12-01 23:32:28 30

原创 React

React1.安装npm i react react-dom2.React的使用1)引入react和react-dom两个js文件<script src="./node_modules/react/umd/react.development.js"></script><script src="./node_modules/react-dom/umd/react-dom.development.js"></script>2)创建React元素

2021-11-16 02:12:49 398

原创 前端常见知识点三之HTML

前端常见知识点三之HTML1.HTML5 drag apidragstart:事件主体是被拖放元素,在开始拖元素时触发darg:事件是被拖放元素,在正在拖放时触发dragenter:事件主体是目标元素,在进入某元素时触发dragover:事件主体是目标元素,在某元素内移动时触发dragleave:事件主体是目标元素,在移出目标元素时触发drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发dragend:事件主体是被拖放元素,在整个拖放操作结束时触发2.对HTML语义化标签的

2021-07-11 22:44:39 53

原创 前端常见知识点五之Fetch

前端常见知识点五之Fetchfetch发送2次请求的原因fetch发送post请求的时候,总是发送2次。第一次状态码是204,第二次才成功;因为在用fatch的post请求的时候,导致fetch第一次发送了一个Options请求,询问服务器是否支持修改的请求头,如果服务器支持,则在第二次中发送真正的请求。参考文章:Fetch API 教程...

2021-07-11 22:11:38 93

原创 前端常见知识点四之webscoket

前端常见知识四之webscoket1. 概览1)WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。2. 其他特点包括:(1)建立在 TCP 协议之上,服务器端的实现比较容易。(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服

2021-07-11 03:03:37 80 1

原创 前端常见知识点二之浏览器

前端常见知识点之浏览器1.web Quality(无障碍)能够被残障人士使用的网站称得上一个易用的(易访问的)网站使用alt属性:<img src='xxx.jpg' alt='this is a xxx'/>有时候浏览器无法显示图像,alt会发挥它的作用:用户关闭了图像显示不支持显示图形的迷你浏览器浏览器是语音浏览器(供盲人和弱势群体使用)如果您使用了alt属性,那么浏览器至少可以显示或读出有关图像的描述。2.几个实用的BOM对象方法BOlocation–浏览器对象

2021-07-04 01:47:24 152

原创 前端常见知识点一之HTTP

1.http和https基本概念http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器请求和应答的标准(tcp),用于从WWW服务器传输超文本到浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。https: 是以安全为目标的http通道,简单的讲是http的安全版,即http下加入ssl层,http的安全基础是ssl,因此加密的详细内容就需要ssl。https协议的主要作用是:建立一个信息安全通道,来确保数组的传输,确保网站的真实性

2021-06-30 02:44:38 97

原创 echarts 堆叠树状图排序

echart 堆叠树状图。没有相关的配置API,要自己先把数据排好,再传到数据配置中。。。它的配置项:option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: {

2020-11-22 05:05:27 1549 2

原创 weex 项目搭建

简介:Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。

2020-09-09 17:36:55 230

原创 vue 环形进度条封装

<template> <div> <svg :viewBox="`0 0 ${2 * radius + srtokeWidth} ${radius + srtokeWidth}`"> <defs> <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" :stop-color="

2020-09-03 17:27:54 125

原创 git本地回滚代码

回退命令:回退到上个版本:$ git reset --hard HEAD^回退到前3次提交之前,以此类推,回退到n次提交之前:$ git reset --hard HEAD~3退到/进到 指定commit的sha码:$ git reset --hard commit_id强推到远程:$ git push origin HEAD --force...

2020-08-14 10:56:01 834

原创 修改Git提交者昵称和邮箱

// 设置全局git config --global user.name "Author Name"git config --global user.email "Author Email"

2020-07-30 16:39:55 294

原创 2020前端面试总结

一、前端安全问题1.xss攻击(跨站脚本攻击)2.csrf攻击(跨站请求伪造)3.点击攻击(内嵌ifame)二、防抖节流防抖:在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms。(比如滚动监听,一直按方向键就一直会触发)节流:即使用户不断拖动滚动条,也能在某个时间间隔之后给出反馈。让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活三、作弊检测监听VisibilityChange事件,当页面不可见的时候就会documnet.visibilitystate

2020-07-17 16:10:40 229

原创 CSS3自定义滚动条样式

效果图:HTML:<div class="box"> <div class="transcrided_text"></div></div>CSS:.transcrided_text { margin: 0 0.5rem; font-size: 0.14rem; padding-bottom: 0.2rem; height: 1.62rem; overflow-y: scroll;}/*主要部分 -- 自定义样式*

2020-06-28 17:02:31 132

转载 Js之类型转换

最近在看冴羽的博客,发现东西太多,也难记。所以还是决定照着过一遍,加深印象,也便于以后查阅。原文请看:冴羽的博客;接下来进入正题,先是基本类型之间的转换:js数据类型可以分为两类:可变的引用类型: object(array ,function,正则);不可变的原始类型: null, undefined, number, string, boolean, symbol(es6)一、原始类型的转换1.1 原始值转布尔转换成布尔类型,在 JavaScript 中,只有 6 种值可以被转换成 fal

2020-06-24 18:34:07 127

原创 mysql 报错1045 - Access denied for user “root” @ 192.111.111.11 (using password: YES)

用navicat连接时会报:nodejs 会报这种错:TypeError Cannot read property “query ” of undefined看代码,很明显是数据库连接的问题。打开pool.getConnection( (err, connection) => {})函数中的err;1.可能是密码错误2.远程权限没开mysql> GRANT ALL PRIVILEGES ON *.* TO root@"%" IDENTIFIED BY "abc123456";

2020-06-22 19:18:58 161

原创 阿里云服务器 ,MySQL建库、建表

--1.连接数据库 mysql -u root -p--2.输入密码--3.建库 create database is_mysql;--4.查看是否建表成功 show database;--5.通过工具(我用的是navicat)将表转存为 .sql文件(test.sql)--6. 上传.sql文件到服务器任一目录(比如:/root)--7.切换使用刚才创建的is_mysql库 use is_mysql; --8.将/root目录下的sql文件导入(导入有问题请移步

2020-06-22 11:45:42 747

原创 es6 Map、Set和Array.from()

使用Map、Set、Array.from都需要支持es6的浏览器才能使用。一、Map:1.Map是一组键值对的结构,具有极快的查找速度。2.格式类似于一个二维数组。var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);m.get('Michael'); // 95var m = new Map(); // 空Mapm.set('Adam', 67); // 添加新的key-valuem.set('Bob', 59);

2020-06-17 15:46:17 258

原创 node+Mysql,数据库时区显示正确,查询时却显示另一个时区

Node+Mysql,查看数据库时区显示正确,但查询时,显示的确是另一个时区的时间。前端调用接口返回:startTime: "**2020-03-04T17:53:55.000Z**"这样的格式

2020-06-11 20:08:48 367 1

原创 向当前url添加参数

//向当前url添加参数,没有历史记录 window.history.replaceState({ path: newurl }, '', newurl); function updateQueryStringParameter(uri, key, value) { if (!value) { return uri; } var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");.

2020-06-08 20:55:59 656

原创 postman设置带token的请求

一、定义token1.首先。点击add, 设置全局变量token2.设置token3.在登陆接口(返回token值),接收、设置token;pm.test("Status code is 200", function () { pm.response.to.have.status(200);}); // 把responseBody转为json字符串var data = JSON.parse(responseBody);// 设置环境变量token,供后面的接口引用pm.e

2020-05-21 20:26:41 2576 2

原创 IE浏览器error:Promise未定义

原因:ie对es6的支持很糟.不认识Promise、箭头函数等等。。解决方法:安装babel-polyfill插件yarn add babel-polyfillnpm install --save babel-polyfill引入://在common.js(全局公共js)中引入即可import "babel-polyfill"如果不行,这些也装一下:babel-loader、babel-core、babel-preset-env同时:var path = require('pat

2020-05-12 17:08:00 425

原创 NodeJS(express)连接、封装操作MySQL

NodeJS Express连接、封装操作MySQL

2020-05-11 11:04:37 2519 1

原创 MySQL常用语句

--创建数据库 create database sqltest--创建表 create table test { id int not null primary key, name varchar(50), age int }--增 insert into test values (2, "test2", 21);--查 select * from test; ...

2020-04-30 19:08:33 124

原创 Navicat for MySQL 连接 Mysql 8.0.11 出现1251- Client does not support authentication protocol 错误

MySQL及其可视化工具下载安装‘; 解决:1251- Client does not support authentication protocol;

2020-04-30 14:31:58 98

原创 qrcodejs2--Vue生成二维码组件封装

1.安装qrcodejs2:npm install qrcodejs2 --saveyarn add qrcodejs22.初步封装组件:/** * @file 生成二维码的组件 * @author Walker * @date 2020-03-16 */<template> <div class="emqrcode"> <but...

2020-03-19 09:53:00 7718 1

WEB 面试题汇总-( 文件名称要11个字什么奇葩垃圾规则 )

WEB 面试题汇总-( 文件名称要11个字什么奇葩垃圾规则 )

2022-02-15

win10 磁盘使用率100%

发表于 2019-12-25 最后回复 2020-05-09

电商项目前端框架

发表于 2020-03-24 最后回复 2020-05-09

前端怎么样保护请求头

发表于 2019-12-06 最后回复 2020-04-28

360极速浏览器 文件资源路径解析错误

发表于 2020-02-26 最后回复 2020-02-28

前端埋点, 大佬们有没有推荐的

发表于 2019-12-17 最后回复 2019-12-17

new和数据类型

发表于 2019-09-19 最后回复 2019-09-20

为什么鼠标移开和移到文本上,背景颜色都没变。哪里有问题?

发表于 2018-08-02 最后回复 2019-09-19

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除