# vue3-vite-mock

**Repository Path**: blaunicorn/vue3-vite-mock

## Basic Information

- **Project Name**: vue3-vite-mock
- **Description**: vue3+vite+mock
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-03-24
- **Last Updated**: 2024-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Vite + mock

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
- 
#### 简易的命令行入门教程:
Git 全局设置:
```
git config --global user.name "blackunicorn"
git config --global user.email "blackunicorn@163.com"
```
创建 git 仓库:
```
mkdir vue3-vite-mock
cd vue3-vite-mock
git init 
touch README.md
git add README.md
git commit -m "first commit"
git remote add origin https://gitee.com/blaunicorn/vue3-vite-mock.git
git push -u origin "master"
```
已有仓库?
```
cd existing_git_repo
git remote add origin https://gitee.com/blaunicorn/vue3-vite-mock.git
git push -u origin "master"
```

### 项目创建 安装 mock axios

```js
npm create vite@latest
npm install mockjs
yarn add axios
```

项目中新建 mock 文件

```js
//引入mock模块
// vite-project\mock\index.js
import Mock from 'mockjs'
console.log('mock', Mock)
```

mock js 文件的遍历引入
```js
//  方式一、使用webpack的require.context()遍历文件夹中的所有js文件，不过使用的是正则表达式匹配，它返回一个简单的对象
// const files = require.context('.', true, /\.js$/)

// 方式二、使用vite的import.meta.globEager遍历所有Mock文件
const mockFiles = import.meta.globEager("./*.js")
```


将 mock 文件在 main.js 中导入

```js
import { createApp } from 'vue'
import App from './App.vue'

import '../mock/index'

createApp(App).mount('#app')

```

#### mock 语法

##### 生成字符串

- 生成指定次数字符串

```js
import Mock from 'mockjs';
const data = Mock.mock({
	'string|4': '哈哈',
});
```

- 生成指定范围长度字符串

```js
const data = Mock.mock({
	'string|1-8': '哈哈',
});
```

##### 生成文本

- 生成一个随机字符串

```js
const data = Mock.mock({
	string: '@cword',
});
```

- 生成指定长度和范围

```js
const data = Mock.mock({
    string:"@cword(1)"
    str :"@cword(10,15)"
})
```

##### 生成标题和句子

- 生成标题和句子

```js
const data = Mock.mock({
    title:"@ctitle(8)"
    sentence:"@csentence"
})
```

- 生成指定长度的标题和句子

```js
const data = Mock.mock({
    title:"@ctitle(8)"
    sentence:"@csentence(50)"
})
```

- 生成指定范围的

```js
const data = Mock.mock({
    title:"@ctitle(5,8)"
    sentence:"@csentence(50,100)"
})
```

##### 生成段落

- 随机生成段落

```js
const data = Mock.mock({
	content: '@cparagraph()',
});
```

##### 生成数字

- 生成指定数字

```js
const data = Mock.mock({
	'number|80': 1,
});
```

- 生成范围数字

```js
const data = Mock.mock({
	'number|1-99': 1,
});
```

##### 生成自增 id

- 随机生成标识

```js
const data = Mock.mock({
	id: '@increment',
});
```

##### 生成姓名-地址-身份证

- 随机生成姓名-地址-身份证

```js
const data = Mock.mock({
	name:"@cname()"
	idCard:"@id()"
	address:"@city(true)"
})
```

##### 随机生成图片

- 生成图片：@image（“300*200”，‘#ff0000','#fff','gif','坤坤'）
- 参数 1：图片大小

```
[
	'300*250','250*250','240*400','336*280'
	'180*150','720*300','468*60','234*60'
	'388*31','250*250','240*400','120*40'
	'125*125','250*250','240*400','336*280'
]
```

- 参数 2：图片背景色

- 参数 3：图片前景色

- 参数 4：图片格式
- 参数 5：图片文字

##### 生成时间

- @Date
- 生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss)

指定数组返回的参数

- 指定长度：‘date|5’
- 指定范围:'data|5-10'

```js
const data = Mock.mock({
'list|50-99':[
        {
            name:'@cname'
            address:'@city(true)'
            id:'@increment()'
        }
    ]
})
```

#### mock 拦截请求

##### 定义 get 请求

```js
/// get新闻列表数据。/api/get/news?pageIndex=1&pageSize=10
Mock.mock('api/get/news', 'get', () => {
	return {
		status: 200,
		message: '获取数据成功',
	};
});
```

##### 定义 post 请求

```js
// 增加新闻  /api/add/news
Mock.mock('api/post/news', 'post', () => {
	return {
		status: 200,
		message: '获取数据成功',
	};
});
```

#### 实现案例

##### 获取新闻列表数据

接口地址：：/api/get/news

接口参数：

```
pageIndex：页码
pageSize:每页的条数
```

请求类型：get

返回的数据：

```json
{
    status:200,
        message:"get 成功",
        list:[
        {
            "id":1,
            "title":"cds",
            "content":"sfsd",
            "img_url":"http://baidu.com",
            "add_time":"1987-04-03 11:43:37"}
        ],
        total:50
    }
}
```

##### 添加新闻

接口地址：：/api/add/news

接口参数：

```
title：'标题'
content：内容
```

请求类型：post

返回的数据：

```
{
    status:200,
        message:"post 成功",
        list:[
        {
            "id":1,
            "title":"ddfd",
            "content":"sdfs",
            "img_url":"http://baidu.com",
            "add_time":"1988-04-03 11:43:37"}
        ],
        total:50
    }
}
```

##### 根据id删除新闻

接口地址：：/api/delete/news

接口参数：

```
id；新闻id
```

请求类型：post

返回的数据：

```
{
    status:200,
        message:"delete 成功",
        list:[
        {
            "id":1,
            "title":"asda",
            "content":"asd",
            "img_url":"http://baidu.com",
            "add_time":"1989-04-03 11:43:37"}
        ],
        total:50
    }
}
```