修改No2.尝试将routes中的authenticationRoutes修改了，没有问题，将authentication.vue从components移动到新建的文件夹views中，测试完成了authentication.js中的login方法，不知为何删除#{apiUrl}'/checkLogin'中的${apiUrl}就能用，不删就不行，留待下次学习

src/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
-import authentication from "./components/authentication.vue";
+import authentication from "./views/authentication.vue";
 </script>
 
 <template>

src/components/authentication.vue

@@ -1,13 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-  <h1>登录</h1>
-  <el-input >pls enter the username</el-input>
-  <el-input>pls enter the username</el-input>
-</template>
-
-<style scoped>
-
-</style>

src/router/authentication.js

@@ -1,10 +1,7 @@
-// ！！！这是一个示例，请根据实际情况修改！！！
+import authentication from '../views/authentication.vue'
-// import Login from '../views/authentication/Login.vue'
-// import Register from '../views/authentication/Register.vue'
-// import Profile from '../views/authentication/Profile.vue'
 
 export default [
-    // { path: '/login', component: Login },
+    { path: '/login', component: authentication },
     // { path: '/register', component: Register },
     // { path: '/profile', component: Profile }
 ]

src/router/index.js

@@ -6,11 +6,10 @@ import meetingManagementRoutes from './meetingManagement'
 import newsManagementRoutes from './newsManagement'
 import organizationManagementRoutes from './organizationManagement'
 import userManagementRoutes from './userManagement'
-import authentication from "../components/authentication.vue";
+import authentication from "../views/authentication.vue";
 
 const routes = [
-    { path: '/about', component: HelloWorld },
+    { path: '/', component: HelloWorld },
-    { path: '/login', component: authentication},
     ...authenticationRoutes,
     ...courseManagementRoutes,
     ...meetingManagementRoutes,

src/services/authenticationService.js

@@ -1,5 +1,12 @@
-import { createApp } from 'vue';
+import axios from "axios";
-import App from '../App.vue';
-import router from '../router';
 
-createApp(App).use(router).mount('#app');
+export default {
+    login(username, password, apiUrl="http://localhost:8080"){
+        return axios.get(`/checkLogin`, {username:username, password:password})
+            .then(response => {
+                alert("hahaha");
+                // 处理登录成功的逻辑
+                return response.data;
+            });
+    }
+}

src/views/authentication.vue

@@ -0,0 +1,36 @@
+<script setup>
+
+</script>
+
+<template>
+  <h1>登录</h1>
+  <el-input v-model="username" placeholder="pls enter the username"></el-input>
+  <el-input v-model="password" placeholder="pls enter the password"></el-input>
+  <el-button type="success" @click="handleLogin">LOGIN</el-button>
+</template>
+
+<script>
+   import authenticationService from "../services/authenticationService.js";
+
+   export default {
+     name: 'Authentication',
+     data(){
+       return {
+         username: '',
+         password: '',
+       };
+     },methods:{
+       handleLogin(){
+         authenticationService.login(this.username,this.password).then(res=>{
+            alert(res);
+         });
+       }
+     }
+   }
+
+
+</script>
+
+<style scoped>
+
+</style>