样式修改

vue_project/package.json

@@ -32,8 +32,7 @@
     "js-cookie": "^3.0.5",
     "pinia": "^2.1.7",
     "vue": "^3.2.13",
-    "vue-router": "^4.3.2",
-    "vuetify": "^3.6.8"
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

vue_project/src/api/index.js

@@ -4,22 +4,23 @@ 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 = (data) => {
+  return request({
+    method: "post",
+    url: "register/verify",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    data: {
+      "phone":data,
+      "type":"register"
+    }
+  })
+};
+
+
 
 // 注册的接口
 export const registerApi = (userInfo) => {

vue_project/src/components/CalendarTable.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="calendar-table">
-    <table>
-      <thead>
-        <tr>
-          <th>日</th>
-          <th>一</th>
-          <th>二</th>
-          <th>三</th>
-          <th>四</th>
-          <th>五</th>
-          <th>六</th>
-        </tr>
-      </thead>
-      <tbody>
-        <!-- 填充的月份数据 -->
-        <tr v-for="(week, weekIndex) in formattedCalendar" :key="weekIndex">
-          <td v-for="(day, dayIndex) in week" :key="dayIndex" :class="{ 'event': day.event }">
-            <span v-if="day.date !== null">{{ day.date }}</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CalendarTable',
-  data() {
-    // 起始和结束日期
-    const startDate = new Date(2023, 7, 26); // 2023年8月26日，注意月份减1
-    const endDate = new Date(2024, 1, 16); // 2024年2月16日，注意结束日期需加一天以包含该日
-
-    // 初始化日期数组并填充起始日期前的空位以对齐星期
-    let currentDate = new Date(startDate);
-    currentDate.setDate(currentDate.getDate() - currentDate.getDay()); // 回退到当周的周一
-    let calendarData = [];
-
-    while (currentDate <= endDate) {
-      calendarData.push(new Date(currentDate));
-      currentDate.setDate(currentDate.getDate() + 1);
-    }
-
-    // 将日期分组到每周
-    const weeks = [];
-    for (let i = 0; i < calendarData.length; i += 7) {
-      weeks.push(calendarData.slice(i, i + 7));
-    }
-
-    // 假设的事件数据，这里应根据实际需求添加
-    const events = {
-      '2023-08-26': '示例事件1', // 假定示例事件
-      // ...其他事件
-      '2024-02-16': '示例事件2' // 结束日期的事件
-    };
-
-    // 格式化日期并标记事件
-    const formattedCalendar = weeks.map(week =>
-      week.map(day => {
-        const dateString = day.toISOString().split('T')[0];
-        return {
-          date: day.getDate(),
-          event: events[dateString]
-        };
-      })
-    );
-
-    return {
-      formattedCalendar
-    };
-  }
-};
-</script>
-
-<style scoped>
-.calendar-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.calendar-table th,
-.calendar-table td {
-  border: 1px solid #ddd;
-  padding: 4px;
-  text-align: center;
-}
-
-.calendar-table th {
-  background-color: #ccc;
-  font-weight: bold;
-}
-
-.calendar-table td {
-  height: 50px;
-  width: 50px;
-  padding: 13px;
-}
-
-.calendar-table tr:nth-child(even) td {
-  background-color: #f8f8f8;
-}
-
-.calendar-table .event {
-  font-weight: bold;
-  color: purple;
-}
-
-.calendar-table td span {
-  display: block;
-  text-align: left;
-  margin-left: 5px;
-}
-</style>

vue_project/src/components/LoginForm.vue

@@ -6,21 +6,32 @@
           <div class="tips">
             <h1>登录.</h1>
             <span>没有账号?</span>
-            <router-link to="/register"><span class="signup-into">注册</span></router-link>
+            <router-link to="/register"
+              ><span class="signup-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="loginForm.username" />
             </div>
+            <!-- 密码 -->
             <div class="input-wrapper pwd">
-              <input type="password" class="inputs">
+              <input
+                type="password"
+                class="inputs"
+                v-model="loginForm.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>
+              <input type="text" class="inputs veri-code-input" />
             </div>
+
             <div class="btn-wrapper">
-              <button class="form-btn login-btn">Login</button>
+              <button class="form-btn login-btn" @click="onLogin">
+                Sign In
+              </button>
             </div>
             <div class="other-login">
               <div class="divider">
@@ -30,10 +41,10 @@
               </div>
               <div class="other-login-wrapper">
                 <div class="other-login-item">
-                  <img src="../assets/images/qq (1).png" alt="QQ">
+                  <img src="../assets/images/qq (1).png" alt="QQ" />
                 </div>
                 <div class="other-login-item">
-                  <img src="../assets/images/微信 (1).png" alt="WeChat">
+                  <img src="../assets/images/微信 (1).png" alt="WeChat" />
                 </div>
               </div>
             </div>
@@ -44,22 +55,40 @@
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-     
-    };
-  },
-  methods: {
-    
-  }
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { login } from "../api/index";
+const router = useRouter();
+
+const loginForm = ref({
+  username: "",
+  password: "",
+});
+
+//向服务器发送请求
+const onLogin = async () => {
+  ElMessage.info("正在登录");
+  await login(loginForm.value).then(
+    (response) => {
+      console.log(response);
+      if (response.data.data.code == 501) {
+        ElMessage.error("账号或密码错误，请重试");
+      } else {
+        ElMessage.success("登录成功");
+        router.push({ path: "/index" });
+      }
+    },
+    (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>

vue_project/src/components/RegisterForm.vue

@@ -6,16 +6,47 @@
           <div class="tips">
             <h1>注册账号.</h1>
             <span>已经有账号?</span>
-            <router-link to="/login"><span class="login-into">登录</span></router-link>
+            <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>
-            <button class="form-btn">创建新账号</button>
+            <!-- 电话号码 -->
+            <div class="input-wrapper phone">
+              <input
+                type="text"
+                class="inputs"
+                v-model="registerForm.account"
+              />
+            </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="onRegister">Sign Up</button>
           </div>
         </div>
       </div>
@@ -23,22 +54,95 @@
   </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 () => {
+  await registerVerify(registerForm.value.account).then(
+    (response) => {
+      if (response.data.status == 200) {
+        ElMessage.success("验证码：" + response.data.data);
+        registerForm.value.captcha = response.data.data;
+      } else if (response.data.status == 500 && response.data.data != "501") {
+        ElMessage.warning(
+          "验证码10分钟内有效, 请勿重复点击：" + response.data.data
+        );
+        registerForm.value.captcha = response.data.data;
+      } else if (response.data.data == 501) {
+        ElMessage.error("手机号已经注册");
+      }
+    },
+    (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>