【React】React+Redux+Ajax 點餐項目 完整流程【二】

前端架構:

項目一開始 採用的 react-create-app 也就是facebook 專門定製的react腳手架。

然後除去src文件夾,那些都是自動生成的。

但是後面要用到很多東西需要配置。 那些用到的都在package.json內。

例如babel,less,eslint 等等


src內目錄詳解:

action: 與redux 以及 ajax 後端交互

        -action.js   --Redux的action 方式,這裏執行ajax以及連接store的操作。

        -index.js    -- 沒用到

        -socket.js   --專爲socket製作的一種action

        -type.js       --儲存訪問store的行爲常量

        -url.js          --儲存和後臺訪問的方法,以及訪問的鏈接

components: 儲存組件

       -factory     --工廠,製作桌子,餐品的工廠

                   -DeskFactory.jsx     桌子工廠

                   -FoodFactory.jsx     餐品工廠

                  --LackFoodFactory.jsx   餘量爲空餐品工廠【沒用到】

                  --TypeFactory.jsx    菜品類型工廠

           - pages --頁面

                  -infoComponents      --公用組件

                                -InfoTab.jsx      切換卡組件

                  -OrderingComponents --服務員訂餐頁面中的組件

                               -LackFood.jsx     餘量爲空展示組件 【沒用到】

                               -OrderDeetails.jsx  訂單詳情頁面【右側】

                               -PendOrder.jsx    桌子詳情頁面【左側】

                               -SelectFood.jsx   選菜 頁面組件 【中間】

                   -FoodInfo.jsx         菜品列表頁面

                  -OrderInfo.jsx         訂單列表頁面

                  -UserOrdering.jsx       服務員訂餐頁面

          -ui    --UI組成

         -reducer  --和redux交互

         -routes     --路由

          -style      --樣式


        


     【未完持續】


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章