美食杰项目----登录页面，看了不会来找我！！！

最新推荐文章于 2022-11-18 15:57:06 发布

WangLingyun111

最新推荐文章于 2022-11-18 15:57:06 发布

阅读量476

点赞数 3

分类专栏：前端项目美食杰文章标签： html5 vue.js html

本文链接：https://blog.csdn.net/m0_62201566/article/details/120476516

版权

本文介绍了使用Element UI组件库和Vue.js实现美食杰项目的登录页面。通过路由守卫检查登录状态，未登录用户被引导至登录页，已登录用户可直接访问。详细内容包括登录页面（login.vue）、路由配置和Vuex库的应用。教程简单易懂，旨在帮助开发者快速搭建登录功能。

摘要由CSDN通过智能技术生成

一.项目介绍：

通过使用element ui组件库对页面进行布局，然后再通过路由守卫验证登录状态

验证登录：有些路由是需要登录的，判断状态

1.没有登录：跳转到登录页

2.登录：直接进入

3.有些路由不需要登录，那就直接进入；

ps：是否需要登录 --meta

二.效果展示：

三.代码展示：

<template>
  <div class="login-section">
    <!-- :rules="rules" -->
    <el-form
      label-position="top"
      label-width="100px"
      class="demo-ruleForm"
      :rules="rules"
      :model="rulesForm"
      status-icon
      ref="ruleForm"
    >
      <el-form-item label="用户名" prop="name">
        <el-input type="text" v-model="rulesForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="rulesForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { login } from "@/service/api";

export default {
  data() {
    return {
      //存储数据的对象
      rulesForm: {
        name: "",
        password: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度3-5个", trigger: "blur" },
        ],