添加登录和注册功能

已于 2025-04-14 22:26:21 修改
阅读量610 收藏 5
点赞数 6
分类专栏： 员工管理系统 前后端分离 文章标签： vue.js elementui javascript
于 2025-04-14 22:20:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73968447/article/details/147233999
版权

先写前端再写后端

前提：idea+vue3+mybatis+springBoot3前后端分离实现对一张表的增删改查（完整代码版）-CSDN博客

项目地址

1.添加一个Login.vue视图

<template>
  <div class="login_container">
    <div class="login_box">
      <div style="padding:20px;background-color: white;margin-left: 100px;border-radius: 20px;box-shadow:0 0  10px rgba(0,0,0.1)">
        <el-form ref="formRef" :rules="data.rules" :model="data.form" style="width:400px"  autocomplete="off" >
          <div style="margin-bottom:30px;font-size:20px;color:#0742b1;font-weight:bolder;text-align: center">欢迎登录后台管理系统</div>
            <el-form-item style="margin-top: 20px;" prop="username" autocomplete="off">
              <el-input size="large"   v-model="data.form.username" placeholder="请输入账号" prefix-icon="User" >
              </el-input>
            </el-form-item>
            <el-form-item  prop="password">
              <el-input show-password="show-password" autocomplete="off" size="large" v-model="data.form.password" placeholder="请输入密码" prefix-icon="Lock">
              </el-input>
            </el-form-item>
          <div>
            <el-button size="large" style="width: 48%" type="primary" @click="login()">登 录</el-button>
            <el-button size="large" style="width: 48%" type="info">取 消</el-button>
          </div>
          <div style="text-align: right;margin-top: 20px;">
            还没有账号？请<a style="color: #0742b1;text-decoration: none;" href="/register">注册</a>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive,ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const res = ref()
const data = reactive({
  form:{
    username:'',
    password:''
  },
  rules:{
    username:[{required:true,message:'请输入账号',trigger:'blur'}],
    password:[{required:true,message:'请输入密码',trigger:'blur'}]
    }
})
const formRef = ref()
const login = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      request.post('/employee/login', data.form)
          .then(res => {
            if (res.code === '200') {
              localStorage.setItem("zwy-user",JSON.stringify(res.data))//把json对象转换为字符串
              ElMessage.success('登录成功');
              location.href = '/manager/home'

            } else {
              ElMessage.error(res.msg); // 显示业务错误消息
            }
          })
          .catch(error => {
            if (error.response) {
              // 处理 HTTP 错误状态码（如 400）
              const { data } = error.response;
              if (data && data.msg) {
                ElMessage.error(data.msg); // 显示后端返回的错误消息
              } else {
                ElMessage.error('请求失败，请稍后重试');
              }
            } else {
              ElMessage.error('网络请求失败，请检查网络连接');
            }
          });
    }
  });
}

</script>
<!--scoped表示当页生效-->
<style scoped>
.login_container{
  height: 100vh;
  overflow:hidden;
  background-image: url("@/assets/login_bg.png");
  background-size:cover ;
  background-position: 0 -40px;
}
.login_box{
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  right: 0;
  position: absolute;
}
</style>

背景图为下图 位置background-image: url("@/assets/login_bg.png");

2.添加一个Register.vue视图

<template>
  <div class="Register_container">
    <div class="Register_box">
      <div style="padding:20px;background-color: white;margin-left: 100px;border-radius: 20px;box-shadow:0 0  10px rgba(0,0,0.1)">
        <el-form ref="formRef" :rules="data.rules" :model="data.form" style="width:400px" >
          <div style="margin-bottom:30px;font-size:20px;color:#0742b1;font-weight:bolder;text-align: center">欢迎注册后台管理系统</div>
          <el-form-item style="margin-top: 20px;" prop="username">
            <el-input size="large" autocomplete="off" v-model="data.form.username" placeholder="请输入账号" prefix-icon="User" >
            </el-input>
          </el-form-item>
          <el-form-item  prop="password">
            <el-input show-password="show-password" autocomplete="off" size="large" v-model="data.form.password" placeholder="请输入密码" prefix-icon="Lock">
            </el-input>

          </el-form-item>
          <el-form-item  prop="confirmPassword">
            <el-input show-password="show-password" autocomplete="off" size="large" v-model="data.form.confirmPassword" placeholder="请再次输入密码" prefix-icon="Lock">
            </el-input>
            {{data.form.confirmPassword}}
          </el-form-item>
          <div>
            <el-button size="large" style="width: 48%" type="primary" @click="register()">注 册</el-button>
            <el-button size="large" style="width: 48%" type="info">取 消</el-button>
          </div>
          <div style="text-align: right;margin-top: 20px;">
            已有账号？请<a style="color: #0742b1;text-decoration: none;" href="/login">登录</a>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive,ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const res = ref()


const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请再次输入密码'))
  } else if (value !== data.form.password) {
    callback(new Error("两次输入密码不一致!"))
  } else {
    callback()
  }
}
const data = reactive({
  form:{
    username:'',
    password:'',
    confirmPassword:''
  },
  rules:{
    username:[{required:true,message:'请输入账号',trigger:'blur'}],
    password:[{required:true,message:'请输入密码',trigger:'blur'}],
    confirmPassword:[{validator:validatePass,trigger:'blur'}]
  }
})
const formRef = ref()
const register = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      request.post('/register', data.form)
          .then(res => {
            if (res.code === '200') {

              ElMessage.success('注册成功');
              location.href = '/login'

            } else {
              ElMessage.error(res.msg); // 显示业务错误消息
            }
          })
          .catch(error => {
            if (error.response) {
              // 处理 HTTP 错误状态码（如 400）
              const { data } = error.response;
              if (data && data.msg) {
                ElMessage.error(data.msg); // 显示后端返回的错误消息
              } else {
                ElMessage.error('请求失败，请稍后重试');
              }
            } else {
              ElMessage.error('网络请求失败，请检查网络连接');
            }
          });
    }
  });
}




</script>
<!--scoped表示当页生效-->
<style scoped>
.Register_container{
  height: 100vh;
  overflow:hidden;
  background-image: url("@/assets/login_bg.png");
  background-size:cover ;
  background-position: 0 -40px;
}
.Register_box{
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  right: 0;
  position: absolute;
}
</style>

3.添加两个视图的路由

下面是index.js的完整代码

import { createRouter, createWebHistory } from 'vue-router'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/login',
    },
    {
      path: '/button',
      name: 'button',
      component: () => import('../views/Button.vue'),
    },
    {
      path:'/manager',
      name:'manager',
      component:()=>import('../views/Manager.vue'),
      children:[
        {
          path:'/manager/employeeDataOp',
          name:'employeeDataOp',
          meta:{title:'员工数据操作'},
          component:()=>import('../views/employeeDataOp.vue')
        },
          {
            path:'/manager/home',
            name:'home',
            meta:{title:'首页'},
            component:()=>import('../views/home.vue')
          },
        {
          path:'/manager/adminDataOp',
          name:'adminDataOp',
          meta:{title:'管理员数据操作'},
          component:()=>import('../views/adminDataOp.vue')
        }
      ]
    },
    {
      path:'/login',
      name:'login',
      meta:{title:'登录界面'},
      component:()=>import('../views/Login.vue')

    },
    {
      path:'/form',
      name:'form',
      component:()=>import('../views/form.vue')
    },
    {
      path:'/register',
      name:'register',
      meta:{title:'注册界面'},
      component:()=>import('../views/Register.vue')

    }
    ,
    {
      path:'/404',
      name:'404',
      meta:{title:'404'},
      component:()=>import('../views/404.vue')

    },
    {
      path:'/:pathMatch(.*)*',
      redirect:'/404',

    }

  ],
})
router.beforeEach((to,from,next)=>{
    document.title=to.meta.title;
    next()
})

export default router

4.后端添加两个功能的API接口

EmployeeController.java文件

    @PostMapping("/login")
    public Result login(@RequestBody Employee employee){
        Employee findEmployee = employeeService.login(employee);
        return Result.success(findEmployee);
    }
    @PostMapping("/register")
    public Result register(@RequestBody Employee employee){
        Employee employee1 = employeeService.register(employee);
        return Result.success(employee1);
    }

5.为接口添加业务层方法

  public Employee login(Employee employee) {
        Employee findEmployee = employeeMapper.selectByUsername(employee.getUsername());
        if (findEmployee == null){
            throw new ServiceException(ErrorCode.EMPLOYEE_NOT_FOUND);
        }
        if (!findEmployee.getPassword().equals(employee.getPassword())){
            throw new ServiceException(ErrorCode.EMPLOYEE_LOGIN_ERROR);
        }
        return findEmployee;
    }
    public Employee register(Employee employee){
        Employee findEmployee = employeeMapper.selectByUsername(employee.getUsername());
            employee.setRole("EMP");
            employee.setName("默认名称");
            employee.setGender("男");
            employee.setTitle("普通员工");
            employee.setBirthday(new Date());


        if (findEmployee != null){
            throw new ServiceException(ErrorCode.EMPLOYEE_REGISTER_ERROR_USERNAME);
        }
        int row =  employeeMapper.insert(employee);
        if(row!=1){
            throw new ServiceException(ErrorCode.EMPLOYEE_ADD_ERROR);
        }
        return employee;
    }

添加依赖

    <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.8.37</version>
        </dependency>

对这里将原先的EmployeeServcieException.java改为ServcieException.java

然后ErrorCode加几个常量下面是完整代码

package com.cdp.zwy.zwy_manager_back_v1.common;

    /**
     * @description: 业务异常枚举类
     * @author bug制作者
     * @date 2025/4/6 20:40
     * @version 1.0
     */
    public enum ErrorCode {
        NOT_DATA("10000","没有数据"),
        EMPLOYEE_NOT_FOUND("10001", "该员工不存在"),
        EMPLOYEE_ADD_ERROR("10002", "添加员工失败"),
        EMPLOYEE_DELETE_ERROR("10003", "删除员工失败"),
        EMPLOYEE_MODIFY_ERROR("10004", "修改员工失败"),
        EMPLOYEE_LOGIN_ERROR("10005", "登录失败"),
        EMPLOYEE_REGISTER_ERROR_USERNAME("10006","不能注册，该用户已经存在");


        private final String code;
        private final String msg;

        ErrorCode(String code, String msg) {
            this.code = code;
            this.msg = msg;
        }

        public String getCode() {
            return code;
        }

        public String getMsg() {
            return msg;
        }
    }

测试接口

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值