1. Mock.js：是什么？

2. Mock.js使用步骤

3. 后台首页AppMain.vue的创建

1. Mock.js：是什么？

1，前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发

2，Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。

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

2. Mock.js使用步骤

2.1 安装mockjs依赖
npm install mockjs -D #只在开发环境使用

2.2 引入
为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置

(1)dev.env
module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   MOCK: 'true'
})

(2)prod.env
module.exports = {
   NODE_ENV: '"production"',
   MOCK: 'false'
}

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

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

2.3 目录和文件创建
1，在src目录下创建mock目录

2，创建mock目录，创建index.js，并在该文件中定义拦截路由配置

2.1 导入公共模块及mockjs全局设置
import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入封装的请求地址

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

注1：index.js文件的作用很显然,就是将分散的xxx-mock文件集合起来.后面再添加新的mock文件,都需要在这里引入

2.4 为每个*.vue定义单独的xxx-mock.js文件

1，在mock目录下创建json目录，创建一个login-mock.js

注1：可以添加自定义的json数据

注2：还可以通过mockjs的模板生成随机数据

2，在index.js中导入xxx-mock.js，并添加拦截路由配置

import loginInfo from '@/mock/json/login-mock.js'
Mock.mock(url, "post", {...})

注1：如何同时拦截get/post请求，并对get和post请求大小写不敏感呢？那就请使用正则表达式吧
Mock.mock(url, /post|get/i,{})

注4：还可以通过控制台将将请求和参数都打印出来，以便调试，使用debugger
Mock.mock(url, "get", (options) =>{
// 最佳实践，
debugger;
return Mock.mock(loginInfo);
});

3. 后台首页AppMain.vue的创建

LeftAside：左侧菜单

----》用的导入方式不用配路由

TopNav：首页导航

Main：主页面

1，只配置Main路由

2，设置登录成功跳转到主页面

3，写导出模块

4，设置折叠、展开效果

5,首页导航

imgsq:require('../assets/img/sq.png') ：添加图片

this.collapsed=!this.collapsed; ：图片折叠，展开变换

主键传值
子组件：TopNav，LeftAside
父组件：Main
子到父：TopNav -> Main this.$emit(自定义事件名，参数1....)
父到子：Main -> LeftAside props属性方式

6，主页折叠（子到父）

在TopNav页面中定义一个

在Main页面

7，主页展开（父到子）

1，在LeftAside页面进行传值

2，在LeftAside页面的组件进行绑值传值

3，在Main页面进行绑值

vue首页导航+左侧菜单相关推荐

SPA项目开发之首页导航+左侧菜单
一:mock.js模拟响应ajax请求 1.安装mockjs依赖 npm install mockjs -D #只在开发环境使用 2.配置开发环境及生产环境为了 ...
spa项目开发首页导航左侧菜单
前言:今天要分享的知识是spa项目完成首页导航以及左侧菜单码字不易,转载请说明!!! 目录目标效果图一.mock.js ①什么是Mock.js ②安装mockjs依赖 ③配置开发环境及生产环境 ...
SPA项目开发（首页导航左侧菜单）
目录一,mock.js模拟响应ajax请求 1.安装mock.js依赖 2.配置开发环境以及生产环境 3.添加默认接口数据 4.绑数据二,树形菜单收缩运用&前台主界面搭建三,退出功能一 ...
vue element html左侧菜单,vue生成element左侧菜单
首先来总结element ui 官方文档的左侧菜单结构,带有el-submenu为子级节点,el-menu-item表示没有下级.当然,菜单不能写死,因为菜单也许不止两级,所以我们需要递归来实现.根据 ...
vue08首页导航和左侧菜单+mockjs介绍以及使用+登陆注册跳转
14天阅读挑战赛努力是为了不平庸~ 目录 1. mockjs 1.1 mockjs介绍 1.2 mockjs使用步骤 1.2.1 安装mockjs依赖 1.2.2 在项目中引入mockjs 1.2. ...
SPA项目首页导航以及左侧菜单
SPA项目首页导航以及左侧菜单 1.mock.js模拟响应ajax请求 1.1Mock.js是一个模拟数据的生成器,用来帮助前端调试开发.进行前后端的原型分离以及用来提高自动化测试效率. 安装mock ...
Vue开发实例（11）之el-menu实现左侧菜单导航
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
Vue开发实例（12）之实现动态左侧菜单导航
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
html 左侧树形菜单,vue左侧菜单,树形图递归实现代码
学习vue有一段时间了,最近使用vue做了一套后台管理系统,左侧菜单需求是这样的,可以多层,数据由后台传递.也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享. 效果图如下所示: ...

vue首页导航+左侧菜单

1. Mock.js：是什么？

2. Mock.js使用步骤

3. 后台首页AppMain.vue的创建

vue首页导航+左侧菜单相关推荐

最新文章

热门文章