# 随堂考核题库系统

**Repository Path**: likecy/tiku_mnu

## Basic Information

- **Project Name**: 随堂考核题库系统
- **Description**: vue+express+electron 主要方便老师们进行平时成绩的考核以及教务处发放的excel成绩单填写而制作的随机题库系统。老师导入题库，开启考试后，学生登录相应IP进行答题得分记录到每次的平时成绩中，老师可随时导出成绩。系统本身开封即用，程序运行在U盘也可以，无需安装任何依赖。数据库保存到老师的个人U盘，确保数据安全性。
- **Primary Language**: JavaScript
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 13
- **Forks**: 5
- **Created**: 2019-12-31
- **Last Updated**: 2025-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

> 老师提出的要求：前提条件，便于机房有还原的电脑使用，最好开箱即用，无需配置运行环境，不能接入外网，成绩数据老师安全可控，不可远程连接mysql等数据库。提供web服务供学生访问提交数据。题库试题excel导入，老师发布考试，学生答题，成绩自动写入教务处发放的课程平时成绩excel表格。每个学生的题目顺序不同，答案选项不同，考试有时间限制，一旦过了考试时间0分处理，学生自行找老师后台修改该生成绩。学生人员来自教务处发放的班级名单excel。确保程序的可共享性。（A老师分享这个程序给B老师使用，B老师拿到后一数据从0开始）
>
> 

#### 窗体程序老师端

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231184528.png)

>    老师开启程序后即可开始服务一方面提供web服务供学生访问，一方面供老师进行数据操作，比如题库导入，学生名单导入，组卷，查看学生考试记录详情，查看修改学生分数，导入导出成绩excel

------

#### Web学生端

> ![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231184855.png)学生靠学号姓名登录系统，学生列表来源于老师导入的班级学生名单。选择考试。进行考试。查看考试得分。学生的试题顺序随机，答案选项顺序随机。有单选题，多选题，判断题，不定项选择题。

------

#### 所采用的技术及架构：

> 界面显示及打包：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可执行文件

------

## 源码使用方法

```shell
git clone https://gitee.com/likecy/tiku_mnu.git
```

```shell
进入后台目录：cd tiku_mnu/tiku_mnu后端
```

```shell
安装依赖：cnpm install
```

```shell
安装electron sqlite3 本地编译 ：cnpm install sqlite3 --build-from-source --runtime=electron --target=2.0.18 --dist-url=https://atom.io/download/electron
```

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231190433.png)此处win系统安装编译版本的sqlite3可能会报错，超级大坑。解决方式见链接：https://blog.csdn.net/superassassin/article/details/82804160

```shell
安装依赖完成后运行: cnpm run dev 
```

```
打包：cnpm run build 
mac电脑：cnpm run mac
win电脑：cnpm run win32
```

这里使用cnpm打包会报错，报错如下：

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231194220.png)

使用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",开发完成最后打包之前才将基地址改为"/"

```js
// 创建axios实例
const service = axios.create({
  baseURL: '/', // api的base_url  开发模式请填http://127.0.0.1:8080 生产模式请填：/
  timeout: 150000 // 请求超时时间
})
export default service

```

请求接口文件一律在src/api 目录

```js
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服务入口文件

```js
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啦

```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}
  })

```

最后附上几张项目完整截图:

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231201441.png)

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231201532.png)

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231201611.png)

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231201649.png)

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231201732.png)

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231201821.png)

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231201845.png)

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231201942.png)

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231202014.png)

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231202119.png)

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231202205.png)

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231202315.png)

![](https://likecy.oss-cn-beijing.aliyuncs.com/blog/20191231202349.png)



------

整个小项目个人历时将近10天,从0基础koa学习到electron-vue的顺利打包发布，幸运的抓住了2019年最后的尾巴～～～

云中有鹿  2019/12/31