- 博客(209)
- 资源 (2438)
- 问答 (2)
- 收藏
- 关注
RSS订阅
原创 chrome浏览器91版本SameSite by default cookies被移除后的解决方案，Chrome中跨域POST请求无法携带Cookie的解决方案
背景周一早上一打开电脑准备开发项目时候, 突然发现网站登录跳转有异常, 怎么都登录不上一直跳回登录页. 通过抓包排除了后端的原因后, 发现后端的set-cookie没有效果, 突然想起Chrome禁用第三方Cookies的计划, 打开Edge的更新记录发现已经自动更新到Chromium 91了.因为开发环境需要, 我们把浏览器的same-site-by-default-cookies和cookies-without-same-site-must-be-secure两项都在flag里禁用了. 但是更新
2021-06-08 16:54:35
41334
27
原创 react项目http-proxy-middleware跨域问题
1.npm安装这两个依赖npm install http-proxy-middleware, npm install axios2.
2021-08-05 16:55:44
1396
原创 scss重置浏览器默认样式 normalize.css
最近做了个react+antd 的人事管理项目，样式使用的scss，里面重置了浏览器样式的文件，欢迎大家下载使用，不会用的可以@我哟。
2021-08-04 08:54:21
1295
原创 最详细的window10虚拟机安装，手把手安装虚拟机，解决家庭版window找不到Hyper-V选项
在window8之前，人们可能需要下载比较专业的软件，比如 VMware。之后系统已经自带这样的功能，但是仅限于专业版本可使用，也就是说大部分家庭版本无法使用window自带的虚拟机，今天我们就来解决一下这个问题。1、在创建虚拟机之前，我们需要准备一个完整的系统镜像，比如 Windows10 镜像，在微软的官网即可下载，下载之后先放一边。window官网下载地址https://www.microsoft.com/zh-cn/software-download/windows10如果自身是..
2021-07-23 17:46:40
7206
3
原创 谷歌浏览器无法打开localhost:3000,打开localhost就跳转测试地址问题
1.打开一个新的空白页面输入chrome://flags 跳转至本页面设置下图中的两项 ，设置好后重启浏览器即可。
2021-03-02 15:04:10
4088
1
原创 antd setFieldsValue警告问题 Cannot use `setFieldsValue` until you use `getFieldDecorator` or
antd 使用form组件 setFieldsValue警告问题原文警告：Cannot use setFieldsValue until you use getFieldDecorator or getFieldProps to register it大概意思就是：在使用“getFieldDecorator”或“getFieldProps”注册之前，不能使用“setFieldsValue”官网上的解释是这样的的注意：使用 getFieldsValue getFieldValue setField
2021-01-14 16:25:40
1995
原创 React children组件实例提示框
// child传递标签，通常在通用型组件时传递 使用import React, { Component } from 'react';// 第一个类 (也可以跨文件传递文件)class Childes extends Component { state={ close : true } render() { let {children} = this.props //接收 let {close} = this.state console.log(t.
2020-07-16 13:31:12
222
原创 React children组件
children组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容可以自定义结构的组件的常用形式children传递函数传递子组件// child传递标签，通常在通用型组件时传递import React, { Component } from 'react';// 第一个类 (也可以跨文件传递文件)class Childes extends Component { render() { let {children} = thi
2020-07-16 13:29:01
664
原创 React PureComponent
component和PureComponent 的区别PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一直PureComponent 在数据类型 前后一样的情况下，就不会去渲染更新，Component不管你一样不一样，都会重新渲染加载使用component 在list 修改赋值的时候可以使用es6的语法使用PureComponent时候 赋值的时候 list:[…list]import React, { Pure
2020-07-16 13:11:55
106
原创 react dangerouslySetInnerHTML
dangerouslySetInnerHTML 设置标签的innerHtml注意：message不能接收页面的数据 太危险了，接收后端的数据使用import React, { Component } from 'react';let message = ` <h1>打败我们的不是天真，是天真热</h1> <p>太热了</p> `class App extends Component { r
2020-07-16 13:08:25
195
原创 React key值绑定问题
key值绑定问题key这里要写数据里的id id后端一定要给id 要是没又给去找他要这里key值绑定的唯一id 这里的id 为固定值 这么写的性能会好些，点击三删除只有删除的元素会更新如果绑定index 数组元素发生变化index也就发生变化 数组内的数据就会全部的从渲染import React, { Component } from 'react'; class App extends Component { state = { //模拟数据 data:[ {
2020-07-16 13:05:52
708
原创 react 通过生命周期优化组件性能
已经对React生命周期有了认识，那如何利用它提高组件的性能那？通过shouldComponentUpdate函数，改善React组件性能的例子。小姐姐组件存在性能问题是的，小姐姐组件已经写的很熟悉了，但是它有一个性能问题，那就是子组件XiaojiejieItem频繁无用渲染render。如何能看出这个问题的那？首先你要确认你安装了React Developer Tools 如果你没有安装，可以到前边的课程学习一下安装。有了这个浏览器插件，就可以在控制台中找到components标签，然后在右边点开设
2020-07-06 21:46:00
3312
原创 React PropTypes检验传递的值
在工作当中，我们进行传参一定要对象传递的数据进行校验，如果不校验的话，大量的数据传递，会造成混乱，业务逻辑也没办法保证。引入prop-types //prop-types 父传子 要在子组件引入并校验import PropTypes from "prop-types"PropTypes 提供一系列验证器，可用于确保组件接收到的数据类型是有效的。在本例中, 我们使用了 PropTypes.string。当传入的 prop 值类型不正确时，JavaScript 控制台将会显示警告。出于性能方面的考虑
2020-07-06 21:45:12
246
原创 react setState工作原理
setState(updater, [callback])1 updater: 通过函数或对象 更新数据 FUNCTION/OBJECT2 callback: 更新成功后的回调 FUNCTION buttonOnClick=()=>{ this.setState({ list:[...this.state.list,this.state.inputValue], inputValue:"" //正加后input框的值为空
2020-07-03 16:04:11
1089
原创 react 生命周期-2
React生命周期中的Updation阶段,也就是组件发生改变的更新阶段，这是React生命周期中比较复杂的一部分，它有两个基本部分组成，一个是props属性改变，一个是state状态改变（这个在生命周期的图片中可以清楚的看到）。shouldComponentUpdate函数会在组件更新之前，自动被执行，会在render 渲染之前执行它要求返回一个布尔类型的结果，必须有返回值，false 下面的代码就不再执行 shouldComponentUpdate(){ // 会在rend
2020-07-03 16:02:43
119
原创 react 生命周期-1
React生命周期图通过这张图你可以看到React声明周期的四个大阶段：Initialization:初始化阶段。Mounting: 挂在阶段。Updation: 更新阶段。Unmounting: 销毁阶段什么是生命周期函数如果非要用一句话把生命周期函数说明白，我觉的可以用这句话来说明：生命周期函数组件从创建到结束的过程（生-死）举例：写的小姐姐的例子。里边的render()函数，就是一个生命周期函数，它在state发生改变时自动执行。这就是一个标准的自动执行函数。construc
2020-07-03 15:27:25
182
原创 React 父子组件的传参
通过上节课的学习，已经把"小姐姐"组件做了一个基本的拆分，但是还不能实现随着输入，显示出输入的内容。这里涉及的是父组件向子组件传值。然后点击删除，就相当于子组件向父组件传值父组件像子组件传值这里只介绍最实用的，最快速的上手方法。就是使用组件属性的形式父组件给子组件传值。比如：我们在组件中加入content属性，然后给属性传递{item}，这样就完成了父组件向子组件传值。<XiaojiejieItem content={item} />这时候可以通过this.props.xxx的形式进行
2020-07-03 11:36:32
570
原创 React实例响应式设计和数据绑定
React实例响应式设计和数据绑定React中的响应式设计原理和数据的绑定方法，俗话说的好：“宝剑磨的好，理论不能少”。这节课我们不仅要编写效果，还要讲理论，这节课很重要！！！，因为这涉及React中的设计思想和你以后的编程思路。响应式设计和数据的绑定React不建议你直接操作DOM元素,而是要通过数据进行驱动，改变界面中的效果。React会根据数据的变化，自动的帮助你完成界面的改变。所以在写React代码时，你无需关注DOM相关的操作，只需要关注数据的操作就可以了（这也是React如此受欢迎的主要原
2020-07-01 20:51:08
1631
原创 React实例 删除列表数据
React实例 删除列表数据添加服务虽然很美妙，但是有时候也需要有些节制。这节课就学习如何删除一个服务选项。需求是这样的，当点击已经有的选项后，我们就进行删除。如果使用原生的js来写，这是非常麻烦的，但是有了React后就变的简单了。数组下标的传递如果要删除一个东西，就要得到数组里的一个编号，这里指下标。传递下标就要有事件产生，先来绑定一个双击事件.代码如下:数组下标的传递如果要删除一个东西，就要得到数组里的一个编号，这里指下标。传递下标就要有事件产生，先来绑定一个双击事件.代码如下:<l
2020-07-01 09:32:00
4530
原创 React 列表添加数据
让列表数据化现在的列表还是写死的两个标签，那要变成动态显示的，就需要把这个列表先进行数据化，然后再用javascript代码，循环在页面上。我们先给上节课的list数组增加两个数组元素，代码如下： constructor(props){ //// 构造函数 // 调用父类方法，继承 super(props) this.state = { inputValue:"", //value的数据 list:
2020-07-01 09:30:23
5546
原创 React实例 列表组件
新建组件现在SRC的目录下面，新建一个文件Xiaojiejie.js文件，然后写一个基本的HTML结构。代码如下：import React,{Component} from 'react'class Xiaojiejie extends Component{ render(){ return ( <div> <div><input /> <button> 增加服务 <
2020-06-30 23:34:54
1173
原创 React 组件的拆分
新建组件在src目录下，新建一个文件，这里就叫做XiaojiejieItem.js，然后先把最基础的结构写好（这里最好练习一下上节课学习的快捷键）。import React, { Component } from 'react'; //imrcclass XiaojiejieItem extends Component { //cc render() { return ( <div>小姐姐</div> )
2020-06-30 20:13:01
1953
原创 jsx使用注意事项
基于javascript个xml的扩展语法他可以作为值使用他并不是字符串他也不是html 他可以配合js表达式一起使用， 他不可以和js的 语句一起使用(for,if 等…)所有的标签名必须小写，必须闭合，哪怕是单标签class写成classNamestyle 接收的是一个对象{}，并不是字符串最外层只能有一个容器，差值表达式{ }代码注释 尽量使用快捷键 Ctrl + /dangerouslySetInnerHTML={{__html:item}} 解析html标签，在input框中.
2020-06-29 18:35:40
278
原创 JSX及差值表达式单页面应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 其他局部使用的时候也需要引入 --> <sc
2020-06-29 18:02:26
104
原创 React中JSX语法简介
JSX语法简介JSX语法，看起来跟html标签几乎一样，事实也是如此。JSX语法确实也有很多需要注意的事项，但是对于初学者学太多反而不好。所以这节课我们作一个最简单的JSX语法介绍。JSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到<，JSX就当作HTML解析，遇到{就当JavaScript解析.比如我们在App中写一段JSX语法<ul className="my-list"> <li>
2020-06-29 17:49:57
272
原创 React HelloWorld和组件
这节课先把src目录里的文件全部删除，我们一点点写一个·HelloWorld·程序，并通过编写这个程序了解一下什么是React中的组件化编程。入口文件的编写写一个项目的时候一般要从入口文件进行编写的，在src目录下，新建一个文件index.js，然后打开这个文件。写入下面4行代码:import React from 'react'import ReactDOM from 'react-dom'import App from './App'ReactDOM.render(<App />
2020-06-29 17:47:37
133
原创 React脚手架生成的项目目录介绍
项目根目录中的文件先从进入项目根目录说起，也就是第一眼看到的文件(版本不同，可能稍有不同)**README.md ????*这个文件主要作用就是对项目的说明，已经默认写好了一些东西，你可以简单看看。如果是工作中，你可以把文件中的内容删除，自己来写这个文件，编写这个文件可以使用Markdown的语法来编写。package.json: 这个文件是webpack配置和项目包管理文件，项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要
2020-06-29 17:46:02
452
原创 React开发环境搭建
安装Node.js使用React.js是可以用最原始的安装Node只需要进入Node网站，进行响应版本的下载，然后进行双击安装就可以了。Node中文网址：http://nodejs.cn/ (建议你在这里下载，速度会快很多)需要你注意的是，一定要正确下载对应版本，版本下载错误，可是没有办法使用的哦。Node.js 安装好以后，如果是Windows系统，可以使用 Win+R打开运行，然后输入cmd，打开终端（或者叫命令行工具）。输入代码：node -v 如果正确出现版本号，说明Node安装成功
2020-06-29 17:36:21
124
原创 React简介 和vue的区别
React简介React 是全球最火的前端框架(Facebook推出的前端框架)React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。React优点总结**生态强大：**现在没有哪个框架比React的生态体
2020-06-29 17:15:38
3161
原创 mpvue 星星评价
商品的评价在每个商品中都会有展示，这种必定要写成组件的形式1.创建组件2.引入组件哪里使用哪里引入import Score from "@/components/Score.vue" //引入组件 components:{ Score },3.使用并传参这是的参数是1-10的数字，传到组件中进行处理 <Score :score ="namedata.score"></Score>方法一使用这种方法如果是偶数或者满星的 情况下，for循环会
2020-06-27 22:23:51
163
原创 使用mpvue 中eslint报错问题
在使用vue-cli构建项目过程总，会带有 ESLint 进行代码规范检测，所以会经常遇到一些 ESLint 提示的报错，解决办法，这是还是建议不使用eslint，安装时候能不带就不带1、no-mixed-spaces-and-tabs1.大意：禁止使用 空格 和 tab 混合缩进2.推荐：使用3.解决办法：或使用空格缩进，或使用 tab 缩进，选其一中。2、Newline required at end of file but not found1.大意：每一个代码文件在该文件代码结束处，都要
2020-06-18 11:15:52
650
原创 小程序 获取地理位置
wx.getLocation获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。调用前需要 用户授权在主配置文件设置授权 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } },首先获取经纬度信息wx.getLoc
2020-06-18 00:53:14
2375
原创 小程序 数据库及云函数
数据库云开发提供了一个 JSON 数据库，顾名思义，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。增加数据 <button type="primary" bindtap="addData">点击添加数据</button>const db = wx.cloud.database() //初始化 链接数据库 addDat
2020-06-15 21:09:26
532
原创 小程序 新闻列表
需求使用小程序实现网络数据获取，加载新闻列表，点击查看详情，和上划加载新数据列表页面wxml样式<view class="newContainer" bindscrolltolower="upper"> <view class="newsItem" wx:for="{{newsData}}" wx:key="key" data-id="{{item.id}}" bindtap="showDetail"> <view> <image c
2020-06-10 00:04:59
1394
1
原创 小程序 数据获取
1、参数的获取点击按钮触发事件 <!-- 点击事件data-id传参 传到event对象里(id是自定义的) bindtap轻点击--> <button data-id="3" bindtap="fn">点击触发事件 </button>Page({ fn(e){ //event对象接收数据 // 1、参数的获取 console.log("123") console.log(e.currentTarget.dataset.id)
2020-06-09 23:47:09
1220
原创 小程序 WebSocket
wx.sendSocketMessage通过 WebSocket 连接发送数据。需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。onSocketOpen监听 WebSocket 连接打开事件onSocketMessage监听 WebSocket 接受到服务器的消息事件onSocketError监听 WebSocket 错误事件onSocketClose监听 WebSocket 连接关闭事件connectSocket创建一个 WebSo.
2020-06-09 23:15:06
220
TA创建的收藏夹 TA关注的收藏夹
TA关注的人