昆明建网站要多少钱,四川企业网站开发,做网站工作,论坛网站怎么做跳转目录
前言
一. Mock.js
1.1 什么是Mock.js
1.2 Mockjs的安装与配置
1.2.1 安装Mock.js
1.2.2 引入Mock.js 1.3 Mockjs的使用
1.3.1 定义数据测试文件
1.3.2 mock拦截ajax请求 二. 首页导航以及左侧菜单的搭建
2.1 什么是总线
2.2 创建三个vue组件
首页AppMain.vue组…目录
前言
一. Mock.js
1.1 什么是Mock.js
1.2 Mockjs的安装与配置
1.2.1 安装Mock.js
1.2.2 引入Mock.js 1.3 Mockjs的使用
1.3.1 定义数据测试文件
1.3.2 mock拦截ajax请求 二. 首页导航以及左侧菜单的搭建
2.1 什么是总线
2.2 创建三个vue组件
首页AppMain.vue组件
左侧菜单LeftNav.vue组件
顶部导航TopNav.vue组件 2.3 配置路由index.js
2.4 配置总线main.js
展示效果 前言
上一篇博客分享了登录界面的实现这篇继续完成首页导航以及左侧菜单的实现。
一. Mock.js
1.1 什么是Mock.js
Mock.js是一个用于前端开发的模拟数据生成工具。它的作用是模拟后端接口返回的数据以便在前端开发过程中进行接口调试和页面展示。通过使用Mock.js开发人员可以在没有真实后端接口的情况下快速生成模拟数据模拟各种接口返回的情况从而提高开发效率。
Mock.js主要作用于前端开发中的接口调试和数据展示阶段。在前端开发过程中通常需要与后端进行数据交互而后端接口可能尚未开发完成或者无法直接访问。这时候可以使用Mock.js来模拟后端接口返回的数据以便进行前端页面的开发和调试。通过定义模拟数据的规则Mock.js可以生成符合要求的模拟数据使得前端开发人员能够独立进行开发工作而不受后端接口的限制。
Mock.js因为两个重要的特性风靡前端: 数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 拦截Ajax请求不需要修改既有代码就可以拦截Ajax请求返回模拟的响应数据。 Mock.js官方地址http://mockjs.com/ 1.2 Mockjs的安装与配置
1.2.1 安装Mock.js npm i mockjs -D -D表示只在开发环境中使用 安装成功后就可以在SPA项目中的package.json中查看到。 1.2.2 引入Mock.js
为了只在开发环境使用mock而打包到生产环境时自动不使用mock我们需要在config目录中的dev.env.js和prod.env.js做一个配置如下
dev.env.js开发环境 module.exports merge(prodEnv, { NODE_ENV: development, MOCK: true }) prod.env.js生产环境 module.exports { NODE_ENV: production, MOCK: false } main.js //开发环境下才会引入mockjs process.env.MOCK require(/mock) 1.3 Mockjs的使用
1.3.1 定义数据测试文件
为每个*.vue定义单独的xxx-mock.js文件并在其中添加自定义的json数据还可以通过mockjs的模块生成随机数据信息动态测试ajax请求效果。
创建src/mock/json目录定义登录测试数据文件login-mock.js
// const loginInfo {
// code: -1,
// message: 密码错误
// }//使用mockjs的模板生成随机数据
const loginInfo {code|-1-0: 0,message|3-10: msg
}
export default loginInfo;1.3.2 mock拦截ajax请求
在src/mock目录下创建index.js定义拦截路由配置
import Mock from mockjs //引入mockjsnpm已安装
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)这里的action请求地址以及 post/get请求在上一篇博客中有源码http://t.csdn.cn/Ycyjv 配置完成后进行测试效果如下 二. 首页导航以及左侧菜单的搭建
2.1 什么是总线
总线Bus是一种在组件之间进行通信的机制。在前端开发中总线通常指的是一种用于组件之间传递消息和数据的中央事件总线或状态管理器。
总线可以作为一个中心化的通信枢纽允许不同组件之间进行解耦的通信。通过总线一个组件可以向总线发布emit一个事件或数据而其他组件可以订阅subscribe这个事件或数据并在事件触发时做出相应的处理。
总线的使用可以简化组件之间的通信特别是在组件层级较深或组件之间没有直接父子关系的情况下。通过总线组件可以在不直接引用或传递数据给其他组件的情况下进行通信从而提高代码的可维护性和灵活性。
2.2 创建三个vue组件
根据vue组件之间传递数据实现element-ui的NavMenu菜单折叠、展开效果。 子组件往父组件传递数据(this.$emit)TopNav - AppMain 父组件往子组件传递数据(props)AppMain - LeftNav
首页AppMain.vue组件
templateel-container classmain-containerel-aside v-bind:classasideClassLeftNav/LeftNav/el-asideel-containerel-header classmain-headerTopNav/TopNav/el-headerel-main classmain-centerMain/el-main/el-container/el-container
/templatescript// 导入组件import TopNav from /components/TopNav.vueimport LeftNav from /components/LeftNav.vue// 导出模块export default {components: {TopNav,LeftNav},data() {return {asideClass: main-aside}},created() {this.$root.Bus.$on(aaa, 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左侧菜单LeftNav.vue组件
templateel-menu default-active2 classel-menu-vertical-demo background-color#334157text-color#fff active-text-color#ffd04b :collapsecollapsed!-- el-menu default-active2 :collapsecollapsed collapse-transition router :default-active$route.path unique-opened classel-menu-vertical-demo background-color#334157 text-color#fff active-text-color#ffd04b --div classlogoboximg classlogoimg src../assets/img/logo.png alt/divel-submenu index1template slottitlei classel-icon-location/ispan导航一/span/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项1/el-menu-item/el-submenu/el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle导航四/span/el-menu-item/el-menu
/template
scriptexport default {data(){return{collapsed:false}},created() {this.$root.Bus.$on(aaa,v{this.collapsedv})}}
/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顶部导航TopNav.vue组件
template!-- el-menu :default-activeactiveIndex2 classel-menu-demo modehorizontal selecthandleSelect background-color#545c64text-color#fff active-text-color#ffd04bel-menu-item index1处理中心/el-menu-itemel-submenu index2template slottitle我的工作台/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-itemel-menu-item index2-3选项3/el-menu-itemel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项1/el-menu-itemel-menu-item index2-4-2选项2/el-menu-itemel-menu-item index2-4-3选项3/el-menu-item/el-submenu/el-submenuel-menu-item index3 disabled消息中心/el-menu-itemel-menu-item index4a hrefhttps://www.ele.me target_blank订单管理/a/el-menu-item/el-menu --el-menu classel-menu-demo modehorizontal background-color#334157 text-color#fff active-text-color#fffel-button classbuttonimgimg classshowimg :srccollapsed?imgshow:imgsq clickdoToggle()/el-buttonel-submenu index2 classsubmenutemplate slottitle超级管理员/templateel-menu-item index2-1设置/el-menu-itemel-menu-item index2-2个人中心/el-menu-itemel-menu-item clickexit() index2-3退出/el-menu-item/el-submenu/el-menu
/templatescriptexport 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(aaa,this.collapsed);},exit(){this.$router.push(/);}}}
/scriptstyle 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;}
/style2.3 配置路由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 Register from /views/RegisterVue.use(Router)export default new Router({routes: [{path: /,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.4 配置总线main.js
new Vue({el: #app,router,data(){return {Bus:new Vue()}},components: { App },template: App/
})
展示效果 这里我没有与后台数据进行交互仅仅只是静态页面的展示
