基于vue技术栈-移动端外卖项目实战问题总结

雨点打透心脏的1/2处 2022-03-12 13:12 197阅读 0赞

## 前言 ##

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

## 技术栈 ##

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

## 项目链接及预览 ##

[点此进入github][github]

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

## 关于接口数据 ##

在github上找的别人做好的一个超大型外卖平台项目api文档里的其中几项  
[引用大佬的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代码

<section class="phone_num">
                <input type="tel" placeholder="手机号" class="num_input" maxlength="11" v-model="phone">
                <button class="send_verification" :disabled="!rightPhone" :class="{right_phone:rightPhone,computed_time:computedFlag}" @click.prevent="getCode">
                  {
       {computeTime ? `已发送${computeTime}s`:'发送验证码'}}
                </button>
              </section>

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 的一些坑点？  
    网上搜集到了一篇知识点博客 [点击进入][Link 1]
 *  发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][https_elm.cangdu.org_v1_cities_type_guess]

#### 请求方式: ####

GET

#### 参数类型：query ####

#### 返回示例： ####

{ 
      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][https_elm.cangdu.org_v2_pois_31.22967_121.4762]

#### 请求方式： ####

GET

#### 参数类型：param ####

#### 返回示例： ####

{ 
      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][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][https_elm.cangdu.org_shopping_restaurants_latitude_31.22967_longitude_121.4762]

#### 请求方式： ####

GET

#### 参数类型：query ####

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

#### 返回示例： ####

[
      { 
        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

#### 参数类型： ####

#### 返回示例： ####

### 8、退出 ###

#### 请求URL： ####

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

#### 示例： ####

#### 请求方式： ####

GET

#### 参数类型： ####

#### 返回示例： ####

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

[github]: https://github.com/nopapername/vue-oyshop-project
[api]: https://github.com/bailicangdu/node-elm/blob/master/API.md
[Link 1]: https://blog.csdn.net/zgh0711/article/details/79700185
[https_elm.cangdu.org_v1_cities_type_guess]: https://elm.cangdu.org/v1/cities?type=guess
[https_elm.cangdu.org_v2_pois_31.22967_121.4762]: https://elm.cangdu.org/v2/pois/31.22967,121.4762
[https_elm.cangdu.org_v2_index_entry]: https://elm.cangdu.org/v2/index_entry
[https_elm.cangdu.org_shopping_restaurants_latitude_31.22967_longitude_121.4762]: https://elm.cangdu.org/shopping/restaurants?latitude=31.22967&longitude=121.4762