现在中国空间站有几个人,茂名h5网站建设,在线推广是网站推广,平面设计广告设计属于什么专业一.Mock.js
1、什么是Mock.js Mock.js是一个用于生成模拟数据的JavaScript库。它能够模拟后端API接口#xff0c;用于前端开发时进行接口调试和测试提高自动化测试效率。使用Mock.js可以快速创建虚拟的数据#xff0c;并且可以设置数据的类型、格式和规则#xff0c;从而模…一.Mock.js
1、什么是Mock.js Mock.js是一个用于生成模拟数据的JavaScript库。它能够模拟后端API接口用于前端开发时进行接口调试和测试提高自动化测试效率。使用Mock.js可以快速创建虚拟的数据并且可以设置数据的类型、格式和规则从而模拟真实的数据响应。Mock.js支持生成随机数据、拦截Ajax请求以返回模拟数据、支持RESTful API风格等功能能够提高前端开发效率并且减少对后端接口的依赖。 数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 拦截Ajax请求不需要修改既有代码就可以拦截Ajax请求返回模拟的响应数据。 更多内容请查看Mock.js 官网 2、安装配置
1、安装 在你的项目的路径CMD窗口下载Mock.js。 npm i mockjs -D -D表示只在开发环境中使用 在我们的package.json里面可以看到我们下载的mock.js 2、引入 为了只在开发环境使用mock而打包到生产环境时自动不使用mock我们可以在config目录中的dev.env.js和prod.env.js做一个配置。 dev.env.js
use strict
const merge require(webpack-merge)
const prodEnv require(./prod.env)module.exports merge(prodEnv, {NODE_ENV: development,MOCK: true
})
prod.env.js
use strict
module.exports {NODE_ENV: production,MOCK: false
}
最后我们在main.js里面导入
// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from vue
//开发环境下才会引入mockjs
process.env.MOCK require(/mock)
// 新添加1
import ElementUI from element-ui
// 新添加2避免后期打包样式不同要放在import App from ./App;之前
import element-ui/lib/theme-chalk/index.cssimport App from ./App
import router from ./router// 新添加3----实例进行一个挂载
Vue.use(ElementUI)
Vue.config.productionTip falseimport axios from /api/http
import VueAxios from vue-axiosVue.use(VueAxios, axios)/* eslint-disable no-new */
new Vue({el: #app,router,components: {App},template: App/
})
2、Mock.js的使用
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; 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)3、模拟测试 使用登录页面模拟测试 templatediv classLoginel-form classlogin-containerh1 classtitle用户登录/h1el-form-item labelel-input typetext v-modelusername placeholder登录账号 autocompleteoff/el-input/el-form-itemel-form-item labelel-input typepassword v-modelpassword placeholder登录密码 autocompleteoff/el-input/el-form-itemel-form-itemel-button typeprimary stylewidth:100%; clickdoSubmit()提交/el-button/el-form-itemel-row styletext-align: center;margin-top:-10pxel-link typeprimary忘记密码/el-linkel-link typeprimary clickgotoRegister()用户注册/el-link/el-row/el-form/div
/template
scriptexport default {name: Login,data() {return {username: ,password: }},methods: {gotoRegister() {this.$router.push(/Register);},//提交事件doSubmit() {//设置登录访问地址let url this.axios.urls.SYSTEM_USER_DOLOGIN;// 使用json格式进行传值let params {username: this.username,password: this.password}this.axios.post(url, params).then(r {console.log(r);this.$message({message: r.data.message,type: r.data.code 0?success: error});}).catch(e {});}}
}
/scriptstyle scoped
.login-wrap {box-sizing: border-box;width: 100%;height: 100%;padding-top: 10%;background-image: url(https://pic4.zhimg.com/v2-c5880f5a6d44766feb085c3ae94899c7_r.jpg);
//background-image: url();background-repeat: no-repeat;background-position: center right;background-size: 100%;
}.login-container {border-radius: 10px;margin: 0px auto;width: 350px;padding: 30px 35px 15px 35px;background: #fff;border: 1px solid #eaeaea;text-align: left;box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}.title {margin: 0px auto 40px auto;text-align: center;color: #505458;
}
/style 二、首页导航、左侧菜单 1、页面搭建 在我们的components的公共文件夹里面写我们的公共页面。 AppMain.vue布局容器组件 LeftAside.vue左侧菜单组件 TopNav.vue首页导航组件 根据vue组件之间传递数据实现element-ui的NavMenu菜单折叠、展开效果。 子组件往父组件传递数据(this.$emit)TopNav - AppMain 父组件往子组件传递数据(props)AppMain - LeftAside 1.1、图标定义 图标可以根据自己的风格来我这里也提供在下面了自己也可以进行更改。 1.2、AppMain.vue
templateel-container classmain-containerel-aside v-bind:classasideClassLeftNav/LeftNav/el-asideel-containerel-header classmain-headerTopNav/TopNav/el-headerel-main classmain-center这是一个非常帅的主页/el-main/el-container/el-container
/templatescript
// 导入组件
import TopNav from /components/TopNav.vue
import LeftNav from /components/LeftNav.vue// 导出模块
export default {};
/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 1.3、LeftNav.vue
templateel-menu default-active2 classel-menu-vertical-demo background-color#334157text-color#fff active-text-color#ffd04b :collapsecollapseddiv 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
script
export default {}
/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
1.4、TopNav.vue
templateel-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
/templatescript
export default {data() {return {collapsed: false,imgshow: require(/assets/img/show.png),imgsq: require(/assets/img/sq.png)}}, methods: {}
}
/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;
}
/style 1.5、index.js 在index,js里面进行路由配置 import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorld
import Login from /views/Login
import Register from /views/Register
import AppMain from /components/AppMain
import LeftNav from /components/LeftNav
import TopNav from /components/TopNavVue.use(Router)export default new Router({routes: [{path: /Login,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、功能实现 2.1、AppMain.vue
// 导出模块
export default {//把顶部导航和左边导航进行绑定在maincomponents: {TopNav, LeftNav},data() {return {asideClass: main-aside}},created() {this.$root.Bus.$on(sjm, v {this.asideClass v ? main-aside-collapsed : main-aside;});}
}; 2.2、LeftNav.vue export default {data() {return {collapsed: false}},created() {this.$root.Bus.$on(sjm, v {this.collapsed v;});}
} 2.3、TopNav.vue export 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(sjm, this.collapsed)},exit() {this.$router.push(/Login);}}
} 2.4、main.js data() {return {Bus: new Vue()}}
3、完整代码
3.1、AppMain.vue
templateel-container classmain-containerel-aside v-bind:classasideClassLeftNav/LeftNav/el-asideel-containerel-header classmain-headerTopNav/TopNav/el-headerel-main classmain-center这是一个非常帅的主页/el-main/el-container/el-container
/templatescript
// 导入组件
import TopNav from /components/TopNav.vue
import LeftNav from /components/LeftNav.vue// 导出模块
export default {//把顶部导航和左边导航进行绑定在maincomponents: {TopNav, LeftNav},data() {return {asideClass: main-aside}},created() {this.$root.Bus.$on(sjm, 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 3.2、LeftNav.vue
templateel-menu default-active2 classel-menu-vertical-demo background-color#334157text-color#fff active-text-color#ffd04b :collapsecollapseddiv 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
script
export default {data() {return {collapsed: false}},created() {this.$root.Bus.$on(sjm, v {this.collapsed v;});}
}
/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
3.3、TopNav.vue
templateel-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
/templatescript
export 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(sjm, this.collapsed)},exit() {this.$router.push(/Login);}}
}
/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;
}
/style
3.4、main.js
// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from vue
//开发环境下才会引入mockjs
process.env.MOCK require(/mock)
// 新添加1
import ElementUI from element-ui
// 新添加2避免后期打包样式不同要放在import App from ./App;之前
import element-ui/lib/theme-chalk/index.cssimport App from ./App
import router from ./router// 新添加3----实例进行一个挂载
Vue.use(ElementUI)
Vue.config.productionTip falseimport axios from /api/http
import VueAxios from vue-axiosVue.use(VueAxios, axios)/* eslint-disable no-new */
new Vue({el: #app,router,//定义变量data() {return {Bus: new Vue()}},components: {App},template: App/
})
