1.添加菜单menuData.js
{
text: '测试模块',
router: '',
icon: '',
submenu: [
{
text: '主机列表',
router: '/host/list',
icon: 'el-icon-edit'
}
]
}
View Code
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>
View Code
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
}
];
router.js
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
]
}
];
views/home/router.js
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);
hosts
import './core/element';
import './core/vue';
import './mock/hosts';
main.js
3.在api目录下创建对应的api模块hosts 在api目录下的index.js中导入hosts模块
export default {
getAllHosts: {
url: '/interfacetest/findEnvironmentList',
method: 'GET',
description: '查询主机列表'
}
};
api/hosts
import interfacetest from './interfacetest';
import user from './user';
import host from './hosts';
export default {
...interfacetest,
...user,
...host
};
api/index.js
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>
View
5.展示效果
Mockjs配置注意事项
export default {
getAllHosts: {
url: '/host/list',
method: 'GET',
description: '查询主机列表'
}
};
url配置
// 引入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);
mock数据源js
在vue的main.js当中导入mock数据源js即可
import './core/element';
import './core/vue';
import './mock/hosts';
vue引入mock
// 设置拦截的接口 格式请看文档 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请求
mock拦截post请求实例
export default {
authLogin: {
//url: '/login/authLogin',
url:'/user/login',
method: 'POST',
description: '用户登录'
}
url配置
// 引入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)
mock数据源
import './mock/hosts';
import './mock/users';
main.js
// 引入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)
mock示例2