mockjs如何在vue项目中使用

最新推荐文章于 2024-10-10 20:56:08 发布

前端小金丝

最新推荐文章于 2024-10-10 20:56:08 发布

阅读量454

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ljb376766764/article/details/126708961

版权

本文档介绍了如何安装和配置Mock.js与Axios，以在Vue项目中模拟后端API数据。首先，通过npm安装Mock.js和Axios。接着，在项目中创建mock文件夹并导入index.js。然后，编写Mock.js的模拟数据和接口响应。最后，在组件中使用$axios.get调用模拟API获取数据。这个过程有助于前端开发者在没有后端支持时进行独立开发和测试。

摘要由CSDN通过智能技术生成

1.安装mockjs 还有axios axios 如果已经安装就不用管了

npm install mockjs 

npm install axios

2 新建文件夹并在其创建建index.js

3.将mock文件夹的index.js文件在main.js中导入 并且axios挂载到vue上

import axios from 'axios';
Vue.prototype.$axios = axios;
import '@/mock/index'

4.在moke文件夹下的的index.js添加mock语法

（此处用来测试）详细语法请从官网中获取 Mock.js


import Mock from 'mockjs'

// 这是设置返回的数据
var data = Mock.mock({
	// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
	'list|20-60': [{
		// 属性 id 是一个自增数，起始值为 1，每次增 1
		"id": '@increment()',
		"title": "@ctitle",
		"content": "@cparagraph",
		"add_time": "@date(yyyy-MM-dd hh:mm:ss)"
	}]
})

// 设置请求接口方式
Mock.mock('/api/get/user', 'get', (options) => {
	console.log(options);
	return {
		status: 200,
		message: '获取新闻列表数据成功',
		test: data.list
	}
})

5.在组件中使用

 methods: {
    getData() {
      this.$axios.get("/api/get/user").then((res) => {
        console.log(res);
      });
    },
  },
  mounted() {
    this.getData();
  },