Skip to content

wudiufo/like-meituan-pc

Repository files navigation

用postman 测接口

http://localhost:3000/geo/getPosition
http://localhost:3000/geo/menu
http://localhost:3000/geo/province
http://localhost:3000/search/top?input=火锅&city=天津&sign=a3c9fe0782107295ee9f1709edd15218
http://localhost:3000/search/hotPlace?city=天津&sign=a3c9fe0782107295ee9f1709edd15218
http://localhost:3000/category/crumbs?city=北京
http://localhost:3000/search/resultsByKeywords?city=广州&keyword=广州流溪河国家森林公园

meituan

My superb Nuxt.js project

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project
$ npm run generate

For detailed explanation on how things work, checkout Nuxt.js docs.

跑环境 package.json, 执行命令 npm install or yarn install

{
  "name": "app",
  "version": "1.0.0",
  "description": "My phenomenal Nuxt.js project",
  "author": "haiyang",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "@nuxtjs/axios": "5.0.0",
    "axios": "0.18.0",
    "babel-preset-es2015": "6.24.1",
    "cross-env": "5.2.0",
    "crypto-js": "3.1.9-1",
    "element-ui": "2.4.6",
    "js-pinyin": "0.1.9",
    "koa": "2.5.2",
    "koa-bodyparser": "4.2.1",
    "koa-generic-session": "2.0.1",
    "koa-json": "2.0.2",
    "koa-passport": "4.1.1",
    "koa-redis": "3.1.2",
    "koa-router": "7.4.0",
    "lodash": "4.17.11",
    "mongoose": "5.3.0",
    "node-sass": "4.9.3",
    "nodemailer": "4.6.8",
    "nuxt": "2.0.0",
    "passport-local": "1.0.0",
    "sass-loader": "7.1.0"
  },
  "devDependencies": {
    "babel-eslint": "8.2.1",
    "eslint": "3.19.0",
    "eslint-loader": "2.0.0",
    "eslint-plugin-vue": "4.0.0",
    "nodemon": "1.11.0"
  }
}

初始化项目

npx create-nuxt-app meituan

? Project name meituan
? Project description My stupendous Nuxt.js project
? Use a custom server framework koa
? Choose features to install axios
? Use a custom UI framework element-ui
? Use a custom test framework none
? Choose rendering mode Universal
? Author name wudiufo
? Choose a package manager npm
To get started:

        cd meituan
        npm run dev

  To build & start for production:

        cd meituan
        npm run build
        npm start

兼容es6语法,配置

在package.json中,在dev和start后加 `--exec babel-node`
如下:
"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
    "generate": "nuxt generate"
  },

执行命令,安装 npm install babel-preset-es2015 babel-cli babel-core

创建 .babelrc 文件

{
  "presets": ["es2015"]
}

支持 sass 编译,安装

npm i sass-loader node-sass

配置 nuxt.config.js

/*
   ** Global CSS
   */
  css: [
    'element-ui/lib/theme-chalk/reset.css',
    'element-ui/lib/theme-chalk/index.css',
    '~assets/css/main.css'
  ],
      
   /*
   ** Build configuration
   */
  build: {
    transpile: [/^element-ui/],

    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {},
    cache: true   //开启缓存 

首页开发

首页需求分析(模板设计)

首页需求分析(数据结构设计)

腾讯邮箱服务设置,用于通过邮箱接收邮箱验证码

服务端接口设计(用户类接口) server/interface/users.js

操作数据库
npm i mongoose
操作接口
npm i koa-router koa-redis nodemailer
npm i koa-bodyparser koa-generic-session koa-json axios koa-passport passport-local
加密
npm i crypto-js

连接redis数据库

redis-server

城市服务类接口 server/interface/geo.js

查询类接口 server/interface/search.js

导入数据到 mongodb

//进入到 db 目录,把准备好的数据导入到数据库
cd db 
mongoimport -d student -c areas areas.dat
mongoimport -d student -c category category.dat
mongoimport -d student -c cities cities.dat
mongoimport -d student -c maps maps.dat
mongoimport -d student -c menus menus.dat
mongoimport -d student -c pois pois.dat
mongoimport -d student -c provinces provinces.dat
mongoimport -d student -c regions regions.dat
mongoimport -d student -c topsearches topsearches.dat
mongoimport -d student -c position position.dat
mongoimport -d student -c resultsbykeywords resultsbykeywords.dat
mongoimport -d student -c products products.dat

线上接口

http://cp-tools.cn/sign

npm i lodash
npm i js-pinyin

详情页开发需求分析 pages/detail.vue ,components/detail

购物车页面需求分析 pages/cart.vue ,components/cart

订单页面需求分析 pages/order.vue, components/order


完成运行效果图

About

仿美团pc端

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published