diff --git a/study-project-backend/src/main/java/com/example/config/SecurityConfiguration.java b/study-project-backend/src/main/java/com/example/config/SecurityConfiguration.java
index f3e37c6..7a3891f 100644
--- a/study-project-backend/src/main/java/com/example/config/SecurityConfiguration.java
+++ b/study-project-backend/src/main/java/com/example/config/SecurityConfiguration.java
@@ -42,6 +42,7 @@ public class SecurityConfiguration {
                 .and()
                 .logout()
                 .logoutUrl("/api/auth/logout")
+                .logoutSuccessHandler(this::onAuthenticationSuccess)
                 .and()
                 .csrf()
                 .disable()
@@ -54,6 +55,18 @@ public class SecurityConfiguration {
                 .build();
     }
 
+    private CorsConfigurationSource corsConfigurationSource() {
+        CorsConfiguration cors = new CorsConfiguration();
+        cors.addAllowedOriginPattern("*");
+        cors.setAllowCredentials(true);
+        cors.addAllowedHeader("*");
+        cors.addAllowedMethod("*");
+        cors.addExposedHeader("*");
+        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
+        source.registerCorsConfiguration("/**", cors);
+        return source;
+    }
+
     @Bean
     public AuthenticationManager authenticationManager(HttpSecurity security) throws Exception {
         return security
@@ -68,21 +81,12 @@ public class SecurityConfiguration {
         return new BCryptPasswordEncoder();
     }
 
-    private CorsConfigurationSource corsConfigurationSource(){
-        CorsConfiguration cors = new CorsConfiguration();
-        cors.addAllowedOriginPattern("*");
-        cors.setAllowCredentials(true);
-        cors.addAllowedMethod("*");
-        cors.addAllowedHeader("*");
-        cors.addExposedHeader("*");
-        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
-        source.registerCorsConfiguration("/**", cors);
-        return source;
-    }
-
     public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException {
         response.setCharacterEncoding("utf-8");
-        response.getWriter().write(JSONObject.toJSONString(RestBean.success("登录成功")));
+        if(request.getRequestURI().endsWith("/login"))
+            response.getWriter().write(JSONObject.toJSONString(RestBean.success("登录成功")));
+        else if(request.getRequestURI().endsWith("/logout"))
+            response.getWriter().write(JSONObject.toJSONString(RestBean.success("退出登录成功")));
     }
 
     public void onAuthenticationFailure(HttpServletRequest request, HttpServletResponse response, AuthenticationException exception) throws IOException {
diff --git a/study-project-frontend/package-lock.json b/study-project-frontend/package-lock.json
index 87dcb2c..c886c5f 100644
--- a/study-project-frontend/package-lock.json
+++ b/study-project-frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.1.0",
+        "axios": "^1.3.5",
         "element-plus": "^2.3.3",
         "pinia": "^2.0.32",
         "vue": "^3.2.47",
@@ -734,14 +735,12 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "peer": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/axios": {
       "version": "1.3.5",
       "resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.5.tgz",
       "integrity": "sha512-glL/PvG/E+xCWwV8S6nCHcrfg1exGx7vxyUIivIA1iL7BIh6bePylCfVHwp6k13ao7SATxB6imau2kqY+I67kw==",
-      "peer": true,
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -809,7 +808,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "peer": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -848,7 +846,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "peer": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -975,7 +972,6 @@
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "peer": true,
       "engines": {
         "node": ">=4.0"
       },
@@ -989,7 +985,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "peer": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -1168,7 +1163,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -1177,7 +1171,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "peer": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -1337,8 +1330,7 @@
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "peer": true
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
diff --git a/study-project-frontend/package.json b/study-project-frontend/package.json
index 151e468..ed5e5e0 100644
--- a/study-project-frontend/package.json
+++ b/study-project-frontend/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
+    "axios": "^1.3.5",
     "element-plus": "^2.3.3",
     "pinia": "^2.0.32",
     "vue": "^3.2.47",
diff --git a/study-project-frontend/src/components/welcome/LoginPage.vue b/study-project-frontend/src/components/welcome/LoginPage.vue
index 7849133..9b3c804 100644
--- a/study-project-frontend/src/components/welcome/LoginPage.vue
+++ b/study-project-frontend/src/components/welcome/LoginPage.vue
@@ -5,12 +5,12 @@
             <div style="font-size: 14px;color: grey">在进入系统之前请先输入用户名和密码进行登录</div>
         </div>
         <div style="margin-top: 50px">
-            <el-input type="text" placeholder="用户名/邮箱">
+            <el-input v-model="form.username" type="text" placeholder="用户名/邮箱">
                 <template #prefix>
                     <el-icon><User /></el-icon>
                 </template>
             </el-input>
-            <el-input type="password" style="margin-top: 10px" placeholder="密码">
+            <el-input v-model="form.password" type="password" style="margin-top: 10px" placeholder="密码">
                 <template #prefix>
                     <el-icon><Lock /></el-icon>
                 </template>
@@ -18,14 +18,14 @@
         </div>
         <el-row style="margin-top: 5px">
             <el-col :span="12" style="text-align: left">
-                <el-checkbox v-model="checked1" label="记住我"/>
+                <el-checkbox v-model="form.remember" label="记住我"/>
             </el-col>
             <el-col :span="12" style="text-align: right">
                 <el-link>忘记密码？</el-link>
             </el-col>
         </el-row>
         <div style="margin-top: 40px">
-            <el-button style="width: 270px" type="success" plain>立即登录</el-button>
+            <el-button @click="login()" style="width: 270px" type="success" plain>立即登录</el-button>
         </div>
         <el-divider>
             <span style="color: grey;font-size: 13px">没有账号</span>
@@ -38,6 +38,31 @@
 
 <script setup>
 import {User, Lock} from '@element-plus/icons-vue'
+import {reactive} from "vue";
+import {ElMessage} from "element-plus";
+import {post} from "@/net";
+import router from "@/router";
+
+const form = reactive({
+    username: '',
+    password: '',
+    remember: false
+})
+
+const login = () => {
+    if(!form.username || !form.password) {
+        ElMessage.warning('请填写用户名和密码！')
+    } else {
+        post('/api/auth/login', {
+            username: form.username,
+            password: form.password,
+            remember: form.remember
+        }, (message) => {
+            ElMessage.success(message)
+            router.push('/index')
+        })
+    }
+}
 </script>
 
 <style scoped>
diff --git a/study-project-frontend/src/main.js b/study-project-frontend/src/main.js
index 26a91b2..2b28b0a 100644
--- a/study-project-frontend/src/main.js
+++ b/study-project-frontend/src/main.js
@@ -5,9 +5,12 @@ import App from './App.vue'
 import router from './router'
 
 import 'element-plus/dist/index.css'
+import axios from "axios";
 
 const app = createApp(App)
 
+axios.defaults.baseURL = 'http://localhost:8080'
+
 app.use(createPinia())
 app.use(router)
 
diff --git a/study-project-frontend/src/net/index.js b/study-project-frontend/src/net/index.js
new file mode 100644
index 0000000..421c940
--- /dev/null
+++ b/study-project-frontend/src/net/index.js
@@ -0,0 +1,32 @@
+import axios from "axios";
+import {ElMessage} from "element-plus";
+
+const defaultError = () => ElMessage.error('发生了一些错误，请联系管理员')
+const defaultFailure = (message) => ElMessage.warning(message)
+
+function post(url, data, success, failure = defaultFailure, error = defaultError) {
+    axios.post(url, data, {
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        withCredentials: true
+    }).then(({data}) => {
+        if(data.success)
+            success(data.message, data.status)
+        else
+            failure(data.message, data.status)
+    }).catch(error)
+}
+
+function get(url, success, failure = defaultFailure, error = defaultError) {
+    axios.get(url, {
+        withCredentials: true
+    }).then(({data}) => {
+        if(data.success)
+            success(data.message, data.status)
+        else
+            failure(data.message, data.status)
+    }).catch(error)
+}
+
+export { get, post }
\ No newline at end of file
diff --git a/study-project-frontend/src/views/IndexView.vue b/study-project-frontend/src/views/IndexView.vue
index 10b6814..a67183d 100644
--- a/study-project-frontend/src/views/IndexView.vue
+++ b/study-project-frontend/src/views/IndexView.vue
@@ -3,12 +3,21 @@
       欢迎进入到学习平台
   </div>
   <div>
-      <el-button type="danger" plain>退出登录</el-button>
+      <el-button @click="logout()" type="danger" plain>退出登录</el-button>
   </div>
 </template>
 
 <script setup>
+import {get} from "@/net";
+import {ElMessage} from "element-plus";
+import router from "@/router";
 
+const logout = () => {
+    get('/api/auth/logout', (message) => {
+        ElMessage.success(message)
+        router.push('/')
+    })
+}
 </script>
 
 <style scoped>