信息工程学院随堂考核题库小系统
开源地址:https://gitee.com/likecy/tiku_mnu
老师提出的要求:前提条件,便于机房有还原的电脑使用,最好开箱即用,无需配置运行环境,不能接入外网,成绩数据老师安全可控,不可远程连接mysql等数据库。提供web服务供学生访问提交数据。题库试题excel导入,老师发布考试,学生答题,成绩自动写入教务处发放的课程平时成绩excel表格。每个学生的题目顺序不同,答案选项不同,考试有时间限制,一旦过了考试时间0分处理,学生自行找老师后台修改该生成绩。学生人员来自教务处发放的班级名单excel。确保程序的可共享性。(A老师分享这个程序给B老师使用,B老师拿到后一数据从0开始)
窗体程序老师端
老师开启程序后即可开始服务一方面提供web服务供学生访问,一方面供老师进行数据操作,比如题库导入,学生名单导入,组卷,查看学生考试记录详情,查看修改学生分数,导入导出成绩excel
Web学生端
学生靠学号姓名登录系统,学生列表来源于老师导入的班级学生名单。选择考试。进行考试。查看考试得分。学生的试题顺序随机,答案选项顺序随机。有单选题,多选题,判断题,不定项选择题。
所采用的技术及架构:
界面显示及打包:electron-vue,element-ui,vue-cli,electron-builder
网络交互:axios
后台服务:koa,ejs,koa-router,koa-bodyparser,koa2-cors,nodejs
数据操作:sqlite3.js,knex.js,bookselft.js , node-xlsx.js, ejsexcel.js
框架逻辑:
后段部分基于nodejs采用koa框架提供web服务及api接口,koa-router提供api接口路由管理,koa2-cors进行开发阶段vue的跨域请求处理,使用Bookshelf.js 封装数据库操作orm方式访问数据库,knex.js为bookshelf.js提供二级接口,sqlite3.js为knex.js提供一级数据操作接口,进行数据存取查询,使用koa-bodyparser 进行post参数的接收处理,node-xlsx.js进行导入excel表格的数据解析处理,ejsexcel.js 进行excel导出的数据模版渲染,最后使用ejs模版进行学生vue端最终编译文件的模版整合操作,使得web界面按路由渲染。
前端部分采用vue-cli进行基础搭建,使用element-ui进行界面组织,axios请求于后段api接口进行通信操作。最后使用electron-vue进行代码封装,electron-builder进行前后端打包整合输出exe可执行文件
源码使用方法
git clone https://gitee.com/likecy/tiku_mnu.git
进入后台目录:cd tiku_mnu/tiku_mnu后端
安装依赖:cnpm install
安装electron sqlite3 本地编译 :cnpm install sqlite3 --build-from-source --runtime=electron --target=2.0.18 --dist-url=https://atom.io/download/electron
此处win系统安装编译版本的sqlite3可能会报错,超级大坑。解决方式见链接:https://blog.csdn.net/superassassin/article/details/82804160
安装依赖完成后运行: cnpm run dev
打包:cnpm run build
mac电脑:cnpm run mac
win电脑:cnpm run win32
这里使用cnpm打包会报错,报错如下:
使用yarn 运行打包命令即可避免node 内存泄露,网上vue-cli方式添加缓存区方式不成功。
重新打包如下:
yarn install
yarn run dev 或者 yarn run build
学生前端web界面
cd student_vue
cnpm install
cnpm run dev
开发模式请将 src/untils/request.js 中的axios基地址改为"http://127.0.0.1:8080",开发完成最后打包之前才将基地址改为"/"
// 创建axios实例
const service = axios.create({
baseURL: '/', // api的base_url 开发模式请填http://127.0.0.1:8080 生产模式请填:/
timeout: 150000 // 请求超时时间
})
export default service
请求接口文件一律在src/api 目录
import request from '../untils/request'
const api = {
//获取考试列表
getExamList(student_num){
return request({
url: 'getExamList',
method: 'post',
data: {
student_num:student_num
}
})
//................
//在这里添加其他接口请求 全局使用 this.$api.接口函数名 即可访问
}
export default api
自定义编辑前端界面后需要重新打包
cnpm run build
将最后编译完成的dist目录内的文件复制到我们的后台框架 static/student_view 进行替换。
再次打包运行后端即可
代码讲解
koa服务入口文件
var Koa = require('koa'),
router = require('koa-router')(),
views = require('koa-views'),
bodyParser = require('koa-bodyparser'),
cors = require('koa2-cors');
const app_sever = new Koa();
app_sever.use(bodyParser());
app_sever.use(require('koa-static')(__static+'/student_view'));
app_sever.use(views(__static+'/student_view', { map: {html: 'ejs' }}));
app_sever.use(cors());
var teacher = require('./router/teacher.js');
var student = require('./router/student.js');
router.use('/teacher',teacher);
router.use('/',student);
app_sever.use(router.routes());
app_sever.use(router.allowedMethods());
app_sever.listen(8080, () => console.log('Example app listening on port 8080!'))
这里推荐B站大地老师的koa入门视频,传送门:https://www.bilibili.com/video/av38925557?p=26
koa整合数据库sqlite3 使用的是booksheft.js.百度文档参差不齐,建议直接到官网食用英文原版api接口说明,传送门:https://bookshelfjs.org/api.html
koa后台web服务整合好后就可以在electron-vue 的主进程中引用koa启动文件app.js啦
//src/main/index.js
//加载后台api接口
require('./sever/app.js') //引入koa编写的api接口服务
require('./openwindow.js') //electron使用系统原生窗体选择文件等
let mainWindow
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:9080`
: `file://${__dirname}/index.html`
function createWindow () {
/**
* Initial window options
*/
Menu.setApplicationMenu(null)
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
autoHideMenuBar:true,
webPreferences: {webSecurity: false}
})
最后附上几张项目完整截图:
整个小项目个人历时将近10天,从0基础koa学习到electron-vue的顺利打包发布,幸运的抓住了2019年最后的尾巴~~~
云中有鹿 2019/12/31
评论区