项目：10-Vue3开发登录注册页面

## 一：登录逻辑
#### 1.登录接口
```java
    @PostMapping("/login")
    public Result login(@RequestBody Employee employee){
        Employee dbEmployee = employeeService.login(employee);
        return Result.success(dbEmployee);
    }
```
#### 2.Service方法
```java
    public Employee login(Employee employee) {
        String username = employee.getUsername(); // 账号
        Employee dbEmployee = employeeMapper.selectByUsername(username);
        if(dbEmployee == null){ // 没有这个账号
           throw new CustomException("500","账号不存在");
        }
        // 数据库存在这个账号
        String password = employee.getPassword();
        if(!dbEmployee.getPassword().equals(password)){ //用户输入的密码和数据库账号的密码不一致
            throw new CustomException("500","账号或密码错误");
        }
        return dbEmployee;
    }
```
#### 3.源码
```java
<template>
  <div class="login-container">
    <div class="login-box">
      <div
        style="padding: 50px 30px;background-color: white;margin-left: 100px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)">
        <el-form ref="formRef" :rules="data.rules" :model="data.form" style="width: 300px">
          <div style="margin-bottom: 30px;font-size: 24px;text-align: center; color:blue;font-weight:bold">欢迎登录后台管理系统
          </div>
          <el-form-item prop="username">
            <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 size="large" v-model="data.form.password" placeholder="请输入密码"
              prefix-icon="Lock"></el-input>
          </el-form-item>
          <div style="margin-bottom: 20px">
            <el-button @click="login" size="large" style="width: 100%;" type="primary">登录</el-button>
          </div>
          <div style="text-align: right">还没有账号?请<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 { User, Lock } from '@element-plus/icons-vue'
import request from '@/utils/request';
import { ElMessage } from 'element-plus';

const data = reactive({
  form: {},
  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('/login', data.form).then(res => {
        console.log(res)

        if (res.code === '200') { // 登录成功
          // 存储后台返回的用户数据信息
          localStorage.setItem('xm-pro-user', JSON.stringify(res.data)) //把json对象转换为json字符串存储
          ElMessage.success('登陆成功')
          setTimeout(() => {
            location.href = '/manager/home'
          }, 500)
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  overflow: hidden;
  background-image: url("@/assets/bj.gif");
  background-size: cover;
  background-position: 0 -50px
}

.login-box {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  right: 0;
  position: absolute;
}
</style>
```
#### 4.页面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/c54c5837-6606-ca59-ccb9-7bd4bc984f0e.png)

## 二：注册逻辑
```java
    @PostMapping("/register")
    public Result register(@RequestBody Employee employee){
        employeeService.register(employee);
        return Result.success();
    }
```
```java
    public void add(Employee employee) {
        String username = employee.getUsername(); // 账号
        Employee dbEmployee = employeeMapper.selectByUsername(username);
        if(dbEmployee != null){ // 注册的账号已存在，无法注册
            throw new CustomException("500","账号已存在，请更换别的账号");
        }
        if(StrUtil.isBlank(employee.getPassword())){ // 密码没填
            employee.setPassword("123"); // 默认密码 123
        }
        if(StrUtil.isBlank(employee.getName())){ // 名字没填
            employee.setName(employee.getUsername()); // 默认名称
        }
        // 一定要设置角色
        employee.setRole("EMP"); // 员工的角色
        employeeMapper.insert(employee);
    }
```
#### 1.源码
```java
<template>
  <div class="login-container">
    <div class="login-box">
      <div
        style="padding: 50px 30px;background-color: white;margin-left: 100px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)">
        <el-form ref="formRef" :rules="data.rules" :model="data.form" style="width: 300px">
          <div style="margin-bottom: 30px;font-size: 24px;text-align: center; color:blue;font-weight:bold">欢 迎 注 册
          </div>
          <!-- 请输入账号 -->
          <el-form-item prop="username">
            <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 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 size="large" v-model="data.form.confirmPassword" placeholder="请确认密码"
              prefix-icon="Lock"></el-input>
          </el-form-item>

          <div style="margin-bottom: 20px">
            <el-button @click="register" size="large" style="width: 100%;" type="primary">注 册</el-button>
          </div>
          <div style="text-align: right">已有账号?请<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 { User, Lock } from '@element-plus/icons-vue'
import request from '@/utils/request';
import { ElMessage } from 'element-plus';

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: {},
  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 => {
        console.log(res)
        if (res.code === '200') { // 注册成功
          ElMessage.success('注册成功')
          setTimeout(() => {
            location.href = '/login'
          }, 500)
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  overflow: hidden;
  background-image: url("@/assets/bj.gif");
  background-size: cover;
  background-position: 0 -50px
}

.login-box {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  right: 0;
  position: absolute;
}
</style>
```
#### 2.页面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/2fb849da-7d48-e087-6a31-0185378f9160.png)


#### ⭐注意：vue上传git
①把当前修改过的所有文件都放在了一个临时的仓库
```java
git add ./*
```
②把临时仓库里的文件提交到本地仓库
```java
git commit -m "上传的内容"
```
③把本地仓库的文件上传到github
```java
git push
```