首页导航+左侧菜单+mock.js使用
mock.js简介
mock.js官网跳转mock.js官网了解
1.前后端分离之后,前端迫切需要一种机制,不再需要依赖后端接口开发,而今天的主角mockjs就可以做到这一点。
2.Mock.js是一个模拟数据的生成器,用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。
3.不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。
mock.js的使用
2.1 安装mock.js依赖
npm install mockjs -D 只在开发环境使用
2.2 引入
为了只在开发环境使用mock,而打包到生产环境时自动不使用mock,我们可以在env中做一个配置(使用开发环境)
开发环境
生产环境
2.3 找到入口main.js,使用开发环境需要引入
process.env.MOCK && require('@/mock')
2.4在src目录下创建mock目录,定义mock主文件index.js,并在该文件中定义拦截路由配置,
2.5在mock下的index.js引入安装的mock.js和请求地址
2.6设置所有ajax请求的超时时间
登录跳转主界面示例
3.通过mock.js拦截到引入的请求地址
api地址
3.1mock.js拦截到的api请求地址,登录请求
3.1使用this.$router.push({})实现路由跳转
对象:
this.$router.push({
path:'AppMain'
})
4.需要使用到的组件一一挂载到路由以及给到相应的path路径
后台首页AppMain.vue的创建和子组件左侧菜单+首页导航
4.1AppMain.vue作为父组件,需要引入其他的子组件
// 导入组件
import TopNav from '@/components/TopNav.vue'
import LeftNav from '@/components/LeftNav.vue'
4.2 导入主页样式模块
export default {
data(){
return{
asideClass:'main-aside'
}
},
components:{
TopNav,LeftNav
},
created() {
this.$root.Bus.$on('collapsed-side',(v)=>{
this.asideClass = v ? 'main-aside-collapsed': 'main-aside';
})
}
};
4.3为了能让两个子组件使用数据总线,在非父子的组件之间通信,完成左侧菜单折叠。
4.4我们创建一个vue实例嵌套到根vue下
4.5在首页导航设置触发事件
控制样式事件名+本身的参数
this.$root.Bus.$emit("collapsed-side", this.collapsed);
4.6在左侧菜单设置监听事件
created() {
this.$root.Bus.$on('collapsed-side',(v)=>{
this.collapsed = v;
})
}
4.7 带上主页的样式触发改变
created() {
this.$root.Bus.$on('collapsed-side',(v)=>{
this.asideClass = v ? 'main-aside-collapsed': 'main-aside';
})
}
导航栏退出跳转事件
methods:{
exit(){
this.$router.push({
path:'/Login'
})
}
}