mock使用说明 1.下载mock.js和axios//下载mock.js npm install mockjs -D //下载axios npm install axios2.在src下创建mock目录，并在mock目录下创建index.jsimport { mock } from 'mockjs'; let data = mock({ "data|100": [ //生成100条数据 数组 { "shopId|+1": 1,//生成商品id，自增1 "shopMsg": "@ctitle(10)", //生成商品信息，长度为10个汉字 "shopName": "@cname",//生成商品名 ， 都是中国人的名字 "shopTel": /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号 "shopAddress": "@county(true)", //随机生成地址 "shopStar|1-5": "★", //随机生成1-5个星星 "salesVolume|30-1000": 30, //随机生成商品价格 在30-1000之间 "shopLogo": "@Image('100x40','#c33', '#ffffff','小北鼻')", //生成随机图片，大小/背景色/字体颜色/文字信息 "food|7": [ //每个商品中再随机生成七个food { "foodName": "@cname", //food的名字 "foodPic": "@Image('100x40','#c33', '#ffffff','小可爱')",//生成随机图片，大小/背景色/字体颜色/文字信息 "foodPrice|1-100": 20,//生成1-100的随机数 "aname|14": [ { "aname": "@cname", "aprice|30-60": 20 } ] } ] } ] }); mock(/goods\/goodAll/, 'post', () => { //三个参数。第一个路径，第二个请求方式post/get，第三个回调，返回值 return data })3.在main中引入mockimport { createApp } from 'vue' import './style.css' import App from './App.vue' import './mock/index.js' ##引入mock,让他全局可用 createApp(App).mount('#app')4.在App.vue中使用axios请求mock<template> <div> <button @click="getMessage">获取数据</button> <table border="1" cellspacing='0'> <thead> <tr> <th>销售ID</th> <th>销售描述</th> <th>销售名称</th> <th>电话</th> <th>销售星级</th> <th>卖出数量</th> <th>住址</th> </tr> </thead> <tbody> <tr v-for="item in arr[0]" :key="item.shopId"> <td>{{item.shopId}}</td> <td>{{item.shopMsg}}</td> <td>{{item.shopName}}</td> <td>{{item.shopTel}}</td> <td>{{item.shopStar}}</td> <td>{{item.salesVolume}}</td> <td>{{item.shopAddress}}</td> </tr> </tbody> </table> </div> </template> <script setup> import axios from 'axios' import { reactive } from 'vue'; //赋值给变量 let arr = reactive([]); //获取数据 const getMessage = ()=>{ axios.post("http://localhost:8080/goods/goodAll").then((res)=>{ console.log(res); arr.push(res.data.data); }); } </script> <style scoped> </style> {lamp/}

js数组的判别方法 一、Array.isArray判断 用法：Array.isArray(arr)ES5中新增了Array.isArray方法,IE8及以下不支持Array.isArray() 用于确定传递的值是否是一个[Array], 返回布尔值 true；否则它返回 false。let arr = []; console.log(Array.isArray(arr)); // true // 下面的函数调用都返回 true Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); Array.isArray(new Array('a', 'b', 'c', 'd')) // 鲜为人知的事实：其实 Array.prototype 也是一个数组。 Array.isArray(Array.prototype); {dotted startColor="#ff6c6c" endColor="#1989fa"/}二、constructor判断 用法：arr.constructor === ArrayObject的每个实例都有构造函数 constructor，用于保存着用于创建当前对象的函数let arr = []; console.log(arr.constructor === Array); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}三、instanceof 判断 用法：arr instanceof Arrayinstanceof 主要是用来判断某个实例是否属于某个对象let arr = []; console.log(arr instanceof Array); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}四、原型链上的isPrototypeOf判断 用法：Array.prototype.isPrototypeOf(arr)Array.prototype 属性表示 Array 构造函数的原型isPrototypeOf()可以用于测试一个对象是否存在于另一个对象的原型链上。let arr = []; console.log(Array.prototype.isPrototypeOf(arr)); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}五、Object.prototype.toString 用法：Object.prototype.toString.call(arr) === '[object Array]'Array继承自Object，JavaScript在Array.prototype上重写了toString，toString.call(arr)实际上是通过原型链调用了。let arr = []; console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}六、Array 原型链上的 isPrototypeOf 用法：Array.prototype.isPrototypeOf(arr)Array.prototype 属性表示 Array 构造函数的原型let arr = []; console.log(Array.prototype.isPrototypeOf(arr)); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}顺便复习一下typeof的用法： 对于引用类型，不能用typeof来判断，因为返回的都是object// 基本类型 typeof 123; //number typeof "abc"; //string typeof true; //boolean typeof undefined; //undefined typeof null; //object var s = Symbol; typeof s; //symbol // 引用类型 typeof [1,2,3]; //object typeof {}; //object typeof function(){}; //function typeof Array; //function Array类型的构造函数 typeof Object; //function Object类型的构造函数 typeof Symbol; //function Symbol类型的构造函数 typeof Number; //function Number类型的构造函数 typeof String; //function String类型的构造函数 typeof Boolean; //function Boolean类型的构造函数