晓果博客-CSDN博客

原创 Ant Design Pro 动态路由的实现

提供登录与获取用户信息数据接口import request from '@/utils/request';/** * * @returns 首页列表权限 */export async function queryCurrent():Promise<any>{ return request('/user/info2', { prefix:'/mock', method: 'GET', });}登录接口数据{'code': 200, 'data'.

2021-03-19 17:35:27 5893 3

原创 umi.js学习（九）、全局共享数据

主要使用@umijs/plugin-modelhttps://umijs.org/zh-CN/plugins/plugin-model#启用方式在src目录下创建models，并创建数据存储tsappstore.ts提供数据仓库import { useState, useCallback } from 'react'export default () => { const [user, setUser] = useState({}) const setUser.

2021-03-16 17:37:22 4933 4

原创 umi.js学习（八）、案例三、ProTable 简单使用

效果展示导入yarn add @ant-design/pro-table//使用DatePicker时间选择器yarn add moment 创建user模块配置路由及配置代理在.umire.ts中import { defineConfig } from 'umi';export default defineConfig({ nodeModulesTransform: { type: 'none', }, routes: [ { pa.

2021-03-16 17:35:16 2252 2

原创 umi.js学习（七）、简单列表和数据编辑（使用antd）

效果展示创建user模块配置路由及配置代理在.umire.ts中import { defineConfig } from 'umi';export default defineConfig({ nodeModulesTransform: { type: 'none', }, routes: [ { path: '/', component: '@/pages/users/index' }, ], fastRefresh: {}, pro.

2021-03-16 17:32:10 727 1

原创 umi.js学习（六）、简单列表和数据编辑（学习而已，项目中不推荐）

2021-03-16 17:28:43 412

原创 umi.js学习（五）、antd 中使用From表单报错

在modal弹窗框中使用From表单报错devScripts.js:5836 Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?官方文档解释：在modal中加上forceRender 强制加载更新From表单内容报错Cannot update during an existing state transition (such as.

2021-03-16 17:25:01 1027 1

原创 umi.js学习（四）、ajax请求获取数据

创建ajax请求文件 service.ts编写ajax请求import { request } from 'umi';export async function getRemoteList() { return request('/api/users', { method: 'get' }) .then(response => { return response }) .catc.

2021-03-16 17:21:58 1698

原创 umi.js学习（三）、从model的effects中获取数据

创建主页面index.tsx和数据存储model.ts内置 dva约定式的 model 组织方式，不用手动注册 model文件名即 namespace，model 内如果没有声明 namespace，会以文件名作为 namespace内置 dva-loading，直接 connect loading 字段使用即可支持 immer，通过配置 immer 开启约定式的 model 组织方式符合以下规则的文件会被认为是 model 文件， src/models 下的文件 .

2021-03-16 17:18:45 1788

原创 umi.js学习（二）、如何从model的reducers中获取数据

2021-03-16 17:15:35 2111

原创 umi.js学习（一）、认识umi.js

umi.js安装npm install -g umi 查看umi.js版本umi -v创建umi项目先找个地方建个空目录。$ mkdir myapp && cd myapp通过官方工具创建项目$ yarn create @umijs/umi-app# 或 npx @umijs/create-umi-app创建ant-design-pro项目yarn create umi运行yarnyarn dev...

2021-03-16 17:12:48 654

原创 typeScript学习（十五)、非空断言操作符！& 泛型

非空断言操作符！let name:string = 'huxngxiaoguo'let nus:string;console.log(name.trim())//非空断言操作符 ! 可以消除编辑器当nus为undefined时候报错//使用时注意保证nus不为undefined，否则运行时会报错console.log(nus!.trim())export {};泛型const addUID = <T extends { name: string }&g.

2021-03-09 11:25:46 4534

原创 typeScript学习（十四)、接口类实现

创建接口export interface HasFormatter { name?: string;//可以实现也可以不实现 age?: number; format(): string;}实现类import { HasFormatter } from "../interfaces/hasformatter";class Invoice2 implements HasFormatter { constructor( private cl.

2021-03-09 11:23:52 319

原创 typeScript学习（十三)、接口

interface IsPerson { name: string; age: number; speak(a: string): void; spend(a: number): string;}/***********************************普通实现**************************************** */const me: IsPerson = { name: "shaun", age: 30.

2021-03-09 11:20:00 161

原创 typeScript学习（十二)、模块化管理

创建类模块class Invoice { // private client: string; // public details: string; // readonly amount: number; constructor( private client: string, //内部访问可修改 public details: string, readonly amount: number //内部访问不可修改 .

2021-03-09 11:19:08 209

原创 typeScript学习（十一)、面向对象_public_private_readonly

// classesclass Invoice { // private client: string; // public details: string; // readonly amount: number; constructor( private client: string, //内部访问可修改 public details: string, readonly amount: number //内部访问不可修改

2021-03-09 11:16:49 469

原创 typeScript学习（十)、面向对象_class

class Invoice { client: string; details: string; amount: number; constructor(c: string, d: string, a: number) { this.client = c; this.details = d; this.amount = a; } format() { return `${this.client} o.

2021-03-09 11:16:00 211

原创 typeScript学习(九)、function_type_参数限制_返回值类型

// let greet: Function;//// greet = (name: string): void => {// console.log(`hello ${name}`);// };//// greet('world')/**********************参数限制********************************** *///声明let greet: (a: string, b: string) => void;//实现gree

2021-03-09 11:14:48 724

原创 typeScript学习(八)、类型别名_Type_Aliases

//将sting和number类型封装为StringOrNum类型type StringOrNum = string | number;const logDetails = (uid: StringOrNum, item: string) => { console.log(`${item} has a uid of ${uid}`);};logDetails(1111, "world");// ------------------------------------------.

2021-03-09 11:13:23 229

原创 typeScript学习(七)、function_参数默认值_可选参数

/*****************************参数默认值********************************* */const add: Function = (num1: number, num2: number = 10) => { return num1 + num2;};function add2(num1: number, num2: number = 10) { return num1 + num2;};function add3(.

2021-03-09 11:10:07 695

原创 typeScript学习(六)、动态类型

let staff: any = 119;console.log(staff);staff = "ruby";staff = { name: "ruby",};staff = [1];console.log(staff)// --------------------------------------------------------------------let languages: any[] = ["ruby", 18, [1], { name: "ruby" }]

2021-03-09 11:08:03 969

原创 typeScript学习(五)、联合类型_数组类型_对象类型

/*******************************联合类型**************************************** */let money: string | number | boolean = 9;money = "5";money = 6;console.log(money)/*******************************数组类型**************************************** */let lan.

2021-03-09 11:06:45 937

原创 typeScript学习(四)、数组和对象

/****************************数组***********************************/let languages = ["ruby", "js", "dart", "python"];console.log(languages[0]);languages.push("java");//ts报错（默认只能存字符串）// languages.push(222);languages[0] = "rust";console.log(lang.

2021-03-09 11:04:34 746

原创 typeScript学习(三)、基本类型

let hName = "huangxiaoguo";hName = 'xiaoguo';console.log(hName)const username = "huangxiaoguo"//常量不可以修改（ts会报错）// username ='xiaoguo'/*******************************数据类型***************************/let age: number = 19// let age = 19//number类

2021-03-09 10:41:23 165

原创 typeScript学习(二)、配置文件 tsconfig.json

生成配置文件 tsconfig.jsontsc --init编译ts—>js直接执行tsctsc修改tsconfig.json中的配置tsc使用npx生成tsconfig.jsonnpm install -g npxnpx tsconfig.json

2021-03-09 10:37:48 774

原创 typeScript学习(一)、认识ts

安装tsnpm install -g typescript查看版本tsc --version相关命令tsctsc -wtsc-nodetsc-node-devnodemon tspconcurrently "tsc ..." "nodemon ..."编译ts—>jstsc filename.ts // filename为TypeScript文件名//tsc命令工具还可以同时编译多个ts文件，多个文件之间用逗号隔开tsc file1.ts.

2021-03-09 10:34:12 544

原创 React.js学习（十五）、antd实现自定义主题

安装less cnpm install less less-loader --save创建 config-overrides.jsconst { override, fixBabelImports, addLessLoader } = require('customize-cra');//针对antd实现按需打包module.exports = override( fixBabelImports('import', { libraryName: 'antd',.

2021-03-02 14:48:54 271

原创 React.js学习（十四）、antd实现按需打包

安装 antdcnpm install antd --save安装依赖cnpm install react-app-rewired --savecnpm install customize-cra --savecnpm install babel-plugin-import --save创建 config-overrides.js修改 package.json "scripts": { "start": "react-scripts start", .

2021-03-02 12:24:23 314

原创 React.js学习（十三）、react扩展

1. setStatesetState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callb

2021-02-26 16:19:07 272

原创 React.js学习（十二）、react-redux使用

安装react-reduxnpm install --save react-redux引入redux-thunk，用于支持异步actionnpm install --save redux-thunk引入redux-devtools-extensionnpm install redux-devtools-extensionsrc/index.js中使用Providerimport React from 'react'import ReactDOM from 'react-dom.

2021-02-26 16:17:28 380

原创 React.js学习（十一）、编程式路由导航&withRouter

一、编程式路由导航push导航pushShow = (id,title)=>{ //push跳转+携带params参数 this.props.history.push(`/home/message/detail/${id}/${title}`) //push跳转+携带search参数 this.props.history.push(`/home/message/detail?id=${id}&title=${title}`) //push跳转+携带st

2021-02-26 16:09:49 771

原创 React.js学习（八）、React-router-dom使用（简单使用Link）

下载react-router-domnpm install --save react-router-domindex.js包裹Router//引入react核心库import React from 'react'//引入ReactDOMimport ReactDOM from 'react-dom'//import {BrowserRouter} from 'react-router-dom'//引入Appimport App from './App'ReactDOM.re.

2021-02-26 16:03:10 1406

原创 React.js学习（十）、路由传参

一、向路由组件传递params参数render() { const {messageArr} = this.state return ( <div> <ul> { messageArr.map((msgObj)=>{ return (

2021-02-26 15:57:02 384

原创 React.js学习（九）、React-router-dom使用（NavLink，NavLink封装，Switch，多级刷新，匹配，重定向）

NavLink与Link区别 1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名 {/* 在React中靠路由链接实现切换组件--编写路由链接 */}<NavLink activeClassName="huang" className="list-group-item" to="/about">About</NavLink><NavLink activeClassName="huang" className="list-gro.

2021-02-26 15:51:58 837

原创 React.js学习（七）、react订阅数据

安装cnpm install pubsub-js --save使用1) import PubSub from 'pubsub-js' //引入2) PubSub.subscribe('recever', function(data){ }); //订阅3) PubSub.publish('recever', data) //发布消息案例：定义两个组件组件Dog订阅消息import React, { Component } from 'react'import Pu.

2021-02-26 15:45:17 258

原创 React.js学习（六）、配置代理

const proxy = require('http-proxy-middleware')module.exports = function(app){ app.use( proxy('/api1',{ //遇见/api1前缀的请求，就会触发该代理配置 target:'https://www.fastmock.site/mock/f6273fce31c98c4d64fd82d91784712f/api', //请求转发给谁 changeOrigin:true,//控制服务器收到的请.

2021-02-26 15:41:31 399

原创 React.js学习（五）、react脚手架创建工程化项目

安装node.js下载地址：https://nodejs.org/zh-cn/download/直接进行安装，安装完成node.js后自动帮助完成npm的安装，查看是否完成可以到环境配置中查看。查看npmnpm -v安装淘宝镜像npm config set registry https://registry.npm.taobao.org在npm -v命令后显示npm安装完成时，即可安装淘宝镜像，后面的npm 可以改成cnpm执行命令配置后可通过下面方式来验证是否成功np.

2021-02-26 15:32:02 309

原创 React.js学习（四）、高阶函数&key的作用

一、高阶函数高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。常见的高阶函数有：Promise、setTimeout、arr.map()等等函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

2021-02-26 15:22:37 261

原创 React.js学习（三）、生命周期

旧生命周期（版本17以前）新生命周期（版本17以后）一、旧生命周期 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1. constructor() 2. componentWillMount() 3. render() 4. componentDidMount() =====> 常用 .

2021-02-26 15:13:00 247

原创 React.js学习（二）、三大属性state&props&ref

一、组件实例对象属性state简单示例<script type="text/babel"> //1.创建类式组件 class StateComponent extends React.Component { constructor(props) { super(props) //初始化状态 this.state = { isGood:

2021-02-26 15:01:01 290