vue-cli2.x 获取线上api 接口 mock虚拟数据

vue-cli 获取api 接口mock虚拟数据

1.新建在线接口

在线接口管理(支持mock语言) 在线接口链接

• 进入-> 注册,登录-> 创建仓库 ->点击仓库名进入仓库, 里面有个示例接口, 可以仿照示例新建自己需要的接口

(不懂mock语法可以去mock官网看一下使用示例)

新建接口:

左上角新建

点右上角编辑,进行编辑,在响应内容输入名称,类型,规则和初始值,输入就能看到数据结果(数据是随机的,刷新便会更新)

获取api 接口 url
点击 红色 的/table/list

跳转页面的地址栏,便是我们需要的url

2.vue-cli 项目获取api数据
新建vue-cli 项目 -> 安装axios

npm install axios    // 安装axios

目录结构(后边带 U 的是新建文件 , 带 M 的是修改过得文件)

配置文件

直接贴代码
api/my.js

import request from '@/util/request'

export function getList(params) {
  return request({
    url: '/table/list',
    method: 'get',
    params
  })
}

export function doPost(data) {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}

util/request.js

import axios from 'axios'

// 创建 axios 接口
const service = axios.create({
  baseURL: 'http://rap2api.taobao.org/app/mock/269877', // url = base url + request url
  timeout: 5000 // request timeout
})


// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data

    if (res.code !== 200) {
      console.log('err')
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
  }
)

export default service

mock/index.js

const Mock = require('mockjs')

const my = require('./my')//----------------------------------(注意这里就好了)

const mocks = [
  ...my   //----------------------------------注册mock(注意这里就好了)
]

function mockXHR() {
  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
  Mock.XHR.prototype.send = function() {
    if (this.custom.xhr) {
      this.custom.xhr.withCredentials = this.withCredentials || false

      if (this.responseType) {
        this.custom.xhr.responseType = this.responseType
      }
    }
    this.proxy_send(...arguments)
  }

  function XHR2ExpressReqWrap(respond) {
    return function(options) {
      let result = null
      if (respond instanceof Function) {
        const { body, type, url } = options
        // https://expressjs.com/en/4x/api.html#req
        result = respond({
          method: type,
          body: JSON.parse(body),
          query: param2Obj(url)
        })
      } else {
        result = respond
      }
      return Mock.mock(result)
    }
  }

  for (const i of mocks) {
    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
  }
}

function param2Obj(url) {
  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
  if (!search) {
    return {}
  }
  const obj = {}
  const searchArr = search.split('&')
  searchArr.forEach(v => {
    const index = v.indexOf('=')
    if (index !== -1) {
      const name = v.substring(0, index)
      const val = v.substring(index + 1, v.length)
      obj[name] = val
    }
  })
  return obj
}

module.exports = {
  mocks,
  mockXHR
}

mock/my.js

module.exports = [
  {
    url: 'http://rap2api.taobao.org/app/mock/269877/table/list',// ------------------拦截具体的url
    type: 'get'
  }
]

module.exports = [
  {
    url: 'http://rap2api.taobao.org/app/mock/269877/login',
    type: 'post'
  }
]

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    // 登录
    path: '/',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
   // 展示列表
    path: '/table',
    name: 'Table',
    component: () => import(/* webpackChunkName: "about" */ '../views/Table.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

视图渲染

Login.vue

<template>
  <div class="login">
    <el-row>
      <el-col :span="6" :offset="9">
        <el-form ref="loginForm" :model="loginForm" label-width="80px">
          <el-form-item label="登录名称" >
            <el-input v-model="loginForm.name"></el-input>
          </el-form-item>
          <el-form-item label="登录密码">
            <el-input v-model="loginForm.pwd"></el-input>
          </el-form-item>
        
        </el-form>
        <router-link :to="{name: 'Table'}">
          <el-button type="primary" @click="Login">登录</el-button>
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { doPost } from '@/api/my'
export default {
  name: 'Login',
  data() {
    return{
      loginForm: {name: '', pwd: ''}
    }
  },
  methods: {
    Login() {
      doPost().then(response => {
        console.log(response)
      })
    }
  }
}
</script>

Table.vue

<template>
  <div class="talbe">
    <el-table :data="tableInfo" style="width: 100%">
      <el-table-column prop="date"  label="日期"  width="180"> </el-table-column>
      <el-table-columnprop="name"  label="姓名"width="180"> </el-table-column>
      <el-table-column  prop="addr"label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from '@/api/my'
export default {
  name: 'Table',
  data() {
    return{
      tableInfo: []
    }
  },
  created() {
    this.getTalbeList()
  },
  methods: {
    getTalbeList() {
      getList().then(response => {
        this.tableInfo = response.table
        console.log(response)
      })
    }
  }
}
</script>

演示效果:
点击登录,立即跳转到table页面(这里只是想演示一下获取线上api 数据, 登录表单没有做任何验证,所以不用输入也能跳转页面)

能显示在线 api 的数据(控制台第一条数据是登录成功的数据)