From 423e4e1ec52c5a50c4018364539d7c5330bd8df1 Mon Sep 17 00:00:00 2001
From: guixu0320 <3488249364@qq.com>
Date: Thu, 14 Nov 2024 15:16:14 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=92=8C=E6=B3=A8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json          |   2 +-
 frontend/src/View/Login.vue    | 153 +++++++++++-----------------
 frontend/src/View/Register.vue | 179 ++++++++++++++++-----------------
 frontend/src/main.js           |  24 ++++-
 frontend/src/router.js         |  27 ++---
 frontend/yarn.lock             |   2 +-
 6 files changed, 173 insertions(+), 214 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 39449c9..d5eea57 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "pinia": "2.0.27",
     "save": "^2.9.0",
     "vue": "^3.4.37",
-    "vue-router": "^4.4.5"
+    "vue-router": "4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.2",
diff --git a/frontend/src/View/Login.vue b/frontend/src/View/Login.vue
index dc9bbfb..ae8b090 100644
--- a/frontend/src/View/Login.vue
+++ b/frontend/src/View/Login.vue
@@ -1,114 +1,75 @@
 <template>
-  <div class="body-view">
-  <el-text class="mx-1">登录</el-text>
-  <el-text>登录状态：{{loginState}}</el-text>
-  
-  <el-form class="form-view">
-    <el-form-item label="账号:">
-      <el-input class="ipt" v-model="form.account" placeholder="请输入账号"></el-input>
-    </el-form-item>
-    <el-form-item label="密码:" style="margin-bottom: 40px;">
-      <el-input class="ipt" type="password" v-model="form.password" placeholder="请输入密码"></el-input>
-    </el-form-item>
-    <el-form-item class="btn-view">
-      <el-button class="btn" type="primary" @click="login">登录</el-button>
-      <el-button class="btn cancel-btn" type="primary" @click="register">注册</el-button>
-    </el-form-item>
-    </el-form>
+  <div class="login-container">
+    <h2>登录</h2>
+    <form @submit.prevent="handleLogin">
+      <div>
+        <label for="username">用户名：</label>
+        <input type="text" id="username" v-model="username" required />
+      </div>
+      <div>
+        <label for="password">密码：</label>
+        <input type="password" id="password" v-model="password" required />
+      </div>
+      <button type="submit">登录</button>
+    </form>
+    <p>
+      还没有账号？<router-link to="/register">点击注册</router-link>
+    </p>
   </div>
 </template>
 
-<script setup>
-import request from '../request';
-import { reactive, ref } from 'vue';
-import { ElMessage } from 'element-plus';
-import {useRouter} from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { userStore } from '../store';
 
-const store = userStore()
-const {loginState} = storeToRefs(store)
-
-const form = reactive({
-  account: "",
-  password: ""
-})
-const message = ref("")
-const router = useRouter()
-const login = () => {
-  console.log(form.account, form.password)
-  
-  request({
-    url:"http://www.fj84.site/login",
-    method:"get",
-    params:{
-      account:form.account,
-      password:form.password
-    }
-  }).then(res => {
-    let myType = "error"
-    if(res.data.code == 1){
-      myType = "success"
-      router.push({
-        name:"User"
-      })
-      store.setLoginState(true)
-    }else{
-      myType = "error"
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      password: ''
+    };
+  },
+  methods: {
+    handleLogin() {
+      const storedUser = JSON.parse(localStorage.getItem(this.username));
+      if (storedUser && storedUser.password === this.password) {
+        alert('登录成功！');
+        // 登录成功后跳转到 user/index.vue
+        this.$router.push('/user');
+      } else {
+        alert('用户名或密码错误');
+      }
     }
-    ElMessage({
-      message:res.data.message,
-      type:myType
-    })
-  }).catch(error => {
-    console.log(error)
-  })
-}
-
-const register = () =>{
-  router.push({
-    name:"Register"
-  })
-}
+  }
+};
 </script>
 
-<style>
-.body-view {
-  border: 1px solid black;
-  width: 490px;
-  height: 425px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.mx-1 {
-  font-size: 25px;
-  margin-bottom: 20px;
-}
 
-.ipt-1 {
-  font-size: 18px;
+<style scoped>
+.login-container {
+  width: 300px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
 }
 
-.ipt {
-  border: 1px solid black;
-  height: 50px;
+h2 {
+  text-align: center;
 }
 
-.btn {
-  height: 40px;
-  width: 90px;
-  background-color: #0f63ff;
+form div {
+  margin-bottom: 10px;
 }
 
-.btn-view {
-  margin-top: 30px;
-  margin-left: 15px;
+button {
+  width: 100%;
+  padding: 10px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  cursor: pointer;
 }
 
-.cancel-btn {
-  margin-left: 70px !important;
+button:hover {
+  background-color: #45a049;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/View/Register.vue b/frontend/src/View/Register.vue
index e9388ca..0e2d0a5 100644
--- a/frontend/src/View/Register.vue
+++ b/frontend/src/View/Register.vue
@@ -1,97 +1,88 @@
-<template>  
-  <el-form  
-    ref="ruleFormRef"  
-    :model="ruleForm"  
-    status-icon  
-    :rules="rules"  
-    label-width="120px"  
-    class="demo-ruleForm"  
-  >  
-    <el-form-item label="密码" prop="pass">  
-      <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />  
-    </el-form-item>  
-    <el-form-item label="确认密码" prop="checkPass">  
-      <el-input  
-        v-model="ruleForm.checkPass"  
-        type="password"  
-        autocomplete="off"  
-      />  
-    </el-form-item>  
-    
-	
-    <el-form-item label="账号" prop="account">  
-      <el-input v-model="ruleForm.account" type="text" autocomplete="off" />  
-    </el-form-item>   
-    
-    <el-form-item>  
-      <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>  
-      <el-button @click="resetForm(ruleFormRef)">重置</el-button>  
-    </el-form-item>  
-  </el-form>  
-</template>  
-  
-<script lang="ts" setup>  
-import { reactive, ref } from 'vue'  
-import type { FormInstance } from 'element-plus'  
-  
-const ruleFormRef = ref<FormInstance>()  
-  
-const validatePass = (rule: any, value: any, callback: any) => {  
-  if (value === '') {  
-    callback(new Error('请输入密码'))  
-  } else {  
-    if (ruleForm.checkPass !== '') {  
-      if (!ruleFormRef.value) return  
-      ruleFormRef.value.validateField('checkPass')  
-    }  
-    callback()  
-  }  
-}  
-  
-const validatePass2 = (rule: any, value: any, callback: any) => {  
-  if (value === '') {  
-    callback(new Error('请再次输入密码'))  
-  } else if (value !== ruleForm.pass) {  
-    callback(new Error("两次输入不一致!"))  
-  } else {  
-    callback()  
-  }  
-}  
+<template>
+  <div class="register-container">
+    <h2>注册</h2>
+    <form @submit.prevent="handleRegister">
+      <div>
+        <label for="username">用户名：</label>
+        <input type="text" id="username" v-model="username" required />
+      </div>
+      <div>
+        <label for="password">密码：</label>
+        <input type="password" id="password" v-model="password" required />
+      </div>
+      <div>
+        <label for="confirmPassword">确认密码：</label>
+        <input type="password" id="confirmPassword" v-model="confirmPassword" required />
+      </div>
+      <button type="submit">注册</button>
+    </form>
+    <p>
+      已有账号？<router-link to="/">点击登录</router-link>
+    </p>
+  </div>
+</template>
 
-const validateAccount = (rule: any, value: any, callback: any) => {
-  const alphanumericRegex = /^[a-zA-Z0-9]+$/;  
-  if (value.length < 8 || !alphanumericRegex.test(value)) {
-    callback(new Error('账号需满足长度＞8且仅由字母和数字组成'));
-  } else {
-    callback();
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      password: '',
+      confirmPassword: ''
+    };
+  },
+  methods: {
+    handleRegister() {
+      if (this.password !== this.confirmPassword) {
+        alert('密码不一致，请重新输入');
+        return;
+      }
+
+      if (localStorage.getItem(this.username)) {
+        alert('用户名已存在，请选择其他用户名');
+        return;
+      }
+
+      const newUser = {
+        username: this.username,
+        password: this.password
+      };
+
+      localStorage.setItem(this.username, JSON.stringify(newUser));
+      alert('注册成功！');
+      this.$router.push('/');
+    }
   }
+};
+</script>
+
+<style scoped>
+.register-container {
+  width: 300px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+h2 {
+  text-align: center;
+}
+
+form div {
+  margin-bottom: 10px;
+}
+
+button {
+  width: 100%;
+  padding: 10px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #45a049;
 }
-  
-const ruleForm = reactive({  
-  pass: '',  
-  checkPass: '',  
-  account: '',
-})  
-  
-const rules = reactive({  
-  pass: [{ validator: validatePass, trigger: 'blur' }],  
-  checkPass: [{ validator: validatePass2, trigger: 'blur' }],  
-  account: [{ validator: validateAccount, trigger: 'blur' }],
-})  
-  
-const submitForm = (formEl: FormInstance | undefined) => {  
-  if (!formEl) return  
-  formEl.validate((valid) => {  
-    if (valid) {  
-      console.log('提交成功!')  
-    } else {  
-      console.log('提交失败!')  
-    }  
-  })  
-}  
-  
-const resetForm = (formEl: FormInstance | undefined) => {  
-  if (!formEl) return  
-  formEl.resetFields()  
-}  
-</script>
\ No newline at end of file
+</style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 31b294d..33f88e7 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -16,4 +16,26 @@ app.use(ElementPlus)
 const pinia=createPinia()
 app.use(pinia)
 //挂载整个应用
-app.mount('#app')
\ No newline at end of file
+app.mount('#app')
+app.post('/View/login', (req, res) => {
+  const { username, password } = req.body;
+  
+  // 验证用户名和密码
+  if (username === 'test' && password === '123456') {
+    res.json({ success: true });
+  } else {
+    res.json({ success: false, message: '用户名或密码错误' });
+  }
+});
+app.post('/View/register', (req, res) => {
+  const { username, email, password } = req.body;
+  
+  // 进行用户名、邮箱的检查并保存用户
+  // 这里只是简单的示例，实际需要加密密码并存储到数据库
+  
+  if (username && email && password) {
+    res.json({ success: true });
+  } else {
+    res.json({ success: false, message: '信息不完整' });
+  }
+});
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 9013a66..e3661e4 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -17,6 +17,11 @@ const router = createRouter({
 			name: 'Login',
 			component: () => import('./View/Login.vue')
 		},
+		{
+			path:'/register',
+			name:'Register',
+			component:()=>import ('./View/Register.vue')
+		},
 		{
 			path: '/user',
 			name: 'User',
@@ -36,30 +41,10 @@ const router = createRouter({
 					component: () => import('./View/user/ExpressForm.vue'),
 				}
 			]
-		},
-		{
-			path: '/register',
-			name: 'Register',
-			component: () => import('./View/Register.vue')
 		}
 	]
 })
 
-router.beforeEach((to,from,next)=>{
-	const store = userStore()
-	const {loginState} = storeToRefs(store)
-	console.log("路由守卫：",loginState.value)
-	if(to.name == "Login"){
-		next()
-	}else{
-		if(loginState.value){
-			next()
-		}else{
-			next({
-				name:'Login'
-			})
-		}
-	}
-})
+
 
 export default router
\ No newline at end of file
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index cc1380e..d7b541b 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -729,7 +729,7 @@ vue-demi@*:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
   integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
 
-vue-router@^4.4.5:
+vue-router@4:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.4.5.tgz#bdf535e4cf32414ebdea6b4b403593efdb541388"
   integrity sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==