1. Mock.js
end of the separation among developing development process, often encounter before and after several awkward scene:
1. Boss, output interface documentation yet, I do not go a lot of work to do ah!
2. The back-end brother, the interface written yet, I want to test ah!
After separation of the front and rear ends, the front end of the urgent need for a mechanism that no longer need to rely on the back-end interface development, and today's protagonist mockjs can do it
Mock.js generator is an analog data, to help the front end debugging and development, the prototype of the front and rear ends and means for improving the efficiency of automated testing.
As we all know Mock.js because two important features swept the front end:
Data Types rich
support for generating random text, numbers, Boolean, date, email, links, images, colors and so on.
Ajax request interception
need to modify existing code, can intercept Ajax request, it returns the response data simulation.
More content, cloud Mockjs official view "http://mockjs.com/"
Note 1: easy-mock, a background data online simulation platform
Step 2. Mock.js using
2.1 mockjs mounted reliance
npm install mockjs -D # used only in the development environment
2.2 is introduced
in order to automatically only when not in use mock mock development environment, and packed into the production environment, we can do a configuration in env
(. 1) dev.env
module.exports = Merge (prodEnv, {
NODE_ENV: ' "Development" ',
the MOCK:' to true '
})
(2)prod.env
module.exports = {
NODE_ENV: '"production"',
MOCK: 'false'
}
(3) main.js
// development environment will be introduced mockjs
process.env.MOCK && The require ( '@ / mock')
2.3 to create directories and files
created mock src directory under the directory, the definition file The index.js mock master, and defines the intercept routing configuration file,
/src/mock/index.js
introduced into the common module and global settings mockjs
import Mock from ' mockjs' // introduced mockjs, npm installed
import action from 'address request @ / api / action' // package introduced
@ Global Settings: Set all ajax request timeout, the analog transmission network Processed
Mock.setup ({
// timeout: 400 @ 400s delay to the data request
timeout: 200 - 400 // request to delay 200-400s data
})
2.4 * .vue defined for each individual file xxx-mock.js
/src/mock/json/login-mock.js
Note 1: You can add custom data json
Note 2: further random data can be generated through the template mockjs
2.5 在index.js中导入xxx-mock.js，并添加拦截路由配置
import loginInfo from '@/mock/json/login-mock.js'
Mock.mock(url, "post", {...})
看页面打印结果
4. 后台首页AppMain.vue的创建
4.1 Container布局容器
4.2 TopNav
注1：使用组件之间通信，完成左侧菜单折叠
4.3 LeftAside
导入相应的vue和img
5. vue组件之间传递数据（总线）
根据vue组件之间传递数据实现element-ui的NavMenu菜单折叠、展开效果。
5.1 子组件往父组件传递数据(this.$emit)
TopNav -> Main
5.2 父组件往子组件传递数据(props)
Main -> LeftAside
效果图
