前端

stulogin.vue

@@ -0,0 +1,164 @@
+<template>
+  <view class="login-container">
+    <!-- Login Form -->
+    <view class="form">
+      <view class="input-group">
+        <text class="icon">👤</text>
+        <input class="input" v-model="form.studentId" placeholder="请输入账号" />
+      </view>
+      <view class="input-group">
+        <text class="icon">🔒</text>
+        <input class="input" v-model="form.password" type="password" placeholder="请输入密码" />
+      </view>
+    </view>
+
+    <!-- Buttons -->
+    <button class="login-button" @click="login">登录</button>
+    <button class="register-button" @click="navigateToRegister">注册</button>
+
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const form = ref({
+    studentId: '',
+    password: ''
+});
+
+const loginData = ref([]);
+
+const navigateToRegister = () => {
+    uni.navigateTo({
+        url: '/pages/login/zhuce/shenfen',
+        success: res => {
+            console.log("成功跳转到注册页面");
+        },
+        fail: err => {
+            console.error("跳转失败:", err);
+        }
+    });
+}
+
+const login = async () => {
+    try {
+        let res = await uni.request({
+            url: "http://10.198.140.41:3000/api/students/login",
+            method: 'POST',
+            header: {
+                'Content-Type': 'application/json' // 设置请求头为 JSON 格式
+            },
+            data: {
+                studentId: form.value.studentId,
+                password: form.value.password
+            },
+        });
+
+        console.log("响应数据:", res.data); // 打印响应数据
+        
+        if (res && res.data) {
+            loginData.value = res.data; // 处理返回的数据
+			if(res.data.message === "登录成功"){
+				console.log("登录成功！");
+				uni.switchTab({
+					url:"/pages/index/index"
+				})
+			}
+        }
+    } catch (error) {
+        console.error("登录请求失败:", error); // 错误处理
+    }
+};
+
+</script>
+
+
+<style scoped>
+.login-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  height: 760px;
+}
+
+.title {
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.subtitle {
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.form {
+  width: 100%;
+  max-width: 300px;
+  margin-bottom: 20px;
+  margin-top: 140px;
+}
+
+.input-group {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  margin-bottom: 15px;
+  background-color: white;
+  border-radius: 25px;
+  padding: 10px;
+}
+
+.icon {
+  margin-right: 10px;
+  font-size: 18px;
+}
+
+.input {
+  flex: 1;
+  border: none;
+  outline: none;
+}
+
+.login-button {
+	display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 300px;
+  padding: 10px;
+  height: 48px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 25px;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.register-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  width: 100%;
+  max-width: 300px;
+  padding: 10px;
+  background-color: transparent;
+  color: #4CAF50;
+  border: 1px solid #4CAF50;
+  border-radius: 25px;
+  text-align: center;
+}
+
+.error-message {
+  color: red;
+  margin-top: 20px;
+}
+
+</style>