vue中使用mock进行前端独立开发

1.添加菜单menuData.js

{
    text: '测试模块',
    router: '',
    icon: '',
    submenu: [
      {
        text: '主机列表',
        router: '/host/list',
        icon: 'el-icon-edit'
      }
    ]
  }

2.创建view

<template>
  <!-- 主机记录 -->
  <div>
    <Table
      :fieldData="fieldData"
      :tableData="tableData"
      :page="true"
      @changePage="changePage"
      :total="total"
    >
        <el-table-column
          slot="opts"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
    </Table>
 
  </div>
</template>

<script>

  // 表格组件
  import Table from 'component/table'
  
  export default{
    components: {
      Table
    },
    data(){
      return {
        total: 30,
        fieldData: [
          {
            field: 'age',
            label: '年龄',
            width: ''
          },
          {
            field: 'address',
            label: '地址'
          },
        ],
        tableData: [
          {address: '1212', age: '44324'},
          {address: '反攻倒算刚发的222', age: '22'},
          {address: '反攻倒算刚发的222', age: '22'},
          {address: '反攻倒算刚发的222', age: '25'},
          {address: '反攻倒算刚发的222', age: '25'},
          {address: '反攻倒算刚发的22', age: '26'},
          {address: '反攻倒算刚发的222', age: '27'},
        ],
      }
    },
    props: {},
    mounted () {
      this.$store.commit('updateBreadcrumb', [
        {
          text: '首页',
          path: ''
        },
        {
          text: '主机列表',
          path: ''
        },
      ]);
    },
    methods: {
      getChooseData() {
        console.log( this.$refs['testForm'].getChooseData() , '--getChooseDatar--');
      },
      changePage() {
        console.log('changePage');
        this.tableData = [{}];
      },
    }
  }

</script>

<style scoped="">
</style>

import Vue from 'vue';
import Router from 'vue-router';
import Hosts from './index'

Vue.use(Router);

export default [
  {
    path: '/host/list',
    name: 'hosts',
    component: Hosts
  }
];

3.把自定义的router添加到home的router中

import Vue from 'vue';
import Router from 'vue-router';
import Home from './index';
import Basic from '../basic/router';
import Data from '../data/router';
import Api from '../api/router';
import Exec from '../exec/router';
import Report from '../report/router';
import ServiceManager from '../serviceManager/router';
import LinkMonitor from '../linkMonitor/router';
import Hosts from '../asset/router';

Vue.use(Router);

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    children: [
      ...Basic,
      ...Data,
      ...Api,
      ...Exec,
      ...Report,
      ...ServiceManager,
      ...LinkMonitor,
      ...Hosts
    ]
  }
];

4.最终效果

 

 vue配合mock实现独立开发

  1.安装mockjs

        npm install mockjs    --save-dev

   2.在src目录下创建mock文件夹 在mock目录下创建相关js文件

      在src目录的main.js导入mock目录下的相关js文件

// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const hostsData = function() {
    let hosts = [];
    for (let i = 0; i < 10; i++) {
        let hostObject = {
            title: Random.csentence(5, 30), //  Random.csentence(min, max)
            IP: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
            system: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
        }
        hosts.push(hostObject)
    }
    return {
        type:"SUCCESS",
        data: hosts
    }
}

//设置被拦截的url
Mock.mock(/\/interfacetest\/findEnvironmentList/, 'get', hostsData);

import './core/element';
import './core/vue';

import './mock/hosts';

3.在api目录下创建对应的api模块hosts   在api目录下的index.js中导入hosts模块

export default {
  getAllHosts: {
    url: '/interfacetest/findEnvironmentList',
    method: 'GET',
    description: '查询主机列表'
  }
};

import interfacetest from './interfacetest';
import user from './user';
import host from './hosts';

export default {
  ...interfacetest,
  ...user,
  ...host
};

 

4.在vue中调用url获取mock数据集合

<template>
  <!-- 主机记录 -->
  <div>
    <Table
      :fieldData="fieldData"
      :tableData="tableData"
      :page="true"
      @changePage="changePage"
      :total="total"
    >
        <el-table-column
          slot="opts"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
    </Table>
 
  </div>
</template>

<script>
data(){
      return {
        total: 0,
        fieldData: [
          {
            field: 'title',
            label: '主机名',
            width: ''
          },
          {
            field: 'IP',
            label: 'IP地址'
          },
        ],
        tableData: [
        ],
      }
    }    created() {
      this.gethosts();
    },
    methods: {
      gethosts()
      {
        return this.$http.getAllHosts({},{notify: false})
          .then((data) => {
            this.tableData=data;
        });
      }
    }

</script>
</script>

5.展示效果

 

Mockjs配置注意事项

export default {
  getAllHosts: {
    url: '/host/list',
    method: 'GET',
    description: '查询主机列表'
  }
};

// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const hostsData = function() {
    let hosts = [];
    for (let i = 0; i < 23; i++) {
        let hostObject = {
            id:Random.natural(1,30),
            title: Random.domain(), //  Random.csentence(min, max)
            IP: Random.ip(), // Random.cname() 随机生成一个常见的中文姓名
            system: Random.date() + ' ' + Random.time(), // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
            status: Random.natural(1,3)
        }
        hosts.push(hostObject)
    }
    return {
        type:"SUCCESS",
        data: hosts
    }
}

//设置被拦截的url
//错误的写法
//Mock.mock("/\/host\/list/", 'get', hostsData); 
//一定要使用正则来匹配 否则mock不能拦截到请求
//被mock拦截的请求将不会在浏览器控制台网络面板中显示
Mock.mock(/\/host\/list/, 'get', hostsData);

在vue的main.js当中导入mock数据源js即可


import './core/element';
import './core/vue';

import './mock/hosts';

// 设置拦截的接口 格式请看文档 https://github.com/nuysoft/Mock/wiki/Mock.mock()
// 注意: 这里拦截的地址 最好使用正则匹配 如果直接使用字符串接口 就有可能拦截不到带参数的请求 报错404
Mock.mock(/\/api\/mock(|\?\S*)$/, 'post', creatPostMock)
// Mock.mock('/api/mock', 'get', creatGetMock) // 方式一
Mock.mock(/\/api\/mock(|\?\S*)$/, 'get', creatGetMock) // 方式二

 

mock拦截post请求实例

export default {
  authLogin: {
    //url: '/login/authLogin',
    url:'/user/login',
    method: 'POST',
    description: '用户登录'
  }

// 引入mockjs
const Mock = require('mockjs');

const userlogindata=function(options)
{
   //如果是get请求可以在options.url中获取到
   //如果是post请求可以在options.body中获取到
   console.log(options);
   return {"aa":"bbb"};
}


Mock.mock(/\/user\/login/, 'post', userlogindata)

import './mock/hosts';
import './mock/users';

// 引入mockjs
const Mock = require('mockjs');

const userlogin_handler=function(options)
{
   //如果是get请求可以在options.url中获取到
   //如果是post请求可以在options.body中获取到
   //console.log(options.body);
   var type="FAIL";
   var content="用户名或者密码错误";
   var code = "NOT_LOGIN";

   //解析前台提交过来的表单数据
   let {uid,pwd}=JSON.parse(options.body);

   //console.log(uid);
   //console.log(pwd);
   if(uid=="admin" && pwd =="admin")
   {
      type = "SUCCESS";
      code="LOGIN";
      content="登录成功";
   }
   var data={
        "code":code,
        "type":type,
        "content":content,
        "data":[]
   };
   
   return data;
}


Mock.mock(/\/user\/login/, 'post', userlogin_handler)