|
|
@@ -1,177 +1,21 @@
|
|
|
-# 简介（有用的话记得给个star哈，谢谢啦）
|
|
|
+# onlineexam-student
|
|
|
|
|
|
-## 1. 项目描述
|
|
|
+> online exam
|
|
|
|
|
|
-1. 此项目为一个基于Vue的前后端分离的在线考试系统项目
|
|
|
-2. 使用了 Vue 全家桶+ES5ES6ES7+Webpack 等前端新技术
|
|
|
-3. 后端基于SpringBoot搭建SSM框架
|
|
|
-4. 包括学生端、教师端和管理员端
|
|
|
-5. 采用模块化、组件化、工程化的模式开发
|
|
|
+## Build Setup
|
|
|
|
|
|
-## 2. 能从此项目中学到什么?
|
|
|
+``` bash
|
|
|
+# install dependencies
|
|
|
+npm install
|
|
|
|
|
|
-### 2.1 项目开发流程及开发方法
|
|
|
+# serve with hot reload at localhost:8080
|
|
|
+npm run dev
|
|
|
|
|
|
-1. 熟悉一个项目的开发流程
|
|
|
-2. 学会组件化、模块化、工程化的开发模式
|
|
|
-3. 掌握使用 vue-cli 脚手架初始化 Vue.js 项目
|
|
|
-4. 学会模拟 json 后端数据，实现前后端分离开发
|
|
|
-5. 学会 ES5ES6ES7+eslint 的开发方式
|
|
|
-6. 掌握一些项目优化技巧
|
|
|
-7. 掌握WebSocket实时在线通信
|
|
|
+# build for production with minification
|
|
|
+npm run build
|
|
|
|
|
|
-### 2.2 Vue 插件或第三方库
|
|
|
+# build for production and view the bundle analyzer report
|
|
|
+npm run build --report
|
|
|
+```
|
|
|
|
|
|
-1. 学会使用 vue-router 开发单页应用
|
|
|
-2. 学会使用 axios/vue-resource 与后端进行数据交互
|
|
|
-3. 学会使用 vuex 管理应用组件状态
|
|
|
-4. 学会使用 基于Vue的插件， 如vue-seamless-scroll实现无缝滚动，v-viewer实现图片预览，ly-tab实现触摸滑动并具有回弹效果等
|
|
|
-5. 学会使用 mint-ui、muse-ui和element-ui 组件库构建界面
|
|
|
-6. 学会使用 mockjs 模拟后台数据接口
|
|
|
-7. 学会通过API接口与后端进行交互
|
|
|
-8. 学会通过第三方平台七牛云进行图片的存取
|
|
|
-
|
|
|
-## 3. 运行项目
|
|
|
-
|
|
|
-**onlineexam-student文件夹：**
|
|
|
-
|
|
|
-1. `npm install`
|
|
|
-2. `npm run dev`
|
|
|
-
|
|
|
-**onlineexam-student文件夹：**
|
|
|
-
|
|
|
-1. `npm install`
|
|
|
-2. `npm start`
|
|
|
-
|
|
|
-## 4. 其他项目地址
|
|
|
-
|
|
|
-[在线考试系统教师端](https://github.com/FrontDemon/onlineexam-teacher)
|
|
|
-
|
|
|
-[在线考试系统管理员端](https://github.com/FrontDemon/onlineexam-admin)
|
|
|
-
|
|
|
-[在线考试系统后端项目源码](https://github.com/FrontDemon/onlineexam-system-backend)
|
|
|
-
|
|
|
-## 5. 在线演示地址
|
|
|
-
|
|
|
-**在线考试系统学生端:** http://maweitao.top/onlineexam-student
|
|
|
-
|
|
|
-## 6. 部分演示截图
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/student-home.jpg" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>学生端首页</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/student-wrong.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>学生端错题页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/student-search.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>学生端搜索页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/student-profile.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>学生端个人中心页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/student-profile.jpg" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>学生端消息列表页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/paper-list.jpg" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>试卷列表页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/paper-detail.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>试卷详情页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/single-question.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>试卷单选题页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/multiple-question.jpg" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>试卷多选题页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/judge-question.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>试卷判断题页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/fill-question.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>试卷填空题页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/answer-card.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>试卷答题卡页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/answer-card.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>试卷答题卡页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/score-report.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>成绩报告页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/wrong-question.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>错题题目页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/wrong-card.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>错题卡页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
-
|
|
|
-<p align="center">
|
|
|
- <img src="http://qiniu.maweitao.top/collect-question.png" alt="Sample" width="250" height="500">
|
|
|
- <p align="center">
|
|
|
- <em>收藏题目页面</em>
|
|
|
- </p>
|
|
|
-</p>
|
|
|
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
