vue实现注册登录页面
Vue 实现注册登录页面
项目初始化
使用 Vue CLI 创建新项目：
vue create auth-demo选择默认配置或手动配置（推荐包含 Vue Router 和 Vuex）。
安装依赖
安装必要库（如表单验证、UI 框架）：
npm install axios vuex-persistedstate路由配置
在 src/router/index.js 中配置路由：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/register', component: Register }
]
})登录组件
src/views/Login.vue 示例：
<template>
<div class="auth-form">
<h3>登录</h3>
<form @submit.prevent="handleLogin">
<input v-model="email" type="email" placeholder="邮箱" required>
<input v-model="password" type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
<router-link to="/register">前往注册</router-link>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', {
email: this.email,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
alert('登录失败')
}
}
}
}
</script>注册组件
src/views/Register.vue 类似结构：
<template>
<div class="auth-form">
<h3>注册</h3>
<form @submit.prevent="handleRegister">
<input v-model="username" placeholder="用户名" required>
<input v-model="email" type="email" placeholder="邮箱" required>
<input v-model="password" type="password" placeholder="密码" required>
<button type="submit">注册</button>
</form>
<router-link to="/login">已有账号？登录</router-link>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
email: '',
password: ''
}
},
methods: {
async handleRegister() {
try {
await axios.post('/api/register', {
username: this.username,
email: this.email,
password: this.password
})
this.$router.push('/login')
} catch (error) {
alert('注册失败')
}
}
}
}
</script>状态管理
src/store/index.js 配置 Vuex：
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
plugins: [createPersistedState()],
state: {
user: null,
token: null
},
mutations: {
setUser(state, payload) {
state.user = payload.user
state.token = payload.token
}
},
actions: {
login({ commit }, credentials) {
return axios.post('/api/login', credentials)
.then(response => {
commit('setUser', response.data)
})
}
}
})样式优化
添加基础样式 src/assets/auth.css：
.auth-form {
max-width: 400px;
margin: 2rem auto;
padding: 2rem;
border: 1px solid #ddd;
border-radius: 8px;
}
.auth-form input {
display: block;
width: 100%;
margin: 0.5rem 0;
padding: 0.5rem;
}表单验证
使用 Vuelidate 进行验证：
npm install vuelidate在组件中添加：
import { required, email } from 'vuelidate/lib/validators'
export default {
validations: {
email: { required, email },
password: { required }
}
}API 封装
创建 src/api/auth.js：
import axios from 'axios'
export default {
login(credentials) {
return axios.post('/api/login', credentials)
},
register(credentials) {
return axios.post('/api/register', credentials)
}
}路由守卫
在 router/index.js 中添加导航守卫：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.path !== '/login' && !isAuthenticated) {
return next('/login')
}
next()
})响应式布局
使用 CSS 媒体查询适应移动端：
@media (max-width: 600px) {
.auth-form {
margin: 1rem;
padding: 1rem;
}
}
