选择考试

src/api/api.ts

@@ -47,29 +47,31 @@ import { store } from "@/store";
 
 export function login() {
   // return execute("/api/user/login", "GET");
-  return httpApp.get("/api/user/login", {
-    headers: {
-      "auth-info":
-        "loginname=" + store.env.loginName + ";password=" + store.env.password,
-    },
-    baseURL: store.env.server,
-  });
+  return httpApp.get("/api/user/login");
 }
 
-// export function getExams(pageNumber, pageSize) {
-//   let uri = "/api/exams";
-//   const param = [];
-//   if (pageNumber != undefined) {
-//     param.push("pageNumber=" + pageNumber);
-//   }
-//   if (pageSize != undefined) {
-//     param.push("pageSize=" + pageSize);
-//   }
-//   if (param.length > 0) {
-//     uri = uri + "?" + param.join("&");
-//   }
-//   return execute(uri, "GET");
-// }
+export function getExams(pageNumber: number, pageSize: number) {
+  // let uri = "/api/exams";
+  // const param = [];
+  // if (pageNumber != undefined) {
+  //   param.push("pageNumber=" + pageNumber);
+  // }
+  // if (pageSize != undefined) {
+  //   param.push("pageSize=" + pageSize);
+  // }
+  // if (param.length > 0) {
+  //   uri = uri + "?" + param.join("&");
+  // }
+  // return execute(uri, "GET");
+
+  return httpApp.get(
+    "/api/exams?" +
+      new URLSearchParams({
+        pageNumber: "" + pageNumber,
+        pageSize: "" + pageSize,
+      })
+  );
+}
 
 // export function getStudents(examId, pageNumber, pageSize, params) {
 //   const form = {

src/plugins/axiosApp.ts

@@ -9,7 +9,7 @@ import { message } from "ant-design-vue";
 import { store } from "@/store";
 
 const config = {
-  baseURL: store.env.server || "",
+  // baseURL: store.env.server || "",
   timeout: 1 * 60 * 1000, // Timeout
   withCredentials: true, // Check cross-site Access-Control
 };
@@ -22,6 +22,11 @@ _axiosApp.interceptors.request.use(
     if (config.setGlobalMask) {
       store.globalMask = true;
     }
+    config.baseURL = store.env.server;
+    config.headers = {
+      "auth-info":
+        "loginname=" + store.env.loginName + ";password=" + store.env.password,
+    };
     return config;
   },
   function (error) {

src/router/index.ts

@@ -15,6 +15,14 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/features/Home/Home.vue"),
   },
+  {
+    path: "/exam-list",
+    name: "ExamList",
+    component: () =>
+      import(
+        /* webpackChunkName: "about" */ "../views/features/ExamList/ExamList.vue"
+      ),
+  },
   {
     path: "/about",
     name: "About",

src/store.ts

@@ -45,7 +45,7 @@ const handler = function () {
     },
   };
 };
-const store = new Proxy(_store, handler());
+const store = new Proxy(_store, handler()) as Store;
 
 export { store };
 

src/types/index.ts

@@ -12,6 +12,12 @@ export interface Store {
       userName: string;
       userRole: string;
     };
+    exam: {
+      id: number;
+      name: string;
+      examTime: string;
+    };
+    examId: number;
   };
 
   config: {

src/views/features/ExamList/ExamList.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="wp">
+    <div class="hd">
+      <div class="logo"><img src="img/logo.png" /></div>
+      <span class="y">
+        欢迎您，<span id="user-name"></span> <span class="pipe">|</span
+        ><a href="login.html">退出</a>
+      </span>
+    </div>
+    <div class="cont">
+      <div class="title cl" style="background: #fff">
+        <span class="y"
+          >共有<b id="total-count">{{ examList.length }}</b
+          >场考试，请选择</span
+        >
+        <h2>考试列表</h2>
+      </div>
+      <table cellpadding="0" cellspacing="0" width="100%" class="tablelist">
+        <thead>
+          <th>ID</th>
+          <th>考试名称</th>
+          <th>创建时间</th>
+          <th>操作</th>
+        </thead>
+        <tbody id="exam-list">
+          <tr v-for="(exam, index) in examList" :key="index">
+            <td>{{ exam.id }}</td>
+            <td>{{ exam.name }}</td>
+            <td>{{ exam.examTime }}</td>
+            <td><a-button @click="selectExam(exam)">进入考试</a-button></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="page">
+        <span class="back" id="previous-button">上页</span>
+        <div id="page-list"></div>
+        <span class="next" id="next-button">下页</span>
+      </div>
+    </div>
+    <div class="ft">
+      Copyright © 2011-2020 www.qmth.com.cn, All Rights Reserved
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { store } from "@/store";
+import { onMounted, ref } from "vue";
+import { getExams } from "@/api/api";
+import router from "@/router";
+
+let examList = ref([]);
+// TODO: add pager
+
+onMounted(async () => {
+  const exams = await getExams(1, 1000);
+  console.log(exams);
+  examList.value = exams.data;
+});
+
+const selectExam = (exam) => {
+  store.env.exam = exam;
+  store.env.examId = exam.id;
+  router.push("/home");
+};
+</script>

src/views/features/Home/Home.vue

@@ -3,8 +3,8 @@
     <div class="hd">
       <div class="logo"><img src="img/logo.png" /></div>
       <span class="y">
-        欢迎您，<span id="user-name"></span> <span class="pipe">|</span
-        ><a href="login.html">退出</a>
+        欢迎您，<span id="user-name">{{ userName }}</span>
+        <span class="pipe">|</span><a href="login.html">退出</a>
       </span>
     </div>
     <div class="cont">
@@ -17,7 +17,7 @@
         <h3>功能选择</h3>
         <ul class="cl">
           <li class="l1">
-            <a href="exam-list.html"><span></span>考试切换</a>
+            <router-link to="/exam-list"><span></span>考试切换</router-link>
           </li>
           <li class="l2">
             <a href="sync.html"><span></span>数据同步</a>

src/views/features/Login/Login.vue

@@ -85,10 +85,10 @@ const loginAction = () => {
   login()
     .then((res) => {
       console.log(res.data);
-      Object.assign(store.env.user, res.data.user);
+      Object.assign(store.env.user, res.data);
       window.localStorage.setItem("env", JSON.stringify(store.env));
       // window.location.href = 'exam-list.html'
-      router.push("/home");
+      router.push("/exam-list");
     })
     .catch((err) => {
       alert("登陆失败，用户名或密码错误");