chore: 引入三层架构设计思路，调整项目目录结构

README.md

@@ -11,6 +11,45 @@
 - 调整`.prettierrc.json`内的配置；
 - 调整单元测试文件目录路径，迁移至`src/tests/`；
 - 引入 tailwind 插件；
+- 引入三层架构设计思路，调整项目目录结构；
+
+## Project Structure
+
+```
+├── .github ------------------------------ GitHub Actions 配置文件
+│   └── workflows
+├── .vscode ------------------------------ vscode 配置文件
+│   └── .editorconfig
+│   └── extensions.json
+│   └── settings.json
+├── api ---------------------------------- 项目HTTP API
+├── bll ---------------------------------- 业务逻辑层（根据业务调用数据访问层的接口）
+├── dal ---------------------------------- 数据访问层（调用HTTP API请求数据，并根据对应实体组装接口返回的数据）
+├── entities ----------------------------- 实体层（定义数据访问层所需的数据实体）
+├── public
+├── src
+│   ├── assets
+│   ├── components
+│   ├── router
+│   ├── store
+│   ├── styles
+│   ├── utils
+│   ├── views
+│   ├── App.vue
+│   └── main.ts
+├── .eslintrc.js
+├── .gitignore
+├── .prettierrc.json
+├── .stylelintrc.json
+├── env.d.ts
+├── index.html
+├── package.json
+├── postcss.config.js
+├── README.md
+├── tailwind.config.js
+├── tsconfig.json
+└── vite.config.ts
+```
 
 ## Customize configuration
 

api/student.api.ts

@@ -0,0 +1,39 @@
+/**
+ * 调用接口，获取指定学生的数据
+ * @param id 学生ID
+ * @returns
+ */
+function getStudentByID(id: string): Promise<any> {
+  // !模拟接口响应的数据
+  const student = {
+    sid: id,
+    firstName: 'John',
+    lastName: 'Doe',
+    gender: 'male',
+    age: '20',
+    cid: 'c_12345',
+    cName: 'Computer Science'
+  }
+
+  return Promise.resolve(student)
+}
+
+/**
+ * 调用接口，获取全部学生的数据
+ * @returns
+ */
+function getAll(): Promise<any> {
+  // !模拟接口响应的数据
+  const student = {
+    sid: 's_12345',
+    firstName: 'John',
+    lastName: 'Doe',
+    gender: 'male',
+    age: '20',
+    cid: 'c_12345',
+    cName: 'Computer Science'
+  }
+  return Promise.resolve([student])
+}
+
+export { getStudentByID, getAll }

bll/student.bll.ts

@@ -0,0 +1,9 @@
+/**
+ * @module student.bll
+ * @description 学生业务逻辑层
+ */
+import StudentDal from 'dal/student.dal'
+
+const { getAll, getDataById } = new StudentDal()
+
+export { getAll, getDataById }

dal/student.dal.ts

@@ -0,0 +1,26 @@
+/**
+ * @module student.dal
+ * @description 学生数据访问层
+ */
+import Student from 'entities/student.entity'
+import { getAll, getStudentByID } from 'api/student.api'
+
+export default class StudentDal {
+  constructor() {}
+
+  // 根据ID获取学生信息
+  async getDataById(id: string): Promise<Student> {
+    const student = await getStudentByID(id)
+    const { sid, firstName, lastName, gender, age, cid, cName } = student
+    return new Student(sid, firstName, lastName, gender, age, cid, cName)
+  }
+
+  // 根据获取全部学生信息
+  async getAll(): Promise<Student[]> {
+    const students = await getAll()
+    return students.map((student: any) => {
+      const { sid, firstName, lastName, gender, age, cid, cName } = student
+      return new Student(sid, firstName, lastName, gender, age, cid, cName)
+    })
+  }
+}

entities/student.entity.ts

@@ -0,0 +1,29 @@
+export default class Student {
+  sid: string
+  fullName: string
+  firstName: string
+  lastName: string
+  gender: string
+  age: number
+  cid: string
+  cName: string
+
+  constructor(
+    sid: string,
+    firstName: string,
+    lastName: string,
+    gender: string,
+    age: number,
+    cid: string,
+    cName: string
+  ) {
+    this.sid = sid
+    this.firstName = firstName
+    this.lastName = lastName
+    this.fullName = firstName + ' ' + lastName
+    this.gender = gender
+    this.age = age
+    this.cid = cid
+    this.cName = cName
+  }
+}

src/App.vue

@@ -13,6 +13,7 @@ import HelloWorld from './components/HelloWorld.vue'
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/about">About</RouterLink>
+        <RouterLink to="/students">Students</RouterLink>
       </nav>
     </div>
   </header>

src/router/index.ts

@@ -16,6 +16,11 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
+    },
+    {
+      path: '/students',
+      name: 'Students',
+      component: () => import('../views/StudentsView.vue')
     }
   ]
 })

src/views/StudentsView.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { getAll } from 'bll/student.bll'
+import { ref, onMounted } from 'vue'
+
+let tableData = ref()
+
+onMounted(async () => {
+  tableData.value = await getAll()
+})
+</script>
+
+<template>
+  <main>
+    <table
+      class="border-collapse w-full border border-slate-400 dark:border-slate-500 bg-white dark:bg-slate-800 text-sm shadow-sm"
+    >
+      <thead class="bg-slate-50 dark:bg-slate-700">
+        <tr>
+          <th
+            class="w-1/5 border border-slate-300 dark:border-slate-600 font-semibold p-4 text-slate-900 dark:text-slate-200 text-left"
+          >
+            Id
+          </th>
+          <th
+            class="w-1/5 border border-slate-300 dark:border-slate-600 font-semibold p-4 text-slate-900 dark:text-slate-200 text-left"
+          >
+            姓名
+          </th>
+          <th
+            class="w-1/5 border border-slate-300 dark:border-slate-600 font-semibold p-4 text-slate-900 dark:text-slate-200 text-left"
+          >
+            年龄
+          </th>
+          <th
+            class="w-1/5 border border-slate-300 dark:border-slate-600 font-semibold p-4 text-slate-900 dark:text-slate-200 text-left"
+          >
+            性别
+          </th>
+          <th
+            class="w-1/5 border border-slate-300 dark:border-slate-600 font-semibold p-4 text-slate-900 dark:text-slate-200 text-left"
+          >
+            班级
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in tableData" :key="item.id">
+          <td class="border border-slate-300 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">
+            {{ item.sid }}
+          </td>
+          <td class="border border-slate-300 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">
+            {{ item.fullName }}
+          </td>
+          <td class="border border-slate-300 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">
+            {{ item.age }}
+          </td>
+          <td class="border border-slate-300 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">
+            {{ item.gender }}
+          </td>
+          <td class="border border-slate-300 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">
+            {{ item.cName }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </main>
+</template>

tsconfig.app.json

@@ -1,12 +1,16 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "bll/", "dal/", "entities/", "api/", "src/**/*", "src/**/*.vue"], // 注意：通配规则，必须放在具体规则后面
   "exclude": ["src/**/tests/*"],
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "dal/*": ["./dal/*"],
+      "bll/*": ["./bll/*"],
+      "entities/*": ["./entities/*"],
+      "api/*": ["./api/*"]
     }
   }
 }

vite.config.ts

@@ -8,7 +8,11 @@ export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      dal: fileURLToPath(new URL('./dal', import.meta.url)),
+      bll: fileURLToPath(new URL('./bll', import.meta.url)),
+      entities: fileURLToPath(new URL('./entities', import.meta.url)),
+      api: fileURLToPath(new URL('./api', import.meta.url))
     }
   },
   // devServer 配置