ElementUI -- 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文件，根据不同响应，给出不同提示。

<template>
  <div class="login-wrap">
    <el-form class="login-container">
      <h1 class="title">用户登录</h1>
      <el-form-item label="">
        <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" style="width:100%;" @click="doSubmit()">提交</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top:-10px">
        <el-link type="primary">忘记密码</el-link>
        <el-link type="primary" @click="gotoRegister()">用户注册</el-link>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  export default {
    name: 'Login',
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      gotoRegister() {
        this.$router.push("/Register");
      },
      doSubmit() {
        //定义后台登录方法连接地址
        let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
        //获取数据
        let params = {
          username: this.username,
          password: this.password
        };
        /* get请求进行参数传递 */
        this.axios.get(url, {
          params: params
        }).then(r => {
          console.log(r);
          //提示成功和失败，主要演示获取响应数据的方法
          if (r.data.success) {
            //可以到element-ui官网查看用法
            this.$message({
              message: '登录成功',
              type: 'success'
            });
          }else{
            this.$message({
              message: '登录失败',
              type: 'error'
            });
          }
        }).catch(e => {
          //异常信息
        });
      }
    }
  }
</script>
<style scoped>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url('/static/imgs/books2.jpg');
    /* background-color: #3b7cf5; */
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
  }
  .login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    border: 1px solid #eaeaea;
    text-align: left;
    background-color: rgba(229, 229, 229, 0.8);
  }
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #0b0b0b;
  }
</style>

这里我原本是拦截不了的，但是后来去网上找了，说是引入mock的顺序问题，后面将顺序一改就行了

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

2.1、首先定义总线

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

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

1. AppMain.vue 界面总容器

<template>
  <el-container class="main-container">
    <el-aside v-bind:class="asideClass">
      <LeftNav></LeftNav>
    </el-aside>
    <el-container>
      <el-header class="main-header">
        <TopNav></TopNav>
      </el-header>
      <el-main class="main-center">Main</el-main>
    </el-container>
  </el-container>
</template>
<script>
  // 导入组件
  import TopNav from '@/components/TopNav.vue'
  import LeftNav from '@/components/LeftNav.vue'
  // 导出模块
  export default {
    components: {
      TopNav,LeftNav
    },data() {
      return {
        asideClass: "main-aside"
      }
    },
  created() {
      this.$root.Bus.$on("xxx", (v) => {
        this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
      });
    }
  };
</script>
<style scoped>
  .main-container {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .main-aside-collapsed {
    /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    width: 64px !important;
    height: 100%;
    background-color: #334157;
    margin: 0px;
  }
  .main-aside {
    width: 240px !important;
    height: 100%;
    background-color: #334157;
    margin: 0px;
  }
  .main-header,
  .main-center {
    padding: 0px;
    border-left: 2px solid #333;
  }
</style>

2. LegtNav.vue 左侧菜单

<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157"
   text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
    <!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组2">
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4">
        <template slot="title">选项4</template>
        <el-menu-item index="1-4-1">选项1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <i class="el-icon-document"></i>
      <span slot="title">导航三</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">导航四</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
  export default {
    data(){
      return {
        collapsed:false
      }
    },
    created(){
      this.$root.Bus.$on("xxx", (v)=>{
              this.collapsed= v ;
            });
    }
  }
</script>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
  }
  .el-menu-item-group__title {
    padding: 0px;
  }
  .el-menu-bg {
    background-color: #1f2d3d !important;
  }
  .el-menu {
    border: none;
  }
  .logobox {
    height: 40px;
    line-height: 40px;
    color: #9d9d9d;
    font-size: 20px;
    text-align: center;
    padding: 20px 0px;
  }
  .logoimg {
    height: 40px;
  }
</style>

3. TopNav.vue 顶部导航栏

<template>
  <!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
     text-color="#fff" active-text-color="#ffd04b">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu> -->
  <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    <el-button class="buttonimg">
    <img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    </el-button>
    <el-submenu index="2" class="submenu">
    <template slot="title">超级管理员</template>
    <el-menu-item index="2-1">设置</el-menu-item>
    <el-menu-item index="2-2">个人中心</el-menu-item>
    <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    </el-submenu>
  </el-menu>
  </template>
  <script>
  export default {
    data() {
    return {
      collapsed: false,
      imgsq: require('@/assets/img/sq.png'),
      imgshow: require('@/assets/img/show.png')
    }
    },
    methods: {
    doToggle() {
      this.collapsed = !this.collapsed;
      //将是否折叠的变量放入到总线中
      this.$root.Bus.$emit("xxx", this.collapsed);
    },
    exit() {
      this.$router.push({
      path: '/Login'
      })
    }
    }
  }
  </script>
  <style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
  }
  .submenu {
    float: right;
  }
  .buttonimg {
    height: 60px;
    background-color: transparent;
    border: none;
  }
  .showimg {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 17px;
    left: 17px;
  }
  .showimg:active {
    border: none;
  }
  </style>

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
        }
      ]
    }
  ]
})

最后看运行效果：

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

1.1 mockjs介绍

1.2 mock.js安装与配置

1.2.1 安装mock.js

1.2.2 引入mock.js

1.3 mock.js的使用

1.3.2 定义拦截路由

1.3.3 测试

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

2.1、首先定义总线

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

2.3、最后配置路由

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

1.1 mockjs介绍

1.2 mock.js安装与配置

1.2.1 安装mock.js

1.2.2 引入mock.js

1.3 mock.js的使用

1.3.2 定义拦截路由

1.3.3 测试

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

2.1、首先定义总线

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

2.3、最后配置路由

热门文章

最新文章

相关课程

相关电子书

相关实验场景