Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用

目录

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用

一、简单介绍

二、实现原理

三、效果展示

四、注意事项

五、实现过程

六、代码工程


一、简单介绍

Vue 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。

本节介绍,vue 中使用 mockjs ,并结合 axios 进行简单的随机数据生成,然后显示在界面上的简单整理,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。

mockjs 官网 :Mock.js

为什么使用mockjs

在做开发时,当后端的接口还未完成,前端为了不影响工作效率,手动模拟后端接口,

1.我们可以使用json文件来模拟后台数据,但比较局限,无法模拟数据的增删改查
2.使用json-server模拟,但不能随机生成所需数据
3.使用mockjs模拟后端接口,可随机生成所需数据,可模拟对数据的增删改

mockjs 的优势

1.前后端分离,
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.可扩展数据类型
6.在已有接口文档的情况下,我们可以直接按照接口文档来开发,
    将相应的字段写好,在接口完成 之后,只需要改变url地址即可。

mockjs 安装与引入

// 安装 mockjs
npm install mockjs --save-dev
// 引入 mockjs
var Mock = require('mockjs')

mockjs 简单使用示例

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数,起始值为 1,每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

mockjs 官方示例:Mock.js

mockjs 语法规范

Mock.js 的语法规范包括两部分:

  1. 数据模板定义规范(Data Template Definition,DTD)
  2. 数据占位符定义规范(Data Placeholder Definition,DPD)
数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value


注意:

    属性名 和 生成规则 之间用竖线 | 分隔。
    生成规则 是可选的。
    生成规则 有 7 种格式:
        'name|min-max': value
        'name|count': value
        'name|min-max.dmin-dmax': value
        'name|min-max.dcount': value
        'name|count.dmin-dmax': value
        'name|count.dcount': value
        'name|+step': value
    生成规则 的 含义 需要依赖 属性值的类型 才能确定。
    属性值 中可以含有 @占位符。
    属性值 还指定了最终值的初始值和类型。

生成规则和示例:
1. 属性值是字符串 String

    'name|min-max': string

    通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max。

    'name|count': string

    通过重复 string 生成一个字符串,重复次数等于 count。

2. 属性值是数字 Number

    'name|+1': number

    属性值自动加 1,初始值为 number。

    'name|min-max': number

    生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型。

    'name|min-max.dmin-dmax': number

    生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到 dmax 位。

Mock.mock({
    'number1|1-100.1-10': 1,
    'number2|123.1-10': 1,
    'number3|123.3': 1,
    'number4|123.10': 1.123
})
// =>
{
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
}

3. 属性值是布尔型 Boolean

    'name|1': boolean

    随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。

    'name|min-max': value

    随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。

4. 属性值是对象 Object

    'name|count': object

    从属性值 object 中随机选取 count 个属性。

    'name|min-max': object

    从属性值 object 中随机选取 min 到 max 个属性。

5. 属性值是数组 Array

    'name|1': array

    从属性值 array 中随机选取 1 个元素,作为最终值。

    'name|+1': array

    从属性值 array 中顺序选取 1 个元素,作为最终值。

    'name|min-max': array

    通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max。

    'name|count': array

    通过重复属性值 array 生成一个新数组,重复次数为 count。

6. 属性值是函数 Function

    'name': function

    执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象。

7. 属性值是正则表达式 RegExp

    'name': regexp

    根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

    Mock.mock({
        'regexp1': /[a-z][A-Z][0-9]/,
        'regexp2': /\w\W\s\S\d\D/,
        'regexp3': /\d{5,10}/
    })
    // =>
    {
        "regexp1": "pJ7",
        "regexp2": "F)\fp1G",
        "regexp3": "561659409"
    }

数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。

占位符 的格式为:

@占位符
@占位符(参数 [, 参数])

注意:

    用 @ 来标识其后的字符串是 占位符。
    占位符 引用的是 Mock.Random 中的方法。
    通过 Mock.Random.extend() 来扩展自定义占位符。
    占位符 也可以引用 数据模板 中的属性。
    占位符 会优先引用 数据模板 中的属性。
    占位符 支持 相对路径 和 绝对路径。

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

操作环境:

  •  win 10
  •  node v14.20.0
  •  npm 8.5.3
  •  @vue/cli 5.0.6
  •  vue 2.6.14
  • mockjs 1.1.0
  • axios 0.27.2
  • element-ui 2.15.9

二、实现原理

1、使用 mockjs 通过 api 配置,生成随机数据,模拟后端

2、使用 axios 获取 mockjs 模拟的后端数据

3、使用 element-ui 展示获取到的数据

三、效果展示

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第1张图片

 

四、注意事项

1、axios 本地设置的 baseURL 根据实际 vue 打包出来的端口配置

五、实现过程

1、首先,使用命令 vue create vue-mockjs 创建工程 vue-mockjs

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第2张图片

 2、因为工程中使用到 element-ui 、axios、mockjs等,这里先安装

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第3张图片

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第4张图片

 

3、在 main.js 把 element-ui 引入

// 引入 element-ui
import ElementUI from 'element-ui'
// 引入 element-ui 的样式文件
import 'element-ui/lib/theme-chalk/index.css'
// 全局使用 element-ui
Vue.use(ElementUI)

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第5张图片

4、在 App.vue ,进行改造

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第6张图片

5、components 创建 List.vue,使用 element-ui 显示本地数据布局

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第7张图片




 6、其中 router 进行路由管理

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第8张图片

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入组件
import MyList from '../components/List.vue'

Vue.use(VueRouter)

const routes = [{
		path: '/',
		redirect: '/mylist'
	},
	{
		path: '/mylist',
		component: MyList
	}

]

const router = new VueRouter({
	routes
})

export default router

7、运行工程 npm run serve ,浏览器显示本地数据展示

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第9张图片

8、 创建脚本 request.js,使用 axios 绑定IP和端口,使用 axios 做数据交互

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第10张图片

import axios from 'axios'

const service = axios.create({
	// 根据实际的使用填写 ip 地址
	baseURL:'http://10.133.233.96:8082',
})

export default service

 

9、创建 getData 来获取数据 API

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第11张图片

import axios from './request.js'

// 获取数据
export const getList = ()=> axios.get('/getList/list')

 10、创建 mockServer.js,使用 mock 进行,配置对应 getData 的 API,来生成数据

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第12张图片

import Mock from 'mockjs'

Mock.mock(/\/getList\/list/, 'get',{
  code: 200, data:
  {
		// 数据名称|数量
    'data|4': [
      {  
        id: '@id',//随机id
        name: '@name',//随机名称
        nickName: '@last',//随机昵称
        phone: /^1[34578]\d{9}$/,//随机电话号码
        'age|11-99': 1,//年龄
        address: '@county(true)',//随机地址
        email: '@email',//随机邮箱
        isMale: '@boolean',//随机性别
        createTime: '@datetime',//创建时间
        avatar() {	//用户头像
          return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
        }
      }
    ]
  }

})

11、在 main.js 导入 mockServer.js

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第13张图片

import Vue from 'vue'
import App from './App.vue'

// 执行 mock 数据生成
import './js/mock/mockServer.js'

// 路由
import router from './router/index.js'

// 引入 element-ui
import ElementUI from 'element-ui'
// 引入 element-ui 的样式文件
import 'element-ui/lib/theme-chalk/index.css'
// 全局使用 element-ui
Vue.use(ElementUI)

Vue.config.productionTip = false


const app = new Vue({
	router,
  render: h => h(App),
})

app.$mount('#app')

 12、List.vue 获取网络数据,并且简单修改显示

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第14张图片




 

13、运行工程,效果如下

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用_第15张图片

 

六、代码工程

如有需要可下载:Vue之mockjs结合axios在vue中的随机数据生成的简单使用vue-mockjs工程

你可能感兴趣的:(Vue,vue.js,mockjs,axios,element-ui,后端数据模拟)