[零基础][完结]vue后台管理系统开发流程全记录(三)_EasyMock虚拟后台接口对接创建

前端呆头鹅2023-11-01 10:35

文章目录

    • [一 mock.js本地接口模拟](#一 mock.js本地接口模拟 "#_mockjs_1")
      • [1.1 mock本地项目简介](#1.1 mock本地项目简介 "#11_mock_3")
      • [1.2 接口创建](#1.2 接口创建 "#12__58")
      • [1.3 接口调用](#1.3 接口调用 "#13__104")
    • [二 EasyMock线上接口模拟](#二 EasyMock线上接口模拟 "#_EasyMock_181")
      • [2.1 EasyMock接口简介](#2.1 EasyMock接口简介 "#21__EasyMock_183")
      • [2.2 接口创建](#2.2 接口创建 "#22__200")
      • [2.3 接口使用](#2.3 接口使用 "#23__211")
    • [三 使用作者的接口](#三 使用作者的接口 "#__315")

一 mock.js本地接口模拟

1.1 mock本地项目简介

可以看到在目前的项目中已有一个mock文件夹，里面放置的将是本地接口模拟文件。

mock文件夹中含有五个文件，其中index.js为入口文件，打开该文件，需要我们理解并后期修改使用的是引入部分。

js 复制代码 
const user = require('./user')
const table = require('./table')

const mocks = [
  ...user,
  ...table
]

该部分引入了两个接口创建模块，如果我们创建了新的模块，也需要在此引入，才能使用。

打开其中一个接口创建模块，我们可以看到里面已经创建了几个模拟接口。

js 复制代码 
const Mock = require('mockjs')

const data = Mock.mock({
  'items|30': [{
      ... ...
  }]
})

module.exports = [
  {
    url: '/vue-admin-template/table/list',
    type: 'get',
    response: config => {
      const items = data.items
      return {
        code: 20000,
        data: {
          total: items.length,
          items: items
        }
      }
    }
  }
]

上面的代码中，首先创建了一个对象data，这个对象被赋值Mock.mock()方法的返回值，该方法传入一个参数，参数使用类似正则的语法，方法根据参数返回对应的模拟数据，代码在下方导出一个对象，对象中指明对应的接口和返回值，返回值即return的值。

观察得知，该文件返回一个数组，数组中每一项都是一个对象，也是一个指明了路径，类型和返回值的模拟接口。

参数语法在此不做展开，可在官网文档查找，这里用到再讲。

其余的文件，utils是工具文件，该文件已经在index中引入了，我们不用管它，mock-server是服务文件，用来启动拦截服务，我们了解即可。

1.2 接口创建

根据上文介绍，创建本地接口需要两步。

首先，模仿user/table文件，定义一个接口。

我们定义一个简单的接口，不使用Mock.mock()方法返回虚拟数据，直接将数据写死，因此这里不需要引入Mockjs文件，只具备基础的导出部分即可。

我们在mock文件夹中新建文件testlocal.js，里面代码如下。

js 复制代码 
module.exports = [
    {
      url: '/testlocal',
      type: 'get',
      response: config => {
        return {
          code: 20000,
          data: {
            total: "testlocal",
            items: "本地测试数据"
          }
        }
      }
    }
]

创建模拟接口后，我们需要在index.js中注册。

js 复制代码 
... ...
const user = require('./user')
const table = require('./table')
const testlocal = require('./testlocal')

const mocks = [
  ...user,
  ...table,
  ...testlocal
]
... ...

此时，一个本地虚拟接口完成了。

1.3 接口调用

现在我们来调用该接口，首选我们找到src/api文件夹，可以见到user&table两个文件，与上文中mock中的两个虚拟接口文件是对应的，mock中是虚拟接口文件，而api中是封装的调用接口的axios方法。

首先我们来看一下table文件。

js 复制代码 
import request from '@/utils/request'

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

该文件导入了一个request文件，打开该文件可知，该返回的实际是一个axios实例，所以在使用时作axios使用即可，即输入请求路径，请求类型和请求参数来调用接口，在这个文件中实际上是一个axios的封装，这里导出了一个getList方法，方法对应的是list接口，这个接口可以在mock的table中找到对应的模拟接口。可以看到，模拟接口和接口调用的封装中url和类型是对应的。模拟接口可以响应该调用。

刚刚我们建立了自己的接口/testlocal，我们现在来封装一个调用该接口的方法。

建立一个新的文件，代码如下。

js 复制代码 
import request from '@/utils/request'

export default {
    testlocal() {
        return request({
            url: '/testlocal', 
            method: 'get'
        })
    }
}

然后我们在views/deshboard/index.vue中，调用该接口。

vue 复制代码 
<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      {{name}}
    </div>
  </div>
</template>

<script>
import {testlocal} from '@/api/test'

export default {
  name: 'Dashboard',
  data() {
    return {
      name: {}
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      testlocal().then(response => {
        this.name = response;
      })
    }
  }
}
</script>

此时，界面上出现了接口数据。

二 EasyMock线上接口模拟

2.1 EasyMock接口简介

mock模拟接口还有一种更直观的方式，将是线上模拟，首先，我们打开EasyMock官网。

官网中没有注册选项，如果你没有帐号，输入用户名和密码点击登录即可自动注册，当然，如此简洁的注册，当你丢失密码时也无法找回。

登录后点击右下角的加号悬浮按钮，输入对应的信息创建项目，必填项有项目名称和baseurl。填写完成后点击页面下方的创建按钮即可。

创建成功后，"我的项目"标签栏中会显示刚刚创建的项目。点击可查看项目详情，如baseurl和项目包含的接口。现在项目中还没有接口，我们即将添加。

2.2 接口创建

点击上图中的创建接口按钮，右侧填入接口类型和接口地址，左侧填入接口数据，和本地模拟中填入的接口数据相同，可使用类正则方式生成模拟数据，现在先生成一个简单的固定数据做测试。

如上图，填好后点击确认/更新即可，添加的接口将可以在项目详情中看到了。

此时，这个接口将可以在项目中访问了，无需引入任何文件，非常方便。

2.3 接口使用

现在，我们在test.js中添加一个调用该接口的api导出。

javascript 复制代码 
import request from '@/utils/request'

export function test() {
        return request({
            url: '/test', // /dev-api/test
            method: 'get',
        })
}

然后在vue组件中导入该api并调用方法。

vue 复制代码 
<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      {{name}}
    </div>
  </div>
</template>

<script>
import {test} from '@/api/test'

export default {
  name: 'Dashboard',
  data() {
    return {
      name: {}
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      test().then(response => {
        this.name = response;
      })
    }
  }
}
</script>

此时界面上出现了返回的内容，已经取到了设置的返回值。

当本地mock与EasyMock线上接口模拟共同使用时，在向线上接口发送post请求中，两者可能导致冲突，这时需要修改本地mock服务文件mock-server.js，修改如下。

js 复制代码 
function registerRoutes(app) {
  ... ...
  for (const mock of mocksForServer) {
    // app[mock.type](mock.url, mock.response) 该句注释掉 替换如下
    //------------------------------------------------------------------
    app[mock.type](mock.url, bodyParser.json(), bodyParser.urlencoded({
      extended: true
    }), mock.response)
    //------------------------------------------------------------------
    mockLastIndex = app._router.stack.length
  }
  const mockRoutesLength = Object.keys(mocksForServer).length
  return {
    ...
  }
}
js 复制代码 
module.exports = app => {
  // 下面的语句注释掉	
  // parse app.body
  // https://expressjs.com/en/4x/api.html#req.body
  // app.use(bodyParser.json())
  // app.use(bodyParser.urlencoded({
  //   extended: true
  // }))
  ... ...
}
js 复制代码 
module.exports = app => {
  // 下面的语句注释掉	
  // parse app.body
  // https://expressjs.com/en/4x/api.html#req.body
  // app.use(bodyParser.json())
  // app.use(bodyParser.urlencoded({
  //   extended: true
  // }))
  ... ...
}

如此，接口将可以正常调用了。

三 使用作者的接口

有同学提出希望使用作者的接口，这里将代理设置放在下方。

js 复制代码 
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js'),

    proxy: {
      [process.env.VUE_APP_BASE_API] :{ // 是.env.development 文件的'/dev-api':          
        // 目标服务器地址          
        target: 'https://mock.mengxuegu.com/mock/6095007cc7b7385be0a82a41/blog-admin',          
        changeOrigin: true, // 开启代理服务器，          
        pathRewrite: {              
          // '^/dev-api': '',              
          [ '^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  },
相关推荐
清灵xmf17 分钟前
揭开 Vue 3 中大量使用 ref 的隐藏危机
前端·javascript·vue.js·ref
学习路上的小刘31 分钟前
vue h5 蓝牙连接 webBluetooth API
前端·javascript·vue.js
＆白帝＆31 分钟前
vue3常用的组件间通信
前端·javascript·vue.js
冯宝宝^2 小时前
基于mongodb+flask（Python）+vue的实验室器材管理系统
vue.js·python·flask
cc蒲公英2 小时前
Vue2+vue-office/excel 实现在线加载Excel文件预览
前端·vue.js·excel
森叶3 小时前
Electron-vue asar 局部打包优化处理方案——绕开每次npm run build 超级慢的打包问题
vue.js·electron·npm
小小竹子3 小时前
前端vue-实现富文本组件
前端·vue.js·富文本
青稞儿3 小时前
面试题高频之token无感刷新（vue3+node.js）
vue.js·node.js
程序员凡尘4 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法，亲测有效！！！
前端·javascript·vue.js
Bug缔造者10 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07Coze扣子平台完整体验和实践（附国内和国际版对比）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10借助 LocatorJS ，快速定位本地代码