目录
?
一、Mock.js模拟响应ajax请求
? ? ? ? ?1、为什么会使用Mock.js来模拟响应ajax请求？
? ? ? ? ? ? ? ?在当今时代，随着计算机技术的发展，公司收益也会日益增加，同时要求写项目的速度就会越来越快，这时，一个公司的前端工程师和后端工程师就会分开合作，前端工程师就不会因为等后端工程师的功能数据而停止项目的进程。
? ? ? ? ?2、使用Mock.js模拟响应ajax请求的步骤：
? ? ? ? ? ? ? ?2.1安装Mock.js的配置：?
? ? ? ? ? ? ? ?2.2配置开发环境及生产环境
开发环境：
(1)dev.env
| module.exports = merge(prodEnv, { NODE_ENV: '"development"', ?? MOCK: 'true' ??????}) |
生产环境：
(2)prod.env
| module.exports = { NODE_ENV: '"production"', MOCK: 'false' ??????} |
? ? ? ? ? ? ? ?2.3main.js:
? ? ? ? ? ? ? ?2.4导入mock文件夹：
? ? ? ? ?3、解释mock文件夹中的json文件和index.js:
index.js:返回的json格式与对应的接口请求地址进行绑定
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)
?
json文件中login.mock.js:定义接口调用返回的json格式，这里一共有十六种结果，0对应八种，1对应八种。
// const loginInfo = {
// ?? ?code: -1,
// ?? ?message: '密码错误'
// }//使用mockjs的模板生成随机数据
const loginInfo = {
?? ?'code|0-1': 0,
?? ?'msg|3-10': 'msg'
}
export default loginInfo;
?
?? ? ? ? ?4、显示效果：这就成功的模拟响应ajax请求(不用等待后台数据，自己创造数据)
?? ? ? ? ?5、在模拟的过程中出现的错误：
?原因：是没有找到src下的mock文件夹，导入mock文件夹即可
解决办法：导入mock文件夹
?
?
?
?
二、前台主界面的搭建
? ? ? ? ? 1、整个界面效果：
其中有三个界面，一个是Appmain.vue，另一个是Appmain.vue中包含着TopNav.vue和LeftNav.vue，当点击TopNav.vue中的箭头收缩时，就会带动LeftNav.vue也会收缩，同时向里箭头就会变成向外箭头。
? ? ? ? ? 2、开始布局：
? ? ? ? ? ? ? ? 2.1首先要将几个组件（Appmain.vue，TopNav.vue，LeftNav.vue）导入到内部组件中，
? ? ? ? ? ? ? ? 2.2将各个组件的导出依赖配置好，以及导出依赖
?
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Login',
component: Login
},
{
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把折叠的属性在各个组件中定义好，其中有两个属性要特别注意：
main-aside-collapsed（折叠）
main-aside（不折叠）
?Appmain.vue:首先当我进入到主界面时，其样式是默认的
?
export default {
data() {
return {
asideClass: 'main-aside'
}
},?TopNav.vue:在这里还要配置图片样式。
?LeftNav.vue:?
export default {
data(){
return {
collapsed:false
}
},?写完以上代码，整个页面效果就出来了：?
?
?
?
?
?
三、退出功能
? ? ? ? ? 退出功能很简单，就是在TopNav.vue中写一个exit方法就行了
?
exit() {//退出功能
this.$router.push({
path: '/Login'
})运行效果：当我点击退出时，就会返回到登录界面。
?
?
?
?
?
四、左侧树收缩功能（vue总线的概念）
? ? ? ? ? 1、vue总线的由来（为什么会出现总线？）
? ? ? ? ? ?要解释这个问题还是要返回到之前布局前端界面时的界面图（如下），当我要同时将三个组件（TopNav.vue、LeftNav.vue、中间的内容组件）的步伐一致（当我点击收缩按钮时，同时收缩，当我点击展示按钮时，同时展示），这里面是要相互进行传递数据的，以TopNav.vue为中心，当我点击收缩按钮时，我就要先将数据传递到AppMain.vue组件，然后再由AppMain.vue（父组件）将数据传递给LeftNav.vue组件，TopNav.vue和LeftNav.vue没有直接的关系（兄弟平级关系），随之总线（下图黄色的线）就诞生了。总线可以让TopNav.vue直接将数据传入进去，然后LeftNav.vue直接就可以在总线取出数据。就可以节约时间。
? ? ? ? ? 2、实现左侧树收缩功能：
? ? ? ? ? ? ? ? 1.步骤：
? ? ? ? ? ? ? 1、先在main.js中定义一个总线组件（名叫Bus）
? ? ? ? ? ? ? 2、之后到TopNav.vue组件中写好doToggle方法，并且注册一个触发事件，
? ? ? ? ? ? ? 3、到LeftNav.vue组件中注册一个监听事件
? ? ? ? ? ? ? 4、最后到AppMain.vue组件中也定义一个监听事件??
? ? ? ? ? ? ? 1、先在main.js中定义一个总线组件（名叫Bus）??
new Vue({
el: '#app',
data(){
return{
Bus:new Vue({//定义总线
})
}
},? ? ? ? ? ? ? 2、之后到TopNav.vue组件中写好doToggle方法，并且注册一个触发事件，?
?
methods: {
doToggle() {
this.collapsed = !this.collapsed;
this.$root.Bus.$emit("collapsed-aside", this.collapsed);
},? ? ? ? ? ? ? 3、到LeftNav.vue组件中注册一个监听事件?
created(){
this.$root.Bus.$on("collapsed-aside",(v)=>{
this.collapsed=v;
})? ? ? ? ? ? ? 4、最后到AppMain.vue组件中也定义一个监听事件??
?
created() {
this.$root.Bus.$on("collapsed-aside", (v) => {
this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
})? ? ? ? ? 3、总线的实现思路：
? ? ? ? ??3.1在main.js中生成一条总线，在最开始的时候，我的图片是收起的一个图片（提醒顾客点击此处是这折叠），而最开始collapsed是为false就是不折叠，图片样式就为收起的样式
?<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
collapsed为true就显示为展示的样式，为false就为收起的样式
?data() {
? ? ? return {
? ? ? ? collapsed: false,
? ? ? ? imgshow: require('@/assets/img/show.png'),//这里是样式要被显示的图片
? ? ? ? imgsq: require('@/assets/img/sq.png')
? ? ? }
? ? },
? ? ? ? ? 3.2当我点击收缩内容的图片时，?就会触发TopNav中的doToggle点击事件，之前collapsed是为false的，点击之后就变为true，此时内容就已经折叠，所以样式也会变为展示的图片
methods: {
doToggle() {
this.collapsed = !this.collapsed;//首先是没有折叠， false，点击之后折叠变为ture，
this.$root.Bus.$emit("collapsed-aside", this.collapsed);这个collapsed就为true
},? ? ? ? ? 3.3这时就已经将数据传递到总线上去了，LeftNav.vue就可以到总线上去拿数据了，这里使用到了箭头函数，防止this指针变量的污染，此时collapsed为true内容收缩。?
created(){
this.$root.Bus.$on("collapsed-aside",(v)=>{
this.collapsed=v;
})? ? ? ? ? 3.4之后就回到AppMain.vue组件中，整个局面都要随之改变，大家看下面红色字体，我拿到手的collapsed是为true的，所以根据三元运算符的算法，整个内容就会折叠。
?? ? created() {
? ? ? this.$root.Bus.$on("collapsed-aside", (v) => {
? ? ? ? this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
? ? ? })
?所以总线的思路就实现了
今天的知识就分享到这了，希望能够对你有帮助！