基于Spring boot+Vue的在线考试系统
生活随笔
收集整理的這篇文章主要介紹了
基于Spring boot+Vue的在线考试系统
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- spring boot 分層圖解
- 安裝idea
- 配置阿里云鏡像
- 項目啟動
- 前端項目結構
- 項目前端中index.html
- App.vue
- main.js
- router
- 整個頁面渲染過程
- 關于矢量圖圖標的使用
- 引入JQuery依賴
- github-markdown-css樣式文件-一般用作文章正文的樣式美化
spring boot 分層圖解
安裝idea
安裝參考
idea插件使用一
idea插件使用二
項目熱部署參考
配置阿里云鏡像
<mirrors><mirror><id>nexus-aliyun</id><mirrorOf>central</mirrorOf><name>Nexus aliyun</name> <url>http://maven.aliyun.com/nexus/content/groups/public</url></mirror> </mirrors>項目啟動
1） 安裝node.js(請自行安裝)
安裝參考一
安裝參考二
2）切換到項目根目錄
3）在項目根目錄執行：
//切換模塊下載鏡像地址
4）項目根目錄執行cnpm install，下載該項目依賴模塊
提示如果安裝“360安全衛士”或“電腦管家”，一定要關閉，不然報錯
5）添加mark-down編輯依賴
cnpm install mavon-editor --save6）用于解析md文檔依賴
cnpm install markdown-it --save cnpm install github-markdown-css7）啟動服務：項目根目錄執行npm run dev,會自動打開前端首頁（后端項目要提前部署好）
前端項目結構
| config | 配置目錄，包括端口號等。我們初學可以使用默認的：8089，當然線上為 |
| node_modules | npm 加載的項目依賴模塊 |
| src | 要開發的目錄，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件：assets: 放置一些圖片，如logo等。components: 公共組件。 router：路由。 App.vue: 項目入口文件，我們也可以直接將組件寫這里，而不使用 components 目錄。 main.js: 項目的核心文件。 |
| static | 靜態資源目錄，如圖片、字體等。 |
| index.html | 首頁入口文件，可以添加一些 meta 信息 |
| package.json | 項目配置文件 |
| README.md | 項目的說明文檔，markdown 格式 |
項目前端模塊中引入了vuex，存放vuex的系列文件：
vuex需要遵守的規則：
1）首先 index.js 入口文件
2）store.js - 引入vuex，設置state狀態數據，引入getter、mutation和action
3）state.js 相當于數據庫
里面定義了數據結構，一些數據的初始狀態
4）getters.js 顧名思義 取用，不做修改
5）mutation-types.js 存放Vuex常用的變量
引入mutation-types.js 操作里面定義的常用變量
6）action.js - 提交mutation以達到委婉地修改state狀態，可異步操作
store.js文件
import VUE from 'vue' import VUEX from 'vuex'VUE.use(VUEX)const state = {isPractice: false, //練習模式標志flag: false, //菜單欄左右滑動標志userInfo: null,menu: [// {// index: '1',// title: '考試管理',// icon: 'icon-kechengbiao',// content:[{item1:'考試查詢',path:'selectExam'},{item2:'添加考試',path:'/addExam'}],// },// {// index: '2',// title: '題庫管理',// icon: 'icon-tiku',// content:[{item2:'所有題庫',path:'/selectAnswer'},{item3:'增加題庫',path:'/addAnswer'},{path: '/addAnswerChildren'}],// },{index: '1',title: '成績查詢',icon: 'icon-performance',content:[{item1:'學生成績查詢',path:'/allStudentsGrade'},{path: '/grade'},{item2: '成績分段查詢',path: '/selectExamToPart'},{path: '/scorePart'},{item2: '成績分科排序',path: '/selectExamToPart2'},{path: '/scorePart2'}],},{index: '2',title: '批改試卷',icon: 'el-icon-edit',content:[{item1:'未批改的應用題',path:'/studentApplication'},{item2: '已批改的應用題',path: '/studentApplication2'}],},{index: '3',title: '答疑解惑',icon: 'el-icon-chat-dot-round',content:[{item1:'發布問題',path:'/publishProblem'},{item2:'學生問題',path:'/solveProblem'}],},// {// index: '6',// title: '教師管理',// icon: 'icon-Userselect',// content:[{item1:'教師管理',path:'/teacherManage'},{item2: '添加教師',path: '/addTeacher'}],// },// {// index: '7',// title: '模塊管理',// icon: 'icon-module4mokuai',// content:[{item1:'模塊操作',path:'/module'}],// }], } const mutations = {practice(state,status) {state.isPractice = status},toggle(state) {state.flag = !state.flag},changeUserInfo(state,info) {state.userInfo = info} } const getters = {} const actions = {getUserInfo(context,info) {context.commit('changeUserInfo',info)},getPractice(context,status) {context.commit('practice',status)} } export default new VUEX.Store({state,mutations,getters,actions,// store })更多用法
項目前端中index.html
項目中index.html和其他html差不多，但一般只定義一個空的根節點，在main.js里面定義的實例將掛載在根節點下，內容都通過vue組件來填充。
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>鋒芒頻波測評系統</title><link rel="stylesheet" href="//at.alicdn.com/t/font_987928_pqv3jkd52jl.css"><link rel="icon" type="image/x-icon" href="../static/img/圖標1.png"/></head><body><div id="app"></div><!-- built files will be auto injected --></body> </html>main.js里面定義的實例
new Vue({el: '#app',router,render: h => h(App),components: { App },template: '<App/>' })App.vue
一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)
其中模板只能包含一個父節點，<router-view/>為<router-view/> <router-view/>的簡寫，是子路由視圖，后面的路由頁面都顯示在此處。
vue通常用es6來寫，用export default導出，其下面可以包含數據data，生命周期(mounted等)，方法(methods)等
樣式通過style標簽<style></style>包裹，默認是影響全局的，如需定義作用域只在該組件下起作用，需在標簽上加scoped，<style scoped></style>
main.js
main.js主要是引入vue框架，根組件及路由設置，并且定義vue實例。
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import echarts from 'echarts' import axios from 'axios' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import VueCookies from 'vue-cookies' import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css'Vue.use(ElementUI) Vue.use(VueCookies) Vue.use(mavonEditor)Vue.config.productionTip = false Vue.prototype.bus = new Vue() Vue.prototype.$echarts = echarts Vue.prototype.$axios = axiosnew Vue({el: '#app',router,render: h => h(App),components: { App },template: '<App/>' })代碼中的router相當于router:router，為ES6寫法，在對象中，如果鍵值對一樣的話，可以簡寫為一個；
components: { App }引入根組件App.vue，App即App:App；
template:'<App/>'是簡寫形式，等價于 <App></App>。
router
router下的index.js文件中的routes定義了路徑為’/'的路由，該路由對應的頁面是HelloWorld組件。
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)export default new Router({routes: [{path: '/',name: 'login', //登錄界面component: () => import('@/components/common/login')},{path: '/changeUser',name: 'changeUser',component: () => import ('@/components/common/userManager')},{path: '/index', //教師主頁component: () => import('@/components/admin/index'),children: [{path: '/', //首頁默認路由component: () => import('@/components/common/hello')},{path:'/grade', //學生成績component: () => import('@/components/charts/grade')},{path: '/selectExamToPart', //學生分數段component: () => import('@/components/teacher/selectExamToPart')},{path: '/selectExamToPart2', //學生分科成績component: () => import('@/components/teacher/selectExamToPart2')},{path: '/scorePart',component: () => import('@/components/charts/scorePart')},{path: '/scorePart2', //單科成績排序component: () => import('@/components/charts/scorePart2')},{path: '/searchStudentApplication', //單科成績排序component: () => import('@/components/teacher/searchStudentApplication')},{path: '/allStudentsGrade', //所有學生成績統計component: () => import('@/components/teacher/allStudentsGrade')},{path: '/examDescription', //考試管理功能描述component: () => import('@/components/teacher/examDescription')},{path: '/selectExam', //查詢所有考試component: () => import('@/components/teacher/selectExam')},{path: '/addExam', //添加考試component: () => import('@/components/teacher/addExam')},{path: '/answerDescription', //題庫管理功能介紹component: ()=> import('@/components/teacher/answerDescription')},{path: '/selectAnswer', //查詢所有題庫component: () => import('@/components/teacher/selectAnswer')},{path: '/addAnswer', //增加題庫主界面component: () => import('@/components/teacher/addAnswer')},{path: '/addAnswerChildren', //點擊試卷跳轉到添加題庫頁面component: () => import('@/components/teacher/addAnswerChildren')},{path: '/studentManage', //學生管理界面component: () => import('@/components/teacher/studentManage')},{path: '/studentApplication', //展示要批改的應用題component: () => import('@/components/teacher/studentApplicationNoCorrect')},{path: '/studentApplication2', //展示批改過的應用題component: () => import('@/components/teacher/studentApplicationCorrect')},{path: '/solveProblem', //展示問題component: () => import('@/components/teacher/solveProblem')},{path: '/publishProblem', //展示問題component: () => import('@/components/teacher/publishProblem')},{path: '/addStudent', //添加學生component: () => import('@/components/teacher/addStudent')},{path: '/teacherManage',component: () => import('@/components/admin/tacherManage')},{path: '/addTeacher',component: () => import ('@/components/admin/addTeacher')},]},{path: '/student',component: () => import('@/components/student/index'),children: [{path:"/",component: ()=> import('@/components/student/myExam')},{path: '/manager', component: () => import('@/components/student/manager')},{path: '/update_stuinfo', component: () => import('@/components/student/update_stuinfo')},{path: '/examMsg', component: () => import('@/components/student/examMsg')},{path: '/message', component: () => import('@/components/student/message')},{path: '/studentScore', component: () => import("@/components/student/answerScore")},{path: '/scoreTable', component: () => import("@/components/student/scoreTable")}]},{path: '/answer',component: () => import('@/components/student/answer')},{path: '/registerstudent', component: () => import('@/components/student/registerstudent')},{path: '*',redirect: '/'}] })整個頁面渲染過程
訪問http://localhost:8088/顯示的就是index.html頁面，index.html原本只有一個根結點id=“app”。
main.js入口文件引入根組件App
前邊我們已經提到，根組件App中，<router-view/>是子路由視圖，后面的路由頁面都顯示在此處，訪問http://localhost:8088/，路由為‘/’，根據路由文件index.js，所以引入login組件。
login.vue
由于在config文件夾下index.js文件下創建"api"，代替target里面的地址（后臺請求），后面組件中我們掉接口時直接用api代替
關于矢量圖圖標的使用
點擊詳情
引入JQuery依賴
cnpm install jquery --savegithub-markdown-css樣式文件-一般用作文章正文的樣式美化
1.下載到項目中
cnpm i github-markdown-css2.將樣式放到模塊化vue目錄下,然后在 style中導入
<style scoped lang="less"> @import './github-markdown.css'; </style>3.在vue腳手架中的 .postcssrc.js文件中加入 exclude: ‘github-markdown’ //css樣式文件
module.exports = {// 配置要使用的 PostCSS 插件plugins: {// 配置使用 autoprefixer 插件// 作用：生成瀏覽器 CSS 樣式規則前綴// VueCLI 內部已經配置了 autoprefixer 插件// 所以又配置了一次，所以產生沖突了// 'autoprefixer': { // autoprefixer 插件的配置// // 配置要兼容到的環境信息// browsers: ['Android >= 4.0', 'iOS >= 8']// },// 配置使用 postcss-pxtorem 插件// 作用：把 px 轉為 rem'postcss-pxtorem': {rootValue ({ file }) {return file.indexOf('vant') !== -1 ? 37.5 : 75},// 配置要轉換的 CSS 屬性 // * 表示所有propList: ['*'],exclude: 'github-markdown' //css樣式文件}}4.在需要美化的正文部分加入github-markdown-css樣式文件的 主樣式類名
markdown-body 生效
總結
以上是生活随笔為你收集整理的基于Spring boot+Vue的在线考试系统的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 余额宝可以放多少钱收益（余额宝可以放多少
- 下一篇： spring和mybatis结合做简单的