我要评论一、项目搭建与基础配置
环境准备
使用 vue cli 或 vite 创建项目，推荐组合：vue3 + element plus + vue router
npm create vue@latest npm install element-plus @element-plus/icons-vue vue-router
- 全局配置（main.js）
import { createapp } from 'vue'
import elementplus from 'element-plus'
import router from './router'
import 'element-plus/dist/index.css'
const app = createapp(app)
app.use(elementplus)
app.use(router)
app.mount('#app')二、登录页面核心实现
- 模板结构（login.vue）
<template>
<div class="login-container">
<el-form ref="formref" :model="form" :rules="rules">
<h2 class="title">校园交易平台</h2>
<el-form-item prop="username">
<el-input
v-model="form.username"
prefix-icon="user"
placeholder="请输入手机号"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="form.password"
prefix-icon="lock"
type="password"
show-password
placeholder="请输入密码"
@keyup.enter="handlelogin"
/>
</el-form-item>
<el-button
type="primary"
:loading="loading"
@click="handlelogin"
>
登录
</el-button>
<div class="links">
<router-link to="/register">立即注册</router-link>
<router-link to="/forgot">忘记密码?</router-link>
</div>
</el-form>
</div>
</template>- 数据与验证逻辑
<script setup>
import { ref, reactive } from 'vue'
import { userouter } from 'vue-router'
import { elmessage } from 'element-plus'
const form = reactive({
username: '',
password: ''
})
const rules = reactive({
username: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 16, message: '长度6-16位' }
]
})
const loading = ref(false)
const formref = ref(null)
const router = userouter()
const handlelogin = async () => {
try {
await formref.value.validate()
loading.value = true
// 模拟api请求
await new promise(resolve => settimeout(resolve, 1000))
sessionstorage.setitem('token', 'demo_token')
elmessage.success('登录成功')
router.replace('/dashboard')
} catch (error) {
console.error('登录失败:', error)
} finally {
loading.value = false
}
}
</script>- 样式优化要点
<style scoped>
.login-container {
height: 100vh;
display: grid;
place-items: center;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.title {
text-align: center;
margin-bottom: 2rem;
color: #2c3e50;
font-size: 1.8rem;
}
:deep(.el-form) {
width: 400px;
padding: 2rem;
background: rgba(255,255,255,0.95);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.el-button {
width: 100%;
margin-top: 1rem;
}
.links {
margin-top: 1.5rem;
display: flex;
justify-content: space-between;
a {
color: #409eff;
text-decoration: none;
transition: color 0.3s;
&:hover {
color: #66b1ff;
}
}
}
</style>三、进阶功能实现
- 路由守卫配置
// router/index.js
router.beforeeach((to) => {
const isauthenticated = sessionstorage.getitem('token')
if (to.meta.requiresauth && !isauthenticated) {
return '/login'
}
if (to.path === '/login' && isauthenticated) {
return '/dashboard'
}
})- 安全增强方案
密码加密传输（使用crypto-js）
添加验证码功能
请求限流与防重放攻击
import cryptojs from 'crypto-js'
const encryptpassword = (password) => {
return cryptojs.sha256(password).tostring()
}- 第三方登录集成
<template>
<div class="oauth-login">
<el-divider>第三方登录</el-divider>
<div class="oauth-buttons">
<el-button @click="handlewechatlogin">
<svg-icon icon-class="wechat" />
微信登录
</el-button>
</div>
</div>
</template>四、最佳实践与注意事项
表单验证优化
异步验证手机号是否注册
密码强度实时检测
const checkusername = async (rule, value, callback) => {
if (!value) return callback(new error('请输入手机号'))
if (!/^1[3-9]\d{9}$/.test(value)) return callback(new error('格式错误'))
try {
const { data } = await api.checkusername(value)
if (!data.exist) callback(new error('该用户未注册'))
} catch (error) {
callback(new error('验证失败'))
}
}- 用户体验优化
自动填充最近登录账号
记住密码功能（加密存储）
加载状态管理
// 自动填充
const lastusername = localstorage.getitem('lastusername')
if (lastusername) form.username = lastusername
// 记住密码
const savepassword = ref(false)
watch(savepassword, (val) => {
if (val) {
localstorage.setitem('remembered', json.stringify(form))
} else {
localstorage.removeitem('remembered')
}
})- 错误处理规范
try {
const res = await loginapi(formdata)
if (res.code === 1001) {
elmessage.warning('该账号已被冻结')
}
} catch (err) {
elmessage.error({
message: `登录失败: ${err.message}`,
grouping: true // 相同错误合并显示
})
}五、典型问题解决方案
跨域问题处理
// vite.config.js
export default defineconfig({
server: {
proxy: {
'/api': {
target: 'http://backend.example.com',
changeorigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})- 响应式布局适配
@media (max-width: 768px) {
.login-container {
padding: 1rem;
:deep(.el-form) {
width: 100%;
margin: 0 1rem;
}
}
}浏览器兼容问题
使用@vitejs/plugin-legacy处理es6+语法
添加autoprefixer自动补全css前缀
到此这篇关于使用vue开发登录页面的完整指南的文章就介绍到这了,更多相关vue开发登录页面内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论