《React后台管理系统实战：五》产品管理（一）
2024-04-30 12:42:00
一、概述
1.1目录结构及功能
src/pages/admin/product/add-update.jsx //添加及更新产品detail.jsx //产品详情home.jsx //产品默认页index.jsx //产品路由页index.less //产品样式
二、路由搭建
2.1 index.jsx
为防止不能匹配到product/xxx，加上exact
如果以上都不匹配则跳转到产品首页
import React,{Component} from 'react'
import './index.less'
import {Switch,Route,Redirect} from 'react-router-dom'import Home from './home'
import AddUpdate from './add-update'
import Detail from './detail'export default class Product extends Component{render(){return(<Switch>{/* 为防止不能匹配到product/xxx，加上exact */}<Route exact path='/product' component={Home} /><Route path='/product/add-update' component={AddUpdate} /><Route path='/product/detail' component={Detail} />{/* 如果以上都不匹配则跳转到产品首页 */}<Redirect to='/product' /></Switch>)}
}
2.2 其它页面，只写一个，其它略过
add-update.jsx //添加及更新产品 AddUpdate
detail.jsx //产品详情 Detail
home.jsx //产品默认页 Home
import React,{Component} from 'react'export default class Home extends Component{render(){return(<div>产品首页</div>)}
}
三、产品默认页home.jsx
3.1 静态页面
import React,{Component} from 'react'
import {Card,Select,Input,Table,Icon,Button,message
} from 'antd'
import LinkButton from '../../../components/link-button'const Option=Select.Optionexport default class Home extends Component{state={//【5】商品列表products:[{"status": 1,"imgs": ["image-1559402396338.jpg"],"_id": "5ca9e05db49ef916541160cd","name": "联想ThinkPad 翼4809","desc": "年度重量级新品，X390、T490全新登场 更加轻薄机身设计9","price": 65999,"pCategoryId": "5ca9d6c0b49ef916541160bb","categoryId": "5ca9db9fb49ef916541160cc","detail": "<p><span style=\"color: rgb(228,57,60);background-color: rgb(255,255,255);font-size: 12px;\">想你所需，超你所想！精致外观，轻薄便携带光驱，内置正版office杜绝盗版死机，全国联保两年！</span> 222</p>\n<p><span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;\">联想（Lenovo）扬天V110 15.6英寸家用轻薄便携商务办公手提笔记本电脑 定制【E2-9010/4G/128G固态】 2G独显 内置</span></p>\n<p><span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;\">99999</span></p>\n","__v": 0},{"status": 1,"imgs": ["image-1559402448049.jpg","image-1559402450480.jpg"],"_id": "5ca9e414b49ef916541160ce","name": "华硕(ASUS) 飞行堡垒","desc": "15.6英寸窄边框游戏笔记本电脑(i7-8750H 8G 256GSSD+1T GTX1050Ti 4G IPS)","price": 6799,"pCategoryId": "5ca9d6c0b49ef916541160bb","categoryId": "5ca9db8ab49ef916541160cb","detail": "<p><span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;\">华硕(ASUS) 飞行堡垒6 15.6英寸窄边框游戏笔记本电脑(i7-8750H 8G 256GSSD+1T GTX1050Ti 4G IPS)火陨红黑</span> </p>\n<p><span style=\"color: rgb(228,57,60);background-color: rgb(255,255,255);font-size: 12px;\">【4.6-4.7号华硕集体放价，大牌够品质！】1T+256G高速存储组合！超窄边框视野无阻，强劲散热一键启动！</span> </p>\n","__v": 0},{"status": 2,"imgs": ["image-1559402436395.jpg"],"_id": "5ca9e4b7b49ef916541160cf","name": "你不知道的JS（上卷）","desc": "图灵程序设计丛书： [You Don't Know JS:Scope & Closures] JavaScript开发经典入门图书 打通JavaScript的任督二脉","price": 35,"pCategoryId": "0","categoryId": "5ca9d6c9b49ef916541160bc","detail": "<p style=\"text-align:start;\"><span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;\">图灵程序设计丛书：你不知道的JavaScript（上卷）</span> <span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;\"><strong>[You Don't Know JS:Scope & Closures]</strong></span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(227,57,60);background-color: rgb(255,255,255);font-size: 12px;\">JavaScript开发经典入门图书 打通JavaScript的任督二脉 领略语言内部的绝美风光</span> </p>\n","__v": 0},{"status": 2,"imgs": ["image-1554638240202.jpg"],"_id": "5ca9e5bbb49ef916541160d0","name": "美的(Midea) 213升-BCD-213TM","desc": "爆款直降!大容量三口之家优选! *节能养鲜,自动低温补偿,36分贝静音呵护","price": 1388,"pCategoryId": "5ca9d695b49ef916541160ba","categoryId": "5ca9d9cfb49ef916541160c4","detail": "<p style=\"text-align:start;\"><span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;font-family: Arial, \"microsoft yahei;\">美的(Midea) 213升 节能静音家用三门小冰箱 阳光米 BCD-213TM(E)</span></p>\n<p><span style=\"color: rgb(228,57,60);background-color: rgb(255,255,255);font-size: 12px;font-family: tahoma, arial, \"Microsoft YaHei\", \"Hiragino Sans GB\", u5b8bu4f53, sans-serif;\">【4.8美的大牌秒杀日】爆款直降!大容量三口之家优选! *节能养鲜,自动低温补偿,36分贝静音呵护! *每天不到一度电,省钱又省心!</span> </p>\n","__v": 0},{"status": 1,"imgs": ["image-1554638403550.jpg"],"_id": "5ca9e653b49ef916541160d1","name": "美的（Midea）KFR-35GW/WDAA3","desc": "正1.5匹 变频 智弧 冷暖 智能壁挂式卧室空调挂机","price": 2499,"pCategoryId": "5ca9d695b49ef916541160ba","categoryId": "5ca9da1ab49ef916541160c6","detail": "<p style=\"text-align:start;\"><span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;\">美的（Midea）正1.5匹 变频 智弧 冷暖 智能壁挂式卧室空调挂机 KFR-35GW/WDAA3@</span></p>\n<p style=\"text-align:start;\"></p>\n<p><span style=\"color: rgb(228,57,60);background-color: rgb(255,255,255);font-size: 12px;\">【4.8美的大牌秒杀日】提前加入购物车！2299元成交价！前50名下单送赠品加湿型电风扇，赠完即止！8日0点开抢！</span><a href=\"https://sale.jd.com/mall/LKHdqZUIYk.html\" target=\"_blank\"><span style=\"color: rgb(94,105,173);background-color: rgb(255,255,255);font-size: 12px;\">更有无风感柜挂组合套购立减500元！猛戳！！</span></a> </p>\n","__v": 0}], }//【6】Table的列名及对应显示的内容渲染initColumns=()=>{this.columns=[{title:'商品名称',dataIndex:'name'},{title:'商品描述',dataIndex:'desc'},{title:'价格',dataIndex:'price',render:(price)=>'￥'+price //把price渲染进对应的行，并加上￥符号},{width:100,title:'商品状态',dataIndex:'status',render:(status)=>{return(<span><Button type='primary'>{status===1 ? '下架' : '上架'}</Button><span>{status===1 ? '在售':'已下架'}</span></span>)}},{width:100,title:'操作',render:(proObj)=>{return(<span><LinkButton>详情</LinkButton><LinkButton>修改</LinkButton></span>)}},]}componentWillMount(){//【7】Table列名初始化函数调用，用于准备表格列名及显示内容this.initColumns()}render(){//【5】state数据解构，简化使用const {products}=this.state//【2】card左侧内容const title=(<span><Select value='1' style={{width:150,}}><Option value='1'>按名称搜索</Option><Option value='2'>按描述搜索</Option></Select><Input placeholder='关键字' style={{width:150,margin:'0 8px'}} /><Button type='primary'>搜索</Button></span>)//【3】card右侧内容const extra=(<Button type='primary'><Icon type='plus'/>添加商品</Button>)return(<Card title={title} extra={extra}><Table bordered rowKey='_id'dataSource={products} columns={this.columns} /></Card>)}
}
效果：http://localhost:3000/product
《React后台管理系统实战：五》产品管理（一）相关推荐
- 《React后台管理系统实战：五》产品管理（二）：产品添加页面及验证等、富文本编辑器、提交商品
一.产品添加基础部分 1 home.jsx点添加按钮动作跳转到添加商品页 点击:onClick={() => this.props.history.push('/product/add-upda ...
- 《React后台管理系统实战：十一》可视图表及首页图表
一.简介及环境安装 les135- 1.常用数据可视化图表库 1) echarts a. https://echarts.baidu.com/ b. 百度开源, 如果要在 react 项目中使用, 需 ...
- Serverless 实战 —— Serverless + Egg.js 后台管理系统实战
Serverless + Egg.js 后台管理系统实战 作为一名前端开发者,在选择 Nodejs 后端服务框架时,第一时间会想到 Egg.js,不得不说 Egg.js 是一个非常优秀的企业级框架,它 ...
- 【开发篇】10分钟快速搭建React后台管理系统模板
React后台管理系统模板 github 我又回来了!!!学完前端react,再学spring,这周或者下周写spring有关的!!! 一.准备React 1.建立react应用 npx create ...
- 【作业题】后台管理系统中的课程管理模块（后端篇）
巩固web阶段知识,完成后台管理系统中的课程管理模块,该模块包含了添加课程.配置课程相关信息.管理课程章节等功能. 项目地址:课程管理模块 产品的原型图 课程管理 实现以下功能: 展示课程列表 根据课 ...
- 从头开始react后台管理系统-安装ant-Design
从头开始react后台管理系统-安装ant-Design introduce 在做微信小程序, 想着顺便做一个管理系统的 随便扯扯 我是个菜鸡,很菜很菜的菜鸡,春招各家凉,现在还是0offer.心情很 ...
- PHP:【商城后台管理系统】部署角色管理，角色添加，菜单权限，删除角色功能
PHP:[商城后台管理系统]部署角色管理,角色添加,菜单权限,删除角色功能 一.角色管理界面 ①首页 ②角色添加 ③角色编辑 ④角色删除 二.部署流程 部署流程 后端采用thinkphp6.0框架,角 ...
- React后台管理系统-品类选择器二级联动组件
React后台管理系统-品类选择器二级联动组件 品类选择器二级联动 posted on 2018-06-26 22:21 gisery 阅读( ...) 评论( ...) 编辑 收藏
- react后台管理系统项目总结
React后台管理项目 1.创建一个项目 2.配置一个ui插件库 开始 实现跳转 快速获取路由地址 将路由和组件映射 axios请求 实现登录模块 隐藏二级路由 按照价格排序或者按照销量等排序 管理员 ...
最新文章
- 用 .NET Memory Profiler 跟踪.net 应用内存使用情况--基本应用篇(转载)
- leetcode算法题--左旋转字符串
- 开启注解缓存_Spring Boot 2.x基础教程：进程内缓存的使用与Cache注解详解
- NGUI-制作位图字体以及图文混排
- FSD键盘钩子框架参考爱写驱动的女装大佬
- MariaDb数据库管理系统的学习（一）安装示意图
- Shell编程入门(第二版)(中)
- python有哪些常用的package_个人Python常用Package及其安装
- 机器学习（2）---简单线性回归模型
- 如何使用PHP中的字符串函数
- 深度优先搜索之在图上寻找路径
- 【优化求解】基于matlab遗传算法求解资源配置优化问题【含Matlab源码 436期】
- lua 读取lua文件
- dnf服务器字幕乱码win10系统,Windows10下输入法设置 教你避免DNF卡顿
- 如何解决数据流转「不可能三角」难题？
- 用户和计算机硬盘系统的接口,硬盘接口类型,教您怎么看硬盘接口的类型
- letsencrypt证书-管理工具certbot
- 阿里云最简单的认证是什么？考试费用是多少？
- 软考-高项-论文-信息系统项目的人力资源管理
- 仿射变换affine和透视变换