【React】React+Redux+Ajax 点餐项目 完整流程【一】

来源:互联网 发布:网络专业的职业规划 编辑:程序博客网 时间:2024/05/16 12:39

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


第二章开始: 项目的制作流程,直到最终交工!请看第二章!


原创粉丝点击