vue + axios + mock

参考来源:Vue mock.js模拟数据实现首页导航与左侧菜单功能_vue.js_AB教程网

记录步骤:在参考资料来源添加axios步骤

1、安装mock依赖
javascript 复制代码
npm install mock -D //只在开发环境使用

下载完成后,项目文件package.json中的devDependencies就会加上一个mock依赖;

2、添加开发环境及生产环境的配置

我们在config文件夹下的dev.env.js、prod.env.js两个文件里添加配置;

dev.env.js

javascript 复制代码
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: 'true'
})

prod.env.js

javascript 复制代码
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  MOCK: 'false'
}
3、引入到main.js(这里引用是本地的地址)
javascript 复制代码
import Mock from "./mock/index";
复制代码
mock/index.js (两种写法都可以,选择一种)
TypeScript 复制代码
//index.js
// 引入: mockjs 模块;
import Mock from 'mockjs'


// 设置拦截Ajax请求的响应时间,模拟网络延迟
 Mock.setup({
   timeout: '200-600'
 })

// 写法一
// Mock.mock('/parameter/query', '', (opts) => {
//   debugger
//   opts['data'] = opts.body ? JSON.parse(opts.body) : null
//   delete opts.body
//   return opts
// })
// 写法二
// Mock.mock('/parameter/query', {
//   name: "@name()",
//   city: "@city()"
// })

// 数据必须输出
export default Mock
4、开始使用 axios

配置 request.js ,在每个接口文件前引用这个文件

javascript 复制代码
/****   request.js   ****/
import axios from 'axios'
//1. 创建新的axios实例
const request = axios.create({
  // baseURL: '/api', // 公共接口-本地  所有接口地址前面加api
  timeout: 30 * 1000, // 超时时间单位是ms
  headers: {
    "Content-Type": "application/json",
  },
})

// 2.请求拦截器
request.interceptors.request.use(config => {
  // config.headers.Authorization = ''; //如果要求携带在请求头中
  return config;
}, error => {
  console.log(error)
  return Promise.reject(error);
})
// 3.响应拦截器
request.interceptors.response.use(response => {
     return response;
  }, error => {
    // console.log(error)
    return Promise.reject(error);
  }
)

//4.导出文件
export default request
javascript 复制代码
import request from '@/http/request'//第一步文件的地址

//自己写的mock地址,后文顺带记录一下mock使用方法
export function mocktest(params) {
  return request({
    type: "get",
    url: '/parameter/query',
    data: params
  });
}

到这里就可以在页面直接使用了,想要进一步完善,或者全局引用接口,可以自己封装

javascript 复制代码
<template>
  <el-container>
    <el-header>
      <HeaderBar></HeaderBar>
    </el-header>
    <el-main>
      <MainBar></MainBar>
    </el-main>
  </el-container>
</template>

<script>
import HeaderBar from "./Header.vue"
import MainBar from "./Main.vue"
//引用一下api文件中写好的方法,要用哪个就写哪个
import { mocktest } from "@/http/api";
// 可以按需引入,可以全局引用
// import api from '@/http'
export default {
  name: "index",
  components:{
    MainBar,
    HeaderBar
  },
  data(){
    return{

    }
  },
  methods:{
    
  },
  mounted() {
    //调用封装好的接口
   mocktest().then(res=>{
      console.log('res',res)
    })
    this.ce()

  },
}
</script>

<style scoped>

</style>
相关推荐
-代号9527几秒前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据19 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿23 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox