随笔分类 - React
最新React18 + antd-mobile V5 + router V6 项目实践
摘要：我们接下来做分类组件Category, 这个主要用来管理商品的分类,有一级和二级, 可以实现一级与二级之间跳转 /pages/category/category.jsx文件内容如下： import React, {Component} from 'react' import {Button, Car
阅读全文
摘要：点击退出按钮，会弹出一个对话框，然后让你选择退出或取消，使用组件Modal组件 在header/index.jsx文件中代码如下： // 退出登陆 const navigate = useNavigate() const { confirm } = Modal function logout(){
阅读全文
摘要：因为用的最新的React版本【18】 + React-router【6.8.1】所以获取地址栏信息需要使用useLocation，因此 改为 函数式编程如下： /* 头部导航组件 */ import React, {useEffect, useState} from "react"; import
阅读全文
摘要：Header组件这里的标题下的图案实现为关键，实现如下： /components/header/index.jsx文件内容如下： /* 头部导航组件 */ import React, { Component} from "react"; import './index.css' export def
阅读全文
摘要：React-router-dom v6版本需要做如下操作： 1.菜单被选中，在components/left-nav/left-nav.jsx 文件下代码如下： /* 左侧导航的组件 */ import React from "react"; import { Link, useNavigate,
阅读全文
摘要：使用的是antd的导航中的 Menu 导航菜单组件 首先在components/left-nav/index.jsx文件中的代码如下： /* 左侧导航的组件 */ import React from "react"; import { Link, useNavigate} from 'react-r
阅读全文
摘要：pages/admin/admin.jsx文件内容如下： /* 后台管理的路由组件 */ import React from 'react' import { useNavigate } from 'react-router-dom' import {Layout} from 'antd' impo
阅读全文
摘要：在utils目录下增加了memoryUtils.js和storageUtils.js 文件 需要安装store.js —> npm install store 【版本：2.0.12】 查看local存储信息，打开开发者工具 memoryUtils.js内容如下： /* 用来在内存中保存一些数据的工具
阅读全文
摘要：我们常规的写法如下： reqLogin(username, password).then(response => { console.log("登陆成功了!", response.data) }).catch(error => { console.log("登陆失败了!", error) }) 而我
阅读全文
摘要：介绍描述： 1.用于动态构建用户界面的 JavaScript 库【只关注于视图】 2.由Facebook 开源【2013.5】 React的特点： 1.声明式编码 2.组件化编码 3.React Native 编写原生手机端应用 4.高效【优秀的 Diffing 算法】 React 高效的原因： 1
阅读全文
摘要：安装 axios包：【版本：1.3.3】 npm install axios 初级版本 api/ajax.js文件内容 /* 能发送异步ajax请求的函数模块 封装axios库 函数的返回值是promise对象： .then */ import axios from 'axios' export d
阅读全文
摘要：1.这里使用Form表单的声明式验证与自定义验证 <Form.Item name="username" // 声明式验证，直接使用别人定义好的验证规则进行验证 rules={[{ required: true, message: '用户名必须输入' }, {min: 4, message: '用户名
阅读全文
摘要：1.高阶函数 1.1一类特别的函数 接受函数类型的参数 返回值是函数 1.2常见的高阶函数 定时器：setTimeout()/setInterval() Promise: Promise(（）=> {}) then(value => {}, reason => {}) 数组遍历相关的方法：forEa
阅读全文
摘要：需要先下载路由 npm install react-router-dom【版本：6.8.1】 安装 antd的icons： npm install --save @ant-design/icons 【版本：5.0.1】 前台路由的拆分如下pages下新建login/login.jsx和admin/a
阅读全文
摘要：安装 antd ： npm install antd【版本：5.2.2】 自定义主题： V5版本和之前的版本不一样，这里是通过ConfigProvider中传入 theme，可以配置主题 【官网实现方式】 App.js 文件如下【其它文件都暂时不动，可以看到button和主题的变化】 import
阅读全文
摘要：此项目为一个前后台分离的后台管理信息系统SPA，包括前端PC应用和后端应用 包括登陆/用户管理/商品管理/权限管理等功能模块 前端：使用 React全家桶 + Antd5 + ES6 + Webpack等技术 后端：使用 Python3.9 + Flask2.1.3 + MySQL 等技术 采用模块
阅读全文
