二道网站建设,广东省建设厅网站可以查,搜索引擎优化seo方案,平面设计培训目录
一、Mock
1.1 什么是Mock.js
1.2 安装与配置
1.2.1 安装mock.js
1.2.2 引入mock.js
1.3 mock.js使用
1.3.1 定义测试数据文件
1.3.2 mock拦截Ajax请求
1.3.3 界面代码优化
二、总线
2.1 定义
2.2 类型分类
2.3 前期准备
2.4 配置组件与路由关系
2.4.1 配置…目录
一、Mock
1.1 什么是Mock.js
1.2 安装与配置
1.2.1 安装mock.js
1.2.2 引入mock.js
1.3 mock.js使用
1.3.1 定义测试数据文件
1.3.2 mock拦截Ajax请求
1.3.3 界面代码优化
二、总线
2.1 定义
2.2 类型分类
2.3 前期准备
2.4 配置组件与路由关系
2.4.1 配置组件
2.4.2 配置路由关系
2.5 展示效果 一、Mock
1.1 什么是Mock.js Mock.js 是一个用于生成模拟数据的 JavaScript 库。它可以用于前端和后端开发中用于创建模拟的接口和数据以便在开发和测试过程中进行使用。 主要特点和用途如下 模拟数据Mock.js 可以生成各种类型的模拟数据包括数字、文本、布尔值、数组、对象等。这对于前端开发来说很有用特别是在没有真实后端接口的情况下。 模拟接口可以使用 Mock.js 模拟后端接口的返回数据这样前端开发人员可以在后端接口尚未完成的情况下进行开发和调试。 丰富的语法Mock.js 提供了丰富的语法来定义模拟数据的规则包括但不限于随机数据、正则表达式、函数生成器等。 易于使用Mock.js 使用简单可以快速集成到现有的项目中提供快速的模拟数据功能。 Mock.js 在前端领域风靡的原因有几个 模拟数据需求在前端开发中经常会遇到需要模拟数据的情况尤其是在前后端分离的项目中前端需要独立开发和调试。Mock.js 提供了一种简单而强大的方式来生成模拟数据填补了前端开发过程中的这一需求。 提升开发效率使用 Mock.js 可以快速生成各种类型的模拟数据无需等待后端接口的完成可以在前端开发阶段就开始工作。这样可以大大提升了开发效率。 减少依赖Mock.js 可以让前端团队在没有实际后端接口的情况下独立进行开发。这减少了前后端开发的依赖性使得两个团队可以更加独立地工作。 适应前后端分离随着前后端分离开发模式的普及前端需要在后端接口尚未完成时进行开发和调试。Mock.js 提供了一种理想的解决方案可以帮助前端开发人员模拟出所需的数据。 丰富的功能Mock.js 提供了丰富的语法和选项可以满足各种各样的模拟数据需求包括但不限于随机数据、正则表达式、函数生成器等。 社区支持Mock.js 在前端社区中有着广泛的认可和支持拥有活跃的社区维护和更新这也使得它成为了前端开发者的首选工具之一。 1.2 安装与配置
1.2.1 安装mock.js
WinR输入cmd打开命令提示符执行以下命令进行mock.js安装如下 npm i mockjs -D 注-D表示只在开发环境中使用。 package.json中有以下代码即安装成功如下 安装完成之后我们需要引入mock.js。
1.2.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.3 mock.js使用
1.3.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.3.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.3.3 界面代码优化
由于此次展示无需用到后端代码所以博主就将昨天前后端交互用到的后端代码给备注了换上了正常前后端分离开发所用的mock.js代码如下
Login.vue
templatediv 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
/templatescriptimport axios from axiosimport qs from qs
export default {name: Login,data () {return {username: ,password: }},methods:{gotoRegister(){this.$router.push(/Register);},doSubmit(){let url this.axios.urls.SYSTEM_USER_DOLOGIN;let params {username: this.username,password: this.password};// 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);// }// }).catch(e {// });axios.post(url,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);// }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(~/assets/绿叶.jpg); /* 使用背景图片的路径 */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 定义 在Java中术语总线通常用于描述计算机体系结构或硬件架构中的概念。在计算机系统中总线是一组物理线路或电子信道用于传输数据、控制信号和地址信息在计算机内部的各个组件之间进行通信。 2.2 类型分类
总线在计算机体系结构中扮演了关键的角色它连接了中央处理器CPU、内存、外部设备和其他组件允许它们之间进行数据传输和交互。总线可分为三个主要类型 数据总线Data Bus用于传输数据信息。它允许不同的设备如CPU和内存之间交换数据。 地址总线Address Bus用于指定内存或其他设备的物理地址。通过地址总线CPU可以识别和访问特定的存储位置。 控制总线Control Bus用于传输控制信号如读/写操作、时钟信号和中断信号等。控制总线控制计算机的各个部分相互之间的操作和同步。 总线的存在简化了计算机系统内部通信的复杂性。在Java中虽然你不能直接控制硬件的总线但你可以通过Java编程语言和相关的库和框架来与底层硬件进行交互和通信。 例如在Java中你可以使用网络编程库如Java Socket与其他计算机或设备进行数据通信或者使用串口通信库如RXTX与外部设备进行串口通信。这些库和框架提供了抽象层使得与硬件总线进行通信变得更加方便和易于实现。 2.3 前期准备
依需用到案例展示我们需要用到三个组件和部分图片搭建页面如下
三个组件分别如下
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(xxx,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 openhandleOpen closehandleClose 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(xxx,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(xxx,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.4 配置组件与路由关系
接下来就是要想让我们的组件能够成功展示我们需要去配置他们路由的一些关系如下
2.4.1 配置组件
在router包下加入以下代码如下
import AppMain from /components/AppMain
import LeftNav from /components/LeftNav
import TopNav from /components/TopNav
2.4.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
//开发环境下才会引入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 ./routerimport axios from /api/http
import VueAxios from vue-axiosVue.use(VueAxios,axios)
// 新添加3
Vue.use(ElementUI)
Vue.config.productionTip false/* eslint-disable no-new */
new Vue({el: #app,router,data(){return{Bus:new Vue()}},components: { App },template: App/
})2.5 展示效果 展示代码效果如下 最后使用ElementUI之首页导航与左侧菜单就到这里祝大家在敲代码的路上一路通畅!
感谢大家的观看 !
