- 博客(49)
- 资源 (30)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 react-ant 实现登录,并把数据存入global,本地存储防止刷新数据丢失
完整配置仓库地址:https://gitee.com/zhouyunfang/react-ant/tree/7-loginCheck/Login.jsimport React, { Component } from 'react'// 用于定义global中的dispatchimport {connect } from 'dva'// 定义自校验规则import { email_...
2019-03-31 15:20:05
1340
原创 js 拆分键值对
对请求回来的键值对拆分:* -LbHFGWS7sQk_zqs:{email: "164591357@qq.com",pwd: "123456"}* 把返回的data下唯一的key是自己生成的要把key和值拆分,* 把value部分放入单独的数组中 Request('/user.json').then(res =>{ if(res.statu...
2019-03-31 14:31:02
2463
原创 react-ant axios封装请求及使用
安装:cnpm install axios --save在utils/Request.jsimport axios from 'axios'export default function Request(url,params){ return axios({ baseURL:'https://接口地址.com/', url:url, ...
2019-03-31 13:46:04
1893
原创 react-ant 修改antDesign 样式
需求:想修改antDesign样式发现修改不了解决:一定要在样式外面加上:global写全局样式 :js: <Form onSubmit={this.handleSubmit} className="account-form"> <Form.Item label="邮箱"> <Input type="em...
2019-03-31 11:47:55
6331
原创 react-ant 引入静态图片配置webpack,及webpck常规配置
1.如果要配置静态图片就要配置webpack并找到根目录下面的.webpackrc文件，并在文件中添加插件配置const path = require('path');//node自动提供的path模块export default { alias:{ Assets:path.resolve(__dirname,'./src/assets') } };...
2019-03-31 11:12:18
1399
原创 react-ant 实现二级路由和三级路由
AntDesign:https://ant.design/components/tabs-cn/#components-tabs-demo-size注:这里的路由是已经封装好了的仓库地址:https://gitee.com/zhouyunfang/react-ant/tree/6-child-router/src下相关页面:1. pages/About/index.js2. r...
2019-03-31 01:50:58
5762
原创 react-ant 私有路由(路由守卫)
需求:如果用户没有登录只能进入登录和注册,其它页面或指定页面不想让游客看到思路:1.设置一个开关,判断开关为true就不让进到指定的页面,只能进登录和注册,如果为false,让其跳转到用户点击进入的页面2.相关文件:1. router.js2. SubRoutes.js3. models/global.js(存储用户数据)router.js声明私有路由开...
2019-03-30 21:47:22
1394
原创 react-ant 路由优化及封装,重定向,未找到路径跳到指定的页面,models的基本使用
仓库地址:https://gitee.com/zhouyunfang/react-ant/tree/4-route-encapsul修改相关文件:1. reouter.js(路由优化页面)2. utils/SubRoutes.js(路由封装页面)3. pages/IndexPage.js(首页)4. src/components/NoMatch.js(用于地址栏上手动输入不...
2019-03-30 21:15:28
1662
原创 react-ant 解决使用路由Link跳转失败
当我们配置好了路由和引用路由的时候不报错;但页面就是空白解决方式:把router.js Route标签中的exact删除就可以 <Route path="/" exact component={IndexPage} />...
2019-03-30 17:04:41
1593
原创 react-ant 写入class报错
如果class中有特殊符号就要用[]的方式去写.menu-left { display: inline-block; vertical-align: top; background: none; border-bottom: none; position: relative; width: calc(100% - 44p...
2019-03-30 13:57:33
285
原创 react 安装antDesign和sass
同时安装sassantDesigncnpm i node-sass sass-loader antd --savesasss不需要配置webpack但是antd要配置按需加载$ cnpm i babel-plugin-import --save配置webpack把文件中的改成.webpackrc.jsexport default { extraBabel...
2019-03-30 13:55:05
1335
原创 react-ant vscode 插件
插件 Ant Design Snippets如果生成layout快捷键antlayout + enterfunction IndexPage() {//布局生成快键antlayout + enter return ( <Layout> <Header>header</Header> <Layout> ...
2019-03-30 13:33:56
1937
原创 react-ant 解决tab切换在地址栏输入对应的菜单出现导航与内容对应不上的问题
仓库地址:nav分支https://gitee.com/zhouyunfang/react-dva-antDesign/tree/nav我这里indexPages.js为父组件NavBar.js为子组件问题说明,当手动在地址栏输入地址时nav导航active无法激活但页面可以正常跳转解决;antdesign的官网:https://ant.design/compon...
2019-03-30 10:57:40
2328
原创 React 定制私有路由
需求,在非登入情况下不可以进入dashboard.js页面仓库地址:https://gitee.com/zhouyunfang/react-project/tree/PrivateRoute/有src路径下创建common文件夹下再创建一个dashboard.js期间用到了redux,所以也对应的把redux相关的文件给贴出来import React from 'react'/...
2019-03-27 20:55:50
1144
2
原创 React 子组件封装
需求:有很多个input框,都为输入的input,这个时候需要封装一个组件子组件:// 封装input输入框import React from 'react'import classnames from 'classnames'// 定义返回的数据类型import PropTypes from 'prop-types'const TextAreaFieldGroup = ({...
2019-03-26 23:52:01
1012
原创 React 登录获取token并存储及解析token
仓库地址:https://gitee.com/zhouyunfang/react-project/tree/formAuthenticated/目录存储token解析token解决页面刷新,数据消失问题当前目录:存储tokenlogin.jsimport React, { Component } from 'react'// 实现ui组件和数据连接i...
2019-03-26 18:19:55
27368
1
原创 React form 表单验证
安装表单验证模块npm i classnames页面引入import classnames from 'classnames'页面使用import React, { Component } from 'react'import axios from 'axios';import classnames from 'classnames'class Register ...
2019-03-26 14:06:53
4667
原创 React input动态取值和赋值
需求:对用户在form表单输入的值提取出来,并且改变setState中的数据1.在constructor中设置初始值2.在Input框中定义如果只有value没有onChange事件会报错,change事件可以关联输入的值 value = {this.state.name}onChange ={this.onChange.bind(this) }3.对onchange事件注...
2019-03-26 12:29:33
20380
原创 React 安装路由(router)及使用
项目地址:https://gitee.com/zhouyunfang/react-project安装路由:npm i react-router-dom引入路由:路由可以在index.js或都app.js引入都可以;我在app.js中引入引入之后一定要重启项目// 如果觉得 BrowserRouter 名字太长可以用{BrowserRouter as Router} ...
2019-03-26 01:53:20
3381
原创 Redux 添加数据请求最后渲染
仓库代码:https://gitee.com/zhouyunfang/react-redux.git目录结构:1. postForm.js为提交数据页面触发action事件方法为this.props.createPost(post)import React, { Component } from 'react'class PostFrom extends Compon...
2019-03-25 21:06:59
658
原创 Redux 安装及使用(获取请求数据)
仓库代码:https://gitee.com/zhouyunfang/react-redux.git如果想要在react中使用状态统一管理就要使用redux什么时候需要用到redux?某个组件的状态，需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态发生上面情况时，如果不使用 Redux 或者其他状态管理工具，不按...
2019-03-25 16:46:47
1072
1
原创 React form表单fetch提交数据
import React, { Component } from 'react'class PostFrom extends Component { constructor(props) { super(props) this.state = { title: '', body: '' }...
2019-03-25 15:05:53
4653
原创 React 绑定点击事件和change事件
onSubmit:为点击事件,改变this事件onChange:为关联触发事件import React, { Component } from 'react'class PostFrom extends Component { constructor(props) { super(props) this.state = { ...
2019-03-25 14:46:30
4933
原创 React 生命周期
React 生命周期分为三种状态 (针对有状态组件)容器:所有生命周期都写class类 Component中;import React, { Component } from 'react'export default class Footer extends Component { constructor(props){ super(props) this.s...
2019-03-24 22:38:14
110
原创 React 有状态组件和无状态组件的区别
有状态组件:有状态组件的区别是它属于一个class类,有继承,可以通过this来接收状态和属性如果你想用react的生命周期,想对一些数据进行增删改查的话就要用到有状态组件import React, { Component } from 'react' class Footer extends Component { render() { return...
2019-03-24 21:50:10
3197
1
原创 React 动态数据绑定修改对应的input框更新对应的文本内容
需求:以下的输入框我修改哪个,哪个对应的文本内容及时更新子组件:const person = (props) =>{ return( <div className="footer"> <p onClick={props.presonHandler}>我的名字叫{props.name}</p> &l...
2019-03-24 17:42:35
4981
1
原创 Es6 find 和findIndex的区别
转自:https://blog.csdn.net/menghuannvxia/article/details/79640028ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined，而findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。下面通过实例详解，需要的朋友参考下吧...
2019-03-24 17:01:32
8378
原创 react 点击对应删除
需求:点击的时候,删除当前下标对应的内容(使用了父子组件)父组件:import React, { Component } from 'react';import './App.css';import Footer from './components/layout/Footer';class App extends Component { state = { perso...
2019-03-24 16:47:42
2074
原创 React map 循环 动态生成多个标签
需求:一个标签,随着多条数据动态生成多条标签元素当前父组件引入了子组件;父组件:import React, { Component } from 'react';import './App.css';import Footer from './components/layout/Footer';class App extends Component { state = {...
2019-03-24 15:27:50
12561
原创 React if 显示与隐藏(切换)
需求:点击Button按钮让内容在显示与隐藏中切换import React, { Component } from 'react';import './App.css';import Footer from './components/layout/Footer';class App extends Component { state={ persons:[ ...
2019-03-24 13:37:11
5773
原创 React 双向数据绑定
需求:我在子组件中的inPut框输入内容的时候,我需要文本中指定的name内容也跟着改变子组件:import React from 'react'const person = (props) =>{ return( <div> <p>我的名字叫{props.name}</p> <input...
2019-03-24 12:58:33
264
原创 React 子组件之间传值及通信
需求:一个子组件在父组件中使用,值为父组件定义,或者内容为父组件定义父组件传值:import React, { Component } from 'react';import './App.css';import Footer from './components/layout/Footer';class App extends Component { render() ...
2019-03-23 19:11:48
269
原创 react redux开发插件调试
在谷歌商店下载Redux DevTools之后在store.js中引入redux导入compose// compose用于后台调试import { createStore, applyMiddleware,compose } from 'redux'在export中compose()写入window调试export const store = createStor...
2019-03-22 23:46:23
590
原创 js prototype 继承提取父级值的问题
如果在方法用var那么当前只是在方法里声明的变量,这变量并没有赋值给对象,所以报错 function supers(){ var value = 0; } supers.prototype.sub = function(value){ this.value ++; console.log(this.v...
2019-03-22 17:54:36
274
转载 [转]小程序登录与授权区别
转自:https://www.hishop.com.cn/xiaocx/show_57720.html1授权和登录的区别首先必须要明白，授权和登录实际上是两个操作。1.1 授权(已废弃)那授权的作用是啥呢?从小程序官方文档中我们可以看到授权操作只需通过wx.authorize() 接口便可以完成，以下是文档中对授权操作的描述：提前向用户发起授权请求。调用后会立刻弹窗询问用户是否...
2019-03-18 23:12:27
3271
原创 小程序登录
wxml<!--pages/me/index.wxml--><view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}" open-type='getUserInfo' bindgetuserinf...
2019-03-18 22:29:04
173
转载 [转]微信小程序、微信公众号、H5之间相互跳转
本文转自：https://www.cnblogs.com/colorful-paopao1/p/8608609.html一、小程序和公众号答案是：可以相互关联。在微信公众号里可以添加小程序。图片有点小，我把文字打出来吧：可关联已有的小程序或快速创建小程序。已关联的小程序可被使用在自定义菜单和模版消息等场景中。公众号可关联同主体的10个小程序及不同主体的3个小程序。同一个...
2019-03-18 19:00:19
1419
1
原创 es6 promise 用法
promise对象的特点（1）对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是promise这个名字的由来“承若”；（2）一旦状态改变就不会再变，任何时候都可以得到这个结果，promise对象的状态改变，只有两种可能：从pending变为fulfilled，从pending变为rejected。这时就称为resol
2019-03-13 16:12:33
173
原创 小程序 移动分辨率的组成
分辨率的组成是由逻辑分辨率(pt) 和 物理分辨率(px)组成 (比如一个图片由几个点组成) =1个pt 对应几个Px逻辑分辨率(pt):对应的是屏幕尺寸物理分辨率(px):对应的是多少个像素点问题 :为什么小程序模拟分辨率给出的是375 设计给出的是750?因微信给出的是逻辑分辨率而设计师给出的是物理分辨率,它们之间为2倍的关系 所以要折算出750 1px = 2rpx,...
2019-03-12 10:19:44
458
小程序搜索功能并对搜索出的数据存储到历史记录
2019-05-03
小程序实现搜索功能
2019-05-03
jpegtran.exe
2022-11-16
JS Code Run_v1.2.2_apkpure.com.apk
2022-01-08
RunJS-Setup-2.2.2.exe
2022-01-08
README.md编写教程（基本语法）
2020-02-12
SetRole.js promise all 对axios返回做统一处理
2020-01-04
reduxexample.zip
2019-12-08
axios_vue_element.zip
2019-10-16
vue2.0 vue-devtools成功安装打开的时候一片空白
2019-10-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人