1

.env

@@ -1 +1 @@
-VITE_BACKURL='http://localhost:3030'
+VITE_BACKURL='https://class1.wuyuan.dev'

public/config.json

@@ -0,0 +1,27 @@
+{
+    "studentList": [
+        "张三",
+        "李四",
+        "王五",
+        "赵六",
+        "钱七"
+    ],
+    "homeworkArrange": [
+        [
+            "语文",
+            "数学",
+            "英语"
+        ],
+        [
+            "物理",
+            "化学",
+            "生物"
+        ],
+        [
+            "政治",
+            "历史",
+            "地理"
+        ]
+    ],
+    "url": "http://localhost:3030"
+}

src/components/AppHeader.vue

@@ -0,0 +1,15 @@
+<template>
+<v-app-bar :elevation="2">
+  <template v-slot:prepend>
+    <v-app-bar-nav-icon></v-app-bar-nav-icon>
+  </template>
+
+  <v-app-bar-title>作业</v-app-bar-title>
+</v-app-bar>
+</template>
+
+<script>
+export default {
+  name: 'AppHeader'
+}
+</script>

src/components/ServerSelection.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-card title="选择服务器">
+    <v-card-text>
+      <v-form @submit.prevent="saveServerUrl">
+        <v-text-field v-model="serverUrl" label="后端地址" required />
+        <v-btn type="submit" color="primary"> 保存 </v-btn>
+      </v-form>
+    </v-card-text>
+  </v-card>
+  <v-snackbar v-model="snackbar">
+    {{ snackbarText }}
+  </v-snackbar>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      serverUrl: "",
+      snackbar: false,
+      snackbarText: "",
+    };
+  },
+  mounted() {
+    this.loadServerUrl();
+  },
+  methods: {
+    saveServerUrl() {
+      try {
+
+      // 格式化URL，去除空格，/结尾，http://开头，使用new URL()
+      if (this.serverUrl == "") {
+        localStorage.removeItem("backendServerUrl");
+        this.snackbarText = "删除成功，请刷新页面。";
+        this.snackbar = true;
+
+        return;
+      }
+      this.serverUrl =
+        new URL(this.serverUrl).protocol + "//" + new URL(this.serverUrl).host;
+      localStorage.setItem("backendServerUrl", this.serverUrl);
+      this.snackbarText = "保存成功，请刷新页面。";
+      this.snackbar = true;
+      }catch (error) {
+        console.log(error);
+        this.snackbarText = "保存失败，请检查后端地址。";
+        this.snackbar = true;
+      }
+    },
+    loadServerUrl() {
+      const savedUrl = localStorage.getItem("backendServerUrl");
+      if (savedUrl) {
+        this.serverUrl = savedUrl;
+      }
+    },
+  },
+};
+</script>

src/pages/ServerSelection.vue

@@ -1,37 +0,0 @@
-<template>
-  <v-container>
-    <v-form @submit.prevent="saveServerUrl">
-      <v-text-field
-        v-model="serverUrl"
-        label="Backend Server URL"
-        required
-      />
-      <v-btn type="submit" color="primary">Save</v-btn>
-    </v-form>
-  </v-container>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      serverUrl: ''
-    };
-  },
-  methods: {
-    saveServerUrl() {
-      localStorage.setItem('backendServerUrl', this.serverUrl);
-      alert('Server URL saved!');
-    },
-    loadServerUrl() {
-      const savedUrl = localStorage.getItem('backendServerUrl');
-      if (savedUrl) {
-        this.serverUrl = savedUrl;
-      }
-    }
-  },
-  mounted() {
-    this.loadServerUrl();
-  }
-};
-</script>

src/pages/index.vue

@@ -1,11 +1,24 @@
 <template>
+  <v-app-bar>
+    <template #prepend>
+      <v-app-bar-nav-icon icon="mdi-home"/>
+    </template>
+
+    <v-app-bar-title>
+      <strong>{{ dateString }}</strong> 作业
+    </v-app-bar-title>
+
+    <v-spacer />
+
+    <v-btn
+      icon="mdi-cog"
+      variant="text"
+      @click="ServerSelectionDialog = true"
+    />
+  </v-app-bar>
   <v-container class="main-window" fluid>
     <v-row>
       <v-col cols="11">
-        <h1>
-          作业
-          <div>{{ dateString }}</div>
-        </h1>
         <v-container fluid style="padding-left: 2px; padding-right: 2px">
           <v-row v-for="subjects in homeworkArrange" :key="subjects.name">
             <v-col
@@ -51,6 +64,32 @@
     </v-row>
   </v-container>
 
+  <v-container fluid>
+    <v-btn icon="mdi-plus" variant="text" @click="zoom('up')" />
+    <v-btn icon="mdi-minus" variant="text" @click="zoom('out')" />
+    <v-btn
+      v-if="!synced"
+      color="primary"
+      size="large"
+      :loading="downloadLoading"
+      @click="downloadData"
+    >
+      下载
+    </v-btn>
+    <v-btn
+      v-if="!synced"
+      color="error"
+      size="large"
+      :loading="uploadLoading"
+      class="ml-2"
+      @click="uploadData"
+    >
+      上传
+    </v-btn>
+    <v-btn v-else color="success" size="large" @click="showSyncMessage">
+      同步完成
+    </v-btn>
+  </v-container>
   <v-dialog v-model="dialogVisible" width="500" @click:outside="handleClose">
     <v-card>
       <v-card-title>{{ dialogTitle }}</v-card-title>
@@ -95,45 +134,25 @@
       </v-card-text>
     </v-card>
   </v-dialog>
+  <v-dialog v-model="ServerSelectionDialog" width="500">
+    <ServerSelection />
+  </v-dialog>
 
-  <v-container class="upload">
+  <v-snackbar v-model="snackbar" :timeout="2000">
-    <v-btn icon="mdi-plus" variant="text" @click="zoom('up')" />
+    {{ snackbarText }}
-    <v-btn icon="mdi-minus" variant="text" @click="zoom('out')" />
+  </v-snackbar>
-    <v-btn
-      v-if="!synced"
-      color="primary"
-      size="large"
-      :loading="downloadLoading"
-      @click="downloadData"
-    >
-      下载
-    </v-btn>
-    <v-btn
-      v-if="!synced"
-      color="error"
-      size="large"
-      :loading="uploadLoading"
-      class="ml-2"
-      @click="uploadData"
-    >
-      上传
-    </v-btn>
-    <v-btn v-else color="success" size="large" @click="showSyncMessage">
-      同步完成
-    </v-btn>
-  </v-container>
 </template>
 
 <script>
 import axios from "axios";
 import { useDisplay } from "vuetify";
-
+import ServerSelection from "../components/ServerSelection.vue";
 export default {
   name: "HomeworkBoard",
-
+  components: { ServerSelection },
   data() {
     return {
-      backurl: localStorage.getItem('backendServerUrl') || '',
+      backurl: localStorage.getItem("backendServerUrl") || "",
       currentEditSubject: null,
       studentList: ["加载中"],
       selectedSet: new Set(),
@@ -151,6 +170,7 @@ export default {
       snackbar: false,
       snackbarText: "",
       fontSize: 28,
+      ServerSelectionDialog: false,
     };
   },
 
@@ -172,7 +192,7 @@ export default {
 
   methods: {
     async initializeData() {
-      const res = await axios.get(this.backurl + "/config");
+      const res = await axios.get(this.backurl + "/config.json");
       this.studentList = res.data.studentList;
       this.homeworkArrange = res.data.homeworkArrange;
 
@@ -347,7 +367,10 @@ export default {
     },
 
     updateBackendUrl() {
-      const savedUrl = localStorage.getItem('backendServerUrl');
+      if (!this.backurl) {
+       // localStorage.setItem("backendServerUrl", import.meta.env.VITE_BACKURL);
+      }
+      const savedUrl = localStorage.getItem("backendServerUrl");
       if (savedUrl) {
         this.backurl = savedUrl;
       }

src/router/index.js

@@ -34,13 +34,3 @@ router.isReady().then(() => {
 })
 
 export default router
-
-import ServerSelection from '@/pages/ServerSelection.vue'
-
-const routes = [
-  {
-    path: '/server-selection',
-    name: 'ServerSelection',
-    component: ServerSelection,
-  },
-]