基于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><!-- 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)

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="密碼：">
<!--                <i class="el-icon-unlock"></i>--><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="請輸入驗證碼"/>
<!--                <el-input v-model="formLabelAlign.verifyCode" placeholder="請輸入驗證碼" type='text' ></el-input>--><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-button class="row-register" type="button" @click="register()">Or, Sign Up?</el-button>--></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: url('../../assets/img/img2.jpg')center top / cover no-repeat;-->*/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中導入

<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 生效

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