（三）vue3项目 后台管理系统登录功能的实现

进element-plus官网 一个 Vue 3 UI 框架 | Element PlusA VitePress sitehttps://element-plus.gitee.io/zh-CN/

 

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

同时在main.js配置

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

views目录下新建 新建Index.vue 和 Login.vue文件 

配置登录组件路由 

{ path: '/', redirect: '/login' },
  {
    path: '/login',
    name: '登录页',
    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue'),
  },
  {
    path: '/index',
    name: '主页',
    component: Home,
    icon: '#icon-home',
    meta: { hidden: false, title: '主页' },
    children: [
      {
        path: '/index',
        name: 'Index',
        meta: { title: '总览' },
        component: () => import(/* webpackChunkName: "product" */ '../views/Index')
      }
    ]
  },

 

在components里新建LoginForm.vue文件 使用element-plus组件编写

对应组件属性可在elementPlus官网查看

<template>
  <el-form
    :model="loginForm"
    class="loginForm sign-in-form"
    ref="loginForm"
    :rules="loginFormRules"
  >
    <el-form-item prop="mobile">
      <el-input v-model="loginForm.mobile" placeholder="请输入手机号">
        <template #prefix>
          <svg class="icon" aria-hidden="true" style="width:24px;height:24px;margin-top:7px">
            <use xlink:href="#icon-user"></use>
          </svg>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="loginForm.password"
        type="password"
        class="password-form"
        placeholder="请输入密码"
        show-password
      >
        <template #prefix>
          <svg class="icon" aria-hidden="true" style="width:24px;height:24px;margin-top:7px">
            <use xlink:href="#icon-lock"></use>
          </svg>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button style="width: 100%" type="primary" @click="login('loginForm')"
        >登录</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script>
// import { ElMessage } from "element-plus";
import loginHttp from "../api/loginHttp";
export default {
  // components: {
  //   ElMessage,
  // },
  name: "LoginForm",
  data() {
    return {
      loginForm: {
        mobile: "",
        password: "",
      },
      loginFormRules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          loginHttp
            .login(this.loginForm.mobile, this.loginForm.password)
            .then((res) => {
              sessionStorage.setItem("token", res.token);
              sessionStorage.setItem("name", res.name);
              this.$router.push({ path: "/index" });
            })
            .catch((err) => {
              this.$message.error(err);
            });
        } else {
          return false;
        }
      });
    },
  },
};

以上为一个登录表单组件 有完整的登录功能 

编写Login.vue文件 对应的样式可以自己编写，这里展示非样式代码

<template>
  <div class="container" :class="{ 'sign-up-mode': signUpMode }">
    <!-- form表单容器 -->
    <div class="forms-container">
      <div class="signin-signup">
        <!-- 登录 -->
        <LoginForm />
      </div>
    </div>
    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
        </div>
        <img src="@/assets/img/log.svg" class="image" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
import LoginForm from "@/components/LoginForm.vue";
export default {
  components: { LoginForm },
  data() {
    return {
      signUpMode: false,
    };
  },
};
</script>

 登录页面编辑完成，输入信息校验成功后可成功跳转到主页