前端
文章平均质量分 56
做你的猫miao
这个作者很懒,什么都没留下…
展开
-
表单验证系列(五):表单校验react-final-form-hooks之子模块(卡片4 (table表单验证 TableComponent ColumnsFormHooks))
表单验证系列(五):表单校验react-final-form-hooks之子模块(卡片4 (table表单验证 TableComponent ColumnsFormHooks))原创 2022-06-21 17:56:12 · 260 阅读 · 0 评论 -
表单验证系列(四):表单校验react-final-form-hooks之子模块(卡片4 (table表单验证 TableComponent ColumnsFormHooks))
Table均为输入框,输入内容时同步校验原创 2022-06-21 17:55:46 · 341 阅读 · 0 评论 -
表单验证系列(三):react-final-form-hooks之子模块(卡片2 (表单验证 ReactFinalFormHooksCopy))
import React, { useImperativeHandle, forwardRef, useState } from 'react';import { Form, Input, notification, Select,} from 'tea-component';import { rules, Esc_Char, Cn_En_Num_Pun_100, Cn_En_Num_Pun_1000,} from '@/utils/checkRoules';i..原创 2022-06-21 17:51:16 · 397 阅读 · 0 评论 -
表单验证系列(二):react-final-form-hooks-父级结构
一、页面主体样式二、页面代码import React, { useRef, useState } from 'react';import { useHistory } from 'react-router-dom';import { Layout, Card, Button,} from 'tea-component';import ReactFinalFormHooks from '../components/ReactFinalFormHooks';import ReactF原创 2022-06-21 17:46:19 · 360 阅读 · 0 评论 -
表单验证系列(一):Table主页
技术栈:umi、React、ts、tea-component搭建基础父级页面import React, { useRef, useState, Fragment } from 'react';import { useHistory } from 'react-router-dom';import { Layout, Card, Button, SearchBox, Table, Justify,} from 'tea-component';const { Conte原创 2022-06-21 17:45:35 · 206 阅读 · 0 评论 -
umi首屏加载速度优化
以上内容来源于转载作者:pro-xiaoy链接:https://juejin.cn/post/6964352706832302117来源:稀土掘金umi应用首屏加载速度提高3倍+(通用的首屏优化方法)根据以往的博客,目前我就司的公司前端框架umi, ali出品以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展的前端应用框架。问题所在一直以来我们网站的首页加载速度很慢,虽然使用了umi但是我们没有使用ssr依旧使用的是spa.首屏加载速度在6s左右, 当我们原创 2022-06-21 17:15:19 · 3131 阅读 · 0 评论 -
Hook and Mobx demo
一、import React, {useState, useEffect, useCallback} from 'react'// import { CloseOutlined } from '@ant-design/icons';export default function HookFour() { const [list, setlist] = useState(['a', 'ab', 'abc', 'b', 'cn']) const [oldlist] = useState(['a', '原创 2020-08-06 14:17:04 · 278 阅读 · 0 评论 -
React模拟后台项目(八)添加用户页面
一、添加用户页面 src/pages/user/usersCreate/index.js// 导入库import React, {Component} from 'react'import { connect } from 'react-redux'import { withRouter } from 'react-router-dom'// 导入组件import { postUsersData } from '../store/actionCreators'// 导入样式import {原创 2020-08-02 21:41:32 · 367 阅读 · 2 评论 -
React模拟后台项目(八) 附加 user仓库文件配置
一、用户页面仓库 src/pages/user/store/index.jsimport reducer from './reducer';import * as actionCreators from './actionCreators';import * as constants from './actionTypes'; export {reducer, actionCreators, constants} 二、用户页面仓库 src/pages/user/store/actionT原创 2020-08-02 21:37:54 · 185 阅读 · 0 评论 -
React模拟后台项目(八)user页面文件配置
一、用户页面 src/pages/user/index.js// 导入库import React, {Component} from 'react';import {connect} from 'react-redux';import { getUsersData, deleteUsersData, putUsersData,} from './store/actionCreators'import { withRouter } from 'react-router-dom'/原创 2020-08-02 21:34:08 · 351 阅读 · 0 评论 -
React模拟后台项目(七)Login页面文件配置
一、登录 src/page/login/index.js// 导入库// 导入Reactimport React, { Component } from 'react'import {connect} from 'react-redux'import {Redirect} from 'react-router-dom'import { loginAction} from './store/actionCreators'// 导入样式// 导入styled import {原创 2020-08-02 21:29:36 · 1149 阅读 · 0 评论 -
React模拟后台项目(六)components文件配置
一、错误处理 components/err/404.jsimport React, { Component } from 'react' class Err404 extends Component { render() { return ( <div> this is Err404 index </div> ) }}export default原创 2020-08-02 21:24:00 · 299 阅读 · 0 评论 -
React模拟后台项目(五)接口文件配置(ajax)
一、请求封装 src/api/request.jsimport axios from 'axios'// 判断当前的运行环境// isDev 为真 开发环境 --- npm run serve// isDev 为假 非开发环境(测试环境,生产环境)- npm run buildconst isDev = process.env.NODE_ENV === 'development'const request = axios.create({// 根据环境 设置不同的baseURL// ba原创 2020-08-02 21:17:05 · 716 阅读 · 0 评论 -
React模拟后台项目(四)路由文件配置
一、路由封装 src/router/privateRoute.js// 导入react全家桶import React from 'react'import { Route, Redirect } from 'react-router-dom'// 手册:https://reacttraining.com/react-router/web/example/auth-workflow // 自定义私有路由高阶组件const PrivateRoute = ({component: Compone原创 2020-08-02 21:07:30 · 530 阅读 · 0 评论 -
React模拟后台项目(三)修改全局样式文件配置
一、统一全局样式文件 src/static/reset.jsimport {createGlobalStyle} from 'styled-components';export const GlobalStyle = createGlobalStyle` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, b原创 2020-08-02 21:00:19 · 902 阅读 · 0 评论 -
React模拟后台项目(二)公共Store文件配置
一、导出公共仓库 src/store/index.js// 导入模块import thunk from 'redux-thunk'import { createStore, applyMiddleware } from 'redux'import { composeWithDevTools } from 'redux-devtools-extension'// 导入reducerimport reducers from './reducers'// 创建仓库const store = c原创 2020-08-02 20:55:33 · 443 阅读 · 0 评论 -
React模拟后台项目(一)入口文件配置
一、入口index文件 src/index.js// 导入库import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';import {Provider} from 'react-redux';import { ConfigProvider } f原创 2020-08-02 20:50:56 · 1483 阅读 · 0 评论 -
vue+elementUI为table表格中每一个按钮单独设置loading,按钮loading互不影响(半转载,半本人测试补充)
一、解决思路data中设置一个btnLoading: false缺点:点击一个按钮,列表里的按钮都会进入loading状态(不采用)data中设置一个对象,里面放很多个btnloading{ btnLoading1: false, btnLoading2: false,… }缺点:不知道会列表里会有多少条数据(不采用,太傻了)直接设置 v-loading=“scope.row.MarkUpPirceLoading”可行,行动二、行动第一次尝试(直接贴代码) <el-table-col转载 2020-07-05 12:59:16 · 5300 阅读 · 16 评论 -
VUE main.js、App.vue和assets/css/reset.scss配置
一、目录main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'// import store from './store'// 配置ElementUIimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);// 配置全局默认样式imp原创 2020-06-16 20:52:06 · 1344 阅读 · 0 评论 -
VUE 路由编写
一、目录router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'// 登录部分import Login from '../views/user/Login'// 后台导航首页import First from '../views/index/First' // 后台内容首页import FirstIndex from '../views/index/FirstIndex'// 后台引导模块import D原创 2020-06-16 20:44:32 · 252 阅读 · 0 评论 -
前端路由封装 router
一、目录privateRoute.js// 导入react全家桶import React from 'react'import { Route, Redirect } from 'react-router-dom'// 手册:https://reacttraining.com/react-router/web/example/auth-workflow // 自定义私有路由高阶组件const PrivateRoute = ({component: Component, ...props})原创 2020-06-10 15:26:45 · 350 阅读 · 0 评论 -
前端异步请求封装 api
一、目录request.jsimport axios from 'axios'// 判断当前的运行环境// isDev 为真 开发环境 --- npm run serve// isDev 为假 非开发环境(测试环境,生产环境)- npm run buildconst isDev = process.env.NODE_ENV === 'development'const request = axios.create({// 根据环境 设置不同的baseURL// baseURL: 'htt原创 2020-06-10 15:22:52 · 424 阅读 · 0 评论 -
微信小程序 异步请求封装 包含wx.showLoading懒加载和wx.showToast提示
一、目录结构utils/require.js二、内容// JSDoc手册: https://www.html.cn/doc/jsdoc/tags-author.html// 接口地址 const baseUrl = 'http://XXX.XXX.XXX'/** * 封装数据请求的方法 * @see {@link https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html} *原创 2020-05-14 22:09:03 · 1320 阅读 · 0 评论 -
微信小程序 登录封装 openID
一、目录结构utils/require.js二、内容function isLogin(){ // 获取微信存储数据 wx.setStorage({ // 获取openid key: 'openid', success: res=>{ console.log('已登录', res) }, fail: err=>{ login() } })}// 登录function login(){ //原创 2020-05-14 22:03:34 · 393 阅读 · 0 评论 -
react 使用screenfull插件 实现全屏特效
一、安装yarn add screenfull二、导入import screenfull from 'screenfull'三、定义方法fullScreen = () => { screenfull.toggle()}四、调用<ButtononClick = {this.fullScreen}>全屏</Button>...原创 2020-04-30 08:35:21 · 2779 阅读 · 1 评论 -
React项目框架初始化操作(建框架,UI,样式,路由)及错误lessOptions?, prependData?, appendData?, sourceMap?解决
一、创建框架 CRA命令: npx create-react-app item注释: npx不可用的可使用cnpm创建二、安装基本插件yarn add react redux react-redux redux-devtools-extension immutable react-immutable react-router-dom三、选择UI框架(此处以Antd UI 为例)框架...原创 2020-04-30 08:31:23 · 818 阅读 · 0 评论 -
React和VUE项目推荐目录结构
一、React项目推荐目录结构src目录api 接口目录components 公共组件(或common)pages 组件目录 orders 订单目录 components(相关组件) store (仓库) index.js (默认组件) style.js (默认样式 import styled from 'styled-compon...原创 2020-04-30 08:16:14 · 712 阅读 · 0 评论 -
vs code 添加代码片段 (vue 和 vuex)
Vue代码片段一一、进入vscode方法一:1、ctrl + shift + p2、 snip3、选择Preferences:Configure User Snippets(首选项:配置用户代码段)方法二:二、首次设置输入html回车三、代码片段{ "vue": { "prefix": "vue", "body": [ "<!DOCTYPE html&...原创 2020-04-01 21:45:10 · 744 阅读 · 0 评论 -
vue开发工具安装、测试及安装过程的问题(vue开发工具测试面板为空,"windows 找不到文件chrome)
一、下载vue开发工具下载地址:https://173app.com/chrome-ext二、跳转至扩展程序三、开启开发者模式四、将下载的vue开发工具拖拽至扩展程序中五、测试编写vue测试项目后 F12六、过程可能存在问题问题1:下载的vue插件拖入扩展程序后,F12测试面板为空解决方案:(1)更新高版本Chrome(2)找到C盘下的manifest.json...原创 2020-03-30 22:47:17 · 599 阅读 · 0 评论 -
全选 单选 反选
html`全选反选 单选 单选 单选`原创 2020-02-27 21:31:31 · 142 阅读 · 0 评论 -
js函数中的 arguments、 return、 this
函数中有3个内容: arguments、 return、 this一、argument函数中有一个内置对象 arguments 它是一个类数组对象。它存储着本次函数执行的时候传递进来的所有实参。类数组对象:指的是具备数组的数字下标和length属性,但是没有数组的方法。二、returnreturn是函数中的关键字,只能存在于函数里面它有两个作用:1 向函数的调用处返回内容2 终止...原创 2020-01-04 19:37:43 · 216 阅读 · 0 评论