526互联

Vue.js框架：vue3引入mockjs模拟数据调试

发布时间 2023-10-28 11:28:18作者: 我命倾尘

一、引入依赖

　　1、安装依赖包

　　在终端中使用以下命令：

    npm install @types/mockjs --save

　　

　　此处使用了@types进行引入，是因为在.ts文件引用包时，默认必须有类型声明，不能是any。

　　有很多依赖包是用纯JS写的，没有类型声明。

　　因此使用@types作为类型声明的集中仓库，对ts项目中引用依赖提供类型说明。

二、模拟数据

　　1、mock.ts引入并对接口进行数据模拟

　　使用Mock.mock进行模拟，三个参数分别是接口地址、数据访问方式、模拟的数据。

    import Mock from 'mockjs'

    Mock.mock('/api/list','get',{
        "list":[
            {
                id: 1,
                name: "张三"
            },
            {
                id: 2,
                name: "李四"
            }
        ],
        length: 2
    })

　　2、将模拟数据挂载到main.ts

　　在main.ts文件中引入mock.ts。

    // 引入mockjs
    import './api/mock'

　　3、在页面进行数据访问并回显

　　定义响应式数据listData，其内的list属性值用来存储模拟数据。定义getData方法访问接口并接受模拟数据值，页面对数据进行回显。

    <script setup lang="ts">
    import { onMounted, reactive } from "vue";
    import { getList } from "../utils/index";

    let listData = reactive({
      list: []
    })
    const getData = () =>{
      getList().then(res=>{
        listData.list = res.data.list
      })
    }

    onMounted(()=>{
      getData()
    })
    </script>

    <template>
      <div style="padding: 20px;" v-for="item in listData.list" :key="item.id">
        <span style="color: #ffffff;">id:{{ item.id }}</span>
        <br />
        <span style="color: #ffffff;">name:{{ item.name }}</span>
        <br />
      </div>
    </template>

　　结果如下：