简介

PC端采用Element Plus框架进行开发。

以下内容是对程序目录结构及其基本功能的简要概述：

public

存放配置文件。

• config.js 打包h5后，允许重新配置后端服务的ip和端口。

config.js

window.domain = { 
    url: 'http://127.0.0.1:8000/api/' 
}

src/assets

存放静态资源，如图标、css样式等。

src/components

为了提升开发效率和界面复用性，我们将常用的界面元素抽取并封装成了组件，如倒计时、试题、下拉选带分页等。

Gridadd.vue

<template>
    <div class="grid">
        <span :class="`iconfont ${ props.icon }`"></span>
        <div class="grid-content">{{ name }}</div>
    </div>
</template>

<script lang="ts" setup>
// 定义变量
const props = withDefaults(defineProps<{
    name: string,
    icon?: string,
}>(), {
    icon: 'icon-plus',
})

</script>

src/request

HTTP请求封装处理，包括在请求前自动附加鉴权令牌，以及在鉴权失败时自动重定向首页等。

src/router

用于配置和管理应用的路由信息。

src/stores

使用Pinia状态管理库，实现多页面间的状态共享，如用户登录信息。

user.ts

export const useUserStore = defineStore('user', () => {
    const id = ref(0) // ID
    const name = ref('') // 姓名
    const headFileId = ref(0)
    const type = ref(0)  // 类型（0：管理员；1：考试用户；2：子管理员；3：阅卷用户）
    const accessToken = ref('') // 访问令牌

    return { id, name, headFileId, type, accessToken }
})

src/ts

存放TypeScript文件，利用静态类型检查机制，实现代码即时排错，提高代码质量，如用户接口在代码中的应用。

Edit.vue

<template>
    <el-radio-group>
        <el-radio v-for="(user, index) in users" :key="index" :label="user.name">
        </el-radio>
    </el-radio-group>
</template>
<script lang="ts" setup>
import type { User } from '@/ts'

const users = ref<User[]>()
</script>

index.ts

export interface User {
    id: number // 主键
    name: string // 姓名
    loginName: string // 登录账号
    pwd: string // 密码
    type: number // 类型（0：管理员；1：考试用户；2：子管理员；3：阅卷用户）
    orgId: number // 机构ID
    userIds: number[]// 可管理用户IDS（子管理员有效）
    orgIds: number[]// 可管理机构IDS（子管理员有效）
}

src/views

存放页面相关文件，如首页、考试等页面的实现。