16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、动态路由传值【基础项目】

一、页面

二、react-router4.x 路由配置

App.js

import React from "react";import { BrowserRouter as Router, Route } from "react-router-dom";import Home from "./components2/Home.js";
import Pcontent from "./components2/Pcontent.js";import "./assets2/css/basic.css";class App extends React.Component {constructor(props) {super(props);this.state = {};}render() {return (<Router><div className="App"><Route path="/" exact component={Home}></Route><Route path="/pcontent/:id" component={Pcontent}></Route></div></Router>);}
}export default App;

Home.js

import React, { Component } from "react";import { Link } from "react-router-dom";import axios from "axios";import "../assets2/css/index.css";class Home extends Component {constructor(props) {super(props);this.state = {list: [],api:"http://a.itying.com/"};}render() {return (<div className="home"><header class="index_header"><div class="hlist"><img src={require("../assets2/images/rexiao.png")} alt=""  /><p>热销榜</p></div><div class="hlist"><img src={require("../assets2/images/caidan.png")} alt=""  /><p>点过的菜</p></div><div class="hlist"><img src={require("../assets2/images/sousuo.png")} alt=""  /><p>搜你喜欢</p></div></header><aside class="left_cate" id="left_cate"><ul>{this.state.list.map((item, index) =>{return (<li key={index} >{item.title}</li>)})}</ul><div id="nav_cate" class="nav_cate"><img src={require("../assets2/images/nav.png")} alt="" /><p>菜单</p></div></aside><div className="content">{this.state.list.map((item, index) => {return (<div className="item" key={index}><h3 className="item_cate">{item.title}</h3><ul className="item_list">{item.list.map((food, index2) => {return (<li key={index2}><div className="inner"><Link to={`/pcontent/${food._id}`}><img src={`${this.state.api}${food.img_url}`}  alt=""/><p className="title">{food.title}</p><p className="price">¥{food.price}</p></Link></div></li>);})}</ul></div>);})}</div><div class="bg" id="bg"></div><div id="footer_cart" class="footer_cart"><Link to="/cart"><img src={require("../assets2/images/cart.png")} alt="" /><p>购物车</p></Link></div></div>);}
}export default Home;

三、react-router4.x 请求菜品和菜品分类数据

Home.js

 //首页菜品Api
import axios from "axios";class Home extends Component {constructor(props) {super(props);this.state = {list: [],api:"http://a.itying.com/"};}requestData = () => {var api = this.state.api + "api/productlist";axios.get(api).then((response) => {// handle success// console.log(response);this.setState({list: response.data.result,});}).catch((error) => {// handle errorconsole.log(error);});};componentDidMount() {this.requestData();}

四、react-router4.x 循环渲染二维数组

Home.js

<div className="content">{this.state.list.map((item, index) => {return (<div className="item" key={index}><h3 className="item_cate">{item.title}</h3><ul className="item_list">{item.list.map((food, index2) => {return (<li key={index2}><div className="inner"><Link to={`/pcontent/${food._id}`}><img src={`${this.state.api}${food.img_url}`}  alt=""/><p className="title">{food.title}</p><p className="price">¥{food.price}</p></Link></div></li>);})}</ul></div>);})}
</div>

五、react-router4.x跳转到菜品详情传值

App.js

<Route path="/pcontent/:id" component={Pcontent}></Route>

Home.js

<Link to={`/pcontent/${food._id}`}>
......
</Link>

Pcontent.js

componentDidMount() {var id = this.props.match.params.id;this.requestData(id);
}

16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、动态路由传值【基础项目】相关推荐

超市收银程序_超市收银系统案例｜千平超市再开2家，星耀助力门店年关创收...
思迅天店星耀版收银系统案例_超市收银系统:千平超市再开2家,星耀助力门店年关创收年关冲刺,收银压力,库存管理...... 都是现在超市老板们的工作重点近期开业横溪购物中心和汇隆购物广场妥妥的千 ...
Vue-快餐店收银系统-leftNav.vuePos.vue
一好友推荐学习vue的一个博客网址共享:http://jspang.com/ 这是比较基础的课程技术胖用的是live-server来搭建服务器环境的,推荐以下链接:https://www.cnbl ...
一款好用的智能餐饮会员收银系统该具备哪些功能？
目前,随着餐饮互联网智能化的越来越普遍,但仍有一部分餐厅还停留在手写点菜阶段.即便餐厅已采用移动设备点菜,到了支付环节,服务员也无法使用同一设备进行收银,更别说和会员权益打通.那,一款好用的智能餐饮点 ...
餐饮店，用什么餐饮收银系统好？
我们知道,现在的餐饮店,基本上都已经配备了餐饮收银系统,因为这不仅仅会提高工作效率,同时也减少错误率.但因为很多餐饮收银系统因为功能太过繁杂,应用操作过于繁琐,导致很多商家一直不是很满意.面对这样的情 ...
餐饮点菜收银该如何选择收银系统
因为餐饮店服务的流程性,互联网时代,应用在餐饮的软件也越来越多,如网上点餐软件.点菜收银软件等等.很多词汇听起来差不多,应用场景确是千差万别的.在选择使用餐饮软件的时候,一定要深度了解其功能及应用场景 ...
使用说明思迅收银系统_便利店收银使用的收银系统应该取决于什么？
生活中,我们常见的便利店规模可大可小,比如最小就十平米,大的话也有可能会好几百平米,有些人疑惑,到底便利店该不该使用收银系统,又或者该如何选择合适的收银系统.其实,不管如何,只要开起门店,店老板都得付 ...
如何选择适合自己门店的收银系统呢?
大到商超,小到楼下便利店,实体店无论面积大小,都在使用收银系统算账收款. 好用的收银系统能让店铺经营更方便高效,还能避免人工收银的漏洞.现在市面上有许多收银系统,收费也会因为品牌.功能的不同而不同,那 ...
扫码枪收银有手续费吗_生鲜店的收银系统应该如何选择？
2020年可以说是生鲜水果店大力兴起的一年,几乎每条街道不到两公里就能看到一个,每个社区都有几个很不错的生鲜水果店.那么生鲜水果店的收银系统具体都有哪些功能需求,而不同规模的生鲜店又需要配置什么样的收 ...
超市自动收款机php,自助收银机，超市无人自动收银系统，海信自助POS,自助收款机...
产品名称:自助收银机,超市无人自动收银系统,海信自助POS,自助收款机产品链接:http://cn.trustexporter.com/cp-hxpos2016/o4596296.htm 手机版链接 ...

16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、动态路由传值【基础项目】

一、页面

二、react-router4.x 路由配置

三、react-router4.x 请求菜品和菜品分类数据

四、react-router4.x 循环渲染二维数组

五、react-router4.x跳转到菜品详情传值

16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、动态路由传值【基础项目】相关推荐

最新文章

热门文章

16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、动态路由传值 【基础项目】

一、页面

二、react-router4.x 路由配置

三、react-router4.x 请求菜品和菜品分类数据

四、react-router4.x 循环渲染二维数组

五、react-router4.x跳转到菜品详情传值

16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、动态路由传值 【基础项目】相关推荐

最新文章

热门文章

16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、动态路由传值【基础项目】

16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、动态路由传值【基础项目】相关推荐