《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》,点击传送门,即可获取!
router,
components: { App },
template: ‘’
})
引入工具:
login-mock.js:可产生多种接口,造数据
// const loginInfo = {
// code: -1,
// message: ‘密码错误’
// }
//使用mockjs的模板生成随机数据
const loginInfo = {
‘code|0-1’: 0,
‘msg|3-10’: ‘msg’
}
export default loginInfo;
index.js:引用数据
import Mock from ‘mockjs’ //引入mockjs,npm已安装
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)
总结mock.js的使用:
①、定义接口调用返回的json格式
②、返回的json格式与对应的接口请求地址进行绑定index.js
s1指地址:http://localhost:8080/t_216/userAction_login.action
let s1 = action.getFullPath(‘SYSTEM_USER_DOLOGIN’)
Mock.mock(s1, “post”, loginInfo)
呈现结果:结果随机产生,有成功有失败
二、总线的概念
1、将组件导入
AppMain.vue:
Main
LeftNav.vue:
<el-menu default-active=“2” class=“el-menu-vertical-demo” @open=“handleOpen” @close=“handleClose” background-color=“#334157”
text-color=“#fff” active-text-color=“#ffd04b” :collapse=“collapsed” :collapse-transition=“bb”>
![](../assets/img/logo.png)
导航一
分组一
选项1
选项2
选项3
选项4
选项1
导航二
导航三
导航四
TopNav.vue:
<img class=“showimg” :src=“collapsed?imgshow:imgsq” @click=“doToggle()”>
超级管理员
设置
个人中心
<el-menu-item @click=“exit()” index=“2-3”>退出
2、导入图片
3、配置组件
index.js:
// 在路由中定义
import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’
import Login from ‘@/views/Login’
import Reg from ‘@/views/Reg’
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: ‘/Login’,
name: ‘Login’,
component: Login
},
{
path: ‘/Reg’,
name: ‘Reg’,
component: Reg
},
{
path: ‘/AppMain’,
name: ‘AppMain’,
component: AppMain,
children:[
{
path: ‘/LeftNav’,
name: ‘LeftNav’,
component: LeftNav
},
{
path: ‘/TopNav’,
name: ‘TopNav’,
component: TopNav
}
]
}
]
})
4、登录跳转界面
Login.js文件中添加登陆成功后的界面的跳转:
this.$router.push({path:‘/AppMain’});
5、定义变量,注册组件
AppMain:
Main
// 导入组件
import TopNav from ‘@/components/TopNav.vue’
import LeftNav from ‘@/components/LeftNav.vue’
// 导出模块
**export default {
data(){
return {
asideClass:‘main-aside’
}
},
// 注册组件
components:{
TopNav,LeftNav
}
};**
.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;
}
topNav:定义变量
**
export default {
data(){
return{
collapsed:false,
// 不折叠时需显示的图片
imgshow:require(‘@/assets/img/show.png’),
imgsq:require(‘@/assets/img/sq.png’)
}
}
}**
LeftNav:记得将不用的因素清掉
**<el-menu default-active=“2” class=“el-menu-vertical-demo” background-color=“#334157”
text-color=“#fff” active-text-color=“#ffd04b” :collapse=“collapsed”>**
导航一
分组一
选项1
选项2
选项3
选项4
选项1
导航二
导航三
导航四
**
export default {
data(){
return{
collapsed:false
}
}
}
**
.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;
最后
分享一些资料给大家,我觉得这些都是很有用的东西,大家也可以跟着来学习,查漏补缺。
《Java高级面试》
《Java高级架构知识》
《算法知识》
《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》,点击传送门,即可获取!
enu–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;
最后
分享一些资料给大家,我觉得这些都是很有用的东西,大家也可以跟着来学习,查漏补缺。
《Java高级面试》
[外链图片转存中…(img-vIn3TZLB-1714746144917)]
《Java高级架构知识》
[外链图片转存中…(img-WU3I2yMb-1714746144918)]
《算法知识》
[外链图片转存中…(img-12C4gShj-1714746144918)]
《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》,点击传送门,即可获取!