前端新用户注册，登录，退出登录功能实现

目录

新用户注册功能

用户登录功能

用户退出登录功能

---

新用户注册功能

基本思路：

将用户的信息通过接口存入数据库，接口会返回是否存入成功

使用elementui做表单验证

代码如下：

<template>
   <div class="register">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
         <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
         </el-form-item>
         <el-form-item label="用户权限" prop="Auth">
            <el-input type="password" v-model="ruleForm.Auth"></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 label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="ruleForm.confirmPassword" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>
<script>
import { register } from '../../api'
export default {
   data() {
      var checkNam