登录注册前后端接口对接

vue_project/src/api/index.js

@@ -4,22 +4,20 @@ import request from "@/utils/request"
 export const login = (data) => {
   return request.post("/login", data);
 };
-//获取用户信息的接口
-// export const getUserInfo = (info) => {
-//   return request.get("user/getUserInfo");
-// };
 
-//注册校验的接口 
-// export const registerValidateApi = (username) => {
-//   return request({
-//     method: "post",
-//     url: "user/checkUserName",
-//     headers: {
-//       "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
-//     },
-//     data: `username=${username}`
-//   })
-// };
+// 注册获取验证码的接口 
+export const registerVerify = (account) => {
+  return request({
+    method: "post",
+    url: "register/verify",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    data: `phone:${account}`
+  })
+};
+
+
 
 // 注册的接口
 export const registerApi = (userInfo) => {

vue_project/src/components/LoginForm.vue

@@ -2,41 +2,51 @@
   <div class="content">
     <div class="wrapper">
       <div class="form-wrapper">
-        <div class="login-form">
+        <div class="signup-form">
           <div class="tips">
-            <h1>登录.</h1>
-            <span>没有账号?</span>
-            <router-link to="/register"><span class="signup-into">注册</span></router-link>
+            <h1>注册账号.</h1>
+            <span>已经有账号?</span>
+            <router-link to="/login"
+              ><span class="login-into">登录</span></router-link
+            >
           </div>
           <div class="form-wrapper">
+            <!-- 用户名 -->
             <div class="input-wrapper user">
-              <input type="text" class="inputs">
+              <input
+                type="text"
+                class="inputs"
+                v-model="registerForm.username"
+              />
             </div>
+            <!-- 密码 -->
             <div class="input-wrapper pwd">
-              <input type="password" class="inputs">
+              <input
+                type="password"
+                class="inputs"
+                v-model="registerForm.password"
+              />
             </div>
-            <div class="input-wrapper veri-code">
-              <input type="text" class="inputs veri-code-input">
-              <span class="veri-code-tips">Click To Get</span>
+            <!-- 电话号码 -->
+            <div class="input-wrapper phone">
+              <input
+                type="text"
+                class="inputs"
+                v-model="registerForm.account"
+              />
             </div>
-            <div class="btn-wrapper">
-              <button class="form-btn login-btn">Login</button>
-            </div>
-            <div class="other-login">
-              <div class="divider">
-                <span class="line"></span>
-                <span class="divider-text">or</span>
-                <span class="line"></span>
-              </div>
-              <div class="other-login-wrapper">
-                <div class="other-login-item">
-                  <img src="../assets/images/qq (1).png" alt="QQ">
-                </div>
-                <div class="other-login-item">
-                  <img src="../assets/images/微信 (1).png" alt="WeChat">
-                </div>
-              </div>
+            <!-- 验证码 -->
+            <div class="input-wrapper veri-code" style="opacity: 1; z-index: 1">
+              <input
+                type="text"
+                class="inputs veri-code-input"
+                v-model="registerForm.captcha"
+              />
+              <span class="veri-code-tips" @click="veriCodeTipsClick"
+                >Click To Get</span
+              >
             </div>
+            <button class="form-btn" @click="">Sign Up</button>
           </div>
         </div>
       </div>
@@ -44,22 +54,86 @@
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-     
-    };
-  },
-  methods: {
-    
+
+<script setup>
+import { ref } from "vue";
+import { registerVerify } from "../api/index";
+import { ElMessage } from "element-plus";
+
+let reckonTime; //计数器
+let reckonTimeFlag = 5; //倒计时
+const reckonFlag = ref(true); //重复点击判断
+
+const registerForm = ref({
+  username: "", //用户名
+  password: "", //密码
+  account: "", //手机号
+  captcha: "", //验证码
+});
+
+//定时器
+const countDown = () => {
+  // 设置验证码读取效果
+  let veriCodeTips = document.querySelector(".veri-code-tips");
+  veriCodeTips.innerHTML = `RESEND(${reckonTimeFlag})`;
+  reckonTimeFlag--;
+  if (reckonTimeFlag < 0) {
+    clearInterval(reckonTime);
+    reckonTimeFlag = 5;
+    veriCodeTips.innerHTML = `Click To Get`;
+    veriCodeTips.style.color = "rgb(39, 150, 247)";
   }
 };
+
+//点击事件触发的方法
+const veriCodeTipsClick = () => {
+  // 防止重复点击  重复触发计数器
+  if (registerForm.value.account == "" || registerForm.value.account == null) {
+    ElMessage.error("手机号不能为空");
+  } else {
+    if (!reckonFlag.value) {
+      return;
+    } else {
+      reckonFlag.value = false;
+      setTimeout(() => {
+        reckonFlag.value = true;
+      }, 5000);
+      let veriCodeTips = document.querySelector(".veri-code-tips");
+      veriCodeTips.style.color = "rgb(153, 151, 151)";
+      reckonTime = setInterval(countDown, 1000);
+      countDown();
+      getRegisterVerify();
+    }
+  }
+};
+
+// 验证码获取
+const getRegisterVerify = async () => {
+  ElMessage.success("手机号是:" + registerForm.value.account);
+  await registerVerify(registerForm.value.account).then(
+    (response) => {
+      ElMessage.success("验证码是：" + response);
+    },
+    (error) => {
+      console.log("注册失败");
+    }
+  );
+};
+
+// 注册校验
+const onRegister = async () => {
+  await registerApi(registerForm.value).then(
+    (response) => {
+      ElMessage.success("验证码是：" + response);
+    },
+    (error) => {
+      console.log("注册失败");
+    }
+  );
+};
 </script>
 
 <style scoped>
-  @import url('../assets/css/style.css');
-  
-  @import url('../assets/css/style.scss');
-
+@import url("../assets/css/style.css");
+@import url("../assets/css/style.scss");
 </style>