Vue首页导航和左侧菜单

一. mockjs

1. 什么是mockjs

• Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。
• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 拦截Ajax请求：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

2. 安装与配置

1. npm i mockjs -D

   • -D表示只在开发环境中使用

2. 引入mockjs

   • 为了只在开发环境使用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')
     

3. mockjs使用
   在src目录下新建mock文件夹
   在mock文件夹下新建json文件夹,index.js
   在json文件夹下新建login-mock.js

   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)
   
   

   login-mock.js

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

   

   

二. js实现组件路由

Login.vue

gotoRegister: function() {
	this.$router.push('/register');
}

index.js

{
  path: '/register',
  name: 'Register',
  component: Register
}

三. 组件通信(总线)

在main.js的Vue实例中添加一个Vue作为总线

new Vue({
  el: '#app',
  data() {
    BUS: new Vue({})
  }
  router,
  components: { App },
  template: '<App/>'
})

导入AppMain.vue,LeftNav,TopNav到components
index.js添加路由

{
  path: '/appMain',
  name: 'AppMain',
  component: AppMain,
  children: [
    {
        path: '/leftNav',
        name: 'LeftNav',
        component: LeftNav
      },
      {
        path: '/topNav',
        name: 'TopNav',
        component: TopNav
      }
  ]
}

TopNav.vue
将collapsed存入总线

<script>
  export default {
    data() {
      return {
        collapsed: false,
        imgshow: require('@/assets/img/show.png'),
        imgsq: require('@/assets/img/sq.png')
      }
    },
    methods: {
      doToggle: function() {
        this.collapsed = !this.collapsed;
        this.$root.BUS.$emit('doCollapsed', this.collapsed);
      },
      exit: function() {
        this.$router.push('/')
      }
    }
  }
</script>

LeftNav.vue
取出总线中的doCollapsed的值

<script>
  export default {
    data() {
      return {
        collapsed: false
      }
    },
    created() {
      this.$root.BUS.$on('doCollapsed', v => {
        // v 指的是TopNav传递过来的
        this.collapsed = v;
      })
    }
  }
</script>

AppMain.vue
导入组件, 根据总线中doCollapsed的值动态改变样式

<script>
	// 导入组件
	import TopNav from '@/components/TopNav.vue'
	import LeftNav from '@/components/LeftNav.vue'

	// 导出模块
	export default {
    components: {TopNav, LeftNav},
		data() {
		  return {
        asideClass: 'main-aside'
      }
		},
    created() {
      this.$root.BUS.$on('doCollapsed', v => {
        // v 指的是TopNav传递过来的
        this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
      })
    }
	};
</script>

四. 退出功能实现

TopNav.vue

exit: function() {
  this.$router.push('/')
}