加react框架订餐大师

于 2016-03-03 11:07:38 发布
阅读量141 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： json javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_3821/article/details/82648206

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=0
        var 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:

1.

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

 2.

{

  "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"
      }
    ]
  }
}

 3.

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

 

iteye_3821
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值