1.1mockjs介绍
Mock.js是一个用于生成随机数据和模拟接口请求的JavaScript库。它可以帮助开发人员在前端开发过程中模拟后端接口的返回数据,以便进行前端页面的开发和测试。
Mock.js有两个重要的特性风靡前端:
- 数据类型丰富
Mock.js提供了一套简单易用的API,可以用于生成各种类型的随机数据,如字符串、数字、布尔值、日期等。开发人员可以使用Mock.js定义接口的返回数据结构,并生成符合该结构的随机数据。
- 拦截Ajax请求
通过拦截Ajax请求,Mock.js可以截获前端发送的请求,并根据预先定义的规则返回模拟的数据。延时响应功能可以模拟网络延迟,以便测试页面在不同网络条件下的表现。动态数据生成功能可以根据请求参数生成符合条件的随机数据。不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。
1.2 mock.js安装与配置
1.2.1 安装mock.js
npm i mockjs -D
我这里已经安装过了,忘记截图了,还是老样子,进入项目的根目录cmd 然后执行命令就行
- -S选项用于启动开发服务器
- -D选项用于在启动开发服务器后自动打开浏览器
- -G选项用于生成代码或文件。它们分别用于不同的开发场景和需求,具体使用取决于你的目标和任务。
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 MOCK:'true' })
-
prod.env.js:开发环境
'use strict' module.exports = { NODE_ENV: '"production"', // 打包环境下不使用mock MOCK:'false' }
-
main.js
//开发环境下才会引入mockjs process.env.MOCK && require('@/mock')
在做完这一步的时候,我们的程序是会报错的,告诉我们没有在src下找到我们的mock模块,不用急,下面会定义
1.3 mock.js的使用
-
1.3.1准备模拟数据
为每个*.vue定义单独的xxx-mock.js文件,并在其中添加自定义的json数据,还可以通过mockjs的模块生成随机数据信息,动态测试ajax请求效果。
创建src/mock/json
目录,定义登录测试数据文件login-mock.js:
//在没有使用mock.js前,定义数据的方式(死数据)
/* const loginInfo = {
code: -1,
message: '密码错误'
} */
//使用mockjs的模板生成随机数据
const loginInfo = {
//1表示50%概率
"success|1": true,
//1-2指重复1到2次
"msg|1-2": 'msg'
}
//将当前模块导出,导出后index.js才可以导入
export default loginInfo;
1.3.2定义拦截路由
在src目录下创建mock目录,定义mock主文件index.js,并在该文件中定义拦截路由配置,/src/mock/index.js。
import Mock from 'mockjs' //引入mockjs,npm已安装
import action fr服务器托管网om '@/api/action' //引入请求地址
//全局设置:设置所有ajax请求的超时时间,模拟网络传输耗时
Mock.setup({
// timeout: 400 //延时400s请求到数据
timeout: 200 - 400 //延时200-400s请求到数据
})
//获取请求的url
let url = action.getFullPath('SYSTEM_USER_DOLOGIN');
//引登陆的测试数据,并添加至mockjs
import loginInfo from '@/mock/json/login-mock.js'
Mock.mock(url, "get", loginInfo)
//如果请求既可以是get又可以是post的请求方式可以使用如下方式:
// Mock.mock(s1, /post|get/i, loginInfo)
1.3.3 测试
编辑Login.vue文件,根据不同响应,给出不同提示。
用户登录
提交
忘记密码
用户注册
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
};
/* get请求进行参数传递 */
this.axios.get(url, {
params: params
}).then(r => {
console.log(r);
//提示成功和失败,主要演示获取响应数据的方法
if (r.data.success) {
//可以到element-ui官网查看用法
this.$message({
message: '登录成功',
type: 'success'
});
}else{
this.$message({
message: '登录失败',
type: 'error'
});
}
}).catch(e => {
//异常信息
});
}
}
}
.login-wrap {
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 10%;
background-image: url('/static/imgs/books2.jpg');
/* background-color: #3b7cf5; */
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;
border: 1px solid #eaeaea;
text-align: left;
background-color: rgba(229, 229, 229, 0.8);
}
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #0b0b0b;
}
这里我原本是拦截不了的,但是后来去网上找了,说是引入mock的顺序问题,后面将顺序一改就行了
二、总线首页导航栏左侧菜单搭建
2.1、首先定义总线
new Vue({
el: '#app',
data(){
return{
Bus:new Vue()
}
},
router,
components: { App },
template: ''
})
2.2自定义界面组件 (完整代码)
1. AppMain.vue 界面总容器
Main
// 导入组件
import TopNav from '@/components/TopNav.vue'
import 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';
});
}
};
.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;
}
2. LegtNav.vue 左侧菜单
导航一
分组一
选项1
选项2
选项3
选项4
选项1
导航二
导航三
导航四
export default {
data(){
return {
collapsed:false
}
},
created(){
this.$r服务器托管网oot.Bus.$on("xxx", (v)=>{
this.collapsed= v ;
});
}
}
.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;
}
3. TopNav.vue 顶部导航栏
超级管理员
设置
个人中心
退出
export default {
data() {
return {
collapsed: false,
imgsq: require('@/assets/img/sq.png'),
imgshow: require('@/assets/img/show.png')
}
},
methods: {
doToggle() {
this.collapsed = !this.collapsed;
//将是否折叠的变量放入到总线中
this.$root.Bus.$emit("xxx", this.collapsed);
},
exit() {
this.$router.push({
path: '/Login'
})
}
}
}
.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;
}
2.3、最后配置路由
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// 导入Login登录组件
import Login from '@/views/Login'
// 导入Register注册组件
// import Register from '@/views/Register'
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: '/AppMain',
name: 'AppMain',
component: AppMain,
children:[
{
path: '/LeftNav',
name: 'LeftNav',
component: LeftNav
},{
path: '/TopNav',
name: 'TopNav',
component: TopNav
}
]
}
]
})
最后看运行效果:
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net