小编这次要给大家分享的是详解SpringBoot +Vue如何开发考试系统,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。
一、考试系统简介
新鲜出炉的一款SpringBoot +Vue的考试系统,支持多种题型:选择题、多选题、判断题、填空题、综合题以及数学公式。支持在线考试,教师在线批改试卷。
二、项目架构
后端技术栈
前端技术
项目说明
考试系统整体为前后端分离项目,作者又在这基础上,将后端拆分成两个管理员后端和学生考试后端,后端的代码是在一起。前端也做了类似的拆分,所以其实是两个后端项目,两个前端项目。本篇先讲一下学生考试部分的前后端环境搭建。功能包括:学员在线做课程试题、在线考试、错题本功能记录、考试记录、个人中心。
后端项目地址
后端项目地址: https://gitee.com/zhuimengshaonian/wisdom-education
前端项目地址
三、实战
3.1 后端服务
下载项目
git clone https://gitee.com/zhuimengshaonian/wisdom-education.git
初始化数据库
创建数据库education
,执行数据库脚本。这里数据库脚本在项目的db
目录下。
init-data.sql #初始化数据
init-region.sql #初始化system_region
init-table.sql #初始化表结构
注意:system_log
表少一个字段request_url
,类型为varchar(100)
。
修改配置
阅读项目配置文件可知,项目使用的prod
的配置文件,所以我们直接看application-prod.yml
文件即可。这里主要关注数据库连接,再添加一下redis
的配置。
server:
port: 8001 #服务器端口
servlet:
context-path: /
#spring jdbc配置
spring:
#redis相关配置
redis:
jedis:
pool:
max-active: 8
max-wait: 30
max-idle: 8
min-idle: 0
port: 6379
host: localhost
password: 123456
#数据库连接
datasource:
url: jdbc:mysql://localhost:3306/education?serverTimezone=GMT%2B8&useSSL=true&useUnicode=true&characterEncoding=utf8
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
运行Application
运行EducationStudentApiApplication
类,即可本地启动后端服务。
3.2 前端服务
下载项目
git clone https://gitee.com/zhuimengshaonian/wisdom-education-front.git
修改配置
用开发工具打开前端项目,这里我用的VSCode
,打开config/index.js
,这里主要修改一下proxyTable
的内容:
proxyTable: {
'/proxyApi': {
target: 'http://localhost:8001',
changeOrigin: true,
pathRewrite: {
'/proxyApi': 'http://localhost:8001'
}
}
}
运行项目
在命令行窗口,或者VSCode
的终端
执行下面命令就可以本地运行项目。
npm install #安装依赖
npm run dev #开发环境启动,默认http://localhost:8080/
要在服务端部署项目,执行下面打包命令,然后使用web
容器部署即可。
npm run build #项目打包
npm run build --report #项目打包并输出分析报告
3.3 运行效果
浏览器访问http://localhost:8080
,默认用户密码: student 123456,就可以直接登录了。
运行效果:
四、最后
项目具备了考试系统基本功能,本篇讲了学生考试部分的前后端的搭建。另外比较重要的一部分就是管理员前端项目,本人不是专业搞前端的,还没搞定管理员前端项目,尝试过程中也遇到了很多问题,FAQ做个记录。遇到问题其实也不可怕,合理利用搜索引擎 + 开启大脑思考功能,办法总比困难多嘛!我相信问题一定可以解决的。下篇讲考试系统的管理员部分的前后端搭建。
FAQ
1.npm install 报错:Error: Can't find Python executable "python", you can set the PYTHON env variable。
解决版方法:执行 npm install -g windows-build-tools命令
2.window环境下npm install node-sass报错的解决方法。
解决方法:https://www.jb51.net/article/129081.htm
3.Windows下安装前端项目,node-sass报错。
解决方法:npm install node-sass@4.12.0 --save
4.Vue packages version mismatch:vue@2.5.16, vue-template-compiler@2.5.2。
解决办法:保持版本一致:npm install vue@2.5.2 --save
5.How to fix ReferenceError: primordials is not defined in node。
解决方法:npm -g install gulp-cli
看完这篇关于详解SpringBoot +Vue如何开发考试系统的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。