网站建设怎么提需求,移动开发网站建设,wordpress 上传中文文件名,透明图片在线制作目录 一.Mock
1.1.什么是Mock.js 1.2.特点
1.3.安装与配置
1.3.1. 安装mock.js
1.3.2.引入mock.js
1.4.mockjs使用
1.4.1.定义测试数据文件
1.4.2.mock拦截Ajax请求
1.4.3.界面代码优化
二.总线
2.1.是什么
2.2.前期准备
2.3.配置组件与路由关系
2.3.1. 配置组件 …目录 一.Mock
1.1.什么是Mock.js 1.2.特点
1.3.安装与配置
1.3.1. 安装mock.js
1.3.2.引入mock.js
1.4.mockjs使用
1.4.1.定义测试数据文件
1.4.2.mock拦截Ajax请求
1.4.3.界面代码优化
二.总线
2.1.是什么
2.2.前期准备
2.3.配置组件与路由关系
2.3.1. 配置组件
2.3.2.配置路由关系
展示效果: 好啦今天到这了希望能帮到你 一.Mock
1.1.什么是Mock.js Mock.js是一个模拟数据生成器用于生成随机数据、模拟请求响应等。它可以帮助前端开发人员在开发过程中模拟接口数据减少对后端接口的依赖。Mock.js提供了丰富的数据模板语法可以生成各种类型的随机数据如数字、字符串、日期、布尔值、数组、对象等。同时Mock.js还提供了拦截Ajax请求的功能可以直接拦截请求并返回模拟数据方便进行接口开发和测试。Mock.js在前端开发中被广泛应用可以提高开发效率方便进行调试和功能开发。 1.2.特点 Mock.js的主要特点包括以下几个方面 随机数据生成Mock.js提供了丰富的数据模板语法可以生成各种类型的随机数据包括数字、字符串、日期、布尔值、数组、对象等。这使得开发人员可以很方便地生成需要的测试数据避免手动编写大量的假数据。 数据模板定义Mock.js支持使用数据模板定义数据结构通过预先定义的模板规则可以生成符合预期的数据。模板定义灵活且易于修改可以根据需求进行定制。 响应拦截与模拟Mock.js可以拦截Ajax请求模拟后端接口的响应数据从而实现前端与后端的分离开发。开发人员无需真实的后端接口即可进行功能开发和测试减少了开发的依赖和耦合。 数据延迟与动态数据Mock.js支持对模拟数据添加延迟和动态数据的配置。延迟可以模拟真实接口的网络延迟以验证前端在异步请求中的处理能力。动态数据可以根据实际情况生成变化的数据使模拟数据更加真实。 支持跨域请求Mock.js支持跨域请求的拦截和模拟方便前端开发人员在本地进行接口联调和测试无需关注跨域限制。 总之Mock.js提供了一套简单、高效、实用的模拟数据生成方案使前端开发人员能够更加轻松地进行接口开发和测试提高开发效率和质量。 1.3.安装与配置
1.3.1. 安装mock.js WinR输入cmd打开命令提示符执行以下命令进行mock.js安装如下 npm i mockjs -D 注-D表示只在开发环境中使用。 package.json中有以下代码即安装成功如下 安装完成之后我们需要引入mock.js。 1.3.2.引入mock.js 为了只在开发环境使用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 //开发环境下才会引入mockjs
process.env.MOCK require(/mock) 1.4.mockjs使用
1.4.1.定义测试数据文件
在src目录下新建一个mock包在mock包下定义测试数据文件目录如下 login-mock.js
// const loginInfo {
// code: -1,
// message: 密码错误
// }//使用mockjs的模板生成随机数据
const loginInfo {code|-1-0: 0,message|3-10: msg
}
export default loginInfo;
1.4.2.mock拦截Ajax请求
在src/mock目录下创建index.js定义拦截路由配置如下
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)1.4.3.界面代码优化
由于此次展示无需用到后端代码所以博主就将昨天前后端交互用到的后端代码给备注了换上了正常前后端分离开发所用的mock.js代码如下
Login.vue
templatediv idapptemplatediv classlogin-wrapel-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/div
/templatescriptimport axios from axiosimport qs from qs
export default {name: Login,data () {return {username:,password:}},methods:{gotoRegister(){// router-like相当于a// location.href 相当于this.$router.pushthis.$router.push(/Register);},doSubmit(){let url this.axios.urls.SYSTEM_USER_DOLOGIN;let params {username:this.username,password:this.password}// $.ajax then相当于success// axios.get(url,{params:params}).then(r{// console.log(r);// if(r.data.success){// this.$message({// message:r.data.msg,// type: success// });// }else{// this.$message.error(r.data.msg);// }// }).cath(e{// })this.axios.post(url,params).then(r {console.log(r);// //如果携带的参数数据跟后端数据对应正确说明登入成功提示// if (r.data.success) {// this.$message({// showClose: true,// message: r.data.msg,// type: success// });// } else {// //如果携带的参数数据跟后端数据对应错误说明登入失败提示// this.$message.error(r.data.msg);// }this.$message({message: r.data.message,type: r.data.code 0 ?success : error});this.$router.push(/AppMain);}).catch(e {console.log(e);});}}
}
/scriptstyle scoped.login-wrap {box-sizing: border-box;width: 100%;height: 100%;padding-top: 10%;background-image: url(data:image/svgxml;base64,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AgPHBhdGggZD0iTTI5LjExNzY0NzEsMzkuOTMyOTI2OCBMMjkuMTE3NjQ3MSwxOC4zNDc1NjEgQzIzLjE2MTYzNTEsMTguMzQ3NTYxIDE4LjMzMzMzMzMsMjMuMTc5NjA5NyAxOC4zMzMzMzMzLDI5LjE0MDI0MzkgQzE4LjMzMzMzMzMsMzUuMTAwODc4MSAyMy4xNjE2MzUxLDM5LjkzMjkyNjggMjkuMTE3NjQ3MSwzOS45MzI5MjY4IFoiIGlkPSJPdmFsLTIiIGZpbGw9IiNCQUNBRDkiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtOSIgb3BhY2l0eT0iMC40NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTcyLjAwMDAwMCwgMTMxLjAwMDAwMCkiIGZpbGw9IiNFNkExQTYiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yLUNvcHktMiIgY3g9IjcuMDE5NjA3ODQiIGN5PSI3LjE0NjM0MTQ2IiByeD0iNi40NzA1ODgyNCIgcnk9IjYuNDc1NjA5NzYiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTAuNTQ5MDE5NjA4LDEzLjYyMTk1MTIgQzQuMTIyNjI2ODEsMTMuNjIxOTUxMiA3LjAxOTYwNzg0LDEwLjcyMjcyMiA3LjAxOTYwNzg0LDcuMTQ2MzQxNDYgQzcuMDE5NjA3ODQsMy41Njk5NjA5NSA0LjEyMjYyNjgxLDAuNjcwNzMxNzA3IDAuNTQ5MDE5NjA4LDAuNjcwNzMxNzA3IEwwLjU0OTAxOTYwOCwxMy42MjE5NTEyIFoiIGlkPSJPdmFsLTItQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjc4NDMxNCwgNy4xNDYzNDEpIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTMuNzg0MzE0LCAtNy4xNDYzNDEpICIPC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMCIgZmlsbD0iI0NGREFFNiIgY3g9IjIxOC4zODIzNTMiIGN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);/* background-color: #112346; */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二.总线
2.1.是什么 总线Bus是计算机系统中用于在各个组件之间传输数据和控制信号的通道。它是计算机内部各个组件之间进行通信和协调工作的重要桥梁。 在计算机系统中总线可分为多种类型常见的包括数据总线、地址总线和控制总线 数据总线Data Bus用于在计算机内部不同组件之间传输数据。数据总线的位宽决定了一次可以传输的数据量例如32位数据总线表示每次可以传输32位的数据。 地址总线Address Bus用于在计算机内部传输内存或者外设的地址信息。地址总线的位宽决定了CPU能够寻址的地址空间大小。 控制总线Control Bus用于传输各种控制信号如读写控制、时钟信号、中断信号等。控制总线是计算机内部各个组件之间进行协调和控制的重要媒介。 总线的设计和规划对于计算机系统的性能和功能有着重要影响。不同类型的总线在计算机内部承担不同的功能和作用通过总线的高效运作各个组件能够有效地进行数据传输和协同工作实现计算机的功能和任务。 2.2.前期准备
依需用到案例展示我们需要用到三个组件和部分图片搭建页面如下
三个组件分别如下
AppMain.vue
templateel-container classmain-containerel-aside v-bind:classasideClassLeftNav/LeftNav/el-asideel-containerel-header classmain-headerTopNav/TopNav/el-headerel-main classmain-centerMain/el-main/el-container/el-container
/templatescript// 导入组件import TopNav from /components/TopNav.vueimport LeftNav from /components/LeftNav.vue// 导出模块export default {components:{TopNav,LeftNav},data(){return{asideClass:main-aside}},created() {this.$root.Bus.$on(aaa,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;}
/styleLeftNav.vue
templateel-menu default-active2 classel-menu-vertical-demo background-color#334157text-color#fff active-text-color#ffd04b :collapsecollapsed!-- el-menu default-active2 :collapsecollapsed collapse-transition router :default-active$route.path unique-opened classel-menu-vertical-demo background-color#334157 text-color#fff active-text-color#ffd04b --div 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
scriptexport default {data(){return{collapsed:false}},created() {this.$root.Bus.$on(aaa,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;}
/styleTopNav.vue
template!-- el-menu :default-activeactiveIndex2 classel-menu-demo modehorizontal selecthandleSelect background-color#545c64text-color#fff active-text-color#ffd04bel-menu-item index1处理中心/el-menu-itemel-submenu index2template slottitle我的工作台/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-itemel-menu-item index2-3选项3/el-menu-itemel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项1/el-menu-itemel-menu-item index2-4-2选项2/el-menu-itemel-menu-item index2-4-3选项3/el-menu-item/el-submenu/el-submenuel-menu-item index3 disabled消息中心/el-menu-itemel-menu-item index4a hrefhttps://www.ele.me target_blank订单管理/a/el-menu-item/el-menu --el-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
/templatescriptexport default {data(){return{collapsed:false,imgshow:require(/assets/img/show.png),imgsq:require(/assets/img/sq.png)}},methods:{doToggle(){this.collapsed ! this.collapsed;//this.$emit()// 将是否重叠放入总线this.$root.Bus.$emit(aaa,this.collapsed);},exit(){this.$router.push(/);}}}
/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准备相对应的图片以下图片 2.3.配置组件与路由关系
2.3.1. 配置组件
在router包下加入以下代码如下
import AppMain from /components/AppMain
import LeftNav from /components/LeftNav
import TopNav from /components/TopNav
2.3.2.配置路由关系
在router包下加入以下代码如下
{path: /AppMain,name: AppMain,component: AppMain,children: [{path: /LeftNav,name: LeftNav,component: LeftNav},{path: /TopNav,name: TopNav,component: TopNav}]}]
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
// 开发环境:trur require(/mock)
// 生产环境:false require(/mock)
//开发环境下才会引入mockjs
process.env.MOCK require(/mock)
// 1.导入ElementUI依赖
import ElementUI from element-ui
// 2.导入ElementUI样式,避免后期打包样式不同要放在import App from ./App;之前
import element-ui/lib/theme-chalk/index.cssimport App from ./App
import router from ./router// 3增加ElementUI实例
Vue.use(ElementUI)
Vue.config.productionTip false// 在main.js文件中引入vue-axios模块
import axios from /api/http
import VueAxios from vue-axios
// 在main.js文件中引入vue-axios模块
Vue.use(VueAxios,axios)/* eslint-disable no-new */
new Vue({el: #app,router,data(){return{Bus:new Vue()}},components: { App },template: App/
})展示效果: 好啦今天到这了希望能帮到你
