写一个登录注册的vue3项目要有全部代码和过程
时间: 2024-02-12 10:06:04 浏览: 20
好的,以下是一个简单的 Vue 3 登录注册项目的全部代码和过程:
1. 首先,按照上文所述的步骤,安装 Node.js、npm 和 Vue CLI,然后创建一个新的 Vue 3 项目。
2. 在项目的 src 目录下创建一个名为 components 的文件夹,用于存放我们的组件。
3. 在 components 文件夹下创建一个名为 LoginForm.vue 的文件,这是我们的登录组件。代码如下:
```
<template>
<form @submit.prevent="submit">
<input type="text" v-model="username" placeholder="用户名" />
<input type="password" v-model="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
}
},
methods: {
submit() {
// 在这里编写登录逻辑
},
},
}
</script>
```
4. 在 components 文件夹下创建一个名为 RegisterForm.vue 的文件,这是我们的注册组件。代码如下:
```
<template>
<form @submit.prevent="submit">
<input type="text" v-model="username" placeholder="用户名" />
<input type="password" v-model="password" placeholder="密码" />
<input type="password" v-model="confirmPassword" placeholder="确认密码" />
<button type="submit">注册</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
confirmPassword: '',
}
},
methods: {
submit() {
// 在这里编写注册逻辑
},
},
}
</script>
```
5. 在 App.vue 文件中使用这两个组件。代码如下:
```
<template>
<div>
<LoginForm />
<RegisterForm />
</div>
</template>
<script>
import LoginForm from './components/LoginForm.vue'
import RegisterForm from './components/RegisterForm.vue'
export default {
components: {
LoginForm,
RegisterForm,
},
}
</script>
```
6. 编写登录和注册逻辑。在这里我们使用一个假的用户数据来模拟登录和注册。在 src 目录下创建一个名为 utils.js 的文件,用于存放我们的用户数据和登录注册逻辑。代码如下:
```
export const users = [
{ username: 'admin', password: '123456' },
{ username: 'test', password: 'test123' },
]
export function login(username, password) {
const user = users.find(user => user.username === username && user.password === password)
if (user) {
localStorage.setItem('user', JSON.stringify(user))
return user
} else {
return null
}
}
export function logout() {
localStorage.removeItem('user')
}
export function register(username, password) {
const user = { username, password }
users.push(user)
localStorage.setItem('user', JSON.stringify(user))
return user
}
```
7. 在登录组件中使用 login 函数进行登录。代码如下:
```
<template>
<form @submit.prevent="submit">
<input type="text" v-model="username" placeholder="用户名" />
<input type="password" v-model="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</template>
<script>
import { login } from '../utils'
export default {
data() {
return {
username: '',
password: '',
}
},
methods: {
submit() {
const user = login(this.username, this.password)
if (user) {
this.$emit('login', user)
} else {
alert('用户名或密码错误')
}
},
},
}
</script>
```
8. 在注册组件中使用 register 函数进行注册。代码如下:
```
<template>
<form @submit.prevent="submit">
<input type="text" v-model="username" placeholder="用户名" />
<input type="password" v-model="password" placeholder="密码" />
<input type="password" v-model="confirmPassword" placeholder="确认密码" />
<button type="submit">注册</button>
</form>
</template>
<script>
import { register } from '../utils'
export default {
data() {
return {
username: '',
password: '',
confirmPassword: '',
}
},
methods: {
submit() {
if (this.password !== this.confirmPassword) {
alert('两次输入的密码不一致')
return
}
const user = register(this.username, this.password)
this.$emit('register', user)
},
},
}
</script>
```
9. 在 App.vue 文件中使用登录和注册事件。代码如下:
```
<template>
<div>
<LoginForm @login="handleLogin" />
<RegisterForm @register="handleRegister" />
</div>
</template>
<script>
import LoginForm from './components/LoginForm.vue'
import RegisterForm from './components/RegisterForm.vue'
export default {
components: {
LoginForm,
RegisterForm,
},
methods: {
handleLogin(user) {
console.log('登录成功', user)
},
handleRegister(user) {
console.log('注册成功', user)
},
},
}
</script>
```
以上就是一个简单的 Vue 3 登录注册项目的全部代码和过程。希望能够帮助到你。