1. 程式人生 > >【React】React+Redux+Ajax 點餐專案 完整流程【一】

【React】React+Redux+Ajax 點餐專案 完整流程【一】

Github 地址:

https://github.com/KnoveZ/react-demo-knove

前端:React框架(Redux)

後端:SSM框架(Redis+ActiveMQ+WebSocket)

專案主題:點餐軟體

作為react前端,和後端同學互動,基本完成了全部功能。在最終 評審時候也取得了很好的成績。

分為三個頁面:

1.點餐頁面

2/3.訂單/餐品 表格頁面 

效果:

1.點餐頁面:


2.訂單詳情頁面:


3.菜品列表頁面:


————————————————————————————————————————————————————————

安裝方式:

 在github git下來後,分為【前端,後端

】資料夾

1.後端

資料夾裡面是pos(主要後臺)和Socket(不是必須)

先部署後臺,解壓出來pos資料夾,用IDEA或者eclipse  配合maven 直接tomcat執行即可。

PS:還要執行ActiveMQ和redis服務! 否則不會正常獲取資料!

2. 【前端】 

node.js  環境配好後,將前端資料夾內 檔案 解壓到一個資料夾內,在資料夾內執行

npm install 

然後

npm  start 即可

如果後端部署在本機,需要在 前端 更改訪問後臺的連結:

在 ./src/action/url.js 中

//請求的遠連結
    //部署本機 換為      http://localhost:8080/
    //遠端   換為        http://30.87.246.189:8080/
let url="http://localhost:8080/";

這裡改一下↑

————————————————————————————————————————————————————————

這裡主要說前端的實現方式。 以及如何和後端配合。

後端 只提供介面,以及返回資料方式。 邏輯基本都在前端。

後端給的介面:

https://github.com/WXDEE/pos-demo/wiki/%E6%A1%8C%E5%AD%90%E6%8E%A5%E5%8F%A3

第二章開始: 專案的製作流程,直到最終交工!請看第二章!