掌握Mock.js基本使用:快速模拟API实现增删改查

在项目中使用Mock.js进行增删改查操作,可以模拟后端接口,方便前端开发和测试。下面是一个简单的示例,展示如何在Vue 2项目中使用Mock.js实现增删改查功能。

1. 安装依赖

复制代码
npm install mockjs --save

2. 配置Mock.js

在项目的根目录下创建一个文件夹mock,并在其中创建一个文件index.js,用于配置Mock.js。

复制代码
// mock/index.js
import Mock from 'mockjs';

let dataList = [];
const count = 10;
for (let i = 0; i < count; i++) {
  dataList.push(Mock.mock({
    id: '@increment',
    name: '@name',
    age: '@integer(20, 50)',
    address: '@county(true)'
  }));
}

// 获取列表
Mock.mock('/api/data', 'get', () => {
  return {
    code: 200,
    data: dataList
  };
});

// 添加数据
Mock.mock('/api/data', 'post', (options) => {
  const body = JSON.parse(options.body);
  dataList.push(Mock.mock({
    id: '@increment',
    ...body
  }));
  return {
    code: 200,
    message: '添加成功'
  };
});

// 更新数据
Mock.mock(/\/api\/data\/\d+/, 'put', (options) => {
  const body = JSON.parse(options.body);
  const id = parseInt(options.url.split('/').pop());
  dataList = dataList.map(item => item.id === id ? { ...item, ...body } : item);
  return {
    code: 200,
    message: '更新成功'
  };
});

// 删除数据
Mock.mock(/\/api\/data\/\d+/, 'delete', (options) => {
  const id = parseInt(options.url.split('/').pop());
  dataList = dataList.filter(item => item.id !== id);
  return {
    code: 200,
    message: '删除成功'
  };
});

export default Mock;

3. 在Vue项目中引入Mock.js

main.js中引入Mock.js配置文件:

复制代码
// main.js
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
import './mock'; // 引入mock配置

Vue.config.productionTip = false;
Vue.prototype.$axios = axios;

new Vue({
  render: h => h(App),
}).$mount('#app');

4. 创建组件实现增删改查

src/views目录下创建一个组件DataList.vue,实现增删改查功能。

复制代码
<template>
  <div>
    <h1>Mock.js 增删改查示例</h1>
    <div>
      <input v-model="newData.name" placeholder="Name" />
      <input v-model="newData.age" placeholder="Age" type="number" />
      <input v-model="newData.address" placeholder="Address" />
      <button @click="addData">添加</button>
    </div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        <div>
          <span>{{ item.name }}</span>
          <span>{{ item.age }}</span>
          <span>{{ item.address }}</span>
          <button @click="editData(item)">编辑</button>
          <button @click="deleteData(item.id)">删除</button>
        </div>
        <div v-if="editingId === item.id">
          <input v-model="editDataObj.name" placeholder="Name" />
          <input v-model="editDataObj.age" placeholder="Age" type="number" />
          <input v-model="editDataObj.address" placeholder="Address" />
          <button @click="updateData(item.id)">更新</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      newData: {
        name: '',
        age: '',
        address: ''
      },
      editingId: null,
      editDataObj: {
        name: '',
        age: '',
        address: ''
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$axios.get('/api/data').then(res => {
        if (res.data.code === 200) {
          this.dataList = res.data.data;
        }
      });
    },
    addData() {
      this.$axios.post('/api/data', this.newData).then(res => {
        if (res.data.code === 200) {
          this.fetchData();
          this.newData = { name: '', age: '', address: '' };
        }
      });
    },
    deleteData(id) {
      this.$axios.delete(`/api/data/${id}`).then(res => {
        if (res.data.code === 200) {
          this.fetchData();
        }
      });
    },
    editData(item) {
      this.editingId = item.id;
      this.editDataObj = { ...item };
    },
    updateData(id) {
      this.$axios.put(`/api/data/${id}`, this.editDataObj).then(res => {
        if (res.data.code === 200) {
          this.fetchData();
          this.editingId = null;
        }
      });
    }
  }
};
</script>

5. 总结

通过上述步骤,我们在Vue 2项目中使用Mock.js成功模拟了一个简单的增删改查操作。

相关推荐
mit6.8245 小时前
[Agent可视化] 配置系统 | 实现AI模型切换 | 热重载机制 | fsnotify库(go)
开发语言·人工智能·golang
友友马5 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱6 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
小白学大数据6 小时前
实战:Python爬虫如何模拟登录与维持会话状态
开发语言·爬虫·python
一念&6 小时前
每日一个C语言知识:C 结构体
c语言·开发语言
流***陌6 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静6 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿6 小时前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端
锦***林6 小时前
用 Python 写一个自动化办公小助手
开发语言·python·自动化
533_6 小时前
[css] flex布局中的英文字母不换行问题
前端·css