vue爬坑之mock使用拦截正常axios请求

最近一个项目犯了一个特别二的问题,卡了一会才解决,当时在调试登录接口的时候,怎么都发不出去axios请求,chrome的network里面无论如何都没有axios发起的登录请求:
在这里插入图片描述

// login.vue
<template>
  <div class="login">
    <div class="container">
      <a href="/#/index">![](/imgs/login-logo.png)</a>
    </div>
    <div class="wrapper">
      <div class="container">
        <div class="login-form">
          <h3>
            <span class="checked">帐号登录</span><span class="sep-line">|</span><span>扫码登录</span>
          </h3>
          <div class="input">
            <input type="text" placeholder="请输入帐号" v-model="username">
          </div>
          <div class="input">
            <input type="password" placeholder="请输入密码" v-model="password">
          </div>
          <div class="btn-box">
            <a href="javascript:;" class="btn" @click="login">登录</a>
          </div>
          <div class="tips">
            <div class="sms" @click="register">手机短信登录/注册</div>
            <div class="reg">立即注册<span>|</span>忘记密码?</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: '',
      userId: ''
    }
  },
  methods: {
    login () {
      const { username, password } = this
      this.axios.post('/user/login', {
        username,
        password
      }).then((res) => {
        this.$cookie.set('userId', res.id, { expires: '1M' })
        this.$router.push('/index')
      })
    },

main.js里面是这样配置的:

import Vue from 'vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueLazyLoad from 'vue-lazyload'
import VueCookie from 'vue-cookie'
import App from './App.vue'

axios.defaults.baseURL = '/api'
axios.defaults.timeout = 8000

// mock开关
const mock = true
if (mock) {
  require('./mock/api')
}

axios.interceptors.response.use(function (response) {
  const res = response.data
  if (res.status === 0) {
    return res.data
  } else if (res.status === 10) {
    window.location.href = '#/login/'
  } else {
    console.log('error')
    return Promise.reject(res)
  }
})

Vue.use(VueAxios, axios)
Vue.use(VueCookie)
Vue.use(VueLazyLoad, {
  loading: '/imgs/loading-svg/loading-bars.svg'
})
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

vue.config.js里面做了代理:

module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': {
                target: 'http://mall-pre.springboot.cn',
                changeOrigin: true,
                pathRewrite: {
                    '/api': ''
                }
            }
        }
    }
}

后台登录的接口是user/login

我在浏览器里面运行,点击登录,然后随便输入用户名密码就直接跳转到首页了,并且network里面没有发出登录的axios请求

使用postman测试接口,一切正常:
在这里插入图片描述
随便输个密码返回登陆失败:
在这里插入图片描述
比如我如果把这里的/user/login在这里插入图片描述

修改为/user/login1(并没有这个接口),就能发出axios请求:
在这里插入图片描述

说明接口没问题,axios也没问题,后来发现原来是在main.js里开启了mock,把mock开关改为false就可以了:
在这里插入图片描述

因为mock会返回模拟的数据,发送的是一个js脚本,而不会发送请求:

import Mock from 'mockjs'
Mock.mock('/api/user/login', {
  "status": 0,
  "data": {
    "id|10000-30000": 12,
    "username": "@cname",
    "email": "admin@51purse.com",
    "phone": null,
    "role": 0,
    "createTime": 1479048325000,
    "updateTime": 1479048325000
  }
})

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,感谢您的提问。如果您想在 Vue使用线上 Mock 模拟图片路径,并通过 Axios 请求数据,可以按照以下步骤进行: 1. 在 Vue 项目中安装 AxiosMockjs: ``` npm install axios mockjs --save ``` 2. 在 Vue 项目的 main.js 中引入 AxiosMockjs: ``` import axios from 'axios'; import Mock from 'mockjs'; ``` 3. 在 main.js 中配置 Axios请求拦截器,用于 Mock 模拟图片路径: ``` // 配置 Axios 请求拦截axios.interceptors.request.use((config) => { // 如果请求的 URL 是图片路径,则使用 Mock 模拟图片路径 if (/^\/api\/images\/.+/.test(config.url)) { config.url = Mock.Random.image('200x100', Mock.Random.color(), '#FFF', 'Mock Image'); } return config; }); ``` 在这里,我们使用Mock.Random.image() 方法来生成一个 200x100 大小的图片,并将其作为 Mock 模拟的图片路径返回。 4. 在组件中使用 Axios 发送请求,并将返回的数据与本地图片结合显示: ``` <template> <div> <img :src="localImage" alt="Local Image" /> <img :src="remoteImage" alt="Remote Image" /> </div> </template> <script> import axios from 'axios'; export default { data() { return { localImage: require('@/assets/images/local-image.png'), remoteImage: '', }; }, mounted() { // 发送 Axios 请求,获取远程数据 axios.get('/api/data') .then((response) => { // 将远程数据与本地图片结合显示 this.remoteImage = response.data.image; }) .catch((error) => { console.error(error); }); }, }; </script> ``` 在这里,我们使用了 require() 方法将本地图片引入,并将其作为 Vue 组件中的 data 数据。然后,使用 Axios 发送请求,获取远程数据,并将返回的图片路径与本地图片路径结合显示。 希望这些步骤可以帮助您实现在 Vue使用线上 Mock 模拟图片路径,并通过 Axios 请求数据,结合本地图片进行显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值