用React搭建一个简单的菜单系统

用react搭建一个简单的菜单列表，点击跳转菜单详情，作为Demo学习使用。
先来个效果图

话不多说，上代码
1：搭建一个react项目

create-react-app my-react

2：安装url模块，方便解析url地址，获取参数，安装axios，发送get请求

cnpm install url axios -S

3:启动项目，将静态文件html、css、拷贝到src/static下面
4：新建一个router.js用来实现路由跳转
router.js

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import Home from './component/Home';
import Detail from './component/Detail.js';
//exact 就是执行严格匹配路由 
export default function BasicExample() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Home}></Route>
          <Route path="/detail" component={Detail}></Route>
        </Switch>
      </div>
    </Router>
  );
}

5:在index.js中引入我们定义好的router.js

好了，现在可以再home页面初始化页面获取数据并且显示了
6：在构造器中定义一个公共的domain变量和list

constructor(){
		super();
		this.state={
			domain:"http://a.itying.com/",
			list:[]
		};
	};

7：在componentDidMount中具体些请求方法

	initGetData(){
		let api = this.state.domain+"api/productlist";
		axios.get(api).then((res)=>{
			let list = res.data.result;
			//console.log(list);
			this.setState({
				list
			});
		}).catch(err=>{
			console.log(err)
		});
	};

8:在render中具体获取数据

	render(){
		return(
			<div>
				<header className="index_header">
					<div className="hlist">
						<img src={require("../static/image/rexiao.png")} />
						<p>热销榜</p>				
					</div>
					<div className="hlist">
						<img src={require("../static/image/caidan.png")} />
						<p>点过的菜</p>				
					</div>
					<div className="hlist">
						<img src={require("../static/image/sousuo.png")} />
						<p>搜你喜欢</p>				
					</div>
				</header>			
				<div className="content">
					{
					this.state.list.map((value,key)=>{
						return (
						<div className="item" key={key}>
							<h3 className="item_cate">{value.title}</h3>
							<ul className="item_list">
							{
								value.list.map((values,k)=>{
									return(
										<li key={k} >
											<Link to={`/detail?id=${values._id}` } >
												<div className="inner">
													<img src={`${this.state.domain}${values.img_url}`} />
													<p className="title">{values.title}</p>						
													<p className="price">¥{values.price}</p>
												</div>
											</Link>
										</li>
									)
									
								})
							}	
							</ul>
						</div>
							
						)
					})	
					}
				</div>
				<div className="bg" id="bg"></div>
			</div>
		)
	}

ps：这里要注意几个小问题，我就稍微搞错了，1列表Link跳转用了最新的ES6的语法，使用了query传递id，2双层循环里面记得也要return返回，3双层循环注意变量不能一样，防止冲突
####好了，当我们点击列表的时候，就可以实现页面跳转到详情页
效果图

然后我们再详情页获取url中id，然后查询数据库，获取数据填充页面就OK啦。
Detail.js

1:引入需要的包

import React,{Component} from 'react';
import '../static/css/pcontent.css';
import axios from 'axios';
import  url from 'url';
import {Link} from 'react-router-dom';

2:组件初始化后获取url参数id，查询接口，获取数据

	componentDidMount(){
		//这里只能获取一个query
		let goUrl= url.parse(this.props.location.search,true);
		console.log(goUrl);
		let id = goUrl.query.id;
		this.initGetData(id);
	};

3：获取数据

initGetData(id){
		let api = this.state.domain+'api/productcontent?id='+id;
		axios.get(api).then(res=>{
			//注意 这里直接转对象方便后面获取 不会出现bug  render直接获取list[0]会有bug
			let list =res.data.result[0]
			this.setState({
				list
			});
		}).catch(err=>{
			console.log(err);
		});
	};

4:render渲染数据

	render(){
		return(
			<div>
				<div className="back"><a href='/'>返回</a></div>
					<div className="p_content">		
						<div className="p_info">				
							<img src={`${this.state.domain}${this.state.list.img_url}`}/>				
							<h2>{this.state.list.title}</h2>				
							<p className="price">{this.state.list.price}/份</p>
						</div>
						<div className="p_detial">
							<h3>
								商品详情					
							</h3>
							<div className="p_content"> 
								<br />
								{this.state.list.content}
								<br />
								<p>{this.state.list.description}</p>
							</div>
						</div>
					</div>
					<footer className="pfooter">
						<div className="cart">				
							<strong>数量:</strong>
							<div className="cart_num">
							  <div className="input_left">-</div>
							  <div className="input_center">
								  <input type="text"  readOnly="readonly" value="1" name="num" id="num" />
							  </div>
							  <div className="input_right">+</div>				      
							</div>								
						</div>
						<button className="addcart">加入购物车</button>			
					</footer>
			</div>
		)
	}

OK,这样一个简单的列表+详情就完成啦~~~~