【会员管理系统】篇一之项目预热

news2025/11/4 11:57:07

一、技术架构

vue.js vueCLI 3.x Axios babel EcmaScript6

Eslint Mock.js Easy-Mock Element UI

Vuex

二、RESTful风格

三、Mock.js简单使用

1、简单使用

（1）新建文件夹，在vscode中打开，使用终端 npm init -y

（2）安装mock.js npm install mockjs

（3）新建demo1.js文件，在其中编写代码

const Mock = require('mockjs')
const data=Mock.mock({
    //定义数据生成规则
    //|4表示生成四个
    'memberList|4':[
        {
            'id':1,
            'name':'GGbond'
        }
    ]
})
console.log(data)//在控制台上输出

运行node demo1.js

也可使用 console.log(JSON.stringify(data,null,2))

2.数据模版定义规范

'属性名|生成规则':属性值

注意：

属性名和生成规则之间用竖线间隔
生成规则是可选的，有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

3.数据占位符

Mock.Random是一个工具类，用于生成各种随机数据。

注意：本文仅列出部分占位符，更多占位符及使用方法请前往Mock.js官网 http://mockjs.com/查看

格式; '属性名':’@占位符'

（1）文本、日期、图像占位符

eg：

const Mock=require('mockjs')
const data=Mock.mock({
    'emoList|4':[
        {
            'id|1':1,
            'name':'@cname',//随机生成名字
            'price':'@float',//小数
            'status':'@boolean',//布尔值
            'birthday':'@data(yyyy/MM/dd)',//年月日
            'createDate':'@datatime(yyyy/MM/dd HH:mm:ss)',//年月日时分秒、
            'pic':'@image',//图片
            'title':'@title',//英文文字
            'ctitle':'@ctitle(12,30)',//中文文字,括号内的是限定的字数
            'content':'@csentence'

        }
    ]
})
console.log(data)

输出：