前端登录代码

student/vue/node_modules/.vite/deps/_metadata.json

@@ -1,83 +1,107 @@
 {
   "hash": "7225a1f6",
-  "browserHash": "ba7823db",
+  "browserHash": "80efce31",
   "optimized": {
     "@element-plus/icons-vue": {
       "src": "../../@element-plus/icons-vue/dist/index.js",
       "file": "@element-plus_icons-vue.js",
-      "fileHash": "4cd33052",
+      "fileHash": "fb8b8afc",
       "needsInterop": false
     },
     "axios": {
       "src": "../../axios/index.js",
       "file": "axios.js",
-      "fileHash": "c47e6d18",
+      "fileHash": "5fa0af9a",
       "needsInterop": false
     },
     "element-plus": {
       "src": "../../element-plus/es/index.mjs",
       "file": "element-plus.js",
-      "fileHash": "16359465",
+      "fileHash": "543f208b",
       "needsInterop": false
     },
     "element-plus/dist/locale/zh-cn.mjs": {
       "src": "../../element-plus/dist/locale/zh-cn.mjs",
       "file": "element-plus_dist_locale_zh-cn__mjs.js",
-      "fileHash": "c6ae2628",
+      "fileHash": "750939d6",
       "needsInterop": false
     },
     "vue": {
       "src": "../../vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "951743e7",
+      "fileHash": "4d986ca1",
       "needsInterop": false
     },
     "vue-router": {
       "src": "../../vue-router/dist/vue-router.mjs",
       "file": "vue-router.js",
-      "fileHash": "8b63b36d",
+      "fileHash": "a41401d8",
       "needsInterop": false
     },
     "element-plus/es": {
       "src": "../../element-plus/es/index.mjs",
       "file": "element-plus_es.js",
-      "fileHash": "17487cbd",
+      "fileHash": "4c473bb5",
       "needsInterop": false
     },
     "element-plus/es/components/base/style/index": {
       "src": "../../element-plus/es/components/base/style/index.mjs",
       "file": "element-plus_es_components_base_style_index.js",
-      "fileHash": "436a4481",
+      "fileHash": "804ab40f",
       "needsInterop": false
     },
     "element-plus/es/components/menu/style/index": {
       "src": "../../element-plus/es/components/menu/style/index.mjs",
       "file": "element-plus_es_components_menu_style_index.js",
-      "fileHash": "dca3a7fc",
+      "fileHash": "c86889de",
       "needsInterop": false
     },
     "element-plus/es/components/sub-menu/style/index": {
       "src": "../../element-plus/es/components/sub-menu/style/index.mjs",
       "file": "element-plus_es_components_sub-menu_style_index.js",
-      "fileHash": "f59c9e52",
+      "fileHash": "7ad0e826",
       "needsInterop": false
     },
     "element-plus/es/components/menu-item/style/index": {
       "src": "../../element-plus/es/components/menu-item/style/index.mjs",
       "file": "element-plus_es_components_menu-item_style_index.js",
-      "fileHash": "ee49ed3d",
+      "fileHash": "1760701f",
       "needsInterop": false
     },
     "element-plus/es/components/icon/style/index": {
       "src": "../../element-plus/es/components/icon/style/index.mjs",
       "file": "element-plus_es_components_icon_style_index.js",
-      "fileHash": "445a4382",
+      "fileHash": "bc5ca56d",
       "needsInterop": false
     },
     "element-plus/es/components/message/style/index": {
       "src": "../../element-plus/es/components/message/style/index.mjs",
       "file": "element-plus_es_components_message_style_index.js",
-      "fileHash": "445b08dd",
+      "fileHash": "9c6bfddc",
+      "needsInterop": false
+    },
+    "element-plus/es/components/form/style/index": {
+      "src": "../../element-plus/es/components/form/style/index.mjs",
+      "file": "element-plus_es_components_form_style_index.js",
+      "fileHash": "1377dabe",
+      "needsInterop": false
+    },
+    "element-plus/es/components/form-item/style/index": {
+      "src": "../../element-plus/es/components/form-item/style/index.mjs",
+      "file": "element-plus_es_components_form-item_style_index.js",
+      "fileHash": "f3e19a1a",
+      "needsInterop": false
+    },
+    "element-plus/es/components/input/style/index": {
+      "src": "../../element-plus/es/components/input/style/index.mjs",
+      "file": "element-plus_es_components_input_style_index.js",
+      "fileHash": "673afc95",
+      "needsInterop": false
+    },
+    "element-plus/es/components/button/style/index": {
+      "src": "../../element-plus/es/components/button/style/index.mjs",
+      "file": "element-plus_es_components_button_style_index.js",
+      "fileHash": "78c59438",
       "needsInterop": false
     }
   },
@@ -91,11 +115,11 @@
     "chunk-7AKRAGCT": {
       "file": "chunk-7AKRAGCT.js"
     },
-    "chunk-BEBKB23Y": {
-      "file": "chunk-BEBKB23Y.js"
-    },
     "chunk-5WWUZCGV": {
       "file": "chunk-5WWUZCGV.js"
+    },
+    "chunk-BEBKB23Y": {
+      "file": "chunk-BEBKB23Y.js"
     }
   }
 }

student/vue/src/views/Login.vue

@@ -1,9 +1,51 @@
 <template>
   <div>
-    登录
+    <div class="login-container">
+      <div style="width: 350px" class = "login-box">
+        <div style="font-width: bold; font-size: 24px; text-align: center; margin-bottom: 30px">登 录</div>
+        <el-form ref="form" :model="data.form">
+          <el-form-item>
+            <el-input prefix-icon="User" v-model="data.form.username" placeholder="请输入账号"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-input prefix-icon="Lock" v-model="data.form.username" placeholder="请输入密码"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" style="width: 100%">登 录</el-button>
+          </el-form-item>
+        </el-form>
+        <div style="margin-top: 30px; text-align: left">
+          还没有账号?点击这里进行<a href="/register">注册</a>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import {reactive} from "vue";
 
-</script>
+const data = reactive({
+  form: {}
+})
+
+</script>
+
+<style scoped>
+.login-container {
+  min-height: 100vh;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image: url("@/assets/imgs/bg.png");
+  background-size: cover;
+}
+
+.login-box{
+  background-color: rgba(255,255,255,.8);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  padding: 30px;
+  border-radius: 7px;
+}
+</style>