當前位置：首頁 > 前端技术 > vue >内容正文

vue

基于Spring boot+Vue的在线考试系统

發布時間：2025/3/8 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了基于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）在項目根目錄執行：

npm install -g cnpm --registry=https://registry.npm.taobao.org

//切換模塊下載鏡像地址
4）項目根目錄執行cnpm install，下載該項目依賴模塊
提示如果安裝“360安全衛士”或“電腦管家”，一定要關閉，不然報錯

5）添加mark-down編輯依賴

cnpm install mavon-editor --save

6）用于解析md文檔依賴

cnpm install markdown-it --save cnpm install github-markdown-css

7）啟動服務：項目根目錄執行npm run dev,會自動打開前端首頁（后端項目要提前部署好）

前端項目結構

build項目構建(webpack)相關代碼

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、應用層級的狀態應該集中到單個 store 對象中。 2、提交 mutation 是更改狀態的唯一方法，并且這個過程是同步的。 3、異步邏輯都應該封裝到 action 里面。

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></body> </html>

main.js里面定義的實例

new Vue({el: '#app',router,render: h => h(App),components: { App },template: '<App/>' })

App.vue

一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)

template
其中模板只能包含一個父節點，<router-view/>為<router-view/> <router-view/>的簡寫，是子路由視圖，后面的路由頁面都顯示在此處。

script
vue通常用es6來寫，用export default導出，其下面可以包含數據data，生命周期(mounted等)，方法(methods)等

style
樣式通過style標簽<style></style>包裹，默認是影響全局的，如需定義作用域只在該組件下起作用，需在標簽上加scoped，<style scoped></style>

<template><div id="app"><router-view/></div> </template><script> export default {name: 'App' } </script><style> ul {list-style: none; } a {text-decoration: none; } * {margin: 0;padding: 0; } #app {font-family: "Microsoft YaHei", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;background-color: #eee; } </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

<template><div id="login"><div><img src="../../assets/img/top_logo.jpg" height="60" width="60"/></div><div class="bg"></div><el-row class="main-container"><el-col :lg="8" :xs="16" :md="10" :span="10"><div class="bottom"><div class="container"><p class="title">鋒芒頻波測評系統</p><el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"><el-form-item label="賬號："><el-input v-model.number="formLabelAlign.username" placeholder="請輸入賬號"></el-input></el-form-item><el-form-item label="密碼："> <el-input v-model="formLabelAlign.password" placeholder="請輸入密碼" type='password'></el-input></el-form-item><div><input class="myInput" type="text" v-model="formLabelAlign.verifyCode" placeholder="請輸入驗證碼"/> <img alt="單擊圖片刷新！" style="margin-bottom: -13px;" src="/api/kaptcha"onclick="this.src='/api/kaptcha?d='+new Date()*1"></div><div class="submit"><el-button type="primary" class="row-login" @click="login()">登錄</el-button></div> </el-form></div></div></el-col></el-row><el-row class="footer"><el-col><p class="msg2">?2020 鋒芒工作室 All Rights Reserved</p></el-col></el-row></div> </template><script> import store from '@/vuex/store' import {mapState} from 'vuex' export default {store,name: "login",data() {return {role: 2,labelPosition: 'left',verfyCode_houtuan:'',formLabelAlign: {username: '',password: '',verifyCode:''}}},created(){// this.$axios(`/api/getVerify`).then(res => {// console.log(res.data)})},methods: {getverfiyCode() {//分頁查詢所有試卷信息},register() {this.$router.push({path: '/registerstudent'})},//用戶登錄請求后臺處理login() {console.log("登錄操作執行-------");// console.log(this.formLabelAlign.verifyCode);this.$axios({url: `/api/getVerify`,method: 'get',async:false}).then(res => {// if (res.data.code==200){//// }if (res.data === this.formLabelAlign.verifyCode) {if (this.formLabelAlign.username === "" || this.formLabelAlign.password === ""){this.$message({showClose: true,type: 'error',message: '用戶名或密碼為空'})}else{this.$axios({url: `/api/login`,method: 'post',data: {...this.formLabelAlign}}).then(res=>{let resData = res.data.dataif(resData != null) {switch(resData.role) {case "0": //管理員this.$cookies.set("cname", resData.adminName)this.$cookies.set("cid", resData.adminId)this.$cookies.set("role", 0)this.$router.push({path: '/index' }) //跳轉到首頁breakcase "1": //教師this.$cookies.set("cname", resData.teacherName)this.$cookies.set("cid", resData.teacherId)this.$cookies.set("role", 1)this.$router.push({path: '/index' }) //跳轉到教師用戶breakcase "2": //學生this.$cookies.set("cname", resData.studentName)this.$cookies.set("cid", resData.studentId)this.$cookies.set("role", 2)this.$router.push({path: '/student'})break}}if(resData == null) { //錯誤提示this.$message({showClose: true,type: 'error',message: '用戶名或者密碼錯誤'})}})}}else{this.$message({showClose: true,type: 'error',message: '驗證碼錯誤'})}})},clickTag(key) {this.role = key}},computed: mapState(["userInfo"]),mounted() {} } </script><style lang="scss" scoped> .myInput{background-color: #FFF;background-image: none;border-radius: 4px;border: 1px solid #DCDFE6;-webkit-box-sizing: border-box;box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 40px;line-height: 40px;outline: 0;padding: 0 15px;transition: border-color .2s cubic-bezier(.645,.045,.355,1); } .container {margin-bottom: 32px; } .container .el-radio-group {margin: 30px 0px; } #login {font-size: 14px;color: #000;background-color: #fff; } #login .bg {position: fixed;top: 70px;left: 0;width: 100%;overflow-y: auto;height: 75%;/**/background-color: #459ddd; } #login .main-container {display: flex;justify-content: center;align-items: center;margin-top: 75px; } #login .bottom {display:flex;justify-content: center;background-color:white;border-radius: 10px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);min-height: 430px; } #login .bottom .title {text-align: center;font-size: 30px; } .bottom .container .title {margin: 70px 0px;; } .bottom .submit .row-login {width: 100%;background-color: #459ddd;border-color: #459ddd;margin: 10px 0px 10px 0px;padding: 15px 20px; } .bottom .submit {display: flex;justify-content: center; } .footer {margin-top: 50px;text-align: center; } .footer .msg2 {font-size: 14px;color: gray;margin-top: 70px; } .bottom .options .register span:nth-child(1) {color: #8C8C8C; } //學生注冊 .bottom .row-register {background-color: transparent;border: none;padding: 0;margin:0;font-size: 1.1em;box-sizing: border-box;border-bottom: 1px solid transparent;cursor: pointer; } .bottom .row-register{border-bottom: 1px solid #ffffff; }</style>

由于在config文件夾下index.js文件下創建"api"，代替target里面的地址（后臺請求），后面組件中我們掉接口時直接用api代替

關于矢量圖圖標的使用

點擊詳情

引入JQuery依賴

cnpm install jquery --save

github-markdown-css樣式文件-一般用作文章正文的樣式美化

1.下載到項目中

cnpm i github-markdown-css

2.將樣式放到模塊化vue目錄下,然后在 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 生效

<div class="article-content markdown-body"v-html='article.content'ref="article-content"></div><van-divider>the end</van-divider></div>

總結

以上是生活随笔為你收集整理的基于Spring boot+Vue的在线考试系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：余额宝可以放多少钱收益（余额宝可以放多少
下一篇： spring和mybatis结合做简单的