react-美团(React+Mongoose+koa2)

说明
自己为何要去尝试写一个这么多页面的网页:100:,本人是纯粹的小白一枚,在各大论坛不停的刷着Vue,React,RN,微信小程序等方面的教程,虽然不停的学习,但是发现自己的技术并没有实质上的提高,就是不停的重复着同样的任务,每个地方都学到了一点,只要混合在一起,马上就全都不会了,:tada:所以第一次尝试使用最新的技术去制作一个大型网站---->至于为何选择了美团,主要是每次看的教程都是做饿了么,这次就打算做一个和饿了么类似的美团,数据的话用了美团官网的一部分API,自己写了一部分

其余端支持

美团电脑网页 React + Koa + Mongoose 开发完毕 🎉
美团手机网页 Dva + umi + koa + Mongoose 开发完毕 💯
美团后台管理 Nuxt + koa + Mongoose 开发完毕 🌈
微信小程序开发完毕:fire:
Taro多端支持正在开发
美团APP ReactNative + koa + Mongoose 开发一部分

完成

为了方便以后自己学习,也方便看到的人更好的学习,我会把每一个步骤如何完成的方法写在里面 -> 文档

计划

使用

git clone https://github.com/2662419405/meituan.git
cd meituan && npm install

如果npm安装不上可以试一下yarn

运行

本地端口运行

需要本地有mongoose

// 两个都需要一直挂在才可以,如果麻烦可以使用pm2
npm run start
npm run server

默认启动在3001端口上

build运行

如果想要build之后可以访问,需要加上代理,推荐使用nginx

需要本地有mongoose

# 美团项目
server {
    listen       80;
    location / {
        root   /var/www/html;
        index  index.html index.htm;
    }
    location /ptapi {
            proxy_pass https://www.meituan.com;
    }
    location /meishi {
            proxy_pass https://www.meituan.com;
    }
    location /group {
            proxy_pass https://ihotel.meituan.com;
    }
    location /detailapi {
            proxy_pass https://ihotel.meituan.com;
    }
    location /server {
        proxy_pass http://app-pm2:4000;
    }
}

已经配置为监听状态,双核启动

=============分割线下面是每个包的详细解释===============

包展示

// 项目结构
├─build                                   // 打包生成的文件结构
├─config                                  // webpack配置文件
├─public                                  // 默认渲染的模板
├─server                                  // 后台
│  ├─model                                // 数据库原型     
│  ├─router                               // 路由
│  ├─utils                                // 常用函数编写
│  ├─config                               // 修改端口设置
│  ├─index                                // 后台入口文件
├─src                                     // 前台
│  ├─app                                  // 首页容器组件
│  ├─router                               // 路由配置
│  ├─setupProxy                           // 代理配置
│  ├─ScrollToTop                          // 路由返回顶部组件
│  ├─interceptor                          // axios请求拦截
│  ├─index                                // 入口文件
│  ├─config                               // 默认的json数据
│  │  ├─banner.json
│  │  ├─banner-left.json
│  │  ├─film.json
│  │  ├─footer.json
│  │  ├─footer-nav.json
│  │  ├─header-title.json
│  │  ├─header-right.json
│  │  ├─offer.json
│  │  ├─secenes.json
│  │  ├─recommend.json
│  ├─static                               // 静态文件
│  │  ├─logo
│  │  ├─img
│  ├─utils                                // 工具函数
│  │  ├─code                              // 生成随机验证码
│  │  ├─imgReturn                         // 正则解决美团图片加密
│  │  ├─dataChuli                         // 时间转换格式
│  ├─store                                // store
│  │  ├─reducer                           // 合并多个reducer文件
│  │  ├─store                             // store入口文件
│  ├─component                            // 全局组件
│  │  ├─404
│  │  ├─banner
│  │  ├─Films
│  │  ├─Home
│  │  ├─left-banner
│  │  ├─offer
│  │  ├─recommend
│  │  ├─right-banner
│  │  ├─search
│  │  ├─scenes
│  │  ├─store
│  │  ├─detail                            // 二级路由 包括 美食 酒店 旅游 等
│  │  │  ├─jiudian
│  │  │  ├─cate
│  │  │  ├─jiudian
│  │  │  ├─meishi
│  │  │  ├─right
│  │  │  ├─store
│  │  │  ├─tail
│  ├─component                            // 公共组件
│  │  ├─footer
│  │  ├─header
│  │  ├─Login
│  │  ├─Rigister
│  │  ├─store
│  │  ├─zhao
├─.travis.yml                             // 可持续集成
├─STUDY.md                                // 每一个完成任务的步骤

如果还有bug和建议,欢迎告诉我 (͏ ˉ ꈊ ˉ)✧˖°

页面只是做了几个比较有代表性的,很多页面没有做,其实就是为了踩坑和学习,做别的页面感觉只是在复制粘贴,没有任何可以吸收的东西,则没有继续做下去,主要还是针对于移动端和APP开发

感觉支持喜欢的朋友记得给个star

shangwenwen/meituan

react-美团(React+Mongoose+koa2)

其余端支持

完成

计划

使用

运行