使用element-ui实现后台的用户登录_@jie

最新推荐文章于 2024-06-24 23:48:34 发布

桀呐！

最新推荐文章于 2024-06-24 23:48:34 发布

阅读量854

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/tattoo_jie/article/details/108654758

版权

这篇博客介绍了如何使用Element-UI库配合Vue.js实现后台用户的登录功能。首先，通过Element-UI完成登录页面的布局。其次，封装网络请求，创建axios实例并设置拦截器。然后，为登录按钮添加点击事件，调用接口完成登录逻辑。最后，讲解了在main.js中设置路由拦截，确保只有认证的用户才能访问特定路由。

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

效果：
在这里插入图片描述
代码实现：

1、首先就是页面的布局(主要是用element-ui来实现的)

<template>
  <div class="login_box">
    <div class="login_content">
      <h1>用户登录</h1>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="65px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
          <el-button @click="resetForm" class="test">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 引入接口
import {
    login } from "../../http/api";
export default {
   
  data() {
   
    return {
   
      ruleForm: