项目结构
上代码
主页
<template>
<el-container class="home_container">
<!-- 头部区域 -->
<el-header>
<div>
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<!-- 页面主体区域 -->
<el-container>
<!-- 侧边栏区域 -->
<el-aside :width="iszhe ? '64px' : '200px'">
<div class="toggle-button" @click="zhe">|||</div>
<el-menu
background-color="#333744"
text-color="#fff"
active-text-color="#ffd04b"
:unique-opened="true"
:collapse="iszhe"
:collapse-transition="false"
router
>
<!-- 一级菜单 -->
<el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
<!-- 一级菜单模板区域 -->
<template slot="title">
<!-- 图标 -->
<i :class="iconObj[item.id]"></i>
<!-- 文本 -->
<span>{
{item.authName}}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item
:index="'/'+subItem.path"
v-for="subItem in item.children"
:key="subItem.id"
@click="aa"
>
<template slot="title">
<!-- 图标 -->
<i class="el-icon-menu"></i>
<!-- 文本 -->
<span>{
{subItem.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 右侧内容区域 -->
<el-main>
<!-- 路由占位符 -->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import homeApi from "../api/home";
export default {
created() {
this.getMenuList();
},
data() {
return {
// 左侧菜单数据
menulist: [],
// 一级菜单图标的数据
iconObj: {
125: "iconfont icon-users",
103: "iconfont icon-tijikongjian",
101: "iconfont icon-shangpin",
102: "iconfont icon-danju",
145: "iconfont icon-baobiao"
},
// 是否折叠
iszhe: false
};
},
mounted() {},
methods: {
aa(){
console.log(1);
},
logout() {
window.sessionStorage.clear();
this.$router.push("/login");
this.$message.success("退出成功");
},
async getMenuList() {
const { data: res } = await homeApi.getMenuList()
console.log(res);
if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
this.menulist = res.data;
},
// 切换菜单得折叠与展开
zhe() {
this.iszhe = !this.iszhe;
}
},
computed: {},
watch: {}
};
</script>
<style lang="scss">
.home_container {
height: 100%;
}
.el-header {
background-color: #373d41;
display: flex;
justify-content: space-between;
padding-left: 50px;
align-items: center;
color: #fff;
font-size: 20px;
}
.el-aside {
background-color: #333744;
.el-menu {
border-right: none;
}
}
.el-main {
background-color: #eaedf1;
}
i {
margin-right: 10px;
}
.toggle-button {
background-color: #4a5064;
font-size: 10px;
line-height: 24px;
color: #fff;
text-align: center;
letter-spacing: 0.2em;
cursor: pointer;
}
</style>
(api)home.js
import request from '../utile/axios'
export default{
getMenuList(){
return request.get('/menus')
}
}
登陆注册、
<template>
<div class="login-wrapper">
<!-- 外层盒子 -->
<div class="login-box">
<!-- 头像区域 -->
<div class="avatar-wrapper">
<img src="../assets/logo.png" alt="" />
</div>
<!-- 登录表单区域 -->
<!-- ref这个属性就相当id,class都是用来为组件起名字 -->
<el-form ref="loginFormRef" class="login-form" :model="loginForm" :rules="loginFormRule">
<el-form-item prop="username">
<!-- 用户区域 -->
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<!-- 密码区域 -->
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
</el-form-item>
<!-- 按钮区域 -->
<el-form-item class="btn-wrapper">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import loginApi from "../api/api";
export default {
data() {
return {
// 登录表单绑定的数据
loginForm: {
username: "admin",
password: "123456"
},
// 定义表单的验证规则
loginFormRule: {
// 验证用户名
username: [
{ required: true, message: "用户名不能为空", trigger: "blur" },
{ min: 2, max: 6, message: "用户名应该在2到6个字符之间", trigger: "blur" }
],
// 验证密码
password: [
{ required: true, message: "密码不能为空", trigger: "blur" },
{ min: 6, max: 16, message: "密码应该在6到16个字符之间", trigger: "blur" }
]
}
}
},
methods: {
// 重置表单的方法
resetForm() {
// resetFields: 这个方法是用来重置表单的
this.$refs.loginFormRef.resetFields()
},
// 登录
login() {
// 校验成功后方可登录
this.$refs.loginFormRef.validate(async valid => {
// console.log(valid)
// valid这个参数为false的时候证明验证没有通过;true的时候证明验证通过了
// 如果验证没有通过,终止代码运行
if(!valid) return;
let res = await loginApi.login(this.loginForm)
let {data,meta} = res.data
if(meta.status !== 200){
this.$message.error('登录失败');
}else{
this.$message.success('登录成功');
sessionStorage.token = data.token
console.log(data.token);
//编程试导航跳转页面
this.$router.push('/home')
}
})
}
}
};
</script>
<style lang="scss" scoped>
/* 最外层盒子样式 */
.login-wrapper {
width: 100%;
height: 100%;
background: #2b4b6b;
}
/* 登录表单盒子样式 */
.login-box {
width: 450px;
height: 304px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 3px;
box-shadow: 0 0 10px #ddd;
}
/* 头像样式 */
.avatar-wrapper {
padding: 10px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 130px;
height: 130px;
background: #fff;
border: 1px solid #efefef;
border-radius: 50%;
box-shadow: 0 0 10px #ddd;
img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #efefef;
}
}
/* 表单样式 */
.login-form {
padding: 0 20px;
width: 100%;
position: absolute;
bottom: 0;
box-sizing: border-box;
.btn-wrapper {
display: flex;
justify-content: flex-end;
}
}
</style>
(api)login.js
import request from '../utile/axios'
export default{
login(form){
return request.post('/login', form)
},
}