【会员管理系统】篇一之项目预热-Toy模板网

这篇具有很好参考价值的文章主要介绍了【会员管理系统】篇一之项目预热。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、技术架构

vue.js vueCLI 3.x Axios babel EcmaScript6

Eslint Mock.js Easy-Mock Element UI

Vuex

二、RESTful风格

【会员管理系统】篇一之项目预热,前端web,vue.js,前端

三、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

【会员管理系统】篇一之项目预热,前端web,vue.js,前端

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

【会员管理系统】篇一之项目预热,前端web,vue.js,前端

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

【会员管理系统】篇一之项目预热,前端web,vue.js,前端

3.数据占位符

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

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

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

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

【会员管理系统】篇一之项目预热,前端web,vue.js,前端

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)

输出：