首页 > 其他分享 >Vue.js框架:vue3引入mockjs模拟数据调试

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

时间:2023-10-28 11:35:02浏览次数:34  
标签:Vue list ts js mock vue3 mockjs 数据 模拟

一、引入依赖

  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>

  结果如下:

  

 

标签:Vue,list,ts,js,mock,vue3,mockjs,数据,模拟
From: https://www.cnblogs.com/guobin-/p/17793672.html

相关文章

  • 手撕Vuex-Vuex实现原理分析
    本章节主要围绕着手撕Vuex,那么在手撕之前,先来回顾一下Vuex的基本使用。创建一个Vuex项目,我这里采用vue-cli创建一个项目,然后安装Vuex。vuecreatevuex-demo选择Manuallyselectfeatures。这里只需要,Babel与Vuex。选择2.X版本的Vue:创建package.json:是......
  • 用HashMap创建jString,ArrayList的键值对用entrySet遍历
    用HashMap创建jString,ArrayList的键值对用entrySet遍历package随机点名器;importjava.util.*;publicclassTest1{publicstaticvoidmain(String[]args){HashMap<String,ArrayList<String>>m=newHashMap<>();ArrayList<String>......
  • 用友GRP-U8 license_check.jsp sql注入漏洞
    漏洞描述用友GRP-U8license_check.jsp存在sql注入,攻击者可利用该漏洞执行任意SQL语句,如查询数据、下载数据、写入webshell、执行系统命令以及绕过登录限制等。漏洞复现fofa语法:app="用友-GRP-U8"登录页面如下:POC:/u8qx/license_check.jsp?kjnd=1%27;WAITFOR%20DELAY%20%2......
  • 用友U8-Cloud upload.jsp 任意文件上传漏洞
    漏洞简介U8cloud聚焦成长型、创新型企业的云ERP,基于全新的企业互联网应用设计理念,为企业提供集人财物客、产供销于一体的云ERP整体解决方案,全面支持多组织业务协同、智能财务,人力服务、构建产业链智造平台,融合用友云服务实现企业互联网资源连接、共享、协同。该系统upload.......
  • Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\cache\
    使用下面命令创建react项目爆出的错误npxcreate-react-appreact-basic显示nodejs里面的文件权限不够,需要进行文件夹的权限更改,改为完全控制就可以了。 ......
  • js给一段话,遇到的第一个括号处加上换行符
    list.forEach((item,index0)=>{constproductName=item.name;constindex=productName.indexOf('(');if(index==-1){returnproductName;}constbefore=productName.......
  • vue-loader是什么?使用它的用途有哪些
    vue-loader是一个用于将Vue单文件组件(.vue文件)转换为JavaScript模块的webpack加载器(loader)。是Vue.js生态系统中的一部分,用于在开发过程中编译和处理Vue组件。vue-loader的主要用途包括:编译Vue单文件组件:Vue单文件组件是一种将模板、JavaScript代码和样式封装在一......
  • json 对象属性的输出顺序测试,fastJson 有序,jackson,gson无序(需代码中人工按约定来编码
    json对象属性的输出顺序测试,fastJson有序,jackson,gson无序(需代码中人工按约定来编码)接口数据签名规则fastJson会根据对象的字段的首字母来排序。而jackson,gson是根据对象的类中定义的属性的代码中的先后顺序输出。不会排序。针对业务场景需要对接口中对象存在集合列表等,需要......
  • BPMNJS最简单使用
    <!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/><metahttp-equiv=&quo......
  • vue 使用filter 把无限极分类遍历为树形结构
    <scriptsetuplang="ts">interfacelistType{id:numberurl:string}constdata=[{id:1,url:'/_nuxt/assets/images/america.png'},{id:2,url:'/_nuxt/assets/image......