Update login.vue

vue/src/views/login.vue

@@ -1,48 +1,49 @@
 <template>
   <div>
     <div class="login-container">
-      <div style="width:350px" class="login-box">
-        <div style="font-weight: bold; font-size: 24px; text-align: center; margin-bottom: 30px">
-          登 录
-        </div>
+      <div style="width: 350px" class="login-box">
+        <div style="font-weight: bold; font-size: 24px; text-align: center; margin-bottom: 30px">学绩云端</div>
         <el-form :model="data.form" ref="formRef" :rules="rules">
           <el-form-item prop="username">
-            <el-input prefix-icon="User" v-model="data.form.username" placeholder="请输入账号"/>
+            <el-input prefix-icon="User" v-model="data.form.username" placeholder="请输入账号" />
           </el-form-item>
           <el-form-item prop="password">
-            <el-input show-password prefix-icon="Lock" v-model="data.form.password" placeholder="请输入密码"/>
+            <el-input show-password prefix-icon="Lock" v-model="data.form.password"  placeholder="请输入密码" />
+          </el-form-item>
+          <el-form-item prop="role">
+            <el-select style="width: 100%" v-model="data.form.role">
+              <el-option value="ADMIN" label="管理员"></el-option>
+              <el-option value="STUDENT" label="学生"></el-option>
+            </el-select>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" style="width: 100%" @click="login">登 录</el-button>
           </el-form-item>
         </el-form>
-        <div style="margin-top: 30px; text-align: right">
-          还没有账号？<a href="/register">手机号一键注册！</a>
+        <div style="margin-top: 5px; text-align:center;">
+          点击 <a href="/register">注册</a>
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup>
-
+<script setup>// vue3语法糖
 import {reactive, ref} from "vue"
-import request from "@/utils/request.js"
-import {ElMessage} from "element-plus"
+import request from "@/utils/request";
+import {ElMessage} from "element-plus";
 import router from "@/router";
 
-const data = reactive(
-    {
-      form: {}
-    }
-)
+const data = reactive({
+  form: { role: 'ADMIN' }
+})
 
 const rules = reactive({
   username: [
-    {required: true, message: '请输入账号', trigger: 'blur'},
+    { required: true, message: '请输入账号', trigger: 'blur' },
   ],
   password: [
-    {required: true, message: '请输入密码', trigger: 'blur'},
+    { required: true, message: '请输入密码', trigger: 'blur' },
   ],
 })
 
@@ -54,8 +55,9 @@ const login = () => {
       request.post('/login', data.form).then(res => {
         if (res.code === '200') {
           localStorage.setItem('student-user', JSON.stringify(res.data))
-          ElMessage.success('登陆成功')
-          router.push ('/home') //跳转主页
+          ElMessage.success('登录成功')
+          console.log(res.data)
+          router.push('/home') // 跳转到主页
         } else {
           ElMessage.error(res.msg)
         }
@@ -65,6 +67,8 @@ const login = () => {
 }
 </script>
 
+
+
 <style scoped>
 .login-container {
   min-height: 100vh;
@@ -72,14 +76,12 @@ const login = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-image: url("@/assets/imgs/backg.jpg");
+  background-image: url("src/assets/imgs/backg.jpg");
   background-size: cover;
 }
-
 .login-box {
-  background-color: rgba(255, 255, 255, .5);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  border: 1px solid antiquewhite;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
   padding: 30px;
   border-radius: 5px;
 }