Vue--MockJs (下)

简介: Vue--MockJs

日期占位符

随机生成日期类型的数据,

占位符:

  • date/date(format)
  • time/time(format)
  • datetime/datetime(format)
const Mock = require('mockjs')  // 导入mock
const data = Mock.mock({
    // 定义数据生成规则
    'empList|3': [{
        'birthday': '@date', // 默认 yyyy-MM-dd
        'entryDate': '@date("yyyy/MM/dd")', // 指定日期格式 yyyy/MM/dd
        'createDate': '@datetime', // 默认 yyyy-MM-dd HH:mm:ss
        'updateDate': '@datetime("yyyy/MM/dd HH:mm:ss")' //默认yyyy/MM/dd HH:mm:ss
    }]
})
console.log(JSON.stringify(data, null, 2)) // 打印数据

结果


图像占位符

随机生成图片地址, 生成的浏览器可以打开

占位符: image

const Mock = require('mockjs')  // 导入mock
const data = Mock.mock({
    // 定义数据生成规则
    'empList|3': [{
        'pic': '@image',
    }]
})
console.log(JSON.stringify(data, null, 2)) // 打印数据

结果


文本占位符

随机生成一段文本

占位符:

ctitle 随机生成一句中文标题。

csentence(mix, max) 随机生成一段中文文本。

const Mock = require('mockjs')  // 导入mock
const data = Mock.mock({
    // 定义数据生成规则
    'empList|3': [{
        'title': '@ctitle(3, 6)', // 中文标题(3到6个字)
        'content': '@csentence(8, 12)', // 一段中文文本(8到12个字)
    }]
})
console.log(JSON.stringify(data, null, 2)) // 打印数据

结果


名称占位符

随机生成名称。

占位符:

  • first 英文名。
  • last 英文姓。
  • name 英文姓名。
  • cfirst 中文名。
  • clast 中文姓。
  • cname 中文姓名。
const Mock = require('mockjs')  // 导入mock
const data = Mock.mock({
    // 定义数据生成规则
    'empList|3': [{
        'first': '@cfirst', // 中文名
        'last': '@last', // 英文姓
        'name': '@cname', // 中文名
    }]
})
console.log(JSON.stringify(data, null, 2)) // 打印数据
{
  "empList": [
    {
      "first": "朱",
      "last": "Lee",
      "name": "于明"
    },
    {
      "first": "魏",
      "last": "Martin",
      "name": "石杰"
    },
    {
      "first": "王",
      "last": "Thomas",
      "name": "邱平"
    }
  ]
}


网络占位符

可随机生成 URL 、域名、 IP 地址、邮件地址

占位符:

url(protocol, host) 生成 URL。

  • protocol: 协议, 如 http
  • host:域名和端口号,如 zouzou.com
const Mock = require('mockjs')  // 导入mock
const data = Mock.mock({
    // 定义数据生成规则
    'empList|3': [{
        'url': '@url("http", "zouzou.com")',  // URL
        'domain': '@domain', // 域名
        'ip': '@ip', // IP
        'email': '@email' // 邮箱地址
    }]
})
console.log(JSON.stringify(data, null, 2)) // 打印数据

结果


地址占位符

随机生成区域、省市县、邮政编码

占位符:

  • region 区域。如: 华南
  • county(true) 省市县。
  • zip 邮政编码。
const Mock = require('mockjs')  // 导入mock
const data = Mock.mock({
    // 定义数据生成规则
    'empList|3': [{
        'area': '@region', // 区域
        'address': '@county(true)', // 省市县
        'zipCode': '@zip' // 邮政编码
    }]
})
console.log(JSON.stringify(data, null, 2)) // 打印数据

结果


相关文章
|
JavaScript
vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js
vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js
vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js
|
1月前
|
移动开发 前端开发 JavaScript
Vue2 系列:vue.config.js 参数配置
Vue2 系列:vue.config.js 参数配置
38 2
|
1月前
|
小程序
vue3.0 vue.config.js 配置基础的路
vue3.0 vue.config.js 配置基础的路
|
6月前
|
JavaScript
vue2配置vite
vue2配置vite
65 0
|
7月前
|
JavaScript 前端开发 API
vue配置和使用mockjs
vue配置和使用mockjs
|
9月前
|
网络架构
84.【Vue--初刷】(六)
84.【Vue--初刷】
61 3
|
9月前
|
JavaScript 容器
84.【Vue--初刷】(五)
84.【Vue--初刷】
41 1
|
9月前
|
移动开发 JavaScript 前端开发
|
9月前
|
JavaScript Java Linux
|
9月前
|
移动开发 JSON JavaScript
84.【Vue--初刷】(四)
84.【Vue--初刷】
46 0