主页submitForm方法完善，真实接口
submitForm(formName) {
this.$refs[formName].validate((valid) => {
/* el-form组件的validate方法 在回调函数中，如果vaild为true，则表示表单验证通过，为false则不通过 */
if (valid) {
axios.post('http://time*******.com:8889/api/private/v1/login',{
username:this.ruleForm.username,
password:this.ruleForm.password
})
.then(res=>{
let {data,meta}=res.data;
if(meta.status==200){
this.$message.success(meta.msg);
localStorage.username=data.username;
localStorage.token=data.token;
/* 登陆成功下一秒跳转首页 */
setTimeout(() => {
this.$router.push({name:'index'})
}, 1000);
}else{
/* 用过户名密码不正确的时候出现警告 */
this.$message.warning(meta.msg)
}
})
.catch(err=>{
console.log(err);
})
} else {
console.log("error submit!!");
return false;
}
});
}
主页制作
<template>
<el-container style="height: 100vh; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
:router="true使用vue-router模式，启动该模式会在激活导航时以index作为path进行路由跳转
<el-menu :default-openeds="['1']" :router="true"><!-- :default-openeds="['1']" 默认打开第一个菜单 -->
index接受的是字符串类型
<el-submenu
:index="(i+1).toString()"
v-for="(v, i) in navList"
:key="i"
>
<template slot="title">
<i class="el-icon-menu"></i>{{ v.authName }}
</template>
el-submenu index="1-4" 表示把el-submenu当作是一个导航的第四个子项
index路径前必须加/ 否则会出现路径覆盖的问题
<el-menu-item
:index="'/index/' + item.path"
v-for="(item, index) in v.children"
:key="index"
>{{ item.authName }}</el-menu-item
>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>admin</span>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import axios from "axios";
export default {
name: "IndexView",
data() {
return {
navList: [],
};
},
created() {
this.getNavList();
},
methods: {
getNavList() {
axios
.get("http://time*******.com:8889/api/private/v1/menus", {
headers: {
Authorization: localStorage.token,
},
})
.then((res) => {
console.log(res);
let { data, meta } = res.data;
if (meta.status == 200) {
this.navList = data;
} else {
this.$message.error(meta.msg);
}
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
