信息工程学院随堂考核题库小系统

老师提出的要求：前提条件，便于机房有还原的电脑使用，最好开箱即用，无需配置运行环境，不能接入外网，成绩数据老师安全可控，不可远程连接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}
  })