7、谷粒后台后续操作
图表介绍 echarts https://echarts.baidu.com/ 百度开源, 如果要在react 项目中使用, 需要下载echarts-for-react G2 https://antv.alipay.com/zh-cn/g2/3.x/index.html 阿里开源 bizcharts https://bizcharts.net/products/bizCharts 基于react 包装G2 的开源库，需要额外下载@antv/data-set d3 https://d3js.org.cn/ 国外的免费可视化图表库 简单使用 安装插件 yarn add echarts echarts-for-react bizcharts @antv/data-set 柱形图 import React, { Component } from 'react' import { Card, Button } from 'antd' import ReactEcharts from 'echarts-for-react' /* ...
6、谷粒后台使用redux管理数据
环境准备 安装插件 yarn add redux react-redux redux-thunk redux-devtools-extension 在入口index.js文件中包装 /** * 入口文件 */ import React from 'react'; // 引入redux import { Provider } from 'react-redux' import ReactDOM from 'react-dom'; import memoryUtils from './utils/memoryUtils' import storageUtils from './utils/storageUtils' import App from './App'; import store from './redux/store' const user = storageUtils.getUser() memoryUtils.user = user ReactDOM.render( // 包装 (<Provider store= ...
5、谷粒后台用户、角色管理组件
基本布局 <Table bordered rowKey='_id' dataSource={roles} columns={this.columns} pagination={{ defaultPageSize: PAGE_SIZE }} rowSelection={{ type: 'radio', selectedRowKeys: [role._id], onSelect: (role) => { // 选择某个radio时回调 this.setState({ role }) } }} o ...
4、谷粒后台商品管理组件
基本路由 <Switch> <Route path='/product' component={ProductHome} exact /> {/*路径完全匹配*/} <Route path='/product/addupdate' component={ProductAddUpdate} /> <Route path='/product/detail' component={ProductDetail} /> <Redirect to='/product' /> </Switch> 两种分页技术 前台分页 后台直接返回全部数据 后台分页 后台返回给前台当前页数与总页数 前台需要传递当前页码数与每页数量 跳转路由时传递参数 跳转路由 this.props.history.push('/product/detail', { product }) 接受参数 const { pCategory ...
3、谷粒后台Category组件
商品分类管理 表格显示 <Table bordered={false} rowKey='_id' dataSource={dataSource} columns={columns} ></Table> 通过dataSource获取数据源，columns指定每一列。例如： const dataSource = [ { key: '1', name: '胡彦斌', age: 32, address: '西湖区湖底公园1号', }, { key: '2', name: '胡彦祖', age: 42, address: '西湖区湖底公园1号', }, ]; const columns = [ { title: '姓名', dataIn ...
2、谷粒后台整体结构即侧边导航栏
基本架构 /** * 管理的路由组件 */ import React, { Component } from 'react' import { Redirect, Route, Switch } from 'react-router-dom' import { Layout } from 'antd' import memoryUtils from '../../utils/memoryUtils' import LeftNav from '../../components/left-nav/left-nav' import Header from '../../components/header/header' // 路由组件 import Home from '../home/home' import Category from '../category/category' import Product from '../product/product' import Role from '../role/role ...
1、谷粒后台开发准备及登录页面
开发准备 代码仓库：https://github.com/changeclass/react-admin/commits/ 技术选型 前端路由 创建项目 基于脚手架创建项目 create-react-app react-admin_client 编辑基本结构 入口文件 /** * 入口文件 */ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <App />, document.getElementById('root') ); 根组件 /** * 应用根组件 */ import React, { Component } from "react"; export default class App extends Component { render () { return <div>ahha </div> ...
0、AntD3与AntD4不同之处
说明 此文是为了记录观看视频谷粒后台中AntD3与当前AntD4部分写法的差异。 Form表单 官方迁移说明：https://ant.design/components/form/v3-cn/ 在AntD4中表单的submit事件被替换成了onFinish。 获取表单实例 通过为Form组件绑定属性ref即可。每个Form.Item组件中的name属性代表当前表单的字段。 <Form name='normal_login' className='login-form' // 为表单添加引用 ref={this.formRef} // 为表单添加校检完成的事件 onFinish={this.handleSubmit} > <Form.Item name='username' rules={[ { required: true, message: 'Please input your usern ...
7、React的Redux
Redux理解 英文文档: https://redux.js.org/ 中文文档: http://www.redux.org.cn/ Github: https://github.com/reactjs/redux redux 是一个独立专门用于做状态管理的JS 库(不是react 插件库) 它可以用在react, angular, vue 等项目中, 但基本与react 配合使用 作用: 集中式管理react 应用中多个组件共享的状态 需要Redux时的情景 某个组件的状态，需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 Redux基本使用 安装 yarn add redux 为了更方便的管理store，因此新建一个文件夹store用于专门存放关于store相关操作的代码 store.js 用于写创建stroe对象相关的代码 import { createStore } from 'redux' import { counter } from './red ...
6、React路由及UI
SPA与路由 单页Web 应用（single page web application，SPA） 整个应用只有一个完整的页面 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求 当点击路由链接时, 只会做页面的局部更新 数据都需要通过ajax 请求获取, 并在前端异步展现 路由 一个路由就是一个映射关系(key:value)，key 为路由路径, value 可能是function/component。 前端路由 后端路由 react-router基本使用 相关文档：http://react-guide.github.io/react-router-cn/index.html 英文原版：https://reactrouter.com/web/guides/quick-start 安装 yarn add react-router-dom 使用BrowserRouter组件包裹所有组件 import React from 'react'; import ReactDOM from 'react-dom'; import { Bro ...
