vue3+Element Plus实现简单的登录

v_lazy

于 2024-07-26 16:03:46 发布

阅读量24

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/wenlai123456/article/details/140715395

版权

1.components/LoginPage.vue(登录页)

<template>  
<div class="login-container"> 
    <div class="login-form">  
      <h2>Login</h2>  
      <input v-model="loginForm.username" type="text" placeholder="Username" required>  
      <input v-model="loginForm.password" type="password" placeholder="Password" required>  
      <button @click="login">Login</button>  
    </div>  
    </div>
  </template>  
    
  <script>  
import axios  from 'axios'

  export default {  
    data() {  
      return {  
        loginForm: {  
          username: '',  
          password: ''
        }  
      };  
    },  
    methods: {  
      login() {
        axios.get('/api/auth/login',{
    			params: {
                    loginName: this.loginForm.username,
                    password: this.loginForm.password
                }
			}).then(res=>{
					console.log('data:' + JSON.stringify(res.data));
                    if(res.data.code == '0000'){
                      this.$router.replace({ name: 'Dashboard' });
                    }else{
                      this.$showAlert(res.data.message);
                    }
				},err=>{
					console.log('error:' + err);
			})  
      }  
    }  
  };  
  </script>  
    

<style scoped>  
.login-container {  
  /* 设置背景图片 */  
  background-image: url('../assets/background.jpg'); /* 假设你的图片在assets文件夹下 */  
  /* 设置背景图片覆盖整个容器 */  
  background-size: cover;  
  background-position: center; /* 图片居中显示 */  
  height: 100vh; /* 容器高度为视窗高度 */  
  display: flex;  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中 */  
  /* 其他样式... */  
  padding: 20px; /* 为内容留出一些空间 */  
  box-sizing: border-box; /* 边框盒模型 */  
} 

.login-form {  
  max-width: 300px;  
  margin: 100px auto;  
  padding: 20px;  
  border: 1px solid #ccc;  
  border-radius: 8px;  
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
  background-color: rgba(255, 255, 255, 0.7);  
  text-align: center;  
}  
  
.login-form h2 {  
  margin-bottom: 20px;  
  color: #333;  
}  
  
.login-form input[type="text"],  
.login-form input[type="password"] {  
  width: calc(100% - 22px);  
  padding: 10px;  
  margin-bottom: 15px;  
  border: 1px solid #ddd;  
  border-radius: 4px;  
  font-size: 16px;  
}  
  
.login-form input[type="text"]:focus,  
.login-form input[type="password"]:focus {  
  border-color: #42b983;  
  outline: none;  
  box-shadow: 0 0 5px rgba(66, 185, 131, 0.5);  
}  
  
.login-form button {  
  width: 100%;  
  padding: 10px;  
  background-color: #42b983;  
  color: #fff;  
  border: none;  
  border-radius: 4px;  
  font-size: 16px;  
  cursor: pointer;  
  transition: background-color 0.3s;  
}  
  
.login-form button:hover {  
  background-color: #3a9870;  
}  
</style>

2.components/CustomAlert.vue(Element Plus提示框)

<template>  
    <!-- 这里仅作为示例，实际上你可能不会直接在这里渲染Element Plus的组件 -->  
    <div>  
      <!-- 使用Element Plus的MessageBox组件通常是通过编程方式调用，而不是在模板中直接渲染 -->  
      <!-- 这里只是展示如何在组件中封装调用逻辑 -->  
      <el-button @click="showAlert">显示提示</el-button>  
    </div>  
  </template>  
    
  <script setup>  
  import { ElMessageBox } from 'element-plus';  
    
  function showAlert() {  
    ElMessageBox.confirm('这是一条消息', '提示', {  
      confirmButtonText: '确定',  
      cancelButtonText: '取消',  
      type: 'warning'  
    }).then(() => {  
      // 用户点击了确定  
      console.log('用户点击了确定');  
    }).catch(() => {  
      // 用户点击了取消或关闭  
      console.log('用户点击了取消或关闭了对话框');  
    });  
  }  
  </script>  
    
  <style scoped>  
  /* 你的样式 */  
  </style>

3.plugins/elementPlusAlert.js(提示弹出框插件)

import { ElMessageBox } from 'element-plus';  
  
const ElementPlusAlert = {  
  install(app, options) {  
    // 这里可以定义一些全局方法或混入等  
    // 但对于MessageBox这样的服务，我们可能只是展示如何注册一个调用方法  
    app.config.globalProperties.$showAlert = function(message, title, options = {}) {  
      ElMessageBox.confirm(message, title, {  
        ...options,  
        confirmButtonText: options.confirmButtonText || '确定',  
        cancelButtonText: options.cancelButtonText || '取消',  
        type: options.type || 'warning'  
      }).then(() => {  
        // 处理确定  
      }).catch(() => {  
        // 处理取消或关闭  
      });  
    };  
  }  
};  
  
export default ElementPlusAlert;

4.App.vue

<template>
  <router-view/>
</template>

5.router/index.js(路由配置)

import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from '../views/Dashboard.vue'
import Login from '../components/LoginPage.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {  
      path: '/',  
      name: 'Login',  
      component: Login  
    },
    {  
      path: '/Dashboard',  
      name: 'Dashboard',  
      component: Dashboard  
    }
  ]
})

export default router

6.main.js

// import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'  
import 'element-plus/dist/index.css'  
import ElementPlusAlert from './plugins/elementPlusAlert'

const app = createApp(App) 

app.use(router)
app.use(ElementPlus)  
app.use(ElementPlusAlert)  

app.mount('#app')

7.vite.config.js(vite配置后端服务代理)

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 目标API的URL
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

8.views/Dashboard.vue(仪表盘)

<template>    
    <div class="dashboard-container">    
      <h1>欢迎来到仪表盘</h1>    
      <p>这是您的个人信息：</p>    
      <ul class="info-list">    
        <li>用户名: {{ userName }}</li>    
        <li>角色: {{ userRole }}</li>    
      </ul>    
          
      <!-- 侧边栏或导航栏 -->    
      <nav class="sidebar">    
        <ul>    
          <li><router-link to="/">首页</router-link></li>    
          <li><router-link to="/profile">个人资料</router-link></li>    
          <li><router-link to="/settings">设置</router-link></li>    
        </ul>    
      </nav>    
    </div>    
</template> 

<script>  
// 你可以通过props、Vuex、或者Context API（在Composition API中）来获取用户信息  
// 这里为了简化，我们直接在data中返回静态数据  
export default {  
  data() {  
    return {  
      userName: '张三',  
      userRole: '管理员'  
    };  
  }  
  // 你可以在这里添加methods、computed properties、watch等  
}  
</script> 
  
<style scoped>    
.dashboard-container {  
  display: flex; /* 使用flex布局 */  
  justify-content: space-between; /* 子元素之间的间隔 */  
  align-items: flex-start; /* 子元素垂直方向顶部对齐 */  
  padding: 20px;  
  max-width: 1200px;  
  margin: 0 auto;  
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
  border-radius: 8px;  
  background-color: #71e4ae;  
}  
  
h1 {  
  color: #333;  
  text-align: center;  
  margin-bottom: 20px;  
}  
  
.info-list {  
  list-style-type: none; /* 移除列表项前的标记 */  
  padding: 0;  
}  
  
.info-list li {  
  margin-bottom: 10px;  
  font-size: 16px;  
  color: #666;  
}  
  
.sidebar {  
  width: 200px; /* 侧边栏宽度 */  
  background-color: #f4f4f4; /* 侧边栏背景色 */  
  padding: 20px;  
  border-radius: 8px;  
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);  
}  
  
.sidebar ul {  
  list-style-type: none;  
  padding: 0;  
}  
  
.sidebar li {  
  margin-bottom: 10px;  
}  
  
.sidebar a {  
  color: #333;  
  text-decoration: none;  
  font-size: 16px;  
  display: block; /* 使链接占据整行 */  
  padding: 8px;  
  border-radius: 4px;  
  transition: background-color 0.3s; /* 平滑过渡效果 */  
}  
  
.sidebar a:hover {  
  background-color: #c6ec97; /* 鼠标悬停时的背景色 */  
}  
</style>