1 Unstar Star 6 Fork 2

chenyun / 绵阳师院随堂考核题库系统JavaScriptAFL-3.0

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
为了方便老师们进行平时成绩的考核以及教务处发放的excel成绩单进行填写,制作随机题库系统老师导入题库,开启考试后学生登录相应IP进行答题得分记录到每次的平时成绩中,老师可随时导出成绩。系统本身开封即用,程序运行在U盘也可以,无需安装任何依赖。数据库保存到老师的个人U盘,确保数据安全性。 spread retract

  • Vue 51.5%
  • JavaScript 41.2%
  • CSS 4.1%
  • TSQL 2.3%
  • HTML 0.8%
  • Other 0.1%
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

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

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

Comments ( 4 )

Sign in for post a comment

JavaScript
1
https://gitee.com/likecy/tiku_mnu.git
git@gitee.com:likecy/tiku_mnu.git
likecy
tiku_mnu
绵阳师院随堂考核题库系统
master

Search