登录页面用vue实现
创建Vue项目
使用Vue CLI初始化项目：
npm install -g @vue/cli
vue create login-page
cd login-page
npm run serve安装依赖
安装路由和表单验证库（如VeeValidate）：
npm install vue-router vee-validate配置路由
在src/router/index.js中设置登录路由：
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
const routes = [
{ path: '/login', component: Login }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router设计登录组件
创建src/views/Login.vue，包含表单和基础验证逻辑：
<template>
<div class="login-container">
<form @submit.prevent="handleSubmit">
<input v-model="email" type="email" placeholder="Email" required />
<input v-model="password" type="password" placeholder="Password" required />
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
handleSubmit() {
// 提交逻辑或API调用
console.log(this.email, this.password)
}
}
}
</script>
<style scoped>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
</style>添加表单验证
集成VeeValidate进行高级验证（示例）：
import { useField, useForm } from 'vee-validate'
export default {
setup() {
const { handleSubmit } = useForm()
const { value: email } = useField('email', validateEmail)
const { value: password } = useField('password', validatePassword)
function validateEmail(value) {
if (!value) return 'Required'
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
return regex.test(value) ? true : 'Invalid email'
}
const onSubmit = handleSubmit(values => {
console.log(values)
})
return { email, password, onSubmit }
}
}集成API调用
使用Axios发送登录请求：
npm install axios在组件中添加：
import axios from 'axios'
methods: {
async handleSubmit() {
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('Login failed')
}
}
}响应式布局优化
在CSS中使用媒体查询适配移动端：
@media (max-width: 600px) {
.login-container {
padding: 10px;
}
input, button {
width: 100%;
}
}
