partOfCode.txt

<div>
    <nav class="navbar navbar-light">
      <router-link to="/Home">
        <button type="button" class="btn btn-default btn-lg">
          <span class="iconfont icon-home"></span>
          Youke 平台在线管理
        </button>
      </router-link>
      <ul class="nav nav-fill nav-pills" id="lis">
        <li class="nav-item">
          <router-link class="nav-link" to="/Comment">
            <button type="button" class="btn btn-default btn-lg">
              <span class="iconfont icon-xuexiao_kemu"></span>
              Comment
            </button>
          </router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" to="/Search">
            <button type="button" class="btn btn-default btn-lg">
              <span class="iconfont icon-sousuo"></span>
              Search
            </button>
          </router-link>
        </li>
        <li class="nav-item">
          <div class="nav-link">
            <button
              type="button"
              class="btn btn-default btn-lg"
              @click="manage"
            >
              <span class="iconfont icon-manage"></span>
              Users
            </button>
          </div>
        </li>
      </ul>
      <div>
        <router-link v-if="isLogin === -1" to="/Log">
          <button type="button" class="btn btn-default btn-lg">
            <span class="iconfont icon-weidenglu"></span>
            <span>登录/注册</span>
          </button>
        </router-link>
        <div class="row mr-0" v-else>
          <el-dropdown class="mr-3" style="cursor: pointer" trigger="click">
            <span class="el-dropdown-link">
              <i class="iconfont icon-guanliyuan text-primary">管理员</i>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div>管理员：{{ user.account }}</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link class="nav-link" to="/About">
                  管理员职能与守则
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="signout">
                  <span class="iconfont icon-tuichu text-danger"></span>退出登录
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </nav>
  </div>


import {mapState} from 'vuex'
export default {
  name: "NavBar",
  methods: {
    signout() {
      this.$store.commit("Person/signout");
      this.$router.push("/Home");
      this.$forceUpdate();
    },
    manage(){
        this.$store.dispatch('Person/getUsers');
        this.$router.push('/Users');
    }
  },
    computed:{
        ...mapState({
            isLogin: state=>state.Person.isLogin,
            user: state=>state.Person.user
        })
    }
};





















<template>
  <div id="t" class="text-center">
    <div class="form-signin">
      <h1 class="h3 mb-6 font-weight-bold">please sign in</h1>
      <label for="inputEmail" class="sr-only">Account</label>
      <input
        type="text"
        id="inputEmail"
        class="form-control"
        placeholder="Account"
        v-model="SignIn.account"
        required
        autofocus
      />
      <label for="inputPassword" class="sr-only">Password</label>
      <input
        type="password"
        id="inputPassword"
        class="form-control"
        placeholder="Password"
        v-model="SignIn.password"
        required
        autofocus
      />
      <hr />
      <button
        class="btn btn-group-lg btn-primary btn-block bg-primary"
        type="submit"
        @click="url1()"
      >
        Log in
      </button>
    </div>
  </div>
</template>

<script>
import { reqLogin } from "../api";
export default {
  name: "Login",
  data() {
    return {
      SignIn: {
        account: "",
        password: ""
      }
    };
  },
  methods: {
    url1() {
      reqLogin({
        account: this.SignIn.account,
        password: this.SignIn.password
      }).then(res => {
        let num = res.id;
        switch (num) {
          case -1: //forbid
            this.$message({
              message: "用户已被禁用",
              type: "error",
              duration: 1000,
              showClose: true
            });
            return false;
          case -2: //nobody
            this.$message({
              message: "错误的用户名或密码",
              type: "warning",
              duration: 1000,
              showClose: true
            });
            return false;
          default:
            //allowed
            this.$store.commit("Person/changeLogin", num);
            this.$store.commit("Person/signin", res);
            this.$message({
              message: "登陆成功",
              type: "success",
              duration: 1000,
              showClose: true
            });
            this.$router.push("/Home");
        }
      });
    }
  }
};
</script>

<style scoped>
html,
template {
  height: 100%;
}

template {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 450px;
  padding: 15px;
  margin: auto;
}
.form-signin {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 10px;
}
</style>