1.页面 2.品类列表展示 let listBody = this.state.list.map((category, index) => {             return (                 <tr key={index}>                     <td>{category.id}</td>                     <td>{category.name}</td>         …
1.页面大致是这个样子 2.页面结构 <div className="col-md-10">            <select name="" onChange={(e) => this.onFirstCategoryChange(e)} className="form-control cate-select">                 <option value="">请…
一.静态页面 目录结构 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…
    最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式     以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示 function Router() { this.routes = {}; this.currentU…
实战 上接,笔记: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. 一.页面结构定义 左侧导航栏,右侧页面结构 右侧显示内容分别分为上Header.中Content和下Footer部分 二.目录结构定义 src->admin.js:项目主结构代码(index.js中替换App.js挂载到根节点) src->common.js:项目公共结构代码(类似admin.j…
一.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 │ ├…
前言:以下内容基于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…
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)…
引入了CategorySelector 二级联动组件.FileUploader图片上传组件和RichEditor富文本编辑组件 import React from 'react'; import MUtil from 'util/mm.jsx' import Product from 'service/product-service.jsx' import PageTitle from 'component/page-title/index.jsx'; import CategorySelect…