前端路由(vue2 + vue3 + react)
前端路由的设置： Vue2路由（vue-router3） 安装插件 npm i vue-router@3 router/index.js文件设置 import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter) ...
react组件中方法调用
我们在初学react时(有vue等其他基础)，我们在方法调用的时候通常是 方法名() 例如： import React from 'react' function test() { console.log('这是测试') } export default class Login extends Re ...
react 高效高质量搭建后台系统 系列 —— 结尾
其他章节请看： react 高效高质量搭建后台系统 系列 尾篇 本篇主要介绍表单查询、表单验证、通知（WebSocket）、自动构建。最后附上 myspug 项目源码。 项目最终效果： 表单查询 需求：给角色管理页面增加表格查询功能，通过输入角色名称，点击查询，从后端检索出相应的数据。 效果如下： ...
工程级 React 注册登录全栈级流程
创建前端项目 npm install create-react-app -g create-react-app my-app-client create-react-app 是创建单页面程序的脚手架 前端目录结构 创建好项目之后，删掉 src 目录下的文件，按照以下结构创建目录，根据具体项目情况进行 ...
react 高效高质量搭建后台系统 系列 —— 前端权限
其他章节请看： react 高效高质量搭建后台系统 系列 权限 本系列已近尾声，权限是后台系统必不可少的一部分，本篇首先分析spug项目中权限的实现，最后在将权限加入到我们的项目中来。 spug 中权限的分析 权限示例 比如我要将应用发布模块的查看权限分给某用户（例如 pjl），可以这样操作： 在角 ...
Jest + React 单元测试最佳实践
我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 前言 单元测试是一种用于测试“单元”的软件测试方法，其中“单元”的意思是指软件中各个独立的组件或模块。开发者需要为他们的代码编写测试用例以确保这些代码可以正常使用。 在 ...
react 高效高质量搭建后台系统 系列 —— 表格的封装
其他章节请看： react 高效高质量搭建后台系统 系列 表格 有一种页面在后台系统中比较常见：页面分上下两部分，上部分是 input、select、时间等查询项，下部分是查询项对应的表格数据。包含增删改查，例如点击新建进行新增操作。就像这样： 本篇将对 ant 的表格进行封装。效果如下： spug ...
react脚手架配置代理总结
react脚手架配置代理总结 方法一 在 package.json 中追加如下配置 "proxy":"<http://localhost:5000>" 说明： 优点：配置简单，前端请求资源时可以不加任何前缀。 缺点：不能配置多个代理。 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么 ...
react生命周期
总结-旧生命周期 初始化阶段: 由ReactDOM.render()触发 初次渲染 constructor() componentWillMount() render() componentDidMount() > 常用 一般在这个钩子中做一些初始化的事,例如:开启定时器,发送网络请求,订阅消息 更 ...
react的refs属性
refs 字符串形式refs-过时了 // ref key为自命名内容, value为节点 input class Demo extends React.Component { showData = () => { // 拿到的是真实DOM const { input1 } = this.refs; ...
React入门
入门 引入react 创建容器 创建虚拟DOM 渲染虚拟DOM到页面 <!--引入react,react.develop要在react-dom之前--> <script crossorigin src="https://unpkg.com/react@18/umd/react.development ...
React组件的应用介绍
React组件分为函数组件与class组件；函数组件是无状态组件，class称为类组件；函数组件只有props，没有自己的私有数据和生命周期函数；class组件有自己私有数据(this.state)和生命周期函数