react
文章平均质量分 79
a_靖
大前端,全栈工程师
展开
-
git 忽略指定文件夹的上传
我们在使用 git 开发的时候,有些插件的模块文件通过npm install 就可以下载,一般是不上传到 git 中的(因为文件太多会导致很耗时),例如 我的node_modules 文件夹,不想上传,我们应该这么做。 我们需要创建一个“.gitignore”文件来实现,但是windows系统下是不能直接创建的,如何创建呢? 首先新建一个文本文件,名字为“.gitignore.txt” 接着右键点击它,使用记事本打开,输入: /node_modules/ /node_m...原创 2020-10-16 15:09:03 · 3272 阅读 · 0 评论 -
前端开发框架选择
Vue + Vant适用场景:开发移动端 (vue)上手难度:1Vant是一款很好用的移动端UI框架,非常轻便,适合小型项目https://vant-contrib.gitee.io/vant/#/zh-CN/微信小程序适用场景:微信小程序(小程序原生框架)上手难度:1相比uni-app,它的兼容性,契合性更好,更容易上手。https://developers.weixin.qq.com/miniprogram/dev/reference/Vue + Element适用场景:开发.原创 2020-08-19 19:20:46 · 2585 阅读 · 0 评论 -
JS 实现下载Blod文件
实现代码://下载Blod文件const downLoadBlobFile = (filename, res) => { if (!res) return; let a = document.createElement('a'); let blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); let原创 2020-08-03 11:25:43 · 3618 阅读 · 0 评论 -
ant 接口返回文件流,前端自动下载实现
封装网络请求 :reqAxios.jsimport Axios from 'axios';import qs from 'qs';import { router } from 'umi';import { message } from 'antd';Axios.defaults.withCredentials = true// const httpUrl = 'https://tworktelecommanage.weein.cn/work_telecom_manage'cons.原创 2020-05-27 10:14:48 · 3547 阅读 · 0 评论 -
ant models 内获取 url 的参数传递到组件
models代码:import { getCList} from "@/services/api";import { MessageTip } from '@/utils/tools.js'import { router } from 'umi';const customerModel = { namespace: 'customerModel', state: { channelList: [], // 渠道列表 }, reducers: {原创 2020-05-22 10:09:03 · 2893 阅读 · 0 评论 -
React useState,useEffect ,Hook是什么?什么是副作用?
useState 是设置state的值,他有两个属性,departmentModal,setDepartmentModal代码示例:import React from 'react';import { useState } from 'react';const Customer = ({ dispatch,orderList}) => { const [departmentModal, setDepartmentModal] = useState(false); var...原创 2020-05-19 18:37:42 · 7486 阅读 · 1 评论 -
ant 修改组件默认样式属性
得在 less 里面使用:global 修改,不能是css文件.:global 修改是全局生效的,所以建议修改之前要加上calssName="样式名"; 不是className={style.样式名} ,是直接写“”。然后在调试工具找到你要修改的样式的属性名,如图:来个单选框的样式修改代码,效果图: <Form.Item> <Radio.Group className="modal_Radio" defaultValu..原创 2020-05-20 11:53:36 · 7752 阅读 · 0 评论 -
JS获取当月每天的日期,JS获取本周每天的日期
获取当前月每天的日期,获取当前周每天的日期实现代码:调用代码:console.log('-----------------', getNowM(), getWeekDay())结果:我今天是2020-2-28日封装方法:function getDay(num, str) { var today = new Date(); var nowTime = today....原创 2020-02-28 18:17:57 · 4057 阅读 · 0 评论 -
【Ant Design Pro 五】箱套路由在菜单栏显示返回上一页
效果图:场景:从菜单栏进入子页面,但是子页面默认不在路由显示,完成操作后需要返回上级页面。所以要在菜单栏中加返回的功能。实现代码:import React from 'react';import { Button, Card, Icon } from 'antd';import { PageHeaderWrapper } from '@ant-design/pro-layou...原创 2020-02-20 15:43:10 · 4898 阅读 · 0 评论 -
【Ant Design Pro 三】样式动态绑定 react样式绑定
第一步,创建样式文件,在页面目录下根据自己习惯创建一个less文件,用来写样式类第二部,引用该文件import './details.less';下面我们在js 中绑定 class;1.传递一个字符串作为className属性:<span className="menu navigation-menu">Menu</span>2.动...原创 2020-02-18 15:11:39 · 3691 阅读 · 0 评论 -
ant PageHeaderWrapper 返回上一页
PageHeaderWrapper返回上一页实现代码:<PageHeaderWrapper title={false} content={ <a onClick={() => router.goBack()}> <Icon type="left" /> ...原创 2020-02-18 10:17:21 · 7063 阅读 · 1 评论 -
antd 表单提交,文件和表单内容一起提交,表单校验
用很简单的源码实现包含下列 antd 表单相关知识:1.表单必填校验,规则校验2.Upload 上传图片,获取上传图片的状态,如上传成功,上传失败,上传进度条,删除上传的文件3.获取 Input 组件用户输入的值,设置默认值4.提交表单不刷新页面5.把上传的图片显示在页面页面效果图:提交前提交后:包括校验失败的场景t_form.jsx 代码:...原创 2019-12-19 16:17:06 · 7432 阅读 · 0 评论 -
【Ant Design Pro 四】react 点击事件传参
代码解析: 可以选择性的看editCard 事件的传参,尝试过几种传参的方式,会有莫名其妙的bug,这种方式可行。代码import { Card, Icon, Button } from 'antd';import React, { Component } from 'react';import { connect } from 'dva';import router fr...原创 2019-12-12 10:53:38 · 4206 阅读 · 4 评论 -
notification antd 弹窗使用示例
示例代码import { notification } from 'antd'; notification.error({ description: '您的网络发生异常,无法连接服务器', message: '网络异常', });...原创 2019-12-09 19:27:46 · 5380 阅读 · 0 评论 -
DvaJS
Dva是什么?基于redux和redux-saga的数据流方案,只有6个api。数据流走向数据流向图解析:StateState 表示 Model 的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值),每一个 Model 会有一个命名空间,它的 state 都是唯一的。dispatch 函数用于触发 action 的函数,先...原创 2019-12-06 12:17:48 · 2227 阅读 · 0 评论 -
Upload上传图片
实现antd上传图片,Upload 组件可以上传多张图片,多张图片上传成功的效果图:每次上传onChange 回调函数都会执行一次并且里面接收一个JSON对象,其中 file 对象是本次上传的图片信息,status 值为 done 就表示这一次上传成功了,fileList 中是一个数组,里面是组件所有上传的信息列表,每次上传的信息都会记录在里面。未上传时的效果图:上传成功...原创 2019-12-05 15:45:10 · 4183 阅读 · 0 评论 -
Ant Design of React从入门到开发教程
Ant Design Pro 是一个企业级中后台前端/设计解决方案。目录:一:开发前的准备二:创建页面三:创建组件并引用四:封装网络请求和网络请求走向五:登录流程以及路由权限设置六:父组件和子组件相互传值和接收七:for 循环渲染组件Ant Design Pro 全家桶技术栈:1.antd 基于 Ant Design 设计体系的 Rea...原创 2019-12-04 11:52:23 · 4082 阅读 · 0 评论 -
Ant Design Pro 登录流程以及路由权限设置
登录流程:1.ant 框架最外层套了SecurityLayout 布局SecurityLayout 中判断用户是否登录,做自动跳转路由处理。里面的currentUser 和currentUser.userid 很关键,是判断登录状态的值.2.currentUser 是通过src/models/user 中fetchCurrent 绑定type saveCurren...原创 2019-11-29 20:51:14 · 15193 阅读 · 1 评论 -
React子组件给父组件传值, 父组件引用子组件并给子组件传值
本博客代码是 React 父组件和子组件相互传值的 demo;实现封装一个折线图,折线图选择下拉框,获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图;效果图如下:父组件代码:代码解析:父组件 Parent 引用子组件 Sub ,传递了 list 组件给子组件,并且接收子组件传递给父组件的 storeId ;import React, { Component } fro...原创 2019-11-27 18:28:37 · 3492 阅读 · 0 评论 -
React 父组件给子组件传值,子组件接收
父组件传值代码: render() { return ( <div> {this.state.list?(<GeomLine list={this.state.list}/>):null} </div> ); }子组件接收代码:class GeomLine extends Compon...原创 2019-11-27 16:38:42 · 3859 阅读 · 0 评论 -
react控制组件的显示或隐藏, 根据state判断元素显示隐藏 , setState不实时生效解决方法
代码实现功能:根据state 中的值判断子组件显示或隐藏,因为 setState 不是及时生效的,所以不做显示隐藏判断会报错。 render() { // 客户经理循环组件 function CommentSpan(props){ const numbers = props.managers; if(!numbers) return; ...原创 2019-11-27 11:45:45 · 10294 阅读 · 2 评论 -
ant table表格整行点击事件并获取当前行的数据
实现效果:点击表格中某一行,或者点击表格中某一行的一个字段,获取当前行的 item 下标数据,并用 Link 标签传参,下一个页面接收的实现。如果使用router 跳转路由传参,需要导入import router from 'umi/router';如果用 Link 跳转路由传参,需要导入 import Link from 'umi/link';1.点击整行得到当前数据的实现代码:...原创 2019-11-26 18:07:54 · 16128 阅读 · 0 评论 -
React for循环渲染组件
通常你需要在一个组件中渲染列表。或者循环遍历渲染相同的多个组件,下面看看怎么实现:先来个有 If 判断的字组件循环渲染: render() { // 聊天列表组件 function MsgList(props){ const list = props.list; const listItems = list.map((item,id...原创 2019-11-26 16:34:40 · 10793 阅读 · 0 评论 -
Ant Design Pro 跳转路由 传参数,接收参数
umi/link通过声明的方式做路由跳转。例子:import Link from 'umi/link';export default () => { <div> /* 普通使用 */ <Link to="/list">Go to list page</Link> /* 带参数 */ <Link ...原创 2019-11-26 15:43:55 · 8275 阅读 · 1 评论 -
devServer proxy跨域 设置代理 proxy
概念什么是同源策略同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。所谓同源是指:协议、域名、端口都相同什么是跨域跨域就是不同源,就是不满足协议、域名、端口都相同的约定如:看下面的链接是否与 http://www.test.com/index.ht...转载 2019-11-25 11:35:01 · 4570 阅读 · 0 评论 -
Ant Design Pro 组件事件绑定 Input onChange
Input 组件的 onChange 事件绑定语法 render() { this.shop_change = e => { const { value } = e.target; console.log('shop_change',value) }; return ( <Input placeholder="" onChange={thi...原创 2019-11-21 11:18:51 · 8464 阅读 · 0 评论 -
dispatch callback ant design pro 网络请求回调函数
index.jsx代码解析:在组件初次渲染时调用 model 中 命名空间为 a_models 的 getData 网络请求,传了一个patload 参数和 callback 回调函数过去,然后通过 this.setState ()更新视图的 state。import { Form, Tabs,Affix, Button,Input,Table } from 'antd';i...原创 2019-11-21 10:04:52 · 4414 阅读 · 0 评论 -
Ant Design Pro 网络请求,视图绑定model并且渲染到页面 umi-request
封装网络请求,在service中新建接口,在model调用service,在视图绑定model并且得到网络请求的回调函数,获取网络请求的数据渲染到页面。网络请求数据走向;1.在utils/request.js 封装网络请求;/** * request 网络请求工具 * 更详细的 api 文档: https://github.com/umijs/umi-request */...原创 2019-11-20 19:42:04 · 4581 阅读 · 0 评论 -
React 组件生命周期
组件的生命周期可分成三个状态:Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM生命周期的方法有: componentWillMount在渲染前调用,在客户端也在服务端。 componentDidMount: 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOM...原创 2019-11-20 11:01:47 · 1860 阅读 · 0 评论 -
ant Design Pro 登录状态管理
未登录自动跳转到登录页面,登录成功不跳转回登录页面的实现代码调用流程。ant Design Pro 是一个企业中后台管理框架,开始做他,第一个肯定是要做登录,下面来看一下它是怎么登录的。先看路由配置Authorized.jsx代码:import React from 'react';import Redirect from 'umi/redirect';import { ...原创 2019-11-14 21:40:57 · 12274 阅读 · 0 评论 -
DvaJS 入门, 快速上手Dva
为什么要使用Dva?React 没有解决的问题React 本身只是一个 DOM 的抽象层,使用组件构建虚拟 DOM。如果开发大应用,还需要解决一个问题。通信:组件之间如何通信? 数据流:数据如何和视图串联起来?路由和数据如何绑定?如何编写异步逻辑?等等#通信问题组件会发生三种通信。向子组件发消息 向父组件发消息 向其他组件发消息React 只提供了一种通信手段:传...原创 2019-11-14 17:08:50 · 5007 阅读 · 0 评论 -
前端开发学习常用网站网址及介绍(都是免费的)
在开发的时候,想记住所有的单词基本是不可能的,所以就需要进入文档,只要理清需求能做出来,就很不差了!!1.百度,俗称度娘,有不懂的就问百度,有问必答,跳转2.百度翻译,不懂的单词,复制粘贴就懂了,跳转3.微信小程序开发文档,跳转4.微信公众平台,跳转5.我的 CSDN 博客主页,跳转6.菜鸟教程,里面有超级多的开发教程,跳转7.W3C 教程,里面有超级多的开发教程,跳转...原创 2019-11-12 19:02:49 · 26147 阅读 · 28 评论 -
React 开发环境搭建
先来一个 React 官方文档的链接点击跳转搭建 React 的前期准备:你的本地环境需要安装 cnpm、node。注:代码块中的 $ 代表: $后面是在命令行输入的命令,举例$ npm start解:实际上是应该打开命令行输入npm start下面开始安装部署 React 的运行环境:node 安装:如果你的系统还不支持 Node.js 及 N...原创 2019-11-12 18:08:43 · 2304 阅读 · 0 评论 -
React路由 react-router-dom
React的路由:首先我们创建一个React应用npm install -g create-react-appcreate-react-app demo-appcd demo-app安装路由npm install react-router-domnpm add @babel/runtime接下来,将以下任一示例复制/粘贴到中src/App.js。第一个示例...原创 2019-11-01 14:50:38 · 2038 阅读 · 0 评论 -
【Ant Design Pro 一】 环境搭建,创建一个demo
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。搭建 Ant Design Pro 的前期准备:你的本地环境需要安装 cnpm、node。注:代码块中的 $ 代表: $后面是在命令行输入的命令,举例$ npm start解:实际上是应该打开命令行输入npm start下面开始安装部署 Ant Design P...原创 2018-09-05 15:23:40 · 13804 阅读 · 2 评论 -
React State和生命周期 3
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。一:组件的生命周期组件的生命周期可分成三个状态:安装:已插入真实DOM 更新:正在被重新渲染 卸载:已移出真实DOM生命周期的方法有: componentWillMount在渲染前调用,在客户端也在服务端。 componentDidMount:在第一次渲染后调用,只在客...原创 2018-09-18 15:32:21 · 2284 阅读 · 0 评论 -
React 事件 4
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。将参数传递给事件处理程序在循环内部,通常需要将额外的参数传递给事件处理程序。例如,如果id是行ID,则以下任何一个都可以工作:<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button><...原创 2018-09-18 19:07:59 · 2116 阅读 · 0 评论 -
React 循环渲染 5
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。使用循环渲染的demo:const todoItems = todos.map((todo) => <li key={todo.id}> {todo.text} </li>);const todoItems = todos.map((tod...原创 2018-09-19 11:03:22 · 3605 阅读 · 0 评论 -
React 开始制作 6
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。从模拟开始第1步:将UI分解为组件层次结构不同的颜色为不同的组件,第2步:在React中构建静态版本第3步:确定UI状态的最小(但完整)表示第4步:看看你状态哪儿要存在第5步:添加反向数据流...翻译 2018-09-19 14:54:13 · 2191 阅读 · 0 评论 -
React 创建组件 使用组件 2
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。组件:通过组件,可以将UI拆分成独立的,可重复使用的部分,从概念上讲,组件就像javaScript函数,它们接受任意输入(称之为道具),并返回描述屏幕上应显示内容的Recat元素。1.定义一个简单的组件并且使用组件(注意:组件名称第一个字母必须大写)function Demo(user...原创 2018-09-14 13:30:13 · 2528 阅读 · 0 评论