最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式     以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示 function Router() { this.routes = {}; this.currentU…
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.城市管理 pages->city->index.js:对应路由/admin/city 顶部子组件一:选择表单 class FilterForm extends React.Component{ render(){ const { getFieldDecorator } = this.prop…
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.页面结构定义 左侧导航栏,右侧页面结构 右侧显示内容分别分为上Header.中Content和下Footer部分 二.目录结构定义 src->admin.js:项目主结构代码(index.js中替换App.js挂载到根节点) src->common.js:项目公共结构代码(类似admin.j…
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react-guli 1)创建目录 src 目录下 api ajax相关 assets 公用资源 components 非路由组件 config 配置 pages 路由组件 utils 工具模块 Appj.s 应用根组件 index.js 入口js cmd指创建: mkdir api assets compo…
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.项目工程化概念  二.BaseForm的封装 城市管理中FilterForm子组件: 订单管理中FilterForm子组件: 员工管理中FilterForm子组件: [项目工程化]:表单封装 components->BaseForm->index.js 关键:抽象出formList,根据fo…
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.按钮Button pages->ui->button.js:对应路由/admin/ui/buttons import React from 'react'; import {Card, Button, Radio} from 'antd' import './ui.less' class B…
一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\bar charts\line charts\pie 或 mkdir home category product role user charts\bar charts\line charts\pie 目录结构 │ admin.jsx │ ├─category ├─charts │ ├─bar │ ├…
day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react脚手架创建项目 2). 开发环境运行: npm start 3). 生产环境打包运行: npm run build serve build 3. git管理项目 1). 创建远程仓库 2). 创建本地仓库 a. 配置.gitignore b. git init c. git add . d. git commit -m "init" 3)…
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.使用Form组件开发登录页面 pages->form->login.js:对应路由/admin/form/login import React from 'react' import {Card, Form, Input, Button, message, Icon, Checkbox} f…
一.静态页面 目录结构 F:\Test\react-demo\admin-client\src\pages\admin\category add-cate-form.jsx index.jsx index.less update-cate-form.jsx 1. pages/category/index.jsx import React,{Component} from 'react' import { Button, Card, //引入卡片 Table, //引入表格 Icon, } fro…