vue3-admin-element-templatev框架使用mock

天下青山都一样

已于 2022-06-27 10:40:52 修改

阅读量631

点赞数 1

文章标签：前端 vue.js

于 2022-06-27 10:20:15 首次发布

本文链接：https://blog.csdn.net/lw934934/article/details/125478486

版权

首先在mock目录中创建数据源js文件

import Mock from "mockjs";
import { type } from "os";
const { data } = Mock.mock({
"data|12": [ //12是生成数据的长度
  {
    id: "@id", //生成随机id
    name: "@cname", //随机生成中文姓名
	"sex|1": ["男", "女"],//随机选择其中一个
	"tel":/^1[3456789]{10}$/, //随机生成手机号
	etime: "@date(yyyy-MM-dd)'", //随机生成日期
	time: "@date(2022-MM-dd)'", //指定年生成随机月、日
	num:"@integer(0,20)",//随机生成0-20之间的数字
  },
],
});

export default [
  {
    url: '/api/getData',
    type: 'get',
    response() {
      return { code: 200, msg: 'success', data: { data } };
    },
  },
];

然后在src下api文件创建js文件

import request from '@/utils/request.js';
export const getData = () => {
  return request({
    url: '/getData',
    method: 'get',
  });
};

页面请求

<script lang="ts" setup>
		import { ref } from 'vue';
		import {getData} from '@/api/demo'; //引用api目录创建的文件
		
		getData().then((res) => { //数据接口请求
			console.log(res);
		});
</script>