20230725----重返学习-vue3项目实战-知乎日报第2天

**重返学习——Vue3项目实战——知乎日报第2天**

今天是我们学习Vue3的第二天，我们将继续完善我们的知乎日报项目。昨天我们完成了基本的页面布局和数据展示，今天我们将重点关注用户登录和注册功能。

### 登录和注册功能在知乎日报中，用户需要登录才能发布自己的文章。因此，我们需要实现一个登录和注册功能。

#### 登录功能首先，我们需要创建一个登录组件。新建一个文件`Login.vue`：

html<template>
 <div class="login-container">
 <h1>登录</h1>
 <form @submit.prevent="handleLogin">
 <input type="text" v-model="username" placeholder="用户名">
 

 <input type="password" v-model="password" placeholder="密码">
 

 <button type="submit">登录</button>
 </form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 username: '',
 password: ''
 }
 },
 methods: {
 handleLogin() {
 // TODO: 发送请求到后端 }
 }
}
</script>

<style scoped>
.login-container {
 width:300px;
 margin:50px auto;
 padding:20px;
 border:1px solid #ddd;
 border-radius:10px;
 box-shadow:0010px rgba(0,0,0,0.1);
}
</style>

html<template>
 <div class="register-container">
 <h1>注册</h1>
 <form @submit.prevent="handleRegister">
 <input type="text" v-model="username" placeholder="用户名">
 

 <input type="password" v-model="password" placeholder="密码">
 

 <button type="submit">注册</button>
 </form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 username: '',
 password: ''
 }
 },
 methods: {
 handleRegister() {
 // TODO: 发送请求到后端 }
 }
}
</script>

<style scoped>
.register-container {
 width:300px;
 margin:50px auto;
 padding:20px;
 border:1px solid #ddd;
 border-radius:10px;
 box-shadow:0010px rgba(0,0,0,0.1);
}
</style>

javascriptimport { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Login from './components/Login.vue'
import Register from './components/Register.vue'

createApp(App).use(router).mount('#app')

// 添加登录和注册路由router.addRoutes([
 {
 path: '/login',
 component: Login },
 {
 path: '/register',
 component: Register }
])

html<template>
 <div class="app-container">
 <nav>
 <ul>
 <li><router-link to="/">首页</router-link></li>
 <li><router-link to="/login">登录</router-link></li>
 <li><router-link to="/register">注册</router-link></li>
 </ul>
 </nav>
 </div>
</template>

<script>
export default {
 // ...
}
</script>

<style scoped>
.app-container {
 width:100%;
 height:100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

nav ul {
 list-style: none;
 margin:0;
 padding:0;
 display: flex;
}

nav li {
 margin-right:20px;
}

nav a {
 color: #333;
 text-decoration: none;
}

nav a:hover {
 color: #666;
}
</style>