vue3前端代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205

<template>     <div class="login-back">       <div class="  login-container" >         <h2>人口信息管理系统</h2>         <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-position="top">           <el-form-item prop="username" label="用户名">             <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>           </el-form-item>           <el-form-item prop="password" label="密码">             <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>           </el-form-item>           <el-radio-group v-model="userType" >             <el-radio label="admin">管理员登录</el-radio>             <el-radio label="user">用户登录</el-radio>           </el-radio-group>           <el-form-item>             <el-button  type="primary" @click="login">登录</el-button>             <el-button  @click="register">注册</el-button>           </el-form-item>         </el-form>       </div>     </div>   </template>        <script setup>   import {reactive, ref} from 'vue';   import { useRouter } from 'vue-router';   import axios from "axios";   import {ElMessage} from "element-plus";   const router = useRouter();   const slideAnimation = ref('false');             const userType = ref('admin');   const imageU = ''   const loginForm = reactive({     username: '',     password: '',   });   const loginRules = ref({     //若输入框为空，提示     username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],     password: [{ required: true, message: '请输入密码', trigger: 'blur' }],   });   const loginFormRef = ref(null);              const login = () => {     loginFormRef.value.validate(valid => {       if (valid) {         // 在这里进行登录逻辑处理         if (userType.value === 'admin') {           // 管理员登录           adminLogin()         } else {           // 用户登录           userLogin()         }       }     });   };        const adminLogin = () => {     const username = loginForm.username;     const password = loginForm.password;     localStorage.setItem('username', JSON.stringify(username));      // 执行管理员登录逻辑      console.log("Username:", loginForm.username);// 确保在调用 staff 函数之前 username 是正确的        router.push({         name: 'staff',         params: {             username: loginForm.username,  // 确保 loginForm.username 包含正确的用户名             password: loginForm.password   // 确保 loginForm.password 包含正确的密码         }     });     axios.get(`http://172.20.10.2:8080/getactor/${username}/${password}`)         .then(response => {           if(response.data==="没有该用户"){             ElMessage.success('没有该用户');           }else if(response.data==="登录成功"){             ElMessage.success('管理员登录成功');              router.push('/pindex');           }else{             ElMessage.success('用户名或密码错误');           }         })         .catch(error => {                    });   };   const userLogin = () => {     const username = loginForm.username;     const password = loginForm.password;     localStorage.setItem('username', JSON.stringify(username));     console.log(username,password)     axios.post("http://localhost:8080/stafflogin",{                 userid:username,                 password:password             }).then(                     result => {                         if (result.data && result.data.data) {                             if(result.data.data=="职员")                             {                                 alert("用户欢迎登录")                                 router.push({                                   name:'staff',                               query:{                                 username:loginForm.username,                                 password:loginForm.password                               }}                                 )                             }                             if(result.data.data=="职员经理")                             {                             alert("用户欢迎登录")                                                          }                             if(result.data.data=="总经理")                             {                             alert("用户欢迎登录")                                                           }                             if(result.data.data=="财务人员")                             {                             alert("用户欢迎登录")                             }                         }                     }).catch(error => {                         alert("用户名或密码错误")                         ElMessage.error('失败');                         console.error(error);                     });   }       const register = () => {     // 跳转到注册页面的路由逻辑     if (userType.value === 'admin') {       router.push('/sign')       // 管理员登录     } else {       // 用户登录       router.push('/sign')     }   };     </script>        <style>   .l-title{     margin-top: 200px;     font-size: 30px;     text-align: center;     justify-content: center;   }   .login-back {     display: flex;     flex-direction: row;     position: absolute;     top: 0;     left: 0;     width: 100vw;     height: 100vh;     background-size: cover;     background-position: center;     background-repeat: no-repeat;     background-image: url("src/风景2.jpg");   }   .login-container {     margin: 100px 0 0 600px ;     max-width: 500px;     height: 500px;     padding: 40px;     /*margin-top: 200px;*/     /*margin-left: 1300px;*/     border: 1px solid #ccc;     border-radius: 4px;     background-color: #cccccc;     opacity: 0.9; /* 设置透明度为 50% */   }   .login-container h2 {     text-align: center;     margin-top:50px ;     margin-bottom: 50px;   }   .el-form-item .el-button {     margin-left: 50px; /* 设置按钮之间的间距 */     margin-right: 30px;   }   .el-radio-group .el-radio {     margin-left: 30px;   }   .login-c{     margin: 200px 0 0 600px;     padding: 0;     width: 382px;     height: 580px;     border: 1px solid #ccc;     border-radius: 4px;     background-color: #cccccc;     opacity: 0.9; /* 设置透明度为 50% */   }        </style>

　　

1. <template> 部分：

   • login-back 类：包含登录页面的整体背景样式。
   • login-container 类：包含登录表单的容器，设置了一些样式属性，如边框、圆角等。
   • el-form 组件：使用Element Plus提供的表单组件，绑定了表单数据、验证规则等。
   • el-input 组件：用于输入用户名和密码。
   • el-radio-group 组件：提供单选按钮组，用于选择用户类型（管理员或普通用户）。
   • el-button 组件：登录和注册按钮。

2. <script setup> 部分：

   • 使用Vue 3中的script setup语法。
   • 引入了Vue、Vue Router、axios以及Element Plus的ElMessage组件。
   • 使用reactive和ref创建响应式数据和引用。
   • 使用useRouter获取Vue Router 实例。
   • 定义了一些数据变量，如 userType、loginForm、loginRules 等，以及一些处理登录和注册逻辑的函数。
   • 使用axios进行登录验证，并通过Vue Router导航到相应页面。

3. <style> 部分：

   • 设置了页面元素的样式，包括背景、登录容器、标题等。
   • 通过类名设置了一些样式属性，如边框、圆角、透明度等。