伪后台mock数据帮你轻松实现CRUD操作，Ajax带你飞

前端

2023-06-08 16:25:33

借助AJAX和伪后台mock数据：打造无缝CRUD操作

何为AJAX和伪后台mock数据？

在现代Web开发中，实现增删改查（CRUD）操作至关重要。AJAX （异步JavaScript和XML）是一种强大的Web技术，允许与服务器进行异步通信，而无需重新加载整个页面。这使得AJAX非常适合频繁与服务器交互的应用程序。

伪后台mock数据 指的是使用随机生成的数据来模拟真实世界的数据库数据。这提供了在开发和测试阶段使用与实际数据类似的模拟数据，而无需影响实际数据。

巧妙结合AJAX和mock数据实现CRUD

将AJAX与伪后台mock数据巧妙结合，可轻松实现CRUD操作。以下步骤介绍了具体流程：

1. 创建伪后台mock数据：

使用mock随机生成器创建模拟数据，代表学生信息。

2. 封装AJAX请求：

使用ajax.js 封装AJAX请求，以Promise对象返回响应数据。

function ajax(config){
    return new Promise(function(resolve){
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4 && xhr.status == 200) {
                resolve(JSON.parse(xhr.responseText));
            }
        };
        xhr.open(config.method || "GET", config.url);
        if (config.data) {
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(JSON.stringify(config.data));
        } else {
            xhr.send();
        }
    });
}

3. Vue组件实现CRUD：

在Vue组件中使用封装后的AJAX请求实现CRUD操作。

<template>
  <div>
    <button @click="add">增加</button>
    <button @click="del">删除</button>
    <button @click="update">修改</button>
    <button @click="query">查询</button>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import ajax from './ajax.js';

export default {
  setup() {
    const list = ref([]);

    const add = async () => {
      const res = await ajax({
        url: '/add',
        method: 'POST',
        data: {
          name: '张三'
        }
      });
      list.value.push(res.data);
    };

    const del = async () => {
      const res = await ajax({
        url: '/del',
        method: 'DELETE',
        data: {
          id: 1
        }
      });
      list.value = list.value.filter(item => item.id !== res.data.id);
    };

    const update = async () => {
      const res = await ajax({
        url: '/update',
        method: 'PUT',
        data: {
          id: 1,
          name: '李四'
        }
      });
      const index = list.value.findIndex(item => item.id === res.data.id);
      list.value[index] = res.data;
    };

    const query = async () => {
      const res = await ajax({
        url: '/query'
      });
      list.value = res.data;
    };

    return {
      list,
      add,
      del,
      update,
      query
    };
  }
};
</script>