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

一、技术架构

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)

输出：

（2）名称占位符

名称占位符

first	英文名
last	英文姓
name	英文姓名
cfirst	中文名
clast	中文性
cname	中文姓名

（3）网络占位符

网络占位符1

url(protocol?host?)	生成url
domain	生成域名
ip	生成ip地址
email	生成右键地址

（4）地址占位符

地址占位符

regin	区域
county（ture）	省市县
zip	邮政编码

四、EasyMock数据接口

EasyMock是一个可视化并且能快速生成模拟数据的服务。

官网：https://mock.presstime.cn/