Vue实现首页导航和左侧菜单，介绍mock.js并实现登录注册间的跳转，实现左侧栏折叠效果，优化Main.vue组件，使用mock.js生成随机响应数据

news2025/1/10 13:09:55

目录

1. mockjs

1.1 mockjs介绍

1.2 mockjs使用步骤

1.2.1 安装mockjs依赖

1.2.2 在项目中引入mockjs

1.2.3 创建目录和文件

1.2.4 为每个组件准备模拟数据

1.2.5 测试

1.2.6 前端调试

1.2.7 mockjs生成随机响应数据

1.2.8 根据不同响应，给出不同提示

2. 登录注册间的跳转

2.1 加入登录及注册按钮

2.2 增加注册组件

2.3 配置路由

3. 系统首页

3.1 准备

3.2 Main.vue

3.3 配置路由

3.4 编辑登录组件

3.5 顶部组件显示折叠或展示图标

3.6 实现左侧栏折叠效果

1. mockjs

1.1 mockjs介绍

Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。众所周知Mock.js因为两个重要的特性风靡前端:

  • 数据类型丰富
    支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
  • 拦截Ajax请求
    不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

官网

注：easy-mock，一个在线模拟后台的数据平台

1.2 mockjs使用步骤

1.2.1 安装mockjs依赖

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

1.2.2 在项目中引入mockjs

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置。
在config目录里面有两个配置文件，分别是dev.env.js（开发环境），prod.env.js（生产环境）。
开发环境配置如下：

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

生产环境配置如下：

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

修改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对象是Node的一个全局对象，提供当前Node进程的信息
//process.env返回环境变量
process.env.MOCK && require('@/mock')
......

注意：import是ES6标准中的模块化解决方案，require是node中遵循CommonJS规范的模块化解决方案，后者支持动态引入，也就是require(${path}/xx.js)

1.2.3 创建目录和文件

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

//引入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 为每个组件准备模拟数据

为每个组件（*.vue）准备模拟数据。然后导入到mock/index.js中

在mock/index.js中导入，设置请求url，模拟发送数据

。。。。。。
//将模拟数据导入到这里。
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);

设置模拟数据，编辑login-mock.js

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

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

1.2.5 测试

启动nodejs服务，关闭后台服务，测试登录。现在已经可以通过mockjs进行模拟数据测试了。

在mock/index.js中设置的mock请求，既可以是post可以是get方式的，如果要测试get请求方式，可以将Login.vue中的发送请求部分修改为get方式。

//修改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 => {});

注意：使用mockjs进行前端测试时，前提示要和后台开发人员定义好接口，否则测试没有意义。

1.2.6 前端调试

修改mock/index.js文件中的配置：

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

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

修改后点击提交，在打开开发者工具的前提下，会进入调试模式。

1.2.7 mockjs生成随机响应数据

编辑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 根据不同响应，给出不同提示

编辑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 => {});

2. 登录注册间的跳转

2.1 加入登录及注册按钮

编辑Login.vue，加入忘记密码，注册按钮

<!-- 加入忘记密码和注册链接 -->
<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 增加注册组件

Register.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('/');
          }
    }
}

通过路由跳转，常用方式：

  • 字符串： this.$router.push('/home/first')
  • 对象： this.$router.push({ path: '/home/first' })
  • 命名的路由：
    this.$router.push({ name: 'home', params: { userId: wise }})
    params为传递的参数

this.$router.push、replace、go的区别：

this.router.push()： 跳转到不同的url，这个方法会向history栈添加一个记录，点击后退会返回到上一个页面 this.router.replace() ： 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
this.$router.go(n)：相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。负数返回上一个页面

2.3 配置路由

router/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. 系统首页

3.1 准备

  1. 在随课件提供的目录中有图片（assets目录），拷入项目的assets目录
  2. 将Main.vue拷贝放入项目的views目录 （首页）
  3. LeftAside.vue（左侧栏组件），TopNav.vue（顶部组件）拷贝放入components目录

3.2 Main.vue

<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 配置路由

router/index.js， 配置路由前先导入Main组件

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

3.4 编辑登录组件

当登录成功后，显示系统首页：

系统运行后的界面：

 

3.5 顶部组件显示折叠或展示图标

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 实现左侧栏折叠效果

步骤：

  1. TopNav.vue定义监听函数，监听折叠按键的click事件，并将折叠或打开的状态值通过自定义事件传递给Main.vue组件。

 

2.Main.vue组件接收到TopNav.vue组件传递的状态值，根据状态值设置打开或折叠的样式，并将状态值通过props传递给LeftAside.vue组件

 

script部分：

 

3.LeftAside.vue组件通过接收到的状态值设置自身的打开或折叠效果。

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1147286.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【PCA降维】在人脸识别中的应用

【PCA降维】在人脸识别中的应用

首先导入人脸数据集和相关的模块&#xff1a; from sklearn.datasets import fetch_lfw_people # 人脸数据集 import matplotlib.pyplot as plt from sklearn.decomposition import PCA import numpy as np 加载sklearn自带的数据集&#xff1a; faces fetch_lfw_people(mi…
阅读更多...
【MATLAB源码-第61期】基于蜣螂优化算法(DBO)的无人机栅格地图路径规划，输出最短路径和适应度曲线。

【MATLAB源码-第61期】基于蜣螂优化算法(DBO)的无人机栅格地图路径规划，输出最短路径和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 蜣螂优化算法&#xff08;Dung Beetle Optimization, DBO&#xff09;是一种模拟蜣螂在寻找食物和进行导航的过程的优化算法。蜣螂是一种能够将粪球滚到合适地点的昆虫&#xff0c;它们利用天空中的光线和自身的感知能力来确…
阅读更多...
关键路径及关键路径算法[C/C++]

关键路径及关键路径算法[C/C++]

文章目录 关键路径引例AOE网关键路径与关键活动关键路径算法引例与原理关键路径算法的实现边的存储结构代码实现运行示例 关键路径 关于拓扑排序的内容见拓扑排序详解 引例 通过拓扑排序我们可以解决一个工程是否可以顺序进行的问题&#xff0c;拓扑排序把一个工程分成了若干…
阅读更多...
【计算机网络】（谢希仁第八版）第二章课后习题答案

【计算机网络】（谢希仁第八版）第二章课后习题答案

第二章 1.物理层要解决哪些问题&#xff1f;物理层的主要特点是什么&#xff1f; 答&#xff1a;物理层要解决的主要问题&#xff1a; &#xff08;1&#xff09;物理层要尽可能地屏蔽掉物理设备和传输媒体&#xff0c;通信手段的不同&#xff0c;使数据链路层感觉不到这些差…
阅读更多...
【马蹄集】—— 搜索专题

【马蹄集】—— 搜索专题

搜索专题 目录 MT2238 数的增殖MT2239 二维矩阵中的最长下降序列MT2240 传染病MT2241 循环空间BD202303 第五维度 MT2238 数的增殖 难度&#xff1a;黄金    时间限制&#xff1a;1秒    占用内存&#xff1a;128M 题目描述 给定一个数 n ( n < 1000 ) n (n<1000) n…
阅读更多...
Zabbix监控oxidized备份状态

Zabbix监控oxidized备份状态

Zabbix监控oxidized备份状态 原理是利用oxidized的hooks功能调用zabbix_sender推送数据给zabbix_server 参考 https://cloud.tencent.com/developer/article/1657025 https://github.com/clontarfx/zabbix-template-oxidized https://github.com/ytti/oxidized/blob/master/…
阅读更多...
Redis原理-IO模型和持久化

Redis原理-IO模型和持久化

高性能IO模型 为什么单线程Redis能那么快 一方面&#xff0c;Redis 的大部分操作在内存上完成&#xff0c;再加上它采用了高效的数据结构&#xff0c;例如哈希表和跳表&#xff0c;这是它实现高性能的一个重要原因。另一方面&#xff0c;就是 Redis 采用了多路复用机制&#…
阅读更多...
Arcmap制图绘制显著性区域

Arcmap制图绘制显著性区域

类似于下图这种&#xff0c;为分析结果添加显著性区域&#xff0c;该如何实现呢&#xff1f; 实现方式多种多样&#xff0c;比如&#xff1a; 1、代码。Python、R、Matlab都有实现方式&#xff0c;但是绘制一幅优美的地图&#xff0c;用代码绘制&#xff0c;需要添加很多控制语…
阅读更多...
广东木模板批发，建筑桥梁工程专用组合木模板

广东木模板批发，建筑桥梁工程专用组合木模板

作为广东地区的木模板批发商&#xff0c;我们致力于为建筑行业提供高品质的木模板产品。在众多产品中&#xff0c;我们特别推荐我们的建筑桥梁工程专用组合木模板&#xff0c;为桥梁工程提供卓越的支持和出色的性能。 我们的组合木模板是专为桥梁工程设计的&#xff0c;以满足对…
阅读更多...
苍穹外卖-day04-套餐管理

苍穹外卖-day04-套餐管理

1. 新增套餐 1.1 需求分析和设计 产品原型&#xff1a; 业务规则&#xff1a; 套餐名称唯一套餐必须属于某个分类套餐必须包含菜品名称、分类、价格、图片为必填项添加菜品窗口需要根据分类类型来展示菜品新增的套餐默认为停售状态 接口设计&#xff08;共涉及到4个接口&am…
阅读更多...
Redis(windows+Linux)安装及入门

Redis(windows+Linux)安装及入门

一、概述 Redis是什么&#xff1f; Redis(Remote Dictionary Server)&#xff0c;即远程字典服务 Redis&#xff08;Remote Dictionary Server )&#xff0c;即远程字典服务&#xff0c;是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数…
阅读更多...
嵌入式学习笔记（65）野指针问题

嵌入式学习笔记（65）野指针问题

3.3.1.神马是野指针&#xff1f;哪里来的&#xff1f;有什么危害&#xff1f; 我的理解&#xff1a;野指针就是定义了指针没有给指针赋值。 (1)野指针&#xff0c;就是指针指向的位置是不可知的&#xff08;随机的、不正确的、没有明确限制的&#xff09; (2)野指针很可能触…
阅读更多...
傅立叶级数的意义--傅立叶级数是怎么来的

傅立叶级数的意义--傅立叶级数是怎么来的

写这篇文章的起因是14年有道题目&#xff1a; 本题实质上是考察傅立叶级数的意义&#xff0c;因此要求扩大为不能只拘泥于傅里叶级数的计算相关问题&#xff0c;故作此篇。 一、课本上的内容 傅立叶级数&#xff1a; 设函数 f ( x ) f(x) f(x)是周期为 2 l 2l 2l的周期函数&…
阅读更多...
Redis队列Stream

Redis队列Stream

1 缘起 项目中处理文件的场景&#xff1a; 将文件处理请求放入队列&#xff0c; 一方面&#xff0c;缓解服务器文件处理压力&#xff1b; 另一方面&#xff0c;可以根据文件大小拆分到不同的队列&#xff0c;提高文件处理效率。 这是Java开发组Leader佳汇提出的文件处理方案&a…
阅读更多...
了解性能测试流程

了解性能测试流程

性能测试概念 我们经常看到的性能测试概念&#xff0c;有人或称之为性能策略&#xff0c;或称之为性能方法&#xff0c;或称之为性能场景分类&#xff0c;大概可以看到性能测试、负载测试、压力测试、强度测试等一堆专有名词的解释。 针对这些概念&#xff0c;我不知道你看到…
阅读更多...
【数据分析】上市公司半年报数据分析

【数据分析】上市公司半年报数据分析

前言 前文介绍过使用网络技术获取上市公司半年报数据的方法&#xff0c;本文将对获取到的数据进行简要的数据分析。 获取数据的代码介绍在下面的两篇文章中 【java爬虫】使用selenium获取某交易所公司半年报数据-CSDN博客 【java爬虫】公司半年报数据展示-CSDN博客 全量数…
阅读更多...
【uniapp】JavaScript基础学习-20231027

【uniapp】JavaScript基础学习-20231027

今天有找到一个比较好的网站 https://www.w3school.com.cn/js/index.asp 介绍也全面&#xff0c;内容也比较多。我觉得把最基本的语法看看&#xff0c;然后可以上手写代码了。其他的就是需要靠长期的学习和积累了。 基础语法的使用&#xff1a; 1、定义一个变量 2、对变量赋值 …
阅读更多...
拿到 phpMyAdmin 如何获取权限

拿到 phpMyAdmin 如何获取权限

文章目录 拿到 phpMyAdmin 如何获取权限1. outfile 写一句话木马2. general_log_file 写一句话木马 拿到 phpMyAdmin 如何获取权限 1. outfile 写一句话木马 尝试使用SQL注入写文件的方式&#xff0c;执行 outfile 语句写入一句话木马。 select "<?php eval($_REQU…
阅读更多...
10.29数算小复习（选择题细节，二路归并，结构体排序）

10.29数算小复习（选择题细节，二路归并，结构体排序）

排序、复杂度、细节&#xff08;选择题&#xff0c;判断题&#xff09; 对于一个已经排好序的序列&#xff0c;直接插入排序的复杂度是O(n)&#xff0c;而归并排序的复杂度是O(nlogn)。这时候归并排序就不比直接插入排序速度快了。 归并排序的最好、最坏、平均时间都是O(nlogn)…
阅读更多...
【Spring】Spring MVC请求响应

【Spring】Spring MVC请求响应

文章目录 1. 请求1.1 传递单个参数1.2 传递多个参数1.3 传递对象1.4 后端参数重命名1.5 传递数组1.6 传递集合1.7 传递JSON对象1.8 获取URL中参数1.9 上传⽂件1.10 获得Cookie1.11 获得Session1.12 获得Header 2. 响应2.1 返回静态界面2.2 返回数据2.3 返回HTML代码片段2.4 返回…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023