Mock.js es un generador de datos simulados, que se utiliza para ayudar en la depuración y el desarrollo de front-end, para separar los prototipos de front-end y back-end, y para mejorar la eficiencia de las pruebas automatizadas . Es bien sabido que Mock.js ha arrasado en la parte delantera debido a dos características importantes:

Tipos de datos enriquecidos
Admite la generación aleatoria de texto, números, valores booleanos, fechas, correos electrónicos, enlaces, imágenes, colores, etc.

Interceptación de solicitudes Ajax
Puede interceptar solicitudes Ajax y devolver datos de respuesta simulados sin modificar el código existente.

Sitio web oficial http://mockjs.com

Nota: easy-mock, una plataforma de datos que simula el fondo en línea

1.2 Pasos de uso de Mockjs

1.2.1 Instalar dependencias de mockjs

# -D表示只在开发环境中使用
npm install mockjs -D

1.2.2 Introducción de mockjs en el proyecto

Para usar solo el simulacro en el entorno de desarrollo y no usar automáticamente el simulacro cuando se empaqueta en el entorno de producción, podemos hacer una configuración en env.
Hay dos archivos de configuración en el directorio de configuración, a saber, dev.env.js (entorno de desarrollo) y prod.env.js (entorno de producción).
La configuración del entorno de desarrollo es la siguiente :

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  //增加配置
  MOCK:'true'
})

La configuración del entorno de producción es la siguiente :

module.exports = {
  NODE_ENV: '"production"',
  //新增mockjs配置
  MOCK:'false'
}

Modificar main.js :

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

//开发环境下才会引入mockjs，新增
//import是ES6标准中的模块化解决方案，require是node中遵循CommonJS规范的模块化解决方案
//后者支持动态引入，也就是require(${path}/xx.js)
process.env.MOCK && require('@/mock')
......

Nota: import es una solución modular en el estándar ES6 y require es una solución modular en el nodo que sigue la especificación CommonJS, que admite la importación dinámica, es decir, require(${path}/xx.js)

1.2.3 Crear directorios y archivos

1) Cree un directorio simulado en el directorio src, defina el archivo principal simulado index.js y defina la configuración de enrutamiento de intercepción en este archivo, /src/mock/index.js.
El contenido de index.js es el siguiente:

//引入mockjs，npm已安装
import Mock from 'mockjs'

//引入封装的请求地址
import action from '@/api/action'

//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
  //延时400s请求到数据
  // timeout: 400
  //延时200-400s请求到数据
  timeout: 200 - 400
})

1.2.4 Preparar datos de simulación para cada componente

Prepare datos simulados para cada componente (*.vue). Luego importa en mock/index.js

Importe en mock/index.js, configure la URL de solicitud y simule el envío de datos

。。。。。。
//将模拟数据导入到这里。
import loginData from '@/mock/json/login-mock.js'

//获取请求的url
let url = action.getFullPath("SYSTEM_USER_DOLOGIN");

//通过mockjs模拟发送请求
//url  请求url
//post 请求方式
//loginData  模拟数据
//mockjs会拦截发送的请求，并使用模拟数据充当真实返回的响应数据
//Mock.mock(url, "post", loginData);

//如果请求既可以是get又可以是post的请求方式可以使用如下方式：
Mock.mock(url, /post|get/i, loginData);

Establecer datos simulados, editar login-mock.js

//为增加可读性loginData与mack/index.js中导入的名称对应
const loginData = {
  "success": true,
  "msg": "密码正确"
}

//将当前模块导出，导出后index.js才可以导入
export default loginData

1.2.5 Pruebas

Inicie el servicio nodejs, cierre el servicio en segundo plano y pruebe el inicio de sesión . Las pruebas de datos simulados ahora están disponibles a través de mockjs.

La solicitud simulada establecida en mock/index.js puede ser una publicación o un método de obtención. Si desea probar el método de solicitud de obtención, puede modificar la parte de la solicitud de envío en Login.vue al método de obtención.

//修改url的获取方式，url已经配置在了action.js中
//post请求方式
/* let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
this.axios.post(url, params).then(resp => {
  console.log(resp);
}).catch(resp => {}); */

//get请求方式，注意：与post请求不同的是参数的设置方式
let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
this.axios.post(url, {params: params}).then(resp => {
  console.log(resp);
}).catch(resp => {});

Nota: Al usar mockjs para pruebas de front-end, el indicador de front-end debe definir la interfaz con el desarrollador de back-end; de lo contrario, la prueba no tiene sentido.

Haga clic en enviar cuando no se ingrese ningún valor, y la solicitud interceptada devuelve directamente los datos simulados, por lo que no necesita llamar al fondo y saltar directamente a la página de inicio

1.2.6 Depuración de front-end

Modifique la configuración en el archivo mock/index.js:

//如果请求既可以是get又可以是post的请求方式可以使用如下方式：
//Mock.mock(url, /post|get/i, loginData);

//前端调试模式
Mock.mock(url, /post|get/i, (options) => {
  // 最佳实践，
  debugger;
  return Mock.mock(loginData);
});

Después de la modificación, haga clic en Enviar y, bajo la premisa de abrir las herramientas de desarrollo, ingresará al modo de depuración.

1.2.7 mockjs genera datos de respuesta aleatorios

Edite el archivo login-mock.js:

//静态响应
/* const loginData = {
  "success": true,
  "msg": "密码正确"
} */

//随机响应
const loginData = {
  //1表示50%概率
  "success|1": true,
  //2-3指重复2到3次
  "msg|2-3": "msg"
}

1.2.8 Dar diferentes indicaciones de acuerdo a las diferentes respuestas

Edite el archivo Login.vue

//get请求方式
let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
this.axios.post(url, {
  params: params
}).then(resp => {

  //提示成功和失败，主要演示获取响应数据的方法
  if (resp.data.success) {
    //可以到element-ui官网查看用法
    this.$message({
      message: '登录成功',
      type: 'success'
    });
  }else{
    this.$message({
      message: '登录失败',
      type: 'error'
    });
    
  }

  console.log(resp);
}).catch(resp => {});

Mostrar resultados:

2. Saltar entre inicio de sesión y registro

2.1 Agregar botones de inicio de sesión y registro

Edite Login.vue, agregue la contraseña olvidada, botón de registro

<!-- 加入忘记密码和注册链接 -->
<el-row style="text-align:center;margin-top: -5px;">
    <el-link type="primary" style="margin-right: 40px;">忘记密码</el-link>
    <el-link type="primary">用户注册</el-link>
</el-row>

2.2 Agregar componentes de registro

Registro.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="userNo" placeholder="账户" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="password" v-model="userPwd" placeholder="密码" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码">
    <el-input type="password" v-model="userPwd2" placeholder="确认密码" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="register()" style="width:48%">注册</el-button>
    <el-button type="primary" @click="cancel()" style="width:48%">返回</el-button>
  </el-form-item>
</el-form>
</div>
</template>

export default {
    name: 'Register',
    data: function() {
          return {
            userNo: '',
            userPwd: '',
            userPwd2: ''
          }
    },
    methods: {
          register: function() {

          },
          gotoLogin: function() {
            //获取路由，转换到根路径，及登录组件
            this.$router.push('/');
          }
    }
}

Saltar a través del enrutamiento, métodos de uso común :

字符串： this.$router.push('/home/first')

对象： this.$router.push({ path: '/home/first' })

命名的路由：
this.$router.push({ name: 'home', params: { userId: wise }})
params为传递的参数

La diferencia entre this.$router.push, replace y go :

this.router.push(): salte a una URL diferente, este método agregará un registro a la pila de historial, haga clic en Atrás para volver a la página anterior this.router.replace(): también salte a la URL especificada, pero esto El método no agregará un nuevo registro al historial, haga clic en regresar, saltará a la página anterior. El registro anterior no existe.
this.$router.go(n): cuántas páginas saltar hacia adelante o hacia atrás en relación con la página actual, similar a window.history.go(n). n puede ser positivo o negativo. Números negativos volver a la página anterior

2.3 Configurar enrutamiento

enrutador/index.js

//首先导入组件
import Login from '@/views/Login'
import Register from '@/views/Register'

Vue.use(Router)

export default new Router({
  routes: [
    {
      //配置路由，根路径访问Login组件
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      //增加注册组件路由
      path: '/Register',
      name: 'Register',
      component: Register
    }
  ]
})

3. Inicio del sistema

3.1 Preparación

Hay imágenes (directorio de activos) en el directorio proporcionado con el material didáctico, cópielas en el directorio de activos del proyecto.

Coloque una copia de Main.vue en el directorio de vistas del proyecto (página de inicio)

LeftAside.vue (componente de la columna del lado izquierdo), TopNav.vue (componente superior) copie y coloque en el directorio de componentes

3.2 Vista principal

<template>
	<el-container class="main-container">
      <!-- 侧边栏有折叠效果，通过class控制折叠还是显示的效果 -->
		<el-aside v-bind:class="asideClass">
			<LeftAside></LeftAside>
		</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>

   // 导出模块
   export default {

   //组件名称
   name: 'Main',

   data: function() {
     return {
       asideClass: 'main-aside',
     }
   },

   //将import的组件定义的Main中以便于使用
   components:{
     TopNav, LeftAside
   }

   };

3.3 Configurar enrutamiento

router/index.js, importe el componente principal antes de configurar la ruta

....
{
  //增加Main组件路由
  path: '/Main',
  name: 'Main',
  component: Main
}

3.4 Edición del componente de inicio de sesión

Cuando el inicio de sesión es exitoso, se muestra la página de inicio del sistema:

La interfaz después de que el sistema se está ejecutando:

3.5 El componente superior muestra un icono de pliegue o visualización

TopNav.vue

export default {
    //定义组件名称
    name:'TopNav',

    data: function() {
      return {
        //默认展示侧边栏
        opened:true,

        //require是node中遵循CommonJS规范的模块化解决方案,支持动态引入
        imgshow: require('../assets/img/show.png'),
        imgsq: require('../assets/img/sq.png')
      }
    }
}

3.6 Darse cuenta del efecto de plegado de la columna izquierda

paso:

1.TopNav.vue define una función de escucha, escucha el evento de clic del botón plegable y pasa el valor de estado contraído o abierto al componente Main.vue a través de un evento personalizado.

2. El componente Main.vue recibe el valor de estado pasado por el componente TopNav.vue, establece el estilo de apertura o contracción según el valor de estado y pasa el valor de estado al componente LeftAside.vue a través de accesorios.