【Element-UI】Mock.js, navigation sur la page d'accueil du cas, menu de gauche

Language 2023-10-04 22:16:08 views: null

1.Mock.js

1. Qu'est-ce que Mock.js

Mock.js est une bibliothèque JavaScript permettant de générer des données fictives. Il peut simuler l'interface API back-end et être utilisé pour le débogage et les tests d'interface pendant le développement front-end afin d'améliorer l'efficacité des tests automatisés. À l'aide de Mock.js, vous pouvez créer rapidement des données virtuelles et définir le type, le format et les règles des données pour simuler des réponses de données réelles. Mock.js prend en charge des fonctions telles que la génération de données aléatoires, l'interception des requêtes Ajax pour renvoyer des données simulées et la prise en charge des styles d'API RESTful, ce qui peut améliorer l'efficacité du développement front-end et réduire la dépendance aux interfaces back-end.


Types de données riches : prend en charge la génération aléatoire de texte, de nombres, de valeurs booléennes, de dates, d'e-mails, de liens, d'images, de couleurs, etc.
Interception des requêtes Ajax : vous pouvez intercepter les requêtes Ajax et renvoyer des données de réponse simulées sans modifier le code existant.
 

Pour plus d'informations, veuillez consulter le site officiel de Mock.js

 2. Installation et configuration

1.Installation

Téléchargez Mock.js dans la fenêtre CMD du chemin de votre projet.

npm i mockjs -D

-D signifie utilisation uniquement dans un environnement de développement

Vous pouvez voir le mock.js que nous avons téléchargé dans notre package.json


2. Présentation  

Afin de n'utiliser que des simulations dans l'environnement de développement et de ne pas automatiquement utiliser de simulations lors du packaging dans l'environnement de production , nous pouvons effectuer une configuration dans dev.env.js et prod.env.js dans le répertoire de configuration .

dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: 'true'
})

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  MOCK: 'false'
}

Enfin nous l'importons dans main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock')
// 新添加1
import ElementUI from 'element-ui'
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'
 
import App from './App'
import router from './router'
 
// 新添加3----实例进行一个挂载
Vue.use(ElementUI)
Vue.config.productionTip = false
 
import axios from '@/api/http'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

2. Utilisation de Mock.js

1. Définir les fichiers de données de test

Définissez un fichier xxx-mock.js distinct pour chaque *.vue et ajoutez -y des données json personnalisées. Vous pouvez également générer des informations de données aléatoires via le module mockjs pour tester dynamiquement l'effet de la requête ajax .

Créez le répertoire src/mock/json et définissez le fichier de données de test de connexion login-mock.js :

// const loginInfo = {
// 	code: -1,
// 	message: '密码错误'
// }
 
//使用mockjs的模板生成随机数据
const loginInfo = {
	'code|-1-0': 0,
	'message|3-10': 'msg'
}
export default loginInfo;
2. Mock intercepte la requête ajax

Créez index.js dans le répertoire src/mock et définissez la configuration du routage d'interception :


import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入请求地址
 
//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
	// timeout: 400  //延时400s请求到数据
	timeout: 200 - 400 //延时200-400s请求到数据
})
 
//引登陆的测试数据，并添加至mockjs
import loginInfo from '@/mock/json/login-mock.js'
let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
Mock.mock(s1, "post", loginInfo)
// Mock.mock(s1, /post|get/i, loginInfo)
3. Essai de simulation

Utilisez le test simulé de la page de connexion
 

<template>
  <div class="Login">
    <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="primary" 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;
      // 使用json格式进行传值
      let params = {
        username: this.username,
        password: this.password
      }
      this.axios.post(url, params).then(r => {
        console.log(r);
        this.$message({
          message: r.data.message,
          type: r.data.code == 0?'success': 'error'
        });
 
      }).catch(e => {
      });
 
    }
 
  }
}
</script>
 
<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url(https://pic4.zhimg.com/v2-c5880f5a6d44766feb085c3ae94899c7_r.jpg);
//background-image: url();
  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;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
 
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

 

 

2. Navigation sur la page d'accueil et menu de gauche 

 1. Construction des pages

Écrivez notre page publique dans le dossier public de nos composants .

AppMain.vue : composant de conteneur de mise en page
LeftAside.vue : composant de menu de gauche
TopNav.vue : le composant de navigation de la page d'accueil
réalise l'effet de pliage et de dépliage du menu NavMenu d'element-ui en fonction des données transmises entre les composants de vue.

Le composant enfant transmet les données (this.$emit) au composant parent : TopNav -> AppMain. Le
composant parent transmet les données (props) au composant enfant : AppMain -> LeftAside.

1.1. Définition de l'icône

Les icônes peuvent être personnalisées selon votre propre style, je les ai fournies ci-dessous, et vous pouvez également les modifier vous-même. 

1.2、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">这是一个非常帅的主页</el-main>
    </el-container>
  </el-container>
</template>
 
<script>
// 导入组件
import TopNav from '@/components/TopNav.vue'
import LeftNav from '@/components/LeftNav.vue'
 
// 导出模块
export default {
  
};
</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>

 1.3、LeftNav.vue

<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157"
           text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
    <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 {
 
}
</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>

1.4、TopNav.vue

<template>
  <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,
      imgshow: require('@/assets/img/show.png'),
      imgsq: require('@/assets/img/sq.png')
    }
  }, methods: {
    
  }
}
</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>

 1.5、index.js

Effectuer la configuration du routage dans index et js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
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: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Register',
      name: 'Register',
      component: Register
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children: [{
        path: '/LeftNav',
        name: 'LeftNav',
        component: LeftNav
      },
        {
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        }]
    }
  ]
})

2. Réalisation des fonctions 

 2.1、AppMain.vue

// 导出模块
export default {
  //把顶部导航和左边导航进行绑定在main
  components: {
    TopNav, LeftNav
  },
  data() {
    return {
      asideClass: 'main-aside'
    }
  },
  created() {
    this.$root.Bus.$on('sjm', v => {
      this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
    });
  }
};

 2.2、LeftNav.vue

 
export default {
  data() {
    return {
      collapsed: false
    }
  },
  created() {
    this.$root.Bus.$on('sjm', v => {
      this.collapsed = v;
    });
  }
}

 2.3、TopNav.vue

 
export default {
  data() {
    return {
      collapsed: false,
      imgshow: require('@/assets/img/show.png'),
      imgsq: require('@/assets/img/sq.png')
    }
  }, methods: {
    //图标的切换
    doToggle() {
      this.collapsed = !this.collapsed;
      //定义一个事件名,将是否折叠变量放入总线
      this.$root.Bus.$emit('sjm', this.collapsed)
    },
    exit() {
      this.$router.push('/Login');
    }
  }
}

 2.4、main.js

  data() {
    return {
      Bus: new Vue()
    }
  }

3. Code complet

3.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">这是一个非常帅的主页</el-main>
    </el-container>
  </el-container>
</template>
 
<script>
// 导入组件
import TopNav from '@/components/TopNav.vue'
import LeftNav from '@/components/LeftNav.vue'
 
// 导出模块
export default {
  //把顶部导航和左边导航进行绑定在main
  components: {
    TopNav, LeftNav
  },
  data() {
    return {
      asideClass: 'main-aside'
    }
  },
  created() {
    this.$root.Bus.$on('sjm', 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>

 3.2、LeftNav.vue

<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157"
           text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
    <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('sjm', 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.3、TopNav.vue
<template>
  <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,
      imgshow: require('@/assets/img/show.png'),
      imgsq: require('@/assets/img/sq.png')
    }
  }, methods: {
    //图标的切换
    doToggle() {
      this.collapsed = !this.collapsed;
      //定义一个事件名,将是否折叠变量放入总线
      this.$root.Bus.$emit('sjm', this.collapsed)
    },
    exit() {
      this.$router.push('/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>
3.4、main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock')
// 新添加1
import ElementUI from 'element-ui'
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'
 
import App from './App'
import router from './router'
 
// 新添加3----实例进行一个挂载
Vue.use(ElementUI)
Vue.config.productionTip = false
 
import axios from '@/api/http'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  //定义变量
  data() {
    return {
      Bus: new Vue()
    }
  },
  components: {App},
  template: '<App/>'
})

Je suppose que tu aimes

Origine blog.csdn.net/weixin_72997875/article/details/133301386
conseillé
Classement
du quotidien
Plus
2024-08-26(0)
2024-08-25(0)
2024-08-24(0)
2024-08-23(0)
2024-08-22(0)
2024-08-21(0)
2024-08-20(0)
2024-08-19(0)
2024-08-18(0)
2024-08-17(0)

Code World

© 2018 codetd.com