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

前言

为了深入学习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代码

<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 的一些坑点？
  网上搜集到了一篇知识点博客 点击进入

• 发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