cf3ffab368
modified: package.json new file: public/.gitignore new file: public/bg.png new file: public/date.html new file: public/jpg/1.jpg new file: public/jpg/10.jpg new file: public/jpg/11.jpg new file: public/jpg/12.jpg new file: public/jpg/13.jpg new file: public/jpg/14.jpg new file: public/jpg/15.jpg new file: public/jpg/2.jpg new file: public/jpg/3.jpg new file: public/jpg/4.jpg new file: public/jpg/5.jpg new file: public/jpg/6.jpg new file: public/jpg/7.jpg new file: public/jpg/8.jpg new file: public/jpg/9.jpg new file: public/jquery-3.7.1.min.js new file: public/main.html new file: public/script.js new file: public/styles.css new file: public/test.code-workspace new file: public/vue.js new file: server/package-lock.json new file: server/package.json new file: server/server.js modified: src/App.vue new file: src/components/LoginForm.vue
94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<template>
|
||
<div>
|
||
<h2>登录</h2>
|
||
<form @submit.prevent="login">
|
||
<div>
|
||
<label for="username">用户名：</label>
|
||
<input type="text" v-model="loginForm.username" required />
|
||
</div>
|
||
<div>
|
||
<label for="password">密码：</label>
|
||
<input type="password" v-model="loginForm.password" required />
|
||
</div>
|
||
<button type="submit">登录</button>
|
||
</form>
|
||
<h2>注册</h2>
|
||
<form @submit.prevent="register">
|
||
<div>
|
||
<label for="newUsername">用户名：</label>
|
||
<input type="text" v-model="registerForm.username" required />
|
||
</div>
|
||
<div>
|
||
<label for="newPassword">密码：</label>
|
||
<input type="password" v-model="registerForm.password" required />
|
||
</div>
|
||
<button type="submit">注册</button>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
loginForm: {
|
||
username: '',
|
||
password: ''
|
||
},
|
||
registerForm: {
|
||
username: '',
|
||
password: ''
|
||
}
|
||
};
|
||
},
|
||
methods: {
|
||
async login() {
|
||
const response = await fetch('http://localhost:3000/api/login', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(this.loginForm)
|
||
});
|
||
const result = await response.json();
|
||
if (result.success) {
|
||
window.location.href = '/main.html';
|
||
} else {
|
||
alert('登录失败');
|
||
}
|
||
},
|
||
async register() {
|
||
const response = await fetch('http://localhost:3000/api/register', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(this.registerForm)
|
||
});
|
||
const result = await response.json();
|
||
if (result.success) {
|
||
alert('注册成功，请登录');
|
||
} else {
|
||
alert('注册失败');
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
/* 添加一些简单的样式 */
|
||
form {
|
||
margin-bottom: 20px;
|
||
}
|
||
label {
|
||
margin-right: 10px;
|
||
}
|
||
input {
|
||
margin-bottom: 10px;
|
||
}
|
||
button {
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|
||
|