简介

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

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

public

存放配置文件、静态资源。

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

config.js

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

src/api

存放后端接口信息

src/assets

存放字体图标

src/components

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

xmks-card-add.vue

<template>
    <div class="xmks-card-add">
        <span class="iconfont icon-tubiaoziti2-02 xmks-card-add__icon"></span>
        <span class="xmks-card-add__txt">{{ name }}</span>
    </div>
</template>

<script lang="ts" setup>
/************************变量定义相关***********************/
withDefaults(
    defineProps<{
        name: string; // 
    }>(),
    {

    }
);
</script>

src/request

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

src/router

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

src/stores

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

user.ts

import { ref } from 'vue'
import { defineStore, acceptHMRUpdate } from 'pinia'

// 用户缓存
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('') // 访问令牌
    const sysName = ref('')// 系统名称

    return { id, name, headFileId, type, accessToken, sysName }
}, {
    persist: true
})

if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))
}

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/base/user'

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

user.ts

export interface User {
    id: number | null// ID
    orgId?: number // 机构ID（子管理员、阅卷用户没有）
    name: string // 名称
    loginName: string // 登录账号
    type: number | null // 类型（0：管理员；1：考试用户；2：子管理员；3：阅卷用户）
    state: number | null// 状态（1：正常；2：冻结）
    userIds?: number[] // 可管理用户IDS（子管理员有效）
    [key: string]: any;// 扩展字段

}

src/util

存放工具类

questionUtil.ts

import type { Question } from "@/ts/exam/question";

export const hasSubjective = (question: Question): boolean => {
    return (question.markType == 2 && (question.type == 3 || question.type == 5))
};
export const hasObjective = (question: Question): boolean => {
    return !hasSubjective(question)
};
export const hasSingleChoice = (question: Question): boolean => {
    return question.type == 1
};
export const hasMultipleChoice = (question: Question): boolean => {
    return question.type == 2
};
export const hasFillBlank = (question: Question): boolean => {
    return question.type == 3
};
export const hasJudge = (question: Question): boolean => {
    return question.type == 4
};
export const hasQA = (question: Question): boolean => {
    return question.type == 5
};
export const fillBlankNum = (question: Question): number => {
    let fillblanksNum = question.title.match(/[_]{5,}/g)?.length
    if (!fillblanksNum) {
        fillblanksNum = 0
    }

    return fillblanksNum
}

src/views

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