Vue项目使用mockjs模拟后端接口

文章目录

    • 操作步骤
      • [1. 安装 mockjs 和 vite-plugin-mock](#1. 安装 mockjs 和 vite-plugin-mock)
      • [2. 安装 axios](#2. 安装 axios)
      • [3. 创建mock路径](#3. 创建mock路径)
      • [4. 配置 viteMockConfig](#4. 配置 viteMockConfig)
      • [5. 编写第一个mock接口](#5. 编写第一个mock接口)
      • [6. 创建 createProdMockServer](#6. 创建 createProdMockServer)
      • [7. 配置 axios](#7. 配置 axios)
      • [8. 编写请求接口](#8. 编写请求接口)
      • [9. 在页面中使用](#9. 在页面中使用)

操作步骤

1. 安装 mockjs 和 vite-plugin-mock

vite-plugin-mock 是 vite 提供的mock插件,配合mockjs 一起使用,比较方便。

npm install mockjs vite-plugin-mock=2.9.6

2. 安装 axios

通过axios发送请求,请求到mock的模拟接口

npm install axios

3. 创建mock路径

src 文件夹下创建 mock 文件夹,作为后续编写mock接口的路径

4. 配置 viteMockConfig

在 vite.config.js 中配置 viteMockConfig

mockPath 就是mock文件夹的路径

js 复制代码
import { defineConfig } from 'vite'
import {viteMockServe} from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    viteMockServe({
      mockPath: './src/mock'
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

5. 编写第一个mock接口

mock文件夹下新建一个 js 文件,如user.js ,作为专门编写与用户相关的接口数据,内容如下:

js 复制代码
export default[
    {
        url: '/mock/user/test',
        method: 'get',
        response: () => {
            return {
                code: 200,
                msg: 'ok',
                data: 'hello world'
            }
        }
    }
]

该文件创建了一个模拟接口,地址为/mock/user/test

6. 创建 createProdMockServer

mock文件夹下创建一个index.js 文件,内容如下:

js 复制代码
import {createProdMockServer} from 'vite-plugin-mock/es/createProdMockServer'
// 导入上面写的user.js
import userModule from './user'

export function setupProdMockServer(){
    createProdMockServer([
        ...userModule
    ])
}

7. 配置 axios

创建 src/utils/system/request.js 文件用来全局配置axios,内容如下:

js 复制代码
// 在这个文件中配置axios,以及拦截请求
import axios from 'axios'

// const baseURL = import.meta.env.VITE_BASE_URL

const service = axios.create({
    bbaseURL: '/mock',
    timeout: 5000
})

// 拦截器,错误处理配置


export default service

8. 编写请求接口

创建src/api/user.js 文件作为请求用户相关数据的文件,内容如下:

js 复制代码
// 导入配置过的 axios
import request from '@/utils/system/request'

export function loginApi(data){
    return request({
        url: '/user/test',
        method: 'get',
        baseURL: '/mock',
        data
    })
}

该文件创建了一个请求接口loginAPi ,用来请求之前创建的mock接口地址

9. 在页面中使用

首先在需要的页面导入请求的接口:

js 复制代码
import { loginApi } from "../../api/user.js";

然后以Promise的形式使用

js 复制代码
onMounted(() => {
  loginApi({}).then(res => {
    console.log(res)
  })
})

如果控制台打印出结果,则说明配置成功

相关推荐
JerryXZR7 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
problc22 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91526 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨3 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子7 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山8 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享8 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果8 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot