【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
第二章开始: 项目的制作流程,直到最终交工!请看第二章!
- 【React】React+Redux+Ajax 点餐项目 完整流程【一】
- 【React】React+Redux+Ajax 点餐项目 完整流程【二】
- react + redux 完整的项目
- react + redux 完整的项目
- react+redux工作流程
- react+redux(一)
- react-redux-router 一个完整项目解读(附源码)
- react+redux+react-redux
- react+redux 前端开发流程
- React-redux项目最好示例
- react,redux,webpack前端项目
- React-Redux-Antd实现知乎日报项目(一)
- React + Redux 入门(一):抛开 React 学 Redux
- react-redux
- React + Redux
- React&Redux
- react-redux
- React Redux
- mybatis jdbcType: DATE ,TIMESTAMP 区别
- SparkStreaming之黑名单过滤
- Navicat for Oracle导入sql文件
- Mybatis获取插入记录的自增长ID
- 阿里巴巴 Druid 数据库连接池监控界面配置的参数解读
- 【React】React+Redux+Ajax 点餐项目 完整流程【一】
- java实现utf-8与GB2312编码的转换
- CentOS7虚拟机网络的配置
- 【MyBatis】什么是mybatis,mybatis有什么特点(一)
- 网络HTTP、TCP、UDP、Socket 知识总结
- elasticsearch bulk数据--ES批量导入json数据
- Android之NDK与C++的环境变量
- Qt之QSS(动态属性)【转】
- Glide的变换(美图效果)