在线考试系统前端介绍

开发环境

以下为我的本地环境，仅供参考

• node:10.16.3
• npm:6.9.0
• webstorm:2021.2.3

参考材料

• 基础框架：ant-design-vue
• 脚手架参考：ant-design-vue-pro
• 表格组件：vxe-table
• 富文本组件：wangEditor

项目初始化

• Clone repo

git clone [email protected]:lsgwr/spring-boot-online-exam.git
cd spring-boot-online-exam/frontend/exam

• Install dependencies

npm install

• Compiles and hot-reloads for development

npm run serve

如果是 node 17+版本，运行时可能会报错：Error: error:0308010C:digital envelope routines::unsupported 终端运行以下命令可解决： $env:NODE_OPTIONS="--openssl-legacy-provider" 参考文章：https://blog.csdn.net/m0_65933139/article/details/130690790

• Compiles and minifies for production

npm run build

• Lints and fixes files

npm run lint

关键点

本地调试配置后端转发

vue.config.js中的proxy

devServer: {
  // development server port 8000
  port: 8000,
  proxy: 'http://localhost:80' // 这里是后端服务的ip和端口，对应调整即可
},

配置通用的后端接口前缀

在src/utils/request.js中配置，比如后端接口一般都以/api开头，那么后端接口就配置成

// 创建 axios 实例
const service = axios.create({
  baseURL: '/api', // api base_url
  timeout: 6000 // 请求超时时间
})