您现在的位置是：网站首页> 编程资料编程资料

Vue mock.js模拟数据实现首页导航与左侧菜单功能_vue.js_

2023-05-24 274人已围观

简介 Vue mock.js模拟数据实现首页导航与左侧菜单功能_vue.js_

一、mock.js的使用

mock.js的使用步骤

① 下载依赖 npm install mock -d（开发环境使用）

② 引入到main.js中使用

③ 添加默认接口数据

④ 绑定接口数据

1、安装mock依赖

npm install mock -D //只在开发环境使用

在项目的根目录执行这条命令：

下载完成后，项目文件package.json中的devDependencies就会加上一个mock依赖；

2、添加开发环境及生产环境的配置

我们在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: 'true' })

prod.env.js

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

3、引入到main.js

//开发环境下才会引入mockjs //process.env.MOCK 为 false，那么require('@/mock')是否还执行？ //答案是不执行 (process.env.MOCK在生产环境下为false) process.env.MOCK && require('@/mock')

第三步和第四步就需要建立一个这样的目录结构：

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

json中的js文件就是添加默认接口数据

而index.js就是对应绑定接口数据

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

/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请求到数据 }) //引入登录的测试数据，并添加至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)

最后我们就可以运行一下前端项目，不运行后台项目，看看上一篇文章的功能还是否可以使用。

这样随机生成的数据就让登录有时候成功，有时候失败，但是我们的功能已经成功实现，没有运行后台代码的时候也能造数据进行前端测试！

二、前台主页面的搭建

2.1 准备相关组件

Leaf这里直接把准备好的三个组件放上，需要的朋友可以自行拿走，放到项目的components中；

AppMain.vue

LeftNav.vue

TopNav.vue

2.2 配置路由与组件的关系

然后我们就把这些相关组件与路由的关系配置到router文件夹下的index.js中；

router/index.js

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import AppMain from '@/components/AppMain' import LeftNav from '@/components/LeftNav' import TopNav from '@/components/TopNav' import Login from '@/views/Login' import Reg from '@/views/Reg' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/Login', name: 'Login', component: Login }, { path: '/Reg', name: 'Reg', component: Reg }, { path: '/AppMain', name: 'AppMain', component: AppMain, children:[ { path: '/LeftNav', name: 'LeftNav', component: LeftNav }, { path: '/TopNav', name: 'TopNav', component: TopNav } ] } ] })

2.3 导入图片

在src目录下的assets目录创建img目录，导入页面所需图片；

2.4 测试

我们重新运行项目看看；

三、左侧菜单的收缩功能

3.1 定义一个总线

我们在main.js中定义一个变量，为总线；

main.js

new Vue({ el: '#app', router, data() { return { //在Vue根实例中定一个变量，这个变量就是vue实例，它就是总线 //props this.$emit Bus:new Vue({}) } }, components: { App }, template: '' })

3.2 改变收缩图标的样式

1、我们为图标添加一个点击方法：

methods: { doToggle(){ this.collapsed = !this.collapsed //将 this.collapsed 放到总线上 this.$root.Bus.$emit("collapsed-side",this.collapsed); } }

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：Nodejs excel(.xlsx) 文件的读写方式_node.js_

下一篇：js 如何删除对象里的某个属性_javascript技巧_