加react框架订餐大师

React框架确实能简化代码，可以与不加框架的作对比，大家看一下

html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="../build/browser.min.js"></script><script src="../build/react.js"></script><script src="../build/ReactRouter.min.js"></script><script src="../build/react-dom.js"></script><script language='javascript' src="../build/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="../CSS/Index.css"><script language='javascript' src="../build/underscore-min.js"></script><script language='javascript' src="../build/underscore.js"></script><!--<script src="../REACT/build/JSXTransformer.js" type="text/jsx"></script>--><script type="text/babel" src="../JS/Order.js"></script><script type="text/babel" src="../JS/Index.js"></script><script type="text/babel" src="../JS/Customer.js"></script><script type="text/babel" src="../JS/Resaturant.js"></script><script type="text/babel" src="../JS/FoodList.js"></script><script type="text/babel" src="../JS/ViewOrder.js"></script>
</head>
<body>
<script type="text/babel" src="../JS/ReactRouter.js"></script>
<div id="root"></div>
</body>
</html>

JS：

(1)Customer.js

/*** Created by lixuefeng on 16-1-16.*/
window.CustomerList=React.createClass({getInitialState:function(){return {customers:[]}},componentDidMount:function(){var self=this;$.ajax({url:"../JSON/Customers.json",dataType:"json",async:true,success:function(data){console.log(data)self.setState({customers: data.man})}})},back_to_order:function(){this.props.history.pushState(null,'/Order')},handleClick:function(data){localStorage.setItem('man',data)this.props.history.pushState(null,'/Order')},render: function() {var customersHtml= _.map(this.state.customers,function(men){return (<li className='apper'><div className='css_button_style' onClick={this.handleClick.bind(this,men)}>{men}</div></li>)},this)return (<div><div className='order'><li className='apper'><button className='back' onClick={this.back_to_order}>back</button>选人</li></div><div className='distan'>{customersHtml}</div></div>)}
});
//ReactDOM.render(
//    <CustomerList/>,
//    document.getElementById("root")
//);

(2)FoodList.js

/*** Created by lixuefeng on 16-1-17.*/
window.FoodList=React.createClass({getInitialState:function(){return {foods:[]}},componentDidMount:function(){var self=this;$.ajax({url:"../JSON/GoodsList.json",dataType:"json",async:true,success:function(item){console.log(item)self.setState({foods:item.food_lists[localStorage.getItem("shop")]})}})},back_to_order:function(){this.props.history.pushState(null,'/Order')},handleClick:function(foods,price){localStorage.setItem("food",foods)localStorage.setItem("mon",price)this.props.history.pushState(null,'/Order')},render:function(){var foodListHtml=_.map(this.state.foods,function(item){return(//console.log(item)<li className='apper'><div className='choose-style' onClick={this.handleClick.bind(this,item.food,item.price)}>{item.food}<p className='css_font_style'><p className='same_body'>￥{item.price}</p></p></div></li>)},this)return (<div><div className="order"><li className="apper"><button className="back" onClick={this.back_to_order}>back</button>选套餐</li></div>{foodListHtml}</div>)}})
//ReactDOM.render(
//    <FoodList/>,
//    document.getElementById("root")
//);

(3)Restaurant

/*** Created by lixuefeng on 16-1-17.*/
window.Resaturant=React.createClass({getInitialState:function(){return {resaturant:[]}},componentDidMount:function(){var self=this;$.ajax({url:"../JSON/Rest.json",dataType:"json",async:true,success:function(item){console.log(item)self.setState({resaturant:item.rest})}})},back_to_order:function(){this.props.history.pushState(null,'/Order')},handleClick:function(data){localStorage.setItem("shop",data)this.props.history.pushState(null,'/Order')},render:function(){var resaturant_list= _.map(this.state.resaturant,function(shop){return (<li className='apper'><div className='css_button_style' onClick={this.handleClick.bind(this,shop)}>{shop}</div></li>)},this)return (<div><div className='order'><li className='apper'><button className='back' onClick={this.back_to_order}>back</button>选餐厅</li></div><div className='distan'>{resaturant_list}</div></div>)}})
//ReactDOM.render(
//    <Resaturant/>,
//    document.getElementById("example")
//);

(4)Index.js

/*** Created by lixuefeng on 16-1-17.*/
window.Index=React.createClass({showOrder:function(){this.props.history.pushState(null,'/Order')},viewOrder:function(){this.props.history.pushState(null,'/ViewOrder')},render:function(){return(<div><div className="order">订餐</div><div className="choose" onClick={this.showOrder}>帮订餐</div><div className="choose" onClick={this.viewOrder}>看订单</div></div>)}
})
//ReactDOM.render(
//    <Index/>,
//    document.getElementById("root")
//);

(5)Order.js

/*** Created by lixuefeng on 16-1-17.*/
window.Order = React.createClass({getInitialState:function(){return {Foods:"",Shops:"",Mans:""}
},componentDidMount:function(){if (!(document.getElementById("rest").value != "" && document.getElementById("name").value != "" && document.getElementById("food").value != "")) {$("#test").attr({"disabled":"disabled"})}else{$("#test").removeAttr("disabled")}this.setState({Foods:localStorage.getItem("food"),Shops:localStorage.getItem("shop"),Mans:localStorage.getItem("man")});},getInfo: function() {var all_info = {man: localStorage.getItem("man"),shop: localStorage.getItem("shop"),mon: localStorage.getItem("mon"),food: localStorage.getItem("food"),};var local_info=JSON.parse(localStorage.getItem("infor")) || [];local_info.push(all_info);localStorage.setItem("infor", JSON.stringify(local_info));},cleanItem:function(){console.log("-------start-------------")console.log(this.state.Mans)console.log("------------------")this.setState({Foods:"",Shops:"",Mans:""});console.log("------------------")console.log(this.state.Mans)console.log("-------end------------")localStorage.removeItem("man");localStorage.removeItem("shop");localStorage.removeItem("food");localStorage.removeItem("mon")},handleClick:function() {console.log("------------------")this.getInfo();this.cleanItem();},back_to_order:function(){this.props.history.pushState(null,'/')},back_to_customer:function() {this.props.history.pushState(null,'/Customer')},beck_to_resaturant:function () {this.props.history.pushState(null,'/Resaturant')},beck_to_foodlist:function () {this.props.history.pushState(null, '/FoodList')},render:function(){return(<div><div className="order"><li className="apper"><button className="back" onClick={this.back_to_order}>back</button>订单显示</li></div><div className="top_distance">  </div><div className="font_distance">人：</div><input className="input_font" id="name" value={this.state.Mans} name="input_one" type="text" disabled/><div id="bin_go" type="button" className="button_order" onClick={this.back_to_customer}>选人 </div><div className="font_distance">餐厅：</div><input className="input_font" id="rest" value={this.state.Shops} name="shop_input" type="text" disabled/><div id="bin_way" className="button_order" type="button" onClick={this.beck_to_resaturant}>选餐厅</div><div className="font_distance">套餐：</div><input className="input_font" id="food" value={this.state.Foods} name="input_food" type="text" disabled/><div id="bin_stop" className="button_orders" onClick={this.beck_to_foodlist}>选套餐</div><div id="test" className="button_ensure" onClick={this.handleClick} >确认</div></div>)}
})

(6)ViewOrder.js

/*** Created by lixuefeng on 16-1-17.*/
window.View=React.createClass({getInitialState:function(){return{foods:[],customers:[],}},componentDidMount:function(){this.setState({foods:JSON.parse(localStorage.getItem("infor")||"[]")});var self=this;$.ajax({url:"../JSON/Customers.json",dataType:"json",async:true,success:function(item){self.setState({customers:item.man})}})},back_to_order:function(){this.props.history.pushState(null,'/')},render:function(){console.log(this.state.foods)var order_num = [];var order_list_html= _.map(this.state.foods,function(item){if (order_num.indexOf(item.man) == -1) {order_num.push(item.man);}console.log(order_num.length)console.log(order_num)var change_color=(item.mon>12.00)?"red":"black";return (<div><div className='someone'><span className='return-na'>{item.man}</span><span className='return-pr'>{item.shop+" "+item.food}</span><span className='return' id="price_num" style={{color:change_color}}>￥{item.mon}</span></div></div>)})var no_order_array=[];var no_order_num= _.map(this.state.customers,function(item){if (order_num.indexOf(item) == -1) {no_order_array.push(item);}});var no_order_array_html= _.map(no_order_array,function(names){return (<div className='someone'><span className='per_no'>{names}</span></div>)
})var sum=0var sum_price= _.map(this.state.foods,function(some){var cost=JSON.parse(some.mon)sum+=cost
})return (<div><div className="order"><li className="apper"><button className="back" onClick={this.back_to_order}>back</button>订单显示</li></div><div className="num">&nbsp;&nbsp;{order_num.length}人已定</div>{order_list_html}<div className="num">&nbsp;&nbsp;{no_order_array.length}人未订</div>{no_order_array_html}<div className="last">{order_num.length}人已定, {no_order_array.length}人未订, 总计{sum.toFixed(2)}元</div></div>)},
})
//ReactDOM.render(
//    <View/>,
//    document.getElementById("root")
//);//{order_list_html}
//{no_order_array_html}
//<div className="last">{order_num.length} 人已定, {no_order_array.length}人未订, 总计{sum}元
//</div>

(7)ReactRouter.js

/*** Created by lixuefeng on 16-1-26.*/
var ReactRouter = window.ReactRouter;
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var routes=(<Router><Route path="/" component={window.Index}/><Route path="Order" component={window.Order}/><Route path="Customer" component={window.CustomerList}/><Route path="Resaturant" component={window.Resaturant}/><Route path="FoodList" component={window.FoodList}/><Route path="ViewOrder" component={window.View}/></Router>
);
ReactDOM.render(routes,document.getElementById("root"));

Json:

{"man" : ["赵大","钱二","张三","李四","王五","赵六"]
}

{"food_lists": {"KFC": [{"food": "田园脆鸡堡","price": "10.00"},{"food": "黄金咖喱猪排饭","price": "23.50"}],"7-11": [{"food": "田园脆鸡堡","price": "10.00"},{"food": "黄金咖喱猪排饭","price": "23.50"},{"food": "意式肉酱肉丸饭","price": "16.00"},{"food": "老北京鸡肉卷","price": "14.00"}],"成都小吃": [{"food": "田园脆鸡堡","price": "10.00"},{"food": "黄金咖喱猪排饭","price": "23.50"},{"food": "意式肉酱肉丸饭","price": "16.00"},{"food": "老北京鸡肉卷","price": "14.00"},{"food": "劲脆鸡腿堡","price": "15.00"}]}
}

{"rest": ["KFC","7-11","成都小吃"]
}

加react框架订餐大师相关推荐

Android高效异步图片加载框架
概述 Android高效异步图片加载框架:一个高效的异步加载显示的图片加载框架,同时具备图片压缩,缓存机制等特性. 详细代码下载:http://www.demodashi.com/demo/1214 ...
jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程，什么是JSX？在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
[译] 项目什么时候需要 React 框架呢？
本文讲的是[译] 项目什么时候需要 React 框架呢?, 原文地址:When Does a Project Need React? 原文作者:CHRIS COYIER 译文出自:掘金翻译计划译者: ...
anu,一个无痛实践React的迷你React框架
近年来,冒出大量MVVM框架,但它几乎无一例外依赖于babel, webpack等编译或手脚架,这让小公司出身的前端们望洋兴叹.因此小城市的前端们,没有高手带着,许多培训班出身,或自学成才转行,如果引 ...
前端React框架基础语法
一.ReactDOM.render()方法 ReactDOM.render()方法是React框架中最最最基础的方法,这个方法的作用是将模板转化为HTML的语法,然后插入到指定的 DOM 节点中. & ...
React框架的学习
前端-React框架一.环境搭建使用 create-react-app 快速构建 React 开发环境二.react目录以及文件目录结构组件基础模板三.React的知识点 1.JSX语法 ...
react框架学习总结（纯干货）
首先,我先给出我学习react框架的参考教程,以下内容都是我依据此教程的个人总结.react教程 React与JSX: function Square(props) {return (<butt ...
React框架新手入门
目录 React框架简介特点创建一个react项目成功后 React入门案例渲染语法事件函数类 React框架简介 react是Facebook公司产品用于创建用户界面Javascri ...
React框架发展史
原文地址: https://www.deaboway.com/react框架发展史.html#.YHr1L0j7QZE React开源地址:https://facebook.github.io/rea ...

加react框架订餐大师

加react框架订餐大师相关推荐

最新文章

热门文章