使用Vue开发登录页面的完整指南

npm create vue@latest
npm install element-plus @element-plus/icons-vue vue-router

 
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')

<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'
  }
})

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;
    }
  }
}