前言

为了深入学习vue全家桶及前后台交互技术，包括vuex，vue-router，ajax等，模仿某平台写一个简化版的移动端项目出来

技术栈

vue2 + vuex + vue-router + webpack + ES6/7 + axios + stylus + mint-ui + mock模拟数据

项目链接及预览

点此进入github

此项目github地址： https://github.com/nopapername/vue-oyshop-project

关于接口数据

在github上找的别人做好的一个超大型外卖平台项目api文档里的其中几项
引用大佬的api接口文档地址
用到以下接口：
1、获取城市列表
2、根据经纬度详细定位
3、食品分类列表
4、获取商铺列表
5、获取验证码
6、获取用户信息
7、登录
8、退出

遇到的一些问题

在组件上绑定点击事件@click=”＄router.back()“无法返回上一页？
解决办法：组件上绑定事件时需要加上native修饰符
（即：@click.native=”$router.back()）
移动端页面的响应性如何解决？
解决办法：使用媒体查询器和em，rem进行适配。
（即：媒体查询适配范围自行百度）

跨域发送ajax请求的方法？
解决办法：配置webpack-dev-server，代理某一个路径到目标路径，同时更改源和重写

// 修改config里的配置文件index.js中以下部分
// Paths

assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/api': { // 匹配所有以'/api'开头的请求路径
    target: 'https://elm.cangdu.org', // 代理目标的基础路径
    changeOrigin: true, // 支持跨域
    pathRewrite: { // 重写路径：删除路径中开头的'/api'
      '^/api': ''
    }
  }
},

如何使用从后台获取了数据更新后的state中的数据再次请求数据（此项目中用在使用获得的经纬度再来确定具体位置以及用在界面更新之后再创建swiper对象）？
解决办法：使用watch监听并利用vue提供的方法this.＄nextTick(() => {})来等待数据更新后再进行后台请求。第二种方法是使用定时器设置一定的间隔时间再请求数据。

watch: {
```
cityPosition (value) {
  this.$nextTick(() => {
    this.getCityDetailedInfo()
    this.getShopList()
  })
}
```
}
手机短信验证码登录时手机号格式输入正确发送验证码按钮亮起，点击后显示已发送并倒计时功能？
解决办法：使用计算属性返回判断手机号格式的正则表达式的布尔值来进行动态添加类，并添加点击事件方法设置定时器实现倒计时效果。
html代码

js中：

data () {
    return {
      loginWay: true, // 切换登录方式，true显示当前登录界面
      computeTime: 0, // 验证码倒计时
      computedFlag: false, // 计数标志，当计数时切换到不可点击的按钮颜色
      phone: '' // 手机号
    }
  },
  computed: {
    rightPhone () {
      return /^1[345789]\d{9}$/.test(this.phone)
    }
  },
  methods: {
    getCode () {
      if (!this.computeTime) {
        this.computedFlag = true
        this.computeTime = 30
        const computedNum = setInterval(() => {
          this.computeTime -= 1
          if (this.computeTime === 0) {
            clearInterval(computedNum)
            this.computedFlag = false
          }
        }, 1000)
      }
    }
  }

按需引入mint-ui 的一些坑点？
网上搜集到了一篇知识点博客点击进入
发ajax请求在调试器network中出现错误404一些原因？
1 请求的路径是不是对
2 代理是否生效（配置和重启）
3 服务器应用是否运行
vuex报错: [vuex] Expects string as the type, but found object 什么原因？？？
解决：actions中代码写错了。仔细检查！！！(百度了下mutation和mutation-types中写错也有此类型错误提示)

// 错误的
async getCaptchas ({commit}) {
```
const captchas = await reqCaptchas()
commit([RECEIVE_CAPTCHAS], {captchas})
```
}
// 正确的
async getCaptchas ({commit}) {
```
const captchas = await reqCaptchas()
commit(RECEIVE_CAPTCHAS, {captchas})
```
}

接口列表：

1、获取城市列表

请求URL:

https://elm.cangdu.org/v1/cities

示例：

https://elm.cangdu.org/v1/cities?type=guess

请求方式:

GET

参数类型：query

参数	是否必选	类型	说明
type	Y	string	guess：定位城市， hot：热门城市， group：所有城市

返回示例：

{ 
  id: 1,
  name: "上海",
  abbr: "SH",
  area_code: "021",
  sort: 1,
  latitude: 31.23037,
  longitude: 121.473701,
  is_map: true,
  pinyin: "shanghai"
}

2、根据经纬度详细定位

请求URL：

https://elm.cangdu.org/v2/pois/:geohash

示例：

https://elm.cangdu.org/v2/pois/31.22967,121.4762

请求方式：

GET

参数类型：param

参数	是否必选	类型	说明
geohash	Y	string	经纬度

返回示例：

{ 
  address: "上海市黄浦区西藏中路",
  city: "上海市",
  geohash: "31.22967,121.4762",
  latitude: "31.22967",
  longitude: "121.4762",
  name: "黄浦区上海人民广场"
}

3、食品分类列表

请求URL：

https://elm.cangdu.org/v2/index_entry

示例：

https://elm.cangdu.org/v2/index_entry

请求方式：

GET

参数类型：

参数	是否必选	类型	说明

返回示例：

[
  { 
    id: 1,
    is_in_serving: true,
    description: "0元早餐0起送，每天都有新花样。",
    title: "预订早餐",
    link: "",
    image_url: "/d/49/7757ff22e8ab28e7dfa5f7e2c2692jpeg.jpeg",
    icon_url: "",
    title_color: "",
    __v: 0
  },
  { 
    id: 65,
    is_in_serving: true,
    description: "",
    title: "土豪推荐",
    image_url: "/d/49/7757ff22e8ab28e7dfa5f7e2c2692jpeg.jpeg",
    link: "",
    icon_url: "",
    title_color: "",
    __v: 0
  },
  ... 共n条数据
]

4、获取商铺列表

请求URL：

https://elm.cangdu.org/shopping/restaurants

示例：

https://elm.cangdu.org/shopping/restaurants?latitude=31.22967&longitude=121.4762

请求方式：

GET

参数类型：query

参数	是否必选	类型	说明
latitude	Y	string	纬度
longitude	Y	string	经度
offset	N	int	跳过多少条数据，默认0
limit	N	int	请求数据的数量，默认20
restaurant_category_id	N	int	餐馆分类id
order_by	N	int	排序方式id： 1：起送价、2：配送速度、3:评分、4: 智能排序(默认)、5:距离最近、6:销量最高
delivery_mode	N	array	配送方式id
support_ids	N	array	餐馆支持特权的id
restaurant_category_ids	N	array	餐馆分类id

返回示例：

[
  { 
    name: "肯德基",
    address: "上海市宝山区淞宝路155弄18号星月国际商务广场1层",
    id: 1,
    latitude: 31.38098,
    longitude: 121.50146,
    location: [
      121.50146,
      31.38098
    ],
    phone: "1232313124324",
    category: "快餐便当/简餐",
    supports: [
      { 
        description: "已加入“外卖保”计划，食品安全有保障",
        icon_color: "999999",
        icon_name: "保",
        id: 7,
        name: "外卖保",
        _id: "591bec73c2bbc84a6328a1e5"
      },
      { 
        description: "准时必达，超时秒赔",
        icon_color: "57A9FF",
        icon_name: "准",
        id: 9,
        name: "准时达",
        _id: "591bec73c2bbc84a6328a1e4"
      },
      { 
        description: "该商家支持开发票，请在下单时填写好发票抬头",
        icon_color: "999999",
        icon_name: "票",
        id: 4,
        name: "开发票",
        _id: "591bec73c2bbc84a6328a1e3"
      }
    ],
    status: 0,
    recent_order_num: 615,
    rating_count: 389,
    rating: 1.6,
    promotion_info: "他依然有人有人有人有人有人",
    piecewise_agent_fee: { 
      tips: "配送费约¥5"
    },
    opening_hours: [
      "8:30/20:30"
    ],
    license: { 
      catering_service_license_image: "",
      business_license_image: ""
    },
    is_new: true,
    is_premium: true,
    image_path: "/img/shop/15c1513a00615.jpg",
    identification: { 
      registered_number: "",
      registered_address: "",
      operation_period: "",
      licenses_scope: "",
      licenses_number: "",
      licenses_date: "",
      legal_person: "",
      identificate_date: null,
      identificate_agency: "",
      company_name: ""
    },
    float_minimum_order_amount: 20,
    float_delivery_fee: 5,
    distance: "19.5公里",
    order_lead_time: "40分钟",
    description: "好吃的",
    delivery_mode: { 
      color: "57A9FF",
      id: 1,
      is_solid: true,
      text: "蜂鸟专送"
    },
    activities: [
      { 
        icon_name: "减",
        name: "满减优惠",
        description: "满30减5，满60减8",
        icon_color: "f07373",
        id: 1,
        _id: "591bec73c2bbc84a6328a1e7"
      },
      { 
        icon_name: "特",
        name: "优惠大酬宾",
        description: "是对冯绍峰的上市房地产",
        icon_color: "EDC123",
        id: 2,
        _id: "591bec73c2bbc84a6328a1e6"
      }
    ],
  }
  ... 共20条数据
]

5、获取验证码

请求URL：

https://elm.cangdu.org/v1/captchas

示例：

请求方式：

POST

参数类型：

参数	是否必选	类型	说明

返回示例：

{ 
  status: 1,
  code: base64
}

6、获取用户信息

请求URL：

https://elm.cangdu.org/v1/user

示例：

请求方式：

GET

参数类型：

参数	是否必选	类型	说明

返回示例：

{ 
  username: "1",
  user_id: 2,
  id: 2,
  point: 0,
  mobile: "",
  is_mobile_valid: true,
  is_email_valid: false,
  is_active: 1,
  gift_amount: 3,
  email: "",
  delivery_card_expire_days: 0,
  current_invoice_id: 0,
  current_address_id: 0,
  brand_member_new: 0,
  balance: 0,
  avatar: "/img/default/default.jpg",
  __v: 0
}

7、登录

请求URL：

https://elm.cangdu.org/v2/login

示例：

请求方式：

POST

参数类型：

参数	是否必选	类型	说明
username	Y	string	用户名
password	Y	string	密码
captcha_code	Y	string	验证码

返回示例：

{ 
  username: "1",
  user_id: 2,
  id: 2,
  point: 0,
  mobile: "",
  is_mobile_valid: true,
  is_email_valid: false,
  is_active: 1,
  gift_amount: 3,
  email: "",
  delivery_card_expire_days: 0,
  current_invoice_id: 0,
  current_address_id: 0,
  brand_member_new: 0,
  balance: 0,
  avatar: "/img/default/default.jpg",
  __v: 0
}

8、退出

请求URL：

https://elm.cangdu.org/v2/signout

示例：

请求方式：

GET

参数类型：

参数	是否必选	类型	说明

返回示例：

{ 
  status: 1,
  message: '退出成功'
}

前言

技术栈

项目链接及预览

关于接口数据

遇到的一些问题

接口列表：

1、获取城市列表

请求URL:

示例：

请求方式:

参数类型：query

返回示例：

2、根据经纬度详细定位

请求URL：

示例：

请求方式：

参数类型：param

返回示例：

3、食品分类列表

请求URL：

示例：

请求方式：

参数类型：

返回示例：

4、获取商铺列表

请求URL：

示例：

请求方式：

参数类型：query

返回示例：

5、获取验证码

请求URL：

示例：

请求方式：

参数类型：

返回示例：

6、获取用户信息

请求URL：

示例：

请求方式：

参数类型：

返回示例：

7、登录

请求URL：

示例：

请求方式：

参数类型：

返回示例：

8、退出

请求URL：

示例：

请求方式：

参数类型：

返回示例：

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

随便看看

教程文章

热评文章

1江湖小白之一起学Python （二）爬取数据的保存

2Java Shiro：简化身份验证和授权的安全框架

3Java中try()catch{}的使用方法

4Swagger注解-@ApiModel 和 @ApiModelProperty

5windows下强制杀死tomcat进程

6uni-app 条形码(一维码)/二维码生成实现

标签列表