在线考试系统(vue2 + elementui + express4 + MongoDB)

原创 Bios 随笔 vuejs 785阅读 2018-05-05 15:30:40 举报

这是我毕业项目,从0到1,前后台独立开发完成。功能不多,在此记录,温故而知新!项目github地址:https://github.com/FinGet/Exam ,博客地址:https://finget.github.io/

安装mongodb

window下安装mongodb,需要参考的可以移步我的博客中:win10安装mongodb

项目初始化

本次项目使用的是express4 + vue2+ + elementUI1+ + mongodb3.4+

先看项目文件目录结构:

我页面用的vue所以server/viewsserver/public都没有用

  • 项目建立用的是vue-cli:
    vue init webpack exam
  • 项目中前后台是写在一个项目中的:

由于前后台都是写在一个项目中的,我就将server下的package.jsonvue下的package.json合并了

安装一些插件

axios 请求数据

npm i axios --save
首先axios不支持vue.use()式声明

elementUI

npm i element-ui --save

vue-lazyload 图片懒加载

npm i vue-lazyload --save

使用懒加载:

mongoose 操作mongodb的

npm i mongoose --save

就不一一列举所有的插件了(没有用vuex)

开发上的一些事

前台相关

sessionStorage

全局挂载

在页面中使用

登录检测

面包屑导航

绑定面包屑要根据实际情况来定,但是this.$router.currentRoute.matched是最主要的

路由部分:

elementui面包屑导航与左侧导航相对应

根据实际情况来,不能套用,要看你的路由怎么写的 this.$router.currentRoute.path
:default-active="activeIndex"

配置代理

要想请求到后台数据,这一步是必须的
配置代理之后,localhost:8088/api/ -> localhost:3000/api/

ElementUi动态增加表单的表单验证 大坑

query要用path来引入,params要用name来引入

Elementui 单选框对上单选题

后台相关

连接数据库

在server根目录下新建db.js

配置seesion

需要express-sessioncookie-parser插件

配置后台路由

默认的使用方式:

我之前做的一个电子商城采用的这种方式:github地址

我的项目中:

两种方式有什么不同:

  • 如果你有多个路由文件 (例如goods.js,index.js,users.js……),你都需要去app.js中引入

在前台请求的时候:

如果没看懂,可以去GitHub上看一下实际代码,有助于理解

  • 第二种方式
    不用在app.js中引入各个路由文件,一个route.js就搞定了

可以看到,我将每个路由的方法都是提取出去的,这样可以避免这个文件不会有太多的代码,可读性降低,将代码分离开来,也有助于维护

在使用的时候:

数据库的相关操作

我这次用mongodb,主要是因为可以用js来操作,对我来说比较简单,mysql我不会用。在实际开发过程中发现,考试系统各个表(集合)都是需要关联,mongodb这种非关系型数据库,做起来反而麻烦了不少。在此将一些数据库增删改查的方法回顾一下。

初始化一条数据

如果对mongodb,mongoose没有基础的了解,建议看一看mongoose深入浅出mongoose基础操作

用户注册,其实就是创建一条数据
获取考试记录,子文档数组分页模糊查询

如下图是我的student集合:

在该集合中,学生参加过的考试记录,存在exams数组中,当想实现分页查询几条数据的时候,需要用到$slice

$slice:[start,size] 第一个参数表示,数组开始的下标,第二个表示截取的数量
在后台接收到前台传递的pageSizepageNumber时,需要计算出当前需要截取的下标,即let skip = (pageNumber-1)*pageSize

另一种分页模糊查询--在文档之间(document)

每个试卷都是独立的文档,通过他们的名称name实现模糊查询

还有一种模糊分页查询--查询关联文档再模糊分页查询

先通过populate查询除关联文档,在模糊分页查询

populate

mongodb本来就是非关系型的数据库,但是有很多时候不同的集合直接是需要关联的,这是就用到了mongoose提供的populate

直接看图,不同集合直接的关联,用的就是_id,比如下图中,学生参加的考试,关联了试卷,试卷里面又关联了题目

怎么查询呢:

更多的可以看看我项目中的实际代码都在server/controllers下面

关联集合的新增

在系统中,教师可以增加试卷,这个时候我就不知道该怎么保存前台传过来的数据。数据中既有试卷的信息,也有很多题目。题目都属于该试卷,改试卷又属于当前登录系统的老师(即创建试卷的老师)。
怎么才能让试卷、教师、问题关联起来啊,ref存的是_id,然而这些新增的数据,是保存之后才有_id的。

关联集合的删除---删除试卷

删除某一个试卷,既要删除教师中对应的试卷_id,也要删除问题中对应的试卷_id

关联集合多条数据的更新--修改试卷
更新子文档数组--阅卷打分
评论 ( 4 )
最新评论
Bios 3F 2018-05-20 01:32:08 4F

会不会是你的代理配置出了问题,你看一下服务器端返回的信息

13873146180 2F 2018-05-19 15:41:46 3F

Bios 1F 2018-05-19 10:57:40 2F

如果能有截图就好了 , 我现在只能大概推测 你的插件安装上出了问题

13873146180 2018-05-19 10:05:01 1F

为什么 数据库链接成功了 但是前端还是 报504 错误 后端启动了 还是没用