Mock.js介绍和使用与首页导航栏左侧菜单搭建

1.1 mockjs介绍

        Mock.js是一个用于生成随机数据和模拟接口请求的JavaScript库。它可以帮助开发人员在前端开发过程中模拟后端接口的返回数据，以便进行前端页面的开发和测试。

Mock.js有两个重要的特性风靡前端:

• 数据类型丰富

        Mock.js提供了一套简单易用的API，可以用于生成各种类型的随机数据，如字符串、数字、布尔值、日期等。开发人员可以使用Mock.js定义接口的返回数据结构，并生成符合该结构的随机数据。

• 拦截Ajax请求

        通过拦截Ajax请求，Mock.js可以截获前端发送的请求，并根据预先定义的规则返回模拟的数据。延时响应功能可以模拟网络延迟，以便测试页面在不同网络条件下的表现。动态数据生成功能可以根据请求参数生成符合条件的随机数据。不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
 

1.2 mock.js安装与配置

1.2.1 安装mock.js

npm i mockjs -D

 我这里已经安装过了，忘记截图了，还是老样子，进入项目的根目录cmd  然后执行命令就行

• -S选项用于启动开发服务器
• -D选项用于在启动开发服务器后自动打开浏览器
• -G选项用于生成代码或文件。它们分别用于不同的开发场景和需求，具体使用取决于你的目标和任务。

1.2.2 引入mock.js

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config目录中的dev.env.js和 prod.env.js做一个配置，如下：

• dev.env.js ：生产环境

  'use strict'
  const merge = require('webpack-merge')
  const prodEnv = require('./prod.env')
  
  module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    // 生产环境下使用mock
        MOCK:'true'
  })
  

• prod.env.js：开发环境

  'use strict'
  module.exports = {
    NODE_ENV: '"production"',
    // 打包环境下不使用mock
    MOCK:'false'
  }
  

• main.js

  //开发环境下才会引入mockjs
  process.env.MOCK && require('@/mock') 

  在做完这一步的时候，我们的程序是会报错的，告诉我们没有在src下找到我们的mock模块，不用急，下面会定义

1.3 mock.js的使用

• 1.3.1 准备模拟数据

  为每个*.vue定义单独的xxx-mock.js文件，并在其中添加自定义的json数据，还可以通过mockjs的模块生成随机数据信息，动态测试ajax请求效果。

创建src/mock/json目录，定义登录测试数据文件login-mock.js：

//在没有使用mock.js前，定义数据的方式（死数据）
/* const loginInfo = {
  code: -1,
  message: '密码错误'
} */
 
//使用mockjs的模板生成随机数据
const loginInfo = {
  //1表示50%概率
  "success|1": true,
  //1-2指重复1到2次
  "msg|1-2": 'msg'
}
 
//将当前模块导出，导出后index.js才可以导入
export default loginInfo;

1.3.2 定义拦截路由

        在src目录下创建mock目录，定义mock主文件index.js，并在该文件中定义拦截路由配置，/src/mock/index.js。

import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入请求地址
 
//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
	// timeout: 400  //延时400s请求到数据
	timeout: 200 - 400 //延时200-400s请求到数据
})
 
//获取请求的url
let url = action.getFullPath('SYSTEM_USER_DOLOGIN');
//引登陆的测试数据，并添加至mockjs
import loginInfo from '@/mock/json/login-mock.js'
Mock.mock(url, "get", loginInfo)
 
//如果请求既可以是get又可以是post的请求方式可以使用如下方式：
// Mock.mock(s1, /post|get/i, loginInfo)

1.3.3 测试

编辑Login.vue文件，根据不同响应，给出不同提示。

我这里暂时拦截不了，具体原因等我改过来再回来跟大家细说

二、总线首页导航栏左侧菜单搭建

2.1、首先定义总线

new Vue({
  el: '#app',
  data(){
    return{
      Bus:new Vue()
    }
  },
  router,
  components: { App },
  template: ''
})

2.2 自定义界面组件 (完整代码)

1. AppMain.vue 界面总容器

2. LegtNav.vue 左侧菜单

3. TopNav.vue 顶部导航栏

2.3、最后配置路由

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// 导入Login登录组件
import Login from '@/views/Login'
// 导入Register注册组件
// import Register from '@/views/Register'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },{
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },{
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        }
      ]
    }
  ]
})

最后看运行效果：