完成注册页面和操作

src/components/TopHeader.vue

@@ -25,7 +25,12 @@
               </ul>
             </div>
             <div class="contact-info">
-              <a class="login-btn" href="#"><span class="icon-user-plus-solid-1"></span> 注册</a>
+              <a class="login-btn"  style="margin-left: 10px" href="/login">
+                <span class="icon-user-notes"></span> 登录</a>
+            </div>
+            <div class="contact-info">
+              <a class="login-btn" style="margin-left: 10px" href="/register">
+                <span class="icon-user-plus-solid-1"></span> 注册</a>
             </div>
           </div>
         </div>

src/router/index.js

@@ -29,6 +29,10 @@ const router = createRouter({
       path: '/login',
       name: 'login',
       component: () => import('@/views/auth/Login.vue'),
+    }, {
+      path: '/register',
+      name: 'register',
+      component: () => import('@/views/auth/Register.vue'),
     }
   ],
 })

src/views/auth/Login.vue

@@ -98,6 +98,9 @@ onMounted(refreshImage)
                     记住我
                   </label>
                 </div>
+                <div class="forgot-pass">
+                  <a href="/register">还没有账号?立即注册</a>
+                </div>
               </div>
 
               <button type="submit" class="auth-btn w-100 mt-5" @click="login">立即登录</button>

src/views/auth/Register.vue

@@ -0,0 +1,129 @@
+<script setup>
+import {onMounted, reactive} from "vue";
+import request from "@/net/index.js";
+import Swal from "sweetalert2";
+import router from "@/router/index.js";
+
+const verify = reactive({
+  img: '',
+  uuid: ''
+})
+
+const visible = reactive({
+  password: false,
+  confirm: false,
+})
+
+const form = reactive({
+  username: '',
+  password: '',
+  confirm: '',
+  code: ''
+})
+
+function register() {
+  if (form.password === '' || form.username === '') {
+    Swal.fire({ title: "注册失败", text: "请填写您的用户和密码", icon: "warning" })
+    return
+  }
+  if (form.password !== form.confirm) {
+    Swal.fire({ title: "注册失败", text: "两次输入的密码不一致", icon: "warning" })
+    return
+  }
+  request.post('/register', {
+    code: form.code,
+    password: form.password,
+    confirmPassword: form.confirm,
+    username: form.username,
+    uuid: verify.uuid
+  }).then(({ data }) => {
+    if (data.code === 200) {
+      Swal.fire({ title: "注册成功" , icon: "success",
+        text: `恭喜您的账户 ${form.username} 注册成功，即将为您跳转到登录也进行登录` }).then(() => {
+          router.push('/login')
+      })
+    } else {
+      refreshImage()
+      Swal.fire({ title: "注册失败", text: data.msg, icon: "error" })
+    }
+  })
+}
+
+function refreshImage() {
+  request.get('/captchaImage').then(({ data }) => {
+    verify.img = data.img
+    verify.uuid = data.uuid
+  })
+}
+
+onMounted(refreshImage)
+</script>
+
+<template>
+  <div>
+    <div class="log-regi-area" style="height: 100vh;padding: 0">
+      <div class="container" style="height: 100%;display: flex;align-items: center;justify-content: center">
+        <div class="row">
+          <div style="width: 500px">
+            <div class="log-area" style="padding: 30px 60px;border-radius: 10px">
+              <h2>注册</h2>
+              <div class="form-floating mb-4">
+                <input v-model="form.username"
+                       type="text" class="form-control" id="floatingInput6" placeholder="Username *">
+                <label class="lable-text" for="floatingInput6">用户名 *</label>
+              </div>
+              <div class="form-floating mb-4">
+                <input :type="visible.password ? 'text' : 'password'"
+                       v-model="form.password"
+                       class="form-control" id="floatingInput3" placeholder="Email address *">
+                <label class="lable-text" for="floatingInput3">密码 *</label>
+
+                <div class="password-key" @click="visible.password = !visible.password">
+                  <i class="icon-eye"></i>
+                </div>
+              </div>
+              <div class="form-floating relative mb-4">
+                <input :type="visible.confirm ? 'text' : 'password'"
+                       v-model="form.confirm"
+                       class="form-control relative" id="floatingPassword4" placeholder="Password *">
+                <label class="lable-text" for="floatingPassword4">确认密码 *</label>
+
+                <div class="password-key" @click="visible.confirm = !visible.confirm">
+                  <i class="icon-eye"></i>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="form-floating mb-5 col-8">
+                  <input type="email" class="form-control" id="floatingInput3"
+                         v-model="form.code"
+                         placeholder="Username Or Email address *">
+                  <label class="lable-text" for="floatingInput1">验证码
+                    *</label>
+                </div>
+                <div class="col-4">
+                  <img data-v-d0e06bca="" :src="`data:image/gif;base64,${verify.img}`" class="login-code-img">
+                </div>
+              </div>
+
+              <div class="mb-20 rem-forgot-btn">
+                <div class="forgot-pass">
+                  <a href="/login">已有账户？立即登录</a>
+                </div>
+              </div>
+
+              <p class="auth-desc">
+                本网站是xxx公司社交产品，注册即代表您同意我们的 <a href="#">隐私政策</a>
+              </p>
+              <button type="submit" @click="register" class="auth-btn w-100 mt-5">立即注册</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>