![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
teriri丶
不爱嘉然小姐十年了
展开
-
从后端接受文件流转URL
原创 2022-04-08 20:39:08 · 461 阅读 · 2 评论 -
前端下载,二进制流下载文件
首先需要下载filesever$npm install file-saver --save安装好后直接引入使用import { saveAs } from "file-saver";onDownload(id) { axios({ url: `/model/down/${id}`, methor: "GET", responseType: "blob", }).then((res) => { console.log(res?.data); s原创 2021-12-09 18:14:15 · 588 阅读 · 0 评论 -
ajax一些笔记
var xmlhttp;function ajax_demo(){//1.创建xmlHttoRequest对象 if(winodw.xmlHttpRequest){ xmlhttp = new XMLHttpRequest();}else{ xmlhttp = new ActiveXobject("microsoft.XMLHTTP")}//2.注册回调函数xmlhttp.onreadystatechange = function()原创 2021-11-22 17:57:09 · 410 阅读 · 0 评论 -
正则的一些笔记
正则表达式作用:匹配特殊字符或有特殊搭配原则的字符的最佳选择两种创建方式:1.直接量2.new RegExp();示例:var reg = /abc/var red = /^a/ 以a开头的a后接i 忽视大小写g 全局匹配m 执行多行匹配[0-9] 查找0-9的一个数/[^a]/ ^放在[]表示非(abc|bcd) 匹配abc或bcd元字符\w ===[0-9A-z_]\W ===[^\w]\d === [0-9]\D === [^\d]\s ===原创 2021-11-22 17:53:21 · 86 阅读 · 1 评论 -
hooks 简单demo 实现状态管理
reducer是一个函数(state, action) => newState:接收当前应用的state和触发的动作action,计算并返回最新的stateuseReducer第一个参数:reducer函数,。第二个参数:初始化的state。返回值为最新的state和dispatch函数(用来触发reducer函数,计算对应的state)import React, { createContext,useReducer } from 'react'export const ColorContex原创 2021-11-22 17:47:18 · 599 阅读 · 0 评论 -
react项目网页中调用摄像头相机
最近写的项目,有一个项目需求,就是在手机端网页中调用摄像头。虽然我觉得这个功能屁用没有,但还是得想办法实现。1.利用getUserMedia调用摄像头navigator.mediaDevices.getUserMediaimport React from 'react'import {message} from 'antd'export default function Identify() { function handlePhoto() { if (navigato原创 2021-10-13 22:15:40 · 1601 阅读 · 0 评论 -
axios实例axios.all报错解决方法
博主在项目中,封装了axios,在项目里使用axios.all并发请求时,却发现报错。一搜才知道,axios.all是静态方法解决方法:用Promise.all替代axios.all代码:const postAround = (aroundForm)=>{ return axios({ method: 'post', url: '/fun/around/upload', data: aroundForm原创 2021-10-09 16:36:06 · 897 阅读 · 0 评论 -
react 项目中,简单封装axios并给请求头添加token
在src下创建request用来封装axiosimport axios from "axios";//设置请求得基准地址axios.defaults.baseURL = ''const request = axios.create();//设置请求头request.interceptors.request.use(config => { // 给请求头加token的字段,值为token config.headers.token = window.sessionStorag.原创 2021-10-08 22:33:45 · 1647 阅读 · 0 评论 -
页面之间跳转 平行的两个路由组件传值办法
我想实现的是从Identify中传值给Result并且在Identify页面中没有Link标签来跳转,而是在某个事件之后,自动跳转至Result页面,还要携带数据解决办法Identify页面中history.push({ pathname:"/result", parmas:{ url:123 } })Result页面接收cosnole.log(props.location.原创 2021-10-05 16:11:53 · 147 阅读 · 0 评论 -
antd upload组件 手动上传
antd 的upload组件是点开对话框后,按下确实就会上传,而且如果多选文件也会反复调用后端接口来完成上传。因为项目需要,所以要实现手动上传,和一次性上传多个文件(调用一次后端接口)在实现这个功能时,我翻阅了很多博客,可能是因为版本原因,很多代码都无用,最后还是通过翻阅官方文档,才最终实现。...原创 2021-10-04 14:36:40 · 3913 阅读 · 4 评论 -
React+Antd 博客简陋UI页面
页面展示:登录:友情提示:登录页面没有任何功能。博主太菜了,只是为了好康。背景图是用axios发送ajax请求,用的是韩小韩的API接口(感谢大大的接口,太好用了)实现的随机二次元图片(我才不是二次元!)首页:资源分享:关于我:文章分享:感谢:https://blog.csdn.net/div_ma/article/details/80436727这篇文章。我基本框架就按这篇文章敲出来的。感谢大佬。如果有人需要这个页面(估计没有,呜呜)百度云链接:https://pan.ba原创 2021-05-02 13:21:54 · 187 阅读 · 1 评论 -
Promise笔记
promise的API1.resolvelet p1 = Promise.resolve(521);//如果传入的参数为 非promise类型的对象,则返回的结果为成功promise对象//如果传入的参数为 Promise对象,则参数的结果决定了resolve 的结果2.reject let ps = Pomise.reject(new Promise((resolve,reject)=>{ resolve('ok'); })) //如果传入的参数为 非promise类型的原创 2021-04-23 21:07:36 · 246 阅读 · 4 评论 -
react-redux笔记
在react-redux的学习中,它们之间的数据传递关系对我来说较为复杂,不同部分与不同部分有着不一样的传递方式。同时有着conncet这样强大的API,如果不能理清,就很容易弄混。如图,在redux-redux中,就是UI组件外嵌套一个容器组件,UI组件不之间与redux交互,而是通过容器组件,再将得到的数据通过props属性,传递给UI组件UI组件的容器组件,由connect API构建。在connect函数中,它还同时完成了从redux获取更新的数据,redux中的操作状态的方法通过props属.原创 2021-04-20 17:01:41 · 71 阅读 · 0 评论 -
超详细!!原生js实现todolist动态页面
刚学完js,完成这个todolist的过程十分痛苦,整理了这篇文章。里面js基本每一步都有详细解释,自我认为逻辑还是比较清晰。希望各位大佬轻喷。在这里插入代码片<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1" />原创 2021-03-05 17:42:26 · 1818 阅读 · 8 评论 -
利用redux-reduce管理数据,数据共享
1.概念:利用redux组件之间的传值非常简单,redux里面要求我们把数据都放在一个公共的存储区域store里面,组件之中尽量少放数据,也就是所有数据都不放在组件自身了,都把它放到一个公用的存储空间里面,然后组件改变数据就不需要传递了,改变store里面的数据之后其它的组件会感知到里面的数据发生改变。这样的话不管组件的层次有多深,但是走的流程都是一样的,会把数据的传递简化很多。2:原理图3.代码目录这里写目录标题一级目录二级目录三级目录containers文件夹Count组件Person组件redu原创 2021-04-03 13:56:52 · 360 阅读 · 1 评论 -
React+axios实现github搜索案例
开始页面在输入框搜索id后,展示github中id相似的用户的头像,id。点击头像还能进入对应用户的github主页public文件夹bootstrap.css(略去)index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-03-26 22:04:50 · 269 阅读 · 9 评论 -
React实现todolist
将整个案列拆分成了4个组件代码目录publick文件夹index:src 文件夹app.jsxapp.csscomment-组件部分头部组件HeaderList组件List中的每一列,ITEM组件最终,尾部组件publick文件夹index:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib..原创 2021-03-26 21:48:24 · 116 阅读 · 0 评论 -
<笔记>组件实例三大属性_refs
refs属性1.字符串形式的ref2.回调函数形式的ref3.回调ref中回调执行次数问题4.creatRef1.字符串形式的ref2.回调函数形式的ref3.回调ref中回调执行次数问题4.creatRef1.字符串形式的ref(不推荐,有缺陷,尽量避免使用)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-U原创 2021-03-18 17:04:46 · 65 阅读 · 0 评论 -
<笔记>组件实例三大属性_props
props的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2021-03-18 16:55:29 · 73 阅读 · 0 评论 -
组件实例三大属性_state
在代码过程中,要注意理解this的指向!!!!(难点)标准版<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca原创 2021-03-16 21:34:19 · 102 阅读 · 0 评论 -
<笔记>react中定义组件
创建函数式组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="test"></div> <script src="../js/react.development.js">&原创 2021-03-16 10:05:38 · 65 阅读 · 0 评论