主頁submitForm方法完善，真實接口
submitForm(formName) {
? ? ? this.$refs[formName].validate((valid) => {
? ? ? ? /* el-form組件的validate方法 在回調(diào)函數(shù)中，如果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;
? ? ? ? ? ? ? /* 登陸成功下一秒跳轉(zhuǎn)首頁 */
? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? this.$router.push({name:'index'})
? ? ? ? ? ? ? }, 1000);
? ? ? ? ? ? }else{
? ? ? ? ? ? ? /* 用過戶名密碼不正確的時候出現(xiàn)警告 */
? ? ? ? ? ? ? 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進行路由跳轉(zhuǎn)?
? ? ? <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路徑前必須加/ 否則會出現(xiàn)路徑覆蓋的問題
? ? ? ? ? <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>
