模拟数据生成器mock.js入门

1、在某一指定目录下，按下shift+鼠标右键，，点击“在此处打开Powershell窗口(S)”，启动命令行窗口。如下图：

2、在窗口中输入以下命令以便创建项目：vue create mockjsdemo

3、项目的创建步骤和配置选择与一般的创建Vue项目一样，不再废话。不太熟悉的朋友可参考：vue-cli@4搭建 vue + element-ui 项目实操。创建完毕后，项目目录结构如下图：

4、用Visual Studio Code打开mockjsdemo文件夹。

5、在VS Code中，按下ctrl+shift+`快捷键，打开的终端，依次输入以下三个命令，分别用于安装element-ui、axios 、mockjs 等三个依赖库：

　　npm install element-ui -S
　　npm install axios -S
　　npm install mockjs -S

6、在main.js文件中，编写以下代码：

//导入elementUI库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//使用elementUI
Vue.use(ElementUI)

7、在HomeView.vue文件中，首先将默认创建的有关HelloWorld组件的导入、注册和使用都注释或删除掉。然后编写以下代码：

<template>

  <div class="home">

    <!-- <img alt="Vue logo" src="../assets/logo.png">

    <HelloWorld msg="Welcome to Your Vue.js App"/> -->

   

    <el-button type="primary" @click="getuser()">获取用户信息</el-button>

    <el-button type="primary" @click="getMenu()">获取菜单信息</el-button>

  </div>

</template>

<script>

// import HelloWorld from '@components/HelloWorld.vue'

import axios from 'axios'

// import mock from '@mock/mock.js'

import '../mock/mock.js'

export default {

  name: 'HomeView',

  components: {

    // HelloWorld

  },

  methods:{

    getuser(){

      axios.get('http://localhost:8080/user').then(res => {alert( JSON.stringify(res.data) )} )

    },

    getMenu(){

      axios.get('http://localhost:8080/menu').then(res => {alert( JSON.stringify(res.data) )} )

    },

  }

}

</script>

8、在src目录下面创建mock文件夹，在其中创建mock.js文件，用以模拟服务器端产生的模拟数据：

import Mock from 'mockjs'

Mock.mock('http://localhost:8080/user', {
    'name': '@name', // 随机生成姓名
    'email': '@email', // 随机生成邮箱
    'age|1-10': 5 // 年龄1-10之间
});
Mock.mock('http://localhost:8080/menu', {
    'id': '@increment', // id自增
    'name': 'menu', // 名称为menu
    'order|1-20': 6 // 排序1-20之间
})

9、在终端输入npm run serve命令，以运行本项目。单击“获取用户信息”，以便获得响应，结果如下图。

示例源码百度网盘下载地址：mockjsdemo ，提取码：iwcx

注意：源码下载后需要使用npm install命令安装所有的依赖包。所有的依赖包及其版本都在package.json文件中写着，包括element-ui、axios 、mockjs等三个依赖包。安装之后再运行项目即可。

其他可推荐的博文：

1、mock.js使用

2、spring boot + vue + element-ui