react+redux实现仿大众点评webapp

lemanli 发布于2019-08-21 17:50 / 1223人阅读

摘要：项目简介此项目是学习过程中跟着慕课网做的一个练手项目，模仿大众点评做的一个，项目不是很复杂，适合有一定基础的同学参考。慕课网地址项目的前端界面使用编写，后端使用的框架搭建，后台返回的数据全部是模拟的数据，不涉及数据库交互。

项目简介

此项目是学习react+redux过程中跟着慕课网做的一个练手项目，模仿大众点评做的一个webapp，项目不是很复杂，适合有一定react+redux基础的同学参考。
慕课网地址：https://coding.imooc.com/clas...

项目的前端界面使用react+less编写，后端使用的express框架搭建，后台返回的数据全部是模拟的数据，不涉及数据库交互。

后续可能会再写一篇文章（看心情），讲解部分代码，如果项目对大家学习react有一点帮助，麻烦在clone的同时顺手给个☆star☆

项目源码

githup项目源码：https://github.com/wenyuntian...
使用git clone地址：git@github.com:wenyuntian/webapp.git

运行步骤

1.clone到本地后，在项目文件夹的根目录和mock文件夹下面运行npm install命令安装项目依赖
2.接着在根目录和mock目录下运行命令npm start启动项目，在浏览器中访问http://localhost:3000/查看项目运行效果

最终效果展示

涉及的知识点 前端：

react：使用的create-react-app构建工具快速搭建的前端框架（需要在package.json配置跨域代理）。

redux：使用redux管理react组件的状态，实现各组件之间的通信。

axios：使用axios对get、post方法进行了简单的封装，用于前后端数据交互。

localStorage：简单的了解了一下localStorage，封装了get和set方法，将城市选择的城市信息存储在localStorage中。

less：使用less编写css样式。（注意：在create-react-app中默认不使用less，需要自行安装less-loader模块，并在webpack进行配置）

图标：项目中使用到的所有图标都是从icoMoon上下载的（学习过程中发现的素材网站，很好用，推荐！）

后端：

后端使用express快速搭建的一个后台数据，为了简单没有链接数据库，所有的数据都是模拟的数据。

专线服务服务器托管大众点评api 大众点评数据采集 react-redux React_Redux_Appointm

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90093.html

react-redux-router4-webpack2组成的大众点评的demo.

该demo使用的是webpack2.*来配置的,很多配置项都产生了变化,踩了不少坑.目前还在逐步完善中，webpack是一部一部配置来的。后端数据使用nodejs来开发模拟。GitHub项目地址。 showImg(https://segmentfault.com/img/remote/1460000009665620); 欢迎大家提问题。

Caizhenhao 2019-08-20 17:02 评论0 收藏0
Vue 实现仿大众点评买单的自定义键盘

摘要：基于封装的一个自定义数字键盘输入框仿照大众点评闪惠买单刚开始选用发现移动端没有办法输入小数换成发现唤起的键盘不是数字键盘最终选择又发现验证规则有部分实现不了效果更新后来我想了下可以通过监听键盘点击事件然后拿到输入值的从而进行值的验证但是这 wc-keyboard 基于 vue 封装的一个自定义数字键盘 + 输入框, 仿照大众点评闪惠买单. why? 刚开始选用 input type ...

Harpsichord1207 2019-08-20 17:03 评论0 收藏0
React技术栈实现大众点评Demo-初次使用redux-saga

摘要：在的中，可以使用或者等来监听某个，当某个触发后，可以使用等发起异步操作，操作完成后使用函数触发，同步更新，从而完成整个的更新。对于何时响应和如何响应，并没有控制权。的作用是用来取消一个还未返回的任务。项目地址项目截图 showImg(https://segmentfault.com/img/bVUJwx?w=718&h=1294); redux-saga介绍众所周知，react仅...

kel 2019-08-21 16:25 评论0 收藏0
[Android] 开源View组件(一)

摘要：系列，自定义实现知乎首页仿今日头条最强顶部导航指示器，支持种模式系列之一使用打造千变万化的指示器优雅的为添加和实现快速滑动实现条目拖拽排序与滑动删除高仿网易新闻首页添加，删除，排序类似大众点评美团等应用的城市选择器那些酷炫的开源库整理 Material Design系列，自定义Behavior实现Android知乎首页 showImg(http://img.blog.csdn.net/...

scola666 2019-08-14 14:54 评论0 收藏0