加react框架订餐大师

编程语言 2018-05-11 18:18:55 阅读次数: 1

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",
    "成都小吃"
  ]
}

猜你喜欢

转载自turbo12138.iteye.com/blog/2280189
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022