部分前端

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files`
+    `
+
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npm.taobao.org/

.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

README.md

@@ -0,0 +1,12 @@
+# 项目介绍及启动说明
+
+### 启动项目
+``` bash
+# 切换镜像
+npm config set registry https://registry.npm.taobao.org
+
+# 安装依赖，对应node的版本是16.13.2
+npm install --force
+
+# 启动项目
+npm run dev

build/build.js

@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

build/check-versions.js

@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

build/utils.js

@@ -0,0 +1,99 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,99 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.less$/,
+        loader: "style-loader!css-loader!less-loader"
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      },
+      // {
+      //   test: /node_modules[\\\/]vis[\\\/].*\.js$/,
+      //   loader: 'babel-loader',
+      //   query: {
+      //     cacheDirectory: true,
+      //     presets: [ "babel-preset-es2015" ].map(require.resolve),
+      //     plugins: [
+      //       "transform-es3-property-literals", // #2452
+      //       "transform-es3-member-expression-literals", // #2566
+      //       "transform-runtime" // #2566
+      //     ]
+      //   }
+      // }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,95 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

build/webpack.prod.conf.js

@@ -0,0 +1,145 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

@@ -0,0 +1,54 @@
+/*
+ * index
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+ */
+'use strict'
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {
+      '/api': {
+        target: 'http://localhost:8087',//本地地址
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
+        }
+      }
+    },
+
+    host: 'localhost',
+    port: 8088,
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false,
+    devtool: 'cheap-module-eval-source-map',
+    cacheBusting: true,
+    cssSourceMap: true
+  },
+
+  build: {
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

index.html

@@ -0,0 +1,15 @@
+
+<!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/icon.png"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package.json

@@ -0,0 +1,75 @@
+{
+  "name": "vue-init",
+  "version": "1.0.0",
+  "description": "vue demo",
+  "author": "",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "@babel/preset-es2015": "^7.0.0-beta.53",
+    "axios": "^0.18.0",
+    "echarts": "^4.2.0-rc.2",
+    "element-ui": "^2.4.11",
+    "global": "^4.4.0",
+    "vis": "^4.21.0",
+    "vue": "^2.5.2",
+    "vue-cookies": "^1.5.12",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1",
+    "vuex-persistedstate": "^2.5.4"
+  },
+  "devDependencies": {
+    "less": "^4.1.3",
+    "less-loader": "5.0.0",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.12.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

@@ -0,0 +1,41 @@
+<!--
+ * 程序主入口
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  created() {
+    var token = this.$cookies.get("rb_token");
+    var role = this.$cookies.get("rb_role");
+    if(token == null || token == "" || role == null || role == null) {
+      this.$router.push({path: '/' }) //跳转到首页
+    }
+  }
+}
+</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>

src/components/admin/addTeacher.vue

@@ -0,0 +1,88 @@
+<!--
+ * 添加教师
+ *
+
+-->
+<template>
+  <section class="add">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="姓名">
+            <el-input v-model="form.teacherName"></el-input>
+          </el-form-item>
+          <el-form-item label="学院">
+            <el-input v-model="form.institute"></el-input>
+          </el-form-item>
+          <el-form-item label="性别">
+            <el-input v-model="form.sex"></el-input>
+          </el-form-item>
+          <el-form-item label="电话号码">
+            <el-input v-model="form.tel"></el-input>
+          </el-form-item>
+          <el-form-item label="密码">
+            <el-input v-model="form.pwd"></el-input>
+          </el-form-item>
+          <el-form-item label="身份证号">
+            <el-input v-model="form.cardId"></el-input>
+          </el-form-item>
+          <el-form-item label="职称">
+            <el-input v-model="form.type"></el-input>
+          </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit()">立即创建</el-button>
+        <el-button type="text" @click="cancel()">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: { //表单数据初始化
+        studentName: null,
+        grade: null,
+        major: null,
+        clazz: null,
+        institute: null,
+        tel: null,
+        email: null,
+        pwd: null,
+        cardId: null,
+        sex: null,
+        role: 2
+      }
+    };
+  },
+  methods: {
+    onSubmit() { //数据提交
+      this.$axios({
+        url: '/api/teacher',
+        method: 'post',
+        data: {
+          ...this.form
+        }
+      }).then(res => {
+        if(res.data.code == 200) {
+          this.$message({
+            message: '数据添加成功',
+            type: 'success'
+          })
+          this.$router.push({path: '/teacherManage'})
+        }
+      })
+    },
+    cancel() { //取消按钮
+      this.form = {}
+    },
+
+  }
+};
+</script>
+<style lang="less" scoped>
+.add {
+  padding: 0px 40px;
+  width: 400px;
+}
+</style>
+

src/components/admin/index.vue

@@ -0,0 +1,58 @@
+<!--
+ * 组件基础页
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id="index">
+    <header1 class="topbar"></header1>
+    <section class="container">
+      <div class="left_side">
+        <mainLeft></mainLeft>
+      </div>
+      <div class="main_wrapper">
+        <navigator class="nav"></navigator>
+        <router-view></router-view>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import header from '@/components/common/header'
+import mainLeft from '@/components/common/mainLeft'
+import navigator from '@/components/common/navigator'
+export default {
+  components:{
+    header1: header,
+    mainLeft: mainLeft,
+    navigator:navigator
+  },
+  data() {
+    return {
+      username: '许如梦'
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+#index .nav {
+  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
+  margin-bottom: 30px;
+}
+.container {
+  display: flex;
+  background-color: #fff;
+}
+.main_wrapper {
+  overflow: hidden;
+  flex: 1;
+  background-color: #fff;
+}
+</style>
+

src/components/admin/tacherManage.vue

@@ -0,0 +1,178 @@
+<!--
+ * 教师管理页面
+ *
+-->
+<template>
+  <div class="all">
+    <el-table :data="pagination.records" border>
+      <el-table-column fixed="left" prop="teacherName" label="姓名" width="180"></el-table-column>
+      <el-table-column prop="institute" label="学院" width="200"></el-table-column>
+      <el-table-column prop="sex" label="性别" width="120"></el-table-column>
+      <el-table-column prop="tel" label="联系方式" width="120"></el-table-column>
+      <el-table-column prop="email" label="邮箱" width="240"></el-table-column>
+      <el-table-column prop="cardId" label="身份证号" width="240"></el-table-column>
+      <el-table-column prop="type" label="职称" width="120"></el-table-column>
+      <el-table-column fixed="right" label="操作" width="240">
+        <template slot-scope="scope">
+          <el-button @click="checkGrade(scope.row.teacherId)" type="primary" size="small">编辑</el-button>
+          <el-button @click="deleteById(scope.row.teacherId)" type="danger" size="small">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[6, 10]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total"
+      class="page">
+    </el-pagination>
+    <!-- 编辑对话框-->
+    <el-dialog
+      title="编辑教师信息"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose">
+      <section class="update">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="姓名">
+            <el-input v-model="form.teacherName"></el-input>
+          </el-form-item>
+          <el-form-item label="学院">
+            <el-input v-model="form.institute"></el-input>
+          </el-form-item>
+          <el-form-item label="性别">
+            <el-input v-model="form.sex"></el-input>
+          </el-form-item>
+          <el-form-item label="电话号码">
+            <el-input v-model="form.tel"></el-input>
+          </el-form-item>
+          <el-form-item label="密码">
+            <el-input v-model="form.pwd"></el-input>
+          </el-form-item>
+          <el-form-item label="身份证号">
+            <el-input v-model="form.cardId"></el-input>
+          </el-form-item>
+          <el-form-item label="职称">
+            <el-input v-model="form.type"></el-input>
+          </el-form-item>
+        </el-form>
+      </section>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submit()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pagination: {
+        //分页后的考试信息
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 6, //每页条数
+      },
+      dialogVisible: false, //对话框
+      form: {}, //保存点击以后当前试卷的信息
+    };
+  },
+  created() {
+    this.getTeacherInfo();
+  },
+  methods: {
+    getTeacherInfo() {
+      //分页查询所有试卷信息
+      this.$axios(`/api/teachers/${this.pagination.current}/${this.pagination.size}`).then(res => {
+        this.pagination = res.data.data;
+      }).catch(error => {});
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val;
+      this.getTeacherInfo();
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val;
+      this.getTeacherInfo();
+    },
+    checkGrade(teacherId) { //修改教师信息
+      this.dialogVisible = true
+      this.$axios(`/api/teacher/${teacherId}`).then(res => {
+        this.form = res.data.data
+      })
+    },
+    deleteById(teacherId) { //删除当前教师
+      this.$confirm("确定删除当前教师吗？删除后无法恢复","Warning",{
+        confirmButtonText: '确定删除',
+        cancelButtonText: '算了,留着吧',
+        type: 'danger'
+      }).then(()=> { //确认删除
+        this.$axios({
+          url: `/api/teacher/${teacherId}`,
+          method: 'delete',
+        }).then(res => {
+          this.getTeacherInfo()
+        })
+      }).catch(() => {
+
+      })
+    },
+    submit() { //提交更改
+      this.dialogVisible = false
+      this.$axios({
+        url: '/api/teacher',
+        method: 'put',
+        data: {
+          ...this.form
+        }
+      }).then(res => {
+        console.log(res)
+        if(res.data.code ==200) {
+          this.$message({
+            message: '更新成功',
+            type: 'success'
+          })
+        }
+        this.getTeacherInfo()
+      })
+    },
+    handleClose(done) { //关闭提醒
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        }).catch(_ => {});
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+.all {
+  padding: 0px 40px;
+  .page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .edit {
+    margin-left: 20px;
+  }
+  .el-table tr {
+    background-color: #dd5862 !important;
+  }
+}
+.el-table .warning-row {
+  background: #000 !important;
+}
+
+.el-table .success-row {
+  background: #dd5862;
+}
+</style>

src/components/charts/grade.vue

@@ -0,0 +1,99 @@
+<!--
+ * 成绩统计页面
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id="grade">
+    <div ref="box" class="box"></div>
+    <div class="notFound" v-if="isNull">
+      <i class="iconfont icon-LC_icon_tips_fill"></i
+      ><span>该考生未参加考试</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "grade",
+  data() {
+    return {
+      isNull: false, //原始数据
+      tableDataX: [], //x轴数据 保存次数
+      tableDataY: [], //y轴数据 保存分数
+    };
+  },
+  mounted() {
+    this.score();
+  },
+  methods: {
+    score() {
+      let studentId = this.$route.query.studentId;
+      this.$axios(`/api/score/${studentId}`).then((res) => {
+        //根据学生Id查询成绩
+        if (res.data.code == 200) {
+          let rootData = res.data.data;
+          rootData.forEach((element, index) => {
+
+            // 科目名称转列显示
+            var insertIntervalString = (
+              originStr,
+              disNum = 10,
+              insertStr = "\n"
+            ) =>
+              originStr.replace(
+                new RegExp("(.{" + disNum + "})", "g"),
+                "$1" + insertStr
+              );
+            // 每隔一个字符插入一个回车
+            var subject = insertIntervalString(element.subject, 3, "\n");
+
+            this.tableDataX.push(subject);
+            this.tableDataY.push(element.etScore);
+          });
+          let boxDom = this.$refs["box"];
+          let scoreCharts = this.$echarts.init(boxDom);
+          let option = {
+            xAxis: {
+              type: "category",
+              data: this.tableDataX,
+            },
+            yAxis: {
+              type: "value",
+            },
+            series: [
+              {
+                data: this.tableDataY,
+                type: "line",
+                itemStyle: { normal: { label: { show: true } } },
+              },
+            ],
+          };
+          scoreCharts.setOption(option);
+          scoreCharts.on("mouseover", (params) => {
+            console.log(params.value);
+          });
+        } else {
+          this.isNull = true;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#grade {
+  position: relative;
+  .box {
+    width: 600px;
+    height: 400px;
+  }
+  .notFound {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+}
+</style>

src/components/charts/scorePart.vue

@@ -0,0 +1,122 @@
+<!--
+ * 考试成绩统计
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div class="part" >
+    <div class="box" ref="box"></div>
+    <div v-if="isNull">
+      <span>该门考试还没人参考哦,请提醒学生参加考试。</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isNull: false, //是否有成绩标志位
+      name: null,
+      category: { //保存分数段
+        '90分及以上': 0,
+        '80-89分': 0,
+        '70-79分': 0,
+        '60-69分': 0,
+        '60分以下': 0,
+      }
+    }
+  },
+  created() {
+    this.getScoreInfo()
+
+  },
+  methods: {
+    getScoreInfo() {
+      let examCode = this.$route.query.examCode
+      this.name = this.$route.query.source
+      this.$axios(`/api/scores/${examCode}`).then(res => {
+        let data = res.data.data
+        if(data.length > 0) {
+          let box = this.$refs['box']
+          let charts = this.$echarts.init(box)
+          data.forEach(element => {
+            switch(element.etScore / 10) {
+              case 10:
+              case 9:
+                this.category["90分及以上"]++
+                break
+              case 8:
+                this.category['80-89分']++
+                break
+              case 7:
+                this.category["70-79分"]++
+                break
+              case 6:
+                this.category['60-69分']++
+                break
+              default:
+                this.category['60分以下']++
+            }
+          });
+          let option = {
+              title : {
+                  text: `${this.name}分数段图`,
+                  subtext: '分数段饼图',
+                  x:'center'
+              },
+              tooltip : {
+                  trigger: 'item',
+                  formatter: "{a}：{b} <br/> {c}人 ({d}%)"
+              },
+              legend: {
+                  orient: 'vertical',
+                  left: 'left',
+                  data: ['90分及以上','80-89分','70-79分','60-69分','60分以下']
+              },
+              series : [
+                  {
+                      name: '分数段',
+                      type: 'pie',
+                      radius : '35%',
+                      center: ['50%', '35%'],
+                      data:[
+                          {value:this.category['90分及以上'], name:'90分及以上'},
+                          {value:this.category['80-89分'], name:'80-89分'},
+                          {value:this.category['70-79分'], name:'70-79分'},
+                          {value:this.category['60-69分'], name:'60-69分'},
+                          {value:this.category['60分以下'], name:'60分以下'}
+                      ],
+                      itemStyle: {
+                          emphasis: {
+                              shadowBlur: 10,
+                              shadowOffsetX: 0,
+                              shadowColor: 'rgba(0, 0, 0, 0.5)'
+                          }
+                      }
+                  }
+              ]
+          };
+          charts.setOption(option)
+        }else {
+          this.isNull = true
+        }
+      })
+    }
+  },
+
+}
+</script>
+
+<style lang="less" scoped>
+.part {
+  .box {
+    width: 800px;
+    height: 800px;
+    margin-left: 40px;
+  }
+}
+</style>
+
+

src/components/common/header.vue

@@ -0,0 +1,234 @@
+<!--
+ * 顶部信息栏
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <header id="topbar">
+
+    <el-dialog
+      :append-to-body="true"
+      style="z-index:2028px;"
+      title="修改密码"
+      :visible.sync="dialogVisible"
+      width="30%"
+    >
+      <el-form status-icon ref="ruleForm2" label-width="100px" class="demo-ruleForm">
+        <el-form-item label="旧密码" prop="pass">
+          <el-input type="password" v-model="oldPsw" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="新密码" prop="pass">
+          <el-input type="password" v-model="newPsw" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="确认新密码" prop="checkPass">
+          <el-input type="password" v-model="confirmNewPsw" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="resetPsw"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+
+    <el-row>
+      <el-col :span="3" class="topbar-left">
+        <span class="title" @click="index()" style="font-size: 1.2vw;">在线考试系统管理台</span>
+      </el-col>
+      <el-col :span="21" class="topbar-right">
+        <i class="el-icon-menu" @click="toggle()"></i>
+        <div class="user">
+          <span>{{ user.userName }}</span>
+          <img
+            src="@/assets/img/userimg.png"
+            class="user-img"
+            ref="img"
+            @click="showSetting()"
+          />
+          <transition name="fade">
+            <div class="out" ref="out" v-show="login_flag">
+              <ul>
+                <li v-if="role==0"><a @click="dialogVisible = true" href="javascript:;">修改密码</a></li>
+                <li class="exit" @click="exit()">
+                  <a href="javascript:;">退出登录</a>
+                </li>
+              </ul>
+            </div>
+          </transition>
+        </div>
+      </el-col>
+    </el-row>
+
+  </header>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+export default {
+  data() {
+    return {
+      login_flag: false,
+      user: {
+        //用户信息
+        userName: null,
+        userId: null,
+      },
+      dialogVisible: false,
+      oldPsw: "",
+      newPsw: "",
+      confirmNewPsw: "",
+      role:0,
+    };
+  },
+  created() {
+    this.getUserInfo();
+
+    this.role = this.$cookies.get("role")
+  },
+  computed: mapState(["flag", "menu"]),
+  methods: {
+    // 管理员重置密码
+    resetPsw() {
+      if(this.oldPsw == "") {
+        this.$message('请输入旧密码');
+        return;
+      }
+      if(this.newPsw == "") {
+        this.$message('请输入新密码');
+        return;
+      }
+      if(this.confirmNewPsw != this.newPsw) {
+        this.$message('两次新密码不一致');
+        return;
+      }
+      this.$axios(`/api/admin/resetPsw/${this.user.userId}/${this.oldPsw}/${this.newPsw}`).then(res => {
+        let status = res.data.code
+        if(status == 200) {
+          if(res.data.data != true) {
+            this.$message(res.data.data);
+          } else {
+            // 修改成功
+            this.$message("修改成功");
+            this.dialogVisible = false;
+            this.oldPsw = "";
+            this.newPsw = "";
+            this.confirmNewPsw = "";
+          }
+        }
+      })
+    },
+    //显示、隐藏退出按钮
+    showSetting() {
+      this.login_flag = !this.login_flag;
+    },
+    //左侧栏放大缩小
+    ...mapMutations(["toggle"]),
+    getUserInfo() {
+      //获取用户信息
+      let userName = this.$cookies.get("cname");
+      let userId = this.$cookies.get("cid");
+      this.user.userName = userName;
+      this.user.userId = userId;
+    },
+    index() {
+      this.$router.push({ path: "/index" });
+    },
+    exit() {
+      let role = this.$cookies.get("role");
+      this.$router.push({ path: "/" }); //跳转到登录页面
+      this.$cookies.remove("cname"); //清除cookie
+      this.$cookies.remove("cid");
+      this.$cookies.remove("role");
+      this.$cookies.remove("rb_token") //清除cookie
+      this.$cookies.remove("rb_role")
+      if (role == 0) {
+        this.menu.pop();
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+#topbar {
+  position: relative;
+  z-index: 10;
+  background-color: #3186cb;
+  height: 80px;
+  line-height: 80px;
+  color: #fff;
+  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
+}
+#topbar .topbar-left {
+  height: 80px;
+  display: flex;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+.topbar-left .icon-kaoshi {
+  font-size: 60px;
+}
+.topbar-left .title {
+  font-size: 20px;
+  cursor: pointer;
+}
+.topbar-right {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.topbar-right .user-img {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+.topbar-right .el-icon-menu {
+  font-size: 30px;
+  margin-left: 20px;
+}
+.topbar-right .user {
+  position: relative;
+  margin-right: 40px;
+  display: flex;
+}
+.topbar-right .user .user-img {
+  margin-top: 15px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+.user .out {
+  font-size: 14px;
+  position: absolute;
+  top: 80px;
+  right: 0px;
+  background-color: #fff;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  padding: 12px;
+}
+.user .out ul {
+  list-style: none;
+}
+.user .out ul > li {
+  height: 26px;
+  line-height: 26px;
+}
+.out a {
+  text-decoration: none;
+  color: #000;
+}
+.out .exit {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid #ccc;
+}
+</style>

src/components/common/hello.vue

@@ -0,0 +1,84 @@
+<!--
+ * 欢迎页
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <section class="index">
+    <div style="margin-top: 20px;font-size: 24px;">
+      <h1>
+        <span style="margin-left: 30%;color: #000000">欢迎登录在线考试系统后台</span>
+      </h1>
+      <img src="../../assets/homepage.png" style="width: 95%">
+    </div>
+
+  </section>
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      user: { //用户信息
+        userName: null,
+        userId: null
+      }
+    }
+  },
+  created() {
+    this.getUserInfo()
+  },
+  methods: {
+    getUserInfo() { //获取用户信息
+      let userName = this.$cookies.get("cname")
+      let userId = this.$cookies.get("cid")
+      this.user.userName = userName
+      this.user.userId = userId
+    },
+    openMsg() {
+      this.$alert('根据《国务院办公厅关于2023年部分节假日安排的通知》精神，越城区行政服务中心将于4月5日（星期五）至4月7日（星期天）进行清明节放假调休，共3天，放假期间不受理业务。4月8日（星期一）开始正常上班受理业务。望市民朋友相互转告，给您带来不便，敬请谅解。','清明节放假通知',{
+        confirmButtonText: '确定'
+      })
+    }
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+.index {
+  margin-left: 70px;
+  .hello {
+    font-size: 20px;
+    color: #726f70;
+    .icon-xihuan {
+      font-size: 30px;
+      color: #dd6572;
+    }
+  }
+  .msg {
+    .title {
+      font-size: 16px;
+      color: #000;
+      margin-top: 20px;
+      margin-left: 10px;
+    }
+    ul {
+      display: flex;
+      flex-direction: column;
+      width: 200px;
+      overflow: hidden;
+    }
+    li {
+      margin-top: 10px;
+      font-size: 14px;
+      color: lightcoral;
+      cursor: pointer;
+      display: inline-block;
+    }
+  }
+}
+</style>
+

src/components/common/login.vue

@@ -0,0 +1,226 @@
+<!--
+ * 登录页面
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id="login">
+    <div class="bg"></div>
+    <el-row class="main-container" >
+      <el-col :lg="20" :xs="16" :md="10" :span="10">
+        <div class="bottom" style="margin-top:220px;margin-left: 65%">
+          <div class="container" >
+
+            <p class="title" style="color: #e75c09">
+              <img src="../../assets/img/loginicon.png" style="width: 40px;position: relative; top: 13px;right: 6px">登录在线考试系统
+            </p>
+            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
+              <el-form-item label="用户名" >
+                <el-input style="width: 240px" v-model.number="formLabelAlign.username" placeholder="请输入用户名"></el-input>
+              </el-form-item>
+              <el-form-item label="密码" >
+                <el-input style="width: 240px" v-model="formLabelAlign.password" placeholder="请输入密码" type='password'></el-input>
+              </el-form-item>
+              <div class="submit">
+                <el-button style="width: 200px" type="primary" class="row-login" @click="login()">登录</el-button>
+              </div>
+            </el-form>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row class="footer">
+      <el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+export default {
+  name: "login",
+  data() {
+    return {
+      role: 2,
+      labelPosition: 'left',
+      formLabelAlign: {
+        username: '',
+        password: ''
+      }
+    }
+  },
+  methods: {
+    //用户登录请求后台处理
+    login() {
+      if(this.formLabelAlign.username == undefined || this.formLabelAlign.username == '') {
+         this.$message('请输入用户名');
+        return;
+      }
+      if(!(/^\d+$/.test(this.formLabelAlign.username)) || this.formLabelAlign.username.toString().length > 10) {
+        this.$message('用户名有误');
+        return;
+      }
+      if(this.formLabelAlign.password == "") {
+        this.$message('请输入密码');
+        return;
+      }
+      this.$axios({
+        url: `/api/login`,
+        method: 'post',
+        data: {
+          ...this.formLabelAlign
+        }
+      }).then(res=>{
+        let resData = res.data.data
+        if(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' }) //跳转到首页
+              break
+            case "1": //教师
+              this.$cookies.set("cname", resData.teacherName)
+              this.$cookies.set("cid", resData.teacherId)
+              this.$cookies.set("role", 1)
+              this.$router.push({path: '/index' }) //跳转到教师用户
+              break
+            case "2": //学生
+              this.$cookies.set("cname", resData.studentName)
+              this.$cookies.set("cid", resData.studentId)
+              this.$router.push({path: '/student'})
+              break
+          }
+        }
+        if(resData == null) { //错误提示
+          this.$message({
+            showClose: true,
+            type: 'error',
+            message: '用户名或者密码错误'
+          })
+        }
+      })
+    },
+    clickTag(key) {
+      this.role = key
+    }
+  },
+  computed: mapState(["userInfo"]),
+  mounted() {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.remind {
+  border-radius: 4px;
+  padding: 10px 20px;
+  display: flex;
+  position: fixed;
+  right: 20px;
+  bottom: 50%;
+  flex-direction: column;
+  color: #606266;
+  background-color: #fff;
+  border-left: 4px solid #409eff;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
+}
+.container {
+  margin-bottom: 32px;
+}
+.container .el-radio-group {
+  margin: 30px 0px;
+}
+a:link {
+  color:#ff962a;
+  text-decoration:none;
+}
+#login {
+  font-size: 14px;
+  color: #000;
+  background-color: #fff;
+}
+#login .bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  overflow-y: auto;
+  height: 100%;
+  background: url('../../assets/img/loginbg.png')center top / cover no-repeat;
+  background-color: #b6bccdd1 !important;
+}
+#login .main-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#login .main-container .top {
+  margin-top: 150px;
+  font-size: 30px;
+  color: #ff962a;
+  display: flex;
+  justify-content: center;
+}
+#login .top .icon-kaoshi {
+  font-size: 80px;
+}
+#login .top .title {
+  margin-top: 20px;
+}
+#login .bottom {
+  display:flex;
+  justify-content: center;
+  background-color:#fff;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+#login .bottom .title {
+  text-align: center;
+  font-size: 30px;
+}
+.bottom .container .title {
+  margin: 30px 0px;;
+}
+.bottom .submit .row-login {
+  width: 100%;
+  background-color: #3186cb;
+  border-color: #ffffff;
+  margin: 20px 0px 10px 0px;
+  padding: 15px 20px;
+}
+.bottom .submit {
+  display: flex;
+  justify-content: center;
+}
+.footer {
+  margin-top: 50px;
+  text-align: center;
+}
+.footer .msg1 {
+  font-size: 18px;
+  color: #fff;
+  margin-bottom: 15px;
+}
+.footer .msg2 {
+  font-size: 14px;
+  color: #e3e3e3;
+  margin-top: 70px;
+}
+.bottom .options {
+  margin-bottom: 40px;
+  color: #ff962a;
+  display: flex;
+  justify-content: space-between;
+}
+.bottom .options > a {
+  color: #ff962a;
+}
+.bottom .options .register span:nth-child(1) {
+  color: #8C8C8C;
+}
+</style>

src/components/common/mainLeft.vue

@@ -0,0 +1,109 @@
+<!--
+ * 左边下拉导航栏
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id="left">
+    <el-menu
+      active-text-color="lightgrey"
+      text-color="#000"
+      :default-active="this.$route.path"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose"
+      :collapse="flag"
+      background-color="#3186cb"
+      menu-trigger="click" router>
+      <el-submenu v-for="(item,index) in menu" :index='item.index' :key="index">
+        <template slot="title">
+          <div class="left-width">
+            <i class="iconfont" :class="item.icon"></i>
+            <span slot="title" class="title">{{item.title}}</span>
+          </div>
+        </template>
+        <el-menu-item-group v-for="(list,index1) in item.content" :key="index1" >
+          <el-menu-item @click="handleTitle(item.index)" :index="list.path" v-if="list.item1 != null" style="color:white;">{{list.item1}}</el-menu-item>
+          <el-menu-item @click="handleTitle(item.index)" :index="list.path" v-if="list.item2 != null" style="color:white;">{{list.item2}}</el-menu-item>
+          <el-menu-item @click="handleTitle(item.index)" :index="list.path" v-if="list.item3 != null" style="color:white;">{{list.item3}}</el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+export default {
+  name: "mainLeft",
+  data() {
+    return {
+
+    }
+  },
+  computed: mapState(["flag","menu"]),
+  created() {
+    this.addData()
+  },
+  methods: {
+    handleOpen(key, keyPath) {
+      // console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      // console.log(key, keyPath);
+    },
+    //点击标题传递参数给navigator组件
+    handleTitle(index) {
+      this.bus.$emit('sendIndex',index)
+    },
+    addData() {
+      let role = this.$cookies.get("role")
+      if(role == 0) {
+        this.menu.push({
+          index: '5',
+          title: '教师管理',
+          icon: 'icon-Userselect',
+          content:[{item1:'教师管理',path:'/teacherManage'},{item2: '添加教师',path: '/addTeacher'}],
+        })
+      }
+    }
+  },
+}
+</script>
+
+<style>
+.el-menu-vertical-demo .el-submenu__title {
+  overflow: hidden;
+}
+.left-width .iconfont {
+  font-size: 18px;
+  color: #fff;
+}
+.left-width {
+  width: 213px;
+}
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  min-height: 900px;
+}
+#left {
+  height: 900px;
+  background-color: CornflowerBlue;
+  z-index: 0;
+}
+#left .el-menu-vertical-demo .title {
+  color: #fff;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 14px;
+}
+.el-submenu {
+  border-bottom: 1px solid #eeeeee0f !important;
+}
+.el-submenu__title:hover {
+  background-color: #fff;
+}
+.el-submenu__title i {
+    color: #fbfbfc !important;
+}
+</style>

src/components/common/mainTop.vue

@@ -0,0 +1,11 @@
+<!--
+ * 顶部面包屑
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div class="bar">
+
+  </div>
+</template>

src/components/common/navigator.vue

@@ -0,0 +1,55 @@
+<!--
+ * 菜单滑块
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id="nav">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item class="title">{{active.title}}</el-breadcrumb-item>
+      <el-breadcrumb-item v-if="active.item1 != null">{{active.item1}}</el-breadcrumb-item>
+      <el-breadcrumb-item v-if="active.item2 != null">{{active.item2}}</el-breadcrumb-item>
+      <el-breadcrumb-item v-if="active.item3 != null">{{active.item3}}</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+export default {
+  data() {
+    return {
+      active: [],
+      index1: null,
+    }
+  },
+  computed: mapState(["menu"]),
+  methods: {
+    getIndex() {
+      this.bus.$on('sendIndex',(data)=>{
+        this.index1 = data
+        this.active = this.menu[data-1]
+        // console.log(JSON.stringify(this.active)+'----')
+      })
+    }
+  },
+  created() {
+    this.getIndex()
+  },
+  beforeDestroy() {
+    // this.bus.$off('sendIndex') //销毁
+  },
+}
+</script>
+
+<style scoped>
+#nav .el-breadcrumb {
+  height: 60px;
+  line-height: 60px;
+  padding-left: 20px;
+}
+#nav .el-breadcrumb .title{
+  font-weight: bold;
+}
+</style>

src/components/student/answer.vue

@@ -0,0 +1,956 @@
+<!--
+ * 考试答题界面
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id="answer">
+    <!--顶部信息栏-->
+    <div class="top">
+      <ul class="item">
+        <li>
+          <i
+            class="iconfont icon-menufold icon20"
+            ref="toggle"
+            @click="slider_flag = !slider_flag"
+          ></i>
+        </li>
+        <li>{{ examData.type }}-{{ examData.source }}</li>
+        <li @click="flag = !flag" style="cursor:pointer;">
+          <i class="iconfont icon-user icon20"></i>
+          <div class="msg" v-if="flag" @click="flag = !flag">
+            <p>姓名：{{ userInfo.name }}</p>
+            <p>准考证号: {{ userInfo.id }}</p>
+          </div>
+        </li>
+        <li><i class="iconfont icon-arrLeft icon20"></i></li>
+      </ul>
+    </div>
+    <div class="flexarea">
+      <!--左边题目编号区-->
+      <transition name="slider-fade">
+        <div class="left" v-if="slider_flag">
+          <ul class="l-top">
+            <li>
+              <a href="javascript:;"></a>
+              <span>当前</span>
+            </li>
+            <li>
+              <a href="javascript:;"></a>
+              <span>未答</span>
+            </li>
+            <li>
+              <a href="javascript:;"></a>
+              <span>已答</span>
+            </li>
+            <li>
+              <a href="javascript:;"></a>
+              <span>标记</span>
+            </li>
+          </ul>
+          <div class="l-bottom">
+            <div class="item">
+              <p>选择题部分</p>
+              <ul>
+                <li v-for="(list, index1) in topic[1]" :key="index1">
+                  <a
+                    href="javascript:;"
+                    @click="change(index1)"
+                    :class="{
+                      border: index == index1 && currentType == 1,
+                      bg: bg_flag && topic[1][index1].isClick == true,
+                    }"
+                  >
+                    <span
+                      :class="{ mark: topic[1][index1].isMark == true }"
+                    ></span>
+                    {{ index1 + 1 }}
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="item">
+              <p>填空题部分</p>
+              <ul>
+                <li v-for="(list, index2) in topic[2]" :key="index2">
+                  <a
+                    href="javascript:;"
+                    @click="fill(index2)"
+                    :class="{
+                      border: index == index2 && currentType == 2,
+                      bg: fillAnswer[index2][3] == true,
+                    }"
+                    ><span
+                      :class="{ mark: topic[2][index2].isMark == true }"
+                    ></span
+                    >{{ topicCount[0] + index2 + 1 }}</a
+                  >
+                </li>
+              </ul>
+            </div>
+            <div class="item">
+              <p>判断题部分</p>
+              <ul>
+                <li v-for="(list, index3) in topic[3]" :key="index3">
+                  <a
+                    href="javascript:;"
+                    @click="judge(index3)"
+                    :class="{
+                      border: index == index3 && currentType == 3,
+                      bg: bg_flag && topic[3][index3].isClick == true,
+                    }"
+                    ><span
+                      :class="{ mark: topic[3][index3].isMark == true }"
+                    ></span
+                    >{{ topicCount[0] + topicCount[1] + index3 + 1 }}</a
+                  >
+                </li>
+              </ul>
+            </div>
+            <div class="final" @click="finishExam()">结束考试</div>
+          </div>
+        </div>
+      </transition>
+      <!--右边选择答题区-->
+      <transition name="slider-fade">
+        <div class="right">
+          <div class="title">
+            <p>{{ title }}</p>
+            <i class="iconfont icon-right auto-right"></i>
+            <span
+              >全卷共{{ topicCount[0] + topicCount[1] + topicCount[2] }}题
+              <span v-if="!isPractice">
+                <i class="iconfont icon-time"></i>倒计时：<b>{{ time }}</b
+                >分钟</span
+              >
+            </span>
+          </div>
+          <div class="content">
+            <p class="topic">
+              <span class="number">{{ number }}</span
+              >{{ showQuestion }}
+            </p>
+            <div v-if="currentType == 1">
+              <el-radio-group v-model="radio[index]" @change="getChangeLabel">
+                <el-radio :label="1">{{ showAnswer.answerA }}</el-radio>
+                <el-radio :label="2">{{ showAnswer.answerB }}</el-radio>
+                <el-radio :label="3">{{ showAnswer.answerC }}</el-radio>
+                <el-radio :label="4">{{ showAnswer.answerD }}</el-radio>
+              </el-radio-group>
+              <div class="analysis" v-if="isPractice&&radio[index]!=undefined">
+                <ul>
+                  <li>
+                    <el-tag type="success">正确答案：</el-tag
+                    ><span class="right">{{ reduceAnswer.rightAnswer }}</span>
+                  </li>
+                  <li><el-tag>题目解析：</el-tag></li>
+                  <li>
+                    {{
+                      reduceAnswer.analysis == null
+                        ? "暂无解析"
+                        : reduceAnswer.analysis
+                    }}
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="fill" v-if="currentType == 2">
+              <div v-for="(item, currentIndex) in part" :key="currentIndex">
+                <el-input
+                  placeholder="请填在此处"
+                  v-model="fillAnswer[index][currentIndex]"
+                  clearable
+                  @blur="fillBG"
+                >
+                </el-input>
+              </div>
+              <div class="analysis" v-if="isPractice&&fillAnswer[index][0]!=undefined">
+                <ul>
+                  <li>
+                    <el-tag type="success">正确答案：</el-tag
+                    ><span class="right">{{ topic[2][index].answer }}</span>
+                  </li>
+                  <li><el-tag>题目解析：</el-tag></li>
+                  <li>
+                    {{
+                      topic[2][index].analysis == null
+                        ? "暂无解析"
+                        : topic[2][index].analysis
+                    }}
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="judge" v-if="currentType == 3">
+              <el-radio-group
+                v-model="judgeAnswer[index]"
+                @change="getJudgeLabel"
+                v-if="currentType == 3"
+              >
+                <el-radio :label="1">正确</el-radio>
+                <el-radio :label="2">错误</el-radio>
+              </el-radio-group>
+              <div class="analysis" v-if="isPractice&&judgeAnswer[index]!=undefined">
+                <ul>
+                  <li>
+                    <el-tag type="success">正确答案：</el-tag
+                    ><span class="right">{{ topic[3][index].answer=='T'?'正确':'错误' }}</span>
+                  </li>
+                  <li><el-tag>题目解析：</el-tag></li>
+                  <li>
+                    {{
+                      topic[3][index].analysis == null
+                        ? "暂无解析"
+                        : topic[3][index].analysis
+                    }}
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="operation">
+            <ul class="end">
+              <li @click="previous()">
+                <i class="iconfont icon-previous"></i><span>上一题</span>
+              </li>
+              <li @click="mark()">
+                <i class="iconfont icon-mark-o"></i><span>标记</span>
+              </li>
+              <li @click="next()">
+                <span>下一题</span><i class="iconfont icon-next"></i>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      startTime: null, //考试开始时间
+      endTime: null, //考试结束时间
+      time: null, //考试持续时间
+      reduceAnswer: [], //vue官方不支持3层以上数据嵌套,如嵌套则会数据渲染出现问题,此变量直接接收3层嵌套时的数据。
+      answerScore: 0, //答题总分数
+      bg_flag: false, //已答标识符,已答改变背景色
+      isFillClick: false, //选择题是否点击标识符
+      slider_flag: true, //左侧显示隐藏标识符
+      flag: false, //个人信息显示隐藏标识符
+      currentType: 1, //当前题型类型  1--选择题  2--填空题  3--判断题
+      radio: [], //保存考生所有选择题的选项
+      title: "请选择正确的选项",
+      index: 0, //全局index
+      userInfo: {
+        //用户信息
+        name: null,
+        id: null,
+      },
+      topicCount: [], //每种类型题目的总数
+      score: [], //每种类型分数的总数
+      examData: {
+        //考试信息
+        // source: null,
+        // totalScore: null,
+      },
+      topic: {
+        //试卷信息
+      },
+      showQuestion: [], //当前显示题目信息
+      showAnswer: {}, //当前题目对应的答案选项
+      number: 1, //题号
+      part: null, //填空题的空格数量
+      fillAnswer: [[]], //二维数组保存所有填空题答案
+      judgeAnswer: [], //保存所有判断题答案
+      topic1Answer: [], //学生选择题作答编号,
+      rightAnswer: "",
+      timer: "",
+    };
+  },
+  created() {
+    this.getCookies();
+    this.getExamData();
+    if (!this.isPractice) {
+      this.showTime();
+    }
+  },
+  methods: {
+    finishExam() {
+      if (this.isPractice) {
+        // 练习交卷
+        this.$confirm("结束本次练习？", "友情提示", {
+          confirmButtonText: "立即交卷",
+          cancelButtonText: "继续练习",
+          type: "warning",
+        })
+          .then(() => {
+            this.commit();
+          })
+          .catch(() => {
+
+          });
+      } else if (this.time > 0) {
+        // 提前交卷
+        this.$confirm("考试结束时间未到,是否提前交卷", "友情提示", {
+          confirmButtonText: "立即交卷",
+          cancelButtonText: "再检查一下",
+          type: "warning",
+        })
+          .then(() => {
+            this.commit();
+          })
+          .catch(() => {
+
+          });
+      }
+    },
+    getTime(date) {
+      //日期格式化
+      let year = date.getFullYear();
+      let month =
+        date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1;
+      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+      let hours =
+        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+      let minutes =
+        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+      let seconds =
+        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      // 拼接
+      return (
+        year +
+        "-" +
+        month +
+        "-" +
+        day +
+        " " +
+        hours +
+        ":" +
+        minutes +
+        ":" +
+        seconds
+      );
+    },
+    getCookies() {
+      //获取cookie
+      this.userInfo.name = this.$cookies.get("cname");
+      this.userInfo.id = this.$cookies.get("cid");
+    },
+    calcuScore() {
+      //计算答题分数
+    },
+    getExamData() {
+      //获取当前试卷所有信息
+      let date = new Date();
+      this.startTime = this.getTime(date);
+      let examCode = this.$route.query.examCode; //获取路由传递过来的试卷编号
+      this.$axios(`/api/exam/${examCode}`).then((res) => {
+        //通过examCode请求试卷详细信息
+        this.examData = { ...res.data.data }; //获取考试详情
+        this.index = 0;
+        this.time = this.examData.totalTime; //获取分钟数
+        let paperId = this.examData.paperId;
+        this.$axios(`/api/paper/${paperId}`).then((res) => {
+          //通过paperId获取试题题目信息
+          this.topic = { ...res.data };
+          let reduceAnswer = this.topic[1][this.index];
+          this.reduceAnswer = reduceAnswer;
+          let keys = Object.keys(this.topic); //对象转数组
+          keys.forEach((e) => {
+            let data = this.topic[e];
+            this.topicCount.push(data.length);
+            let currentScore = 0;
+            for (let i = 0; i < data.length; i++) {
+              //循环每种题型,计算出总分
+              currentScore += data[i].score;
+            }
+            this.score.push(currentScore); //把每种题型总分存入score
+          });
+          let len = this.topicCount[1];
+          let father = [];
+          for (let i = 0; i < len; i++) {
+            //根据填空题数量创建二维空数组存放每道题答案
+            let children = [null, null, null, null];
+            father.push(children);
+          }
+          this.fillAnswer = father;
+          let dataInit = this.topic[1];
+          this.number = 1;
+          this.showQuestion = dataInit[0].question;
+          this.showAnswer = dataInit[0];
+        });
+      });
+    },
+    change(index) {
+      //选择题
+      this.index = index;
+      let reduceAnswer = this.topic[1][this.index];
+      this.reduceAnswer = reduceAnswer;
+      this.isFillClick = true;
+      this.currentType = 1;
+      let len = this.topic[1].length;
+      if (this.index < len) {
+        if (this.index <= 0) {
+          this.index = 0;
+        }
+        console.log(`总长度${len}`);
+        console.log(`当前index:${index}`);
+        this.title = "请选择正确的选项";
+        let Data = this.topic[1];
+        // console.log(Data)
+        this.showQuestion = Data[this.index].question; //获取题目信息
+        this.showAnswer = Data[this.index];
+        this.number = this.index + 1;
+      } else if (this.index >= len) {
+        this.index = 0;
+        this.fill(this.index);
+      }
+    },
+    fillBG() {
+      //填空题已答题目 如果已答该题目,设置第四个元素为true为标识符
+      if (this.fillAnswer[this.index][0] != null) {
+        this.fillAnswer[this.index][3] = true;
+      }
+    },
+    fill(index) {
+      //填空题
+      let len = this.topic[2].length;
+      this.currentType = 2;
+      this.index = index;
+      if (index < len) {
+        if (index < 0) {
+          index = this.topic[1].length - 1;
+          this.change(index);
+        } else {
+          console.log(`总长度${len}`);
+          console.log(`当前index:${index}`);
+          this.title = "请在横线处填写答案";
+          let Data = this.topic[2];
+          console.log(Data);
+          this.showQuestion = Data[index].question; //获取题目信息
+          let part = this.showQuestion.split("()").length - 1; //根据题目中括号的数量确定填空横线数量
+          this.part = part;
+          this.number = this.topicCount[0] + index + 1;
+        }
+      } else if (index >= len) {
+        this.index = 0;
+        this.judge(this.index);
+      }
+    },
+    judge(index) {
+      //判断题
+      let len = this.topic[3].length;
+      this.currentType = 3;
+      this.index = index;
+      if (this.index < len) {
+        if (this.index < 0) {
+          this.index = this.topic[2].length - 1;
+          this.fill(this.index);
+        } else {
+          console.log(`总长度${len}`);
+          console.log(`当前index:${this.index}`);
+          this.title = "请作出正确判断";
+          let Data = this.topic[3];
+          console.log(Data);
+          this.showQuestion = Data[index].question; //获取题目信息
+          this.number = this.topicCount[0] + this.topicCount[1] + index + 1;
+        }
+      } else if (this.index >= len) {
+        this.index = 0;
+        this.change(this.index);
+      }
+    },
+    getChangeLabel(val) {
+      //获取选择题作答选项
+      this.radio[this.index] = val; //当前选择的序号
+      if (val) {
+        let data = this.topic[1];
+        this.bg_flag = true;
+        data[this.index]["isClick"] = true;
+      }
+      /* 保存学生答题选项 */
+      this.topic1Answer[this.index] = val;
+    },
+    getJudgeLabel(val) {
+      //获取判断题作答选项
+      this.judgeAnswer[this.index] = val;
+      if (val) {
+        let data = this.topic[3];
+        this.bg_flag = true;
+        data[this.index]["isClick"] = true;
+      }
+    },
+    previous() {
+      //上一题
+      this.index--;
+      switch (this.currentType) {
+        case 1:
+          this.change(this.index);
+          break;
+        case 2:
+          this.fill(this.index);
+          break;
+        case 3:
+          this.judge(this.index);
+          break;
+      }
+    },
+    next() {
+      //下一题
+      this.index++;
+      switch (this.currentType) {
+        case 1:
+          this.change(this.index);
+          break;
+        case 2:
+          this.fill(this.index);
+          break;
+        case 3:
+          this.judge(this.index);
+          break;
+      }
+    },
+    mark() {
+      //标记功能
+      switch (this.currentType) {
+        case 1:
+          this.topic[1][this.index]["isMark"] = true; //选择题标记
+          break;
+        case 2:
+          this.topic[2][this.index]["isMark"] = true; //填空题标记
+          break;
+        case 3:
+          this.topic[3][this.index]["isMark"] = true; //判断题标记
+      }
+    },
+    commit() {
+      //答案提交计算分数
+      /* 计算选择题总分 */
+      let topic1Answer = this.topic1Answer;
+      let finalScore = 0;
+      topic1Answer.forEach((element, index) => {
+        //循环每道选择题根据选项计算分数
+        let right = null;
+        if (element != null) {
+          switch (
+            element //选项1,2,3,4 转换为 "A","B","C","D"
+          ) {
+            case 1:
+              right = "A";
+              break;
+            case 2:
+              right = "B";
+              break;
+            case 3:
+              right = "C";
+              break;
+            case 4:
+              right = "D";
+          }
+          if (right == this.topic[1][index].rightAnswer) {
+            // 当前选项与正确答案对比
+            finalScore += this.topic[1][index].score; // 计算总分数
+          }
+        }
+      });
+      /**计算判断题总分 */
+      let fillAnswer = this.fillAnswer;
+      fillAnswer.forEach((element, index) => {
+        //此处index和 this.index数据不一致，注意
+        element.forEach((inner) => {
+          if (this.topic[2][index].answer.includes(inner)) {
+            //判断填空答案是否与数据库一致
+            finalScore += this.topic[2][this.index].score;
+          }
+        });
+      });
+      /** 计算判断题总分 */
+      let topic3Answer = this.judgeAnswer;
+      topic3Answer.forEach((element, index) => {
+        let right = null;
+        switch (element) {
+          case 1:
+            right = "T";
+            break;
+          case 2:
+            right = "F";
+        }
+        if (right == this.topic[3][index].answer) {
+          // 当前选项与正确答案对比
+          finalScore += this.topic[3][index].score; // 计算总分数
+        }
+      });
+      if (this.isPractice) {
+        // 练习，不提交到数据库
+        this.$router.push({
+          path: "/studentScore",
+          query: {
+            score: finalScore,
+            startTime: this.startTime,
+            endTime: this.endTime,
+          },
+        });
+        return;
+      }
+      // 提交分数到数据库
+      let date = new Date();
+      this.endTime = this.getTime(date);
+      let answerDate = this.endTime.substr(0, 10);
+      //提交成绩信息
+      this.$axios({
+        url: "/api/score",
+        method: "post",
+        data: {
+          examCode: this.examData.examCode, //考试编号
+          studentId: this.userInfo.id, //学号
+          subject: this.examData.source, //课程名称
+          etScore: finalScore, //答题成绩
+          answerDate: answerDate, //答题日期
+        },
+      }).then((res) => {
+        if (res.data.code == 200) {
+          this.$router.push({
+            path: "/studentScore",
+            query: {
+              score: finalScore,
+              startTime: this.startTime,
+              endTime: this.endTime,
+            },
+          });
+        }
+      });
+    },
+    showTime() {
+      //倒计时
+      this.timer = setInterval(() => {
+        this.time -= 1;
+        if (this.time == 10) {
+          this.$message({
+            showClose: true,
+            type: "error",
+            message: "考生注意,考试时间还剩10分钟！！！",
+          });
+        }
+
+        if (this.time <= 0) {
+          this.$message({
+            showClose: true,
+            type: "error",
+            message: "考试时间到，系统自动提交试卷",
+          });
+          this.commit();
+        }
+      }, 1000 * 60);
+    },
+  },
+  beforeDestroy() {
+    // 清除计时器
+    clearInterval(this.timer);
+  },
+  computed: mapState(["isPractice"]),
+};
+</script>
+
+<style lang="less">
+.iconfont.icon-time {
+  color: CornflowerBlue;
+  margin: 0px 6px 0px 20px;
+}
+.analysis {
+  margin-top: 20px;
+  .right {
+    color: #2776df;
+    font-size: 18px;
+    border: 1px solid #2776df;
+    padding: 0px 6px;
+    border-radius: 4px;
+    margin-left: 20px;
+  }
+  ul li:nth-child(2) {
+    margin: 20px 0px;
+  }
+  ul li:nth-child(3) {
+    padding: 10px;
+    background-color: #d3c6c9;
+    border-radius: 4px;
+  }
+}
+.analysis span:nth-child(1) {
+  font-size: 18px;
+}
+.mark {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  content: "";
+  background-color: red;
+  border-radius: 50%;
+  top: 0px;
+  left: 22px;
+}
+.border {
+  position: relative;
+  border: 1px solid #ff90aa !important;
+}
+.bg {
+  background-color: #5188b8 !important;
+}
+.fill .el-input {
+  display: inline-flex;
+  width: 150px;
+  margin-left: 20px;
+  .el-input__inner {
+    border: 1px solid transparent;
+    border-bottom: 1px solid #eee;
+    padding-left: 20px;
+  }
+}
+/* slider过渡效果 */
+.slider-fade-enter-active {
+  transition: all 0.3s ease;
+}
+.slider-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slider-fade-enter,
+.slider-fade-leave-to {
+  transform: translateX(-100px);
+  opacity: 0;
+}
+
+.operation .end li:nth-child(2) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: CornflowerBlue;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  color: #fff;
+}
+.operation .end li {
+  cursor: pointer;
+  margin: 0 100px;
+}
+.operation {
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 10px 0px;
+  margin-right: 10px;
+}
+.operation .end {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: CornflowerBlue;
+}
+.content .number {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  background-color: CornflowerBlue;
+  border-radius: 4px;
+  margin-right: 4px;
+}
+.content {
+  padding: 0px 20px;
+}
+.content .topic {
+  padding: 20px 0px;
+  padding-top: 30px;
+}
+.right .content {
+  background-color: #fff;
+  margin: 10px;
+  margin-left: 0px;
+  height: 470px;
+}
+.content .el-radio-group label {
+  color: #000;
+  margin: 5px 0px;
+}
+.content .el-radio-group {
+  display: flex;
+  flex-direction: column;
+}
+.right .title p {
+  margin-left: 20px;
+}
+.flexarea {
+  display: flex;
+}
+.flexarea .right {
+  flex: 1;
+}
+.auto-right {
+  margin-left: auto;
+  color: #2776df;
+  margin-right: 10px;
+}
+.right .title {
+  margin-right: 10px;
+  padding-right: 30px;
+  display: flex;
+  margin-top: 10px;
+  background-color: #fff;
+  height: 50px;
+  line-height: 50px;
+}
+.clearfix {
+  clear: both;
+}
+.l-bottom .final {
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  background-color: CornflowerBlue;
+  width: 240px;
+  margin: 20px 0px 20px 10px;
+  border-radius: 4px;
+  height: 30px;
+  line-height: 30px;
+  color: #fff;
+  margin-top: 22px;
+}
+#answer .left .item {
+  padding: 0px;
+  font-size: 16px;
+}
+.l-bottom {
+  border-radius: 4px;
+  background-color: #fff;
+}
+.l-bottom .item p {
+  margin-bottom: 15px;
+  margin-top: 10px;
+  color: #000;
+  margin-left: 10px;
+  letter-spacing: 2px;
+}
+.l-bottom .item li {
+  width: 15%;
+  margin-left: 5px;
+  margin-bottom: 10px;
+}
+.l-bottom .item {
+  display: flex;
+  flex-direction: column;
+}
+.l-bottom .item ul {
+  width: 100%;
+  margin-bottom: -8px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+.l-bottom .item ul li a {
+  position: relative;
+  justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 1px solid #eee;
+  text-align: center;
+  color: #000;
+  font-size: 16px;
+}
+.left .l-top {
+  display: flex;
+  justify-content: space-around;
+  padding: 16px 0px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  background-color: #fff;
+}
+.left {
+  width: 260px;
+  height: 100%;
+  margin: 10px 10px 0px 10px;
+}
+.left .l-top li:nth-child(2) a {
+  border: 1px solid #eee;
+}
+.left .l-top li:nth-child(3) a {
+  background-color: #5188b8;
+  border: none;
+}
+.left .l-top li:nth-child(4) a {
+  position: relative;
+  border: 1px solid #eee;
+}
+.left .l-top li:nth-child(4) a::before {
+  width: 4px;
+  height: 4px;
+  content: " ";
+  position: absolute;
+  background-color: red;
+  border-radius: 50%;
+  top: 0px;
+  left: 16px;
+}
+.left .l-top li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.left .l-top li a {
+  display: inline-block;
+  padding: 10px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 1px solid #ff90aa;
+}
+#answer .top {
+  background-color: CornflowerBlue;
+}
+#answer .item {
+  color: #fff;
+  display: flex;
+  padding: 20px;
+  font-size: 20px;
+}
+#answer .top .item li:nth-child(1) {
+  margin-right: 10px;
+}
+#answer .top .item li:nth-child(3) {
+  position: relative;
+  margin-left: auto;
+}
+#answer {
+  padding-bottom: 30px;
+}
+.icon20 {
+  font-size: 20px;
+  font-weight: bold;
+}
+.item .msg {
+  padding: 10px 15px;
+  border-radius: 4px;
+  top: 47px;
+  right: -30px;
+  color: #6c757d;
+  position: absolute;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  background-color: #fff;
+}
+.item .msg p {
+  font-size: 16px;
+  width: 200px;
+  text-align: left;
+}
+</style>

src/components/student/answerScore.vue

@@ -0,0 +1,170 @@
+<!--
+ * 开始成绩页面
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div class="score">
+    <br>
+    <div class="total">
+      <div class="look">
+        本次考试成绩
+      </div>
+      <div class="show">
+        <div class="number" :class="{'border': isTransition}">
+          <span>{{score}}</span>
+          <span>分数</span>
+        </div>
+      </div>
+      <ul class="time">
+        <li class="start"><span>开始时间</span> <span>{{startTime}}</span></li>
+        <li class="end"><span>结束时间</span> <span>{{endTime}}</span></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isTransition: false, //是否渲染完成
+      score: 0, //总分
+      startTime: null, //考试开始时间
+      endTime: null, //考试结束时间
+    }
+  },
+  created() {
+    this.transiton()
+    this.getScore()
+  },
+  methods: {
+    transiton() {  //一秒后过渡
+      setTimeout(() => {
+        this.isTransition = true
+      },1000)
+    },
+    getScore() {
+      let score = this.$route.query.score
+      let startTime = this.$route.query.startTime
+      let endTime = this.$route.query.endTime
+      this.score = score
+      this.startTime = startTime
+      this.endTime = endTime
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.show {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img {
+    width: 160px;
+    height: 160px;
+  }
+  .img1Transform {
+    opacity: 1 !important;
+    transform: translateX(30px) !important;
+    transition: all 0.6s ease !important;
+  }
+  .img2Transform {
+    opacity: 1 !important;
+    transform: translateX(-30px) !important;
+    transition: all 0.6s ease !important;
+  }
+  .img1 {
+    margin-top: 70px;
+    opacity: 0;
+    transform: translateX(0px);
+    transition: all 0.6s ease;
+  }
+  .img2 {
+    margin-top: 30px;
+    opacity: 0;
+    transform: translateX(0px);
+    transition: all 0.6s ease;
+  }
+}
+.time {
+  padding: 0px 70px;
+  li {
+    display: flex;
+    justify-content: space-around;
+    padding: 10px;
+    margin: 20px 0px;
+  }
+  li:nth-child(1) {
+    background-color: #fcf8e3;
+  }
+  li:nth-child(2) {
+    background-color: #e9f5e9;
+  }
+}
+.border {
+  border: 6px solid #36aafd !important;
+  transition: all 2s ease;
+  width: 160px !important;
+  height: 160px !important;
+  transform: rotate(360deg) !important;
+  opacity: 1 !important;
+}
+.score {
+  max-width: 800px;
+  margin: 0 auto;
+  .title {
+    margin: 60px 0px 30px 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    .name {
+      font-size: 26px;
+      color: inherit;
+      font-weight: 500;
+    }
+    .description {
+      font-size: 14px;
+      color: #888;
+    }
+  }
+  .total {
+    border: 1px solid #dbdbdb;
+    background-color: #fff;
+    padding: 40px;
+    .look {
+      border-bottom: 1px solid #dbdbdb;
+      padding: 0px 0px 14px 14px;
+      color: #36aafd;
+    }
+    .number {
+      opacity: 0;
+      border: 6px solid #fff;
+      transform: rotate(0deg);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      margin: 0 auto;
+      width: 160px;
+      height: 160px;
+      border-radius: 50%;
+      margin-top: 80px;
+      margin-bottom: 20px;
+      transition: all 1s ease;
+
+      span:nth-child(1) {
+        font-size: 36px;
+        font-weight: 600;
+      }
+      span:nth-child(2) {
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>
+

src/components/student/examMsg.vue

@@ -0,0 +1,274 @@
+<!--
+ * 点击试卷缩略信息
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id="msg">
+    <div class="title">
+      <span>试卷列表</span>
+      <span>/  {{examData.source}}</span>
+    </div>
+    <div class="wrapper">
+      <ul class="top">
+        <li class="example">{{examData.source}}</li>
+        <li><i class="iconfont icon-pen-"></i></li>
+        <li><i class="iconfont icon-share"></i></li>
+        <li class="right">
+          <div>
+            <span class="count">总分</span>
+            <span class="score">{{score[0]+score[1]+score[2]}}</span>
+          </div>
+        </li>
+      </ul>
+      <ul class="bottom">
+        <li>更新于{{examData.examDate}}</li>
+        <li>来自 {{examData.institute}}</li>
+        <li class="btn">{{examData.type}}</li>
+        <li class="right"><el-button @click="toAnswer(examData.examCode)">{{$store.state.isPractice==true?'开始练习':'开始考试'}}</el-button></li>
+      </ul>
+      <ul class="info">
+        <li @click="dialogVisible = true"><a href="javascript:;"><i class="iconfont icon-info"></i>考生须知</a></li>
+      </ul>
+    </div>
+    <div class="content">
+      <el-collapse v-model="activeName" >
+        <el-collapse-item class="header" name="0">
+          <template slot="title">
+            <div class="title">
+              <span>{{examData.source}}</span><i class="header-icon el-icon-info"></i>
+              <span class="time">{{score[0]+score[1]+score[2]}}分 / {{examData.totalTime}}分钟</span>
+              <el-button type="primary" size="small">点击查看试题详情</el-button>
+            </div>
+          </template>
+          <el-collapse class="inner">
+            <el-collapse-item>
+              <template slot="title">
+                <div class="titlei">选择题 (共{{topicCount[0]}}题 共计{{score[0]}}分)</div>
+              </template>
+              <div class="contenti">
+                <ul class="question" v-for="(list, index) in topic[1]" :key="index">
+                  <li>{{index+1}}. {{list.question}} {{list.score}}分</li>
+                </ul>
+              </div>
+            </el-collapse-item>
+            <el-collapse-item>
+              <template slot="title">
+                <div class="titlei">填空题 (共{{topicCount[1]}}题  共计{{score[1]}}分)</div>
+              </template>
+              <div class="contenti">
+                <ul class="question" v-for="(list, index) in topic[2]" :key="index">
+                  <li>{{topicCount[0]+index+1}}.{{list.question}}  {{list.score}}分</li>
+                </ul>
+              </div>
+            </el-collapse-item>
+            <el-collapse-item>
+              <template slot="title">
+                <div class="titlei">判断题 (共{{topicCount[2]}}题 共计{{score[2]}}分)</div>
+              </template>
+              <div class="contenti">
+                <ul class="question" v-for="(list, index) in topic[3]" :key="index">
+                  <li>{{topicCount[0]+topicCount[1]+index+1}}. {{list.question}} {{list.score}}分</li>
+                </ul>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </el-collapse-item>
+
+      </el-collapse>
+    </div>
+    <!--考生须知对话框-->
+    <el-dialog
+      title="考生须知"
+      :visible.sync="dialogVisible"
+      width="30%">
+      <span>{{examData.tips}}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">知道了</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false, //对话框属性
+      activeName: '0',  //默认打开序号
+      topicCount: [],//每种类型题目的总数
+      score: [],  //每种类型分数的总数
+      examData: { //考试信息
+        // source: null,
+        // totalScore: null,
+      },
+      topic: {  //试卷信息
+
+      },
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    //初始化页面数据
+    init() {
+      let examCode = this.$route.query.examCode //获取路由传递过来的试卷编号
+      this.$axios(`/api/exam/${examCode}`).then(res => {  //通过examCode请求试卷详细信息
+        res.data.data.examDate = res.data.data.examDate.substr(0,10)
+        this.examData = { ...res.data.data}
+        let paperId = this.examData.paperId
+        this.$axios(`/api/paper/${paperId}`).then(res => {  //通过paperId获取试题题目信息
+          this.topic = {...res.data}
+          let keys = Object.keys(this.topic) //对象转数组
+          keys.forEach(e => {
+            let data = this.topic[e]
+            this.topicCount.push(data.length)
+            let currentScore = 0
+            for(let i = 0; i< data.length; i++) { //循环每种题型,计算出总分
+              currentScore += data[i].score
+            }
+            this.score.push(currentScore) //把每种题型总分存入score
+          })
+        })
+      })
+    },
+    toAnswer(id) {
+      this.$router.push({path:"/answer",query:{examCode: id}})
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.bottom {
+  .right{
+    .el-button{
+      color: #409EFF;
+      border-color: #c6e2ff;
+      background-color: #ecf5ff;
+    }
+  }
+}
+.right {
+  margin-left: auto;
+}
+.inner .contenti .question {
+  margin-left: 40px;
+  color: #9a9a9a;
+  font-size: 14px;
+}
+.content .inner .titlei {
+  margin-left: 20px;
+  font-size: 16px;
+  color: #88949b;
+  font-weight: bold;
+}
+.content .title .time {
+  font-size: 16px;
+  margin-left: 420px;
+  color: #999;
+}
+.content .stitle {
+  background-color: #0195ff;
+}
+.content .title span {
+  margin-right: 10px;
+}
+#msg .content .title {
+  font-size: 20px;
+  margin: 0px;
+  display: flex;
+  align-items: center;
+}
+.content {
+  margin-top: 20px;
+  background-color: #fff;
+}
+.content .header {
+  padding: 10px 30px;
+}
+.wrapper .info {
+  margin: 20px 0px 0px 20px;
+  border-top: 1px solid #eee;
+  padding: 20px 0px 10px 0px;
+}
+.wrapper .info a {
+  color: #88949b;
+  font-size: 14px;
+}
+.wrapper .info a:hover {
+  color: #0195ff;
+}
+.wrapper .bottom .btn {
+  cursor: pointer;
+  padding: 5px 10px;
+  border: 1px solid #88949b;
+  border-radius: 4px;
+}
+.wrapper .bottom {
+  display: flex;
+  margin-left: 20px;
+  color: #999;
+  font-size: 14px;
+  align-items: center;
+}
+.wrapper .bottom li {
+  margin-right: 14px;
+}
+#msg {
+  background-color: #eee;
+  width: 980px;
+  margin: 0 auto;
+}
+#msg .title {
+  margin: 20px;
+}
+#msg .wrapper {
+  background-color: #fff;
+  padding: 10px;
+}
+.wrapper .top {
+  display: flex;
+  margin: 20px;
+  align-items: center;
+}
+.wrapper .top .right {
+  margin-left: auto;
+}
+.wrapper .top .example {
+  color: #333;
+  font-size: 22px;
+  font-weight: 700;
+}
+.wrapper .top li i {
+  margin-left: 20px;
+  color: #88949b;
+}
+.wrapper .right .count {
+  margin-right: 60px;
+  color: #fff;
+  padding: 4px 10px;
+  background-color: #88949b;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border: 1px solid #88949b;
+}
+.wrapper .right .score {
+  position: absolute;
+  left: 53px;
+  top: -5px;
+  padding: 1px 12px;
+  font-size: 20px;
+  color: #88949b;
+  border: 1px dashed #88949b;
+  border-left: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  font-weight: bold;
+}
+.wrapper .right div {
+  position: relative;
+}
+</style>

src/components/student/index.vue

@@ -0,0 +1,152 @@
+<!--
+ * 学生考试首页
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id="student">
+    <el-row class="padding-50">
+      <el-col :span="24">
+        <ul class="list">
+          <li class="logo"><span>在线考试系统</span></li>
+          <li @click="exam()"><a href="javascript:;" >考试中心</a></li>
+          <li @click="practice()"><a href="javascript:;" >试卷练习</a></li>
+          <li><router-link to="/scoreTable">我的分数</router-link></li>
+          <li><router-link to="/message">交流区</router-link></li>
+          <li class="right" @mouseenter="flag = !flag" @mouseleave="flag = !flag">
+            <a href="javascript:;"><i class="iconfont icon-Userselect icon"></i>{{user.userName}}</a>
+            <div class="msg" v-if="flag">
+              <p @click="manage()">修改密码</p>
+              <p class="exit" @click="exit()">退出</p>
+            </div>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+    <!--路由区域-->
+    <div class="main">
+      <router-view></router-view>
+    </div>
+    <v-footer></v-footer>
+  </div>
+</template>
+
+<script>
+import myFooter from "@/components/student/myFooter"
+import {mapState} from 'vuex'
+export default {
+  components: {
+    "v-footer": myFooter
+  },
+  data() {
+    return {
+      flag: false,
+      user: {}
+    }
+  },
+  created() {
+    this.userInfo()
+  },
+  methods: {
+    exit() {  //退出登录
+      this.$router.push({path:"/"}) //跳转到登录页面
+      this.$cookies.remove("cname") //清除cookie
+      this.$cookies.remove("cid")
+      this.$cookies.remove("rb_token") //清除cookie
+      this.$cookies.remove("rb_role")
+    },
+    manage() {  //跳转到修改密码页面
+      this.$router.push({path: '/manager'})
+    },
+    userInfo() {
+      let studentName = this.$cookies.get("cname")
+      let studentId = this.$cookies.get("cid")
+      console.log(`studentId${studentId}`)
+      console.log(`studentName ${studentName}`)
+      this.user.userName = studentName
+      this.user.studentId = studentId
+    },
+    practice() { //跳转练习模式
+      let isPractice = true
+      this.$store.commit("practice", isPractice)
+      this.$router.push({path:'/startExam'})
+    },
+    exam() { //跳转考试模式
+     let isPractice = false
+      this.$store.commit("practice", isPractice)
+      this.$router.push({path:'/student'})
+    }
+  },
+  computed:mapState(["isPractice"])
+}
+</script>
+
+<style scoped>
+.right .icon {
+  margin-right: 6px;
+}
+#student .padding-50 {
+  margin: 0 auto;
+  padding: 0 50px;
+  box-shadow: 0 0 10px 4px rgba(1,149,255,0.1);
+  background-color: #fff;
+}
+.list a {
+  text-decoration: none;
+  color: #334046;
+}
+li {
+  list-style: none;
+  height: 60px;
+  line-height: 60px;
+}
+#student .list{
+  display: flex;
+}
+#student .list li {
+  padding: 0 20px;
+  cursor: pointer;
+}
+#student .list li:hover {
+  background-color: #0195ff;
+  transition: all 2s ease;
+}
+#student .list li:hover a {
+  color: #fff;
+}
+#student .list .right {
+  margin-left: auto;
+  position: relative;
+}
+#student .list li.right :hover a {
+  color: #000;
+}
+#student .list .logo {
+  display: flex;
+  font-weight: bold;
+  color: #2f6c9f;
+}
+#student .list .logo i {
+  font-size: 50px;
+}
+.right .msg {
+  text-align: center;
+  position: absolute;
+  top: 60px;
+  left: 0px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 2px;
+  border-bottom: 3px solid #0195ff;
+  background-color: #fff;
+}
+.right .msg p {
+  height: 40px;
+  line-height: 40px;
+  width: 105px;
+}
+.right .msg p:hover {
+  background-color: #0195ff;
+}
+</style>

src/components/student/manager.vue

@@ -0,0 +1,111 @@
+<!--
+ * 管理中心
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id='manager'>
+    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
+      <h3 class="alter">修改你的密码</h3>
+        <el-form-item label="密码" prop="pass" class="pass">
+        <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="checkPass">
+        <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
+        <el-button @click="resetForm('ruleForm2')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      var validatePass = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入密码'));
+        } else {
+          if (this.ruleForm2.checkPass !== '') {
+            this.$refs.ruleForm2.validateField('checkPass');
+          }
+          callback();
+        }
+      };
+      var validatePass2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请再次输入密码'));
+        } else if (value !== this.ruleForm2.pass) {
+          callback(new Error('两次输入密码不一致!'));
+        } else {
+          callback();
+        }
+      };
+      return {
+        ispass: true,
+        ruleForm2: {
+          pass: '',
+          checkPass: ''
+        },
+        rules2: {
+          pass: [
+            { validator: validatePass, trigger: 'blur' }
+          ],
+          checkPass: [
+            { validator: validatePass2, trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            let studentId = this.$cookies.get("cid")
+            this.$axios({ //修改密码
+              url: '/api/studentPWD',
+              method: 'put',
+              data: {
+                pwd: this.ruleForm2.pass,
+                studentId
+              }
+            }).then(res => {
+              if(res.data != null ) { //修改成功提示
+                this.$message({
+                  message: '密码修改成功...',
+                  type: 'success'
+                })
+              }
+            })
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+
+<style scoped>
+#manager .pass  label{
+  color: red;
+  font-size: 20px;
+}
+#manager {
+  width: 600px;
+  margin: 0 auto;
+  margin-top: 100px;
+  text-align: center;
+  margin-bottom: 300px;
+}
+#manager .alter {
+  margin: 30px 0px;
+}
+</style>

src/components/student/message.vue

@@ -0,0 +1,264 @@
+<!--
+ * 留言页面
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id="message">
+    <div class="title">交流区</div>
+    <div class="wrapper">
+      <div class="title1">
+        <el-input
+          placeholder="留言标题"
+          v-model="title"
+          clearable>
+        </el-input>
+      </div>
+      <div class="content">
+        <el-input
+          type="textarea"
+          :rows="3"
+          placeholder="留言内容"
+          v-model="content"
+          clearable>
+        </el-input>
+      </div>
+      <div class="btn">
+        <el-button type="primary" @click="submit()">提交留言</el-button>
+      </div>
+      <div class="all">
+        <ul class="msglist">
+          <li class="list"
+          @mouseenter="enter(index)"
+          @mouseleave="leave(index)"
+          v-for="(data,index) in msg" :key="index"
+          >
+            <p class="title"> <i class="iconfont icon-untitled33"></i>{{data.title}}</p>
+            <p class="content">{{data.content}}</p>
+            <p class="date"><i class="iconfont icon-date"></i>{{data.time}}</p>
+            <div v-for="(replayData,index2) in data.replays" :key="index2">
+              <p class="comment"><i class="iconfont icon-huifuxiaoxi"></i>{{replayData.replay}}</p>
+            </div>
+            <span class="replay" @click="replay(data.id)" v-if="flag && index == current">回复</span>
+          </li>
+        </ul>
+      </div>
+      <div class="pagination">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pagination.current"
+          :page-sizes="[4,6,8,10]"
+          :page-size="pagination.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total">
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  // name: 'message'
+  data() {
+    return {
+      flag: false,
+      current: 0,
+      title: "",
+      content: "",
+      pagination: { //分页后的留言列表
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 4 //每页条数
+      },
+      msg: []
+    }
+  },
+  created() {
+    this.getMsg()
+  },
+  // watch: {
+
+  // },
+  methods: {
+    getMsg() {
+      this.$axios(`/api/messages/${this.pagination.current}/${this.pagination.size}`).then(res => {
+        let status = res.data.code
+        if(status == 200) {
+          this.msg = res.data.data.records
+          this.pagination = res.data.data
+        }
+      })
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getMsg()
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getMsg()
+    },
+    // formatTime(date) { //日期格式化
+    //   let year = date.getFullYear()
+    //   let month= date.getMonth()+ 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
+    //   let day=date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+    //   let hours=date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+    //   let minutes=date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+    //   let seconds=date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+    //   // 拼接
+    //   return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
+    // },
+    submit() {
+      let date = new Date()
+      if(this.title.length == 0 || this.content.length == 0) { //非空判断
+        this.$message({
+          type: 'error',
+          message: '留言标题或内容不能为空',
+        })
+       } else {
+      this.$axios({
+        url: "/api/message",
+        method: "post",
+        data: {
+          title: this.title,
+          content: this.content,
+          time: date
+        }
+      }).then(res => {
+        let code = res.data.code
+        if(code == 200) {
+          this.$message({
+            type: "success",
+            message: "留言成功"
+          })
+        }
+        this.getMsg()
+      })
+    }
+      this.title = ""
+      this.content = ""
+      this.getMsg()
+    },
+    replay(messageId) { //回复留言功能
+      this.$prompt('回复留言', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
+        inputErrorMessage: '回复不能为空'
+      }).then(({ value }) => {
+        let date = new Date()
+        console.log(messageId)
+        this.$axios({
+          url: '/api/replay',
+          method: 'post',
+          data: {
+            replay: value,
+            replayTime: date,
+            messageId: messageId
+          }
+        }).then(res => {
+          this.getMsg()
+        })
+        this.$message({
+          type: 'success',
+          message: '回复成功'
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '取消输入'
+        });
+      });
+    },
+    enter(index) {
+      this.flag = true
+      this.current = index
+    },
+    leave(index) {
+      this.flag = false;
+      this.current = index;
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.pagination {
+  display: flex;
+  justify-content: center;
+}
+#message {
+  width: 980px;
+  margin: 0 auto;
+}
+.title {
+  margin: 20px;
+}
+.content {
+  padding: 20px 0px;
+}
+#message  {
+  .btn {
+   padding-bottom: 20px;
+  }
+  .all {
+    .date {
+      color: rgb(80, 157, 202);
+      line-height: 45px;
+      font-size: 13px;
+    }
+    .list {
+      background-color: #eee;
+      padding:10px;
+      border-radius: 4px;
+      margin: 10px 0px;
+      position: relative;
+      transition: all .3s ease;
+      .title {
+        color: #5f5f5f;
+        margin: 0px;
+        font-size: 13px;
+        line-height: 30px;
+      }
+      .content {
+        padding: 0px;
+      }
+      .icon-untitled33 {
+        font-size: 13px;
+        margin-right: 4px;
+      }
+      .icon-date {
+        font-size: 13px;
+        margin-right: 4px;
+        color: rgb(80, 157, 202);
+      }
+      .replay {
+        position: absolute;
+        right: 30px;
+        bottom: 15px;
+        color: tomato;
+        cursor: pointer;
+        transition: all .3s ease;
+      }
+      .comment {
+        margin:-7px 0px;
+        padding-bottom: 12px;
+        font-size: 13px;
+        color: #28b2b4;
+        i {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+}
+#message .wrapper {
+  background-color: #fff;
+  padding: 20px;
+
+}
+</style>

src/components/student/myExam.vue

@@ -0,0 +1,218 @@
+<!--
+ * 我的试卷页面
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id="myExam">
+    <div class="title">考试中心</div>
+    <div class="wrapper">
+      <ul class="top">
+        <li class="order">试卷列表</li>
+        <li class="search-li"><div class="icon"><input type="text" placeholder="试卷名称" class="search" v-model="key"><i class="el-icon-search"></i></div></li>
+        <li><el-button type="primary" @click="search()">搜索试卷</el-button></li>
+      </ul>
+      <ul class="paper" v-loading="loading">
+        <li class="item" v-for="(item,index) in pagination.records" :key="index">
+          <h4 @click="toExamMsg(item.examCode)">{{item.source}}</h4>
+          <p class="name">{{item.source}}-{{item.description}}</p>
+          <div class="info">
+            <i class="el-icon-loading"></i><span>{{item.examDate.substr(0,10)}}</span>
+            <i class="iconfont icon-icon-time"></i><span v-if="item.totalTime != null">限时{{item.totalTime}}分钟</span>
+            <i class="iconfont icon-fenshu"></i><span>满分{{item.totalScore}}分</span>
+          </div>
+        </li>
+      </ul>
+      <div class="pagination">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pagination.current"
+          :page-sizes="[6, 10, 20, 40]"
+          :page-size="pagination.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total">
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  // name: 'myExam'
+  data() {
+    return {
+      loading: false,
+      key: null, //搜索关键字
+      allExam: null, //所有考试信息
+      pagination: { //分页后的考试信息
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 6 //每页条数
+      }
+    }
+  },
+  created() {
+    this.getExamInfo()
+    this.loading = true
+  },
+  // watch: {
+
+  // },
+  methods: {
+    //获取当前所有考试信息
+    getExamInfo() {
+      this.$axios(`/api/exams/${this.pagination.current}/${this.pagination.size}`).then(res => {
+        this.pagination = res.data.data
+        this.loading = false
+        console.log(this.pagination)
+      }).catch(error => {
+        console.log(error)
+      })
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getExamInfo()
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getExamInfo()
+    },
+    //搜索试卷
+    search() {
+      this.$axios('/api/exams').then(res => {
+        if(res.data.code == 200) {
+          let allExam = res.data.data
+          let newPage = allExam.filter(item => {
+            return item.source.includes(this.key)
+          })
+          this.pagination.records = newPage
+        }
+      })
+    },
+    //跳转到试卷详情页
+    toExamMsg(examCode) {
+      this.$router.push({path: '/examMsg', query: {examCode: examCode}})
+      console.log(examCode)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.pagination {
+  padding: 20px 0px 30px 0px;
+  .el-pagination {
+    display: flex;
+    justify-content: center;
+  }
+}
+.paper {
+  h4 {
+    cursor: pointer;
+  }
+}
+.paper .item a {
+  color: #000;
+}
+.wrapper .top .order {
+  cursor: pointer;
+}
+.wrapper .top .order:hover {
+  color: #0195ff;
+  border-bottom: 2px solid #0195ff;
+}
+.wrapper .top .order:visited {
+  color: #0195ff;
+  border-bottom: 2px solid #0195ff;
+}
+.item .info i {
+  margin-right: 5px;
+  color: #0195ff;
+}
+.item .info span {
+  margin-right: 14px;
+}
+.paper .item {
+  width: 380px;
+  border-radius: 4px;
+  padding: 20px 30px;
+  border: 1px solid #eee;
+  box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
+  transition: all 0.6s ease;
+}
+.paper .item:hover {
+  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
+  transform: scale(1.03);
+}
+.paper .item .info {
+  font-size: 14px;
+  color: #88949b;
+}
+.paper .item .name {
+  font-size: 14px;
+  color: #88949b;
+}
+.paper * {
+  margin: 20px 0;
+}
+.wrapper .paper {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+.top .el-icon-search {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.top .icon {
+  position: relative;
+}
+.wrapper .top {
+  border-bottom: 1px solid #eee;
+  margin-bottom: 20px;
+}
+#myExam .search-li {
+  margin-left: auto;
+}
+.top .search-li {
+  margin-left: auto;
+}
+.top li {
+  display: flex;
+  align-items: center;
+}
+.top .search {
+  margin-left: auto;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+.top .search:hover {
+  color: #0195ff;
+  border-color: #0195ff;
+}
+.wrapper .top {
+  display: flex;
+}
+.wrapper .top li {
+  margin: 20px;
+}
+#myExam {
+  width: 980px;
+  margin: 0 auto;
+}
+#myExam .title {
+  margin: 20px;
+}
+#myExam .wrapper {
+  background-color: #fff;
+}
+</style>

src/components/student/myFooter.vue

@@ -0,0 +1,45 @@
+<!--
+ * 页脚部分
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <footer id="footer">
+    <ul>
+      <li><a href="javascript:;">关于我们</a></li>
+      <li><a href="javascript:;">免责声明</a></li>
+      <li><a href="javascript:;">使用协议</a></li>
+      <li>@Copyright 杭州水果捞</li>
+    </ul>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "myFooter"
+}
+</script>
+
+<style scoped>
+#footer a {
+  color: #919698;
+  font-size: 14px;
+}
+#footer {
+  background-color: #eee;
+}
+#footer ul {
+  margin-top: 40px;
+  border-top: 1px solid #d5d5d5;
+  display: flex;
+  justify-content: center;
+  height: 80px;
+  line-height: 80px;
+}
+#footer ul li {
+  color: #919698;
+  font-size: 14px;
+  margin-right: 20px;
+}
+</style>

src/components/student/scoreTable.vue

@@ -0,0 +1,132 @@
+<!--
+ * 学生成绩显示页面
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div class="table">
+    <p class="title">我的分数</p>
+    <section class="content-el">
+      <el-table ref="filterTable" :data="score" v-loading="loading">
+        <el-table-column
+          prop="answerDate"
+          label="考试日期"
+          sortable
+          width="330"
+          column-key="answerDate"
+          :filters="filter"
+          :filter-method="filterHandler">
+        </el-table-column>
+        <el-table-column
+          prop="subject"
+          label="课程名称"
+          width="340"
+          filter-placement="bottom-end">
+          <template slot-scope="scope">
+            <el-tag>{{scope.row.subject}}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="etScore" label="考试分数" width="140"></el-table-column>
+        <el-table-column label="是否及格" width="100">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.etScore>= 60 ? 'success' : 'danger'">{{scope.row.etScore >= 60 ? "及格" : "不及格"}}</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row type="flex" justify="center" align="middle" class="pagination">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pagination.current"
+          :page-sizes="[4,6,8,10]"
+          :page-size="pagination.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total">
+        </el-pagination>
+      </el-row>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pagination: { //分页后的留言列表
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 10 //每页条数
+      },
+      loading: false, //加载标识符
+      score: [], //学生成绩
+      filter: null //过滤参数
+    }
+  },
+  created() {
+    this.getScore()
+    this.loading = true //数据加载则遮罩表格
+  },
+  methods: {
+    getScore() {
+      let studentId = this.$cookies.get("cid")
+      this.$axios(`/api/score/${this.pagination.current}/${this.pagination.size}/${studentId}`).then(res => {
+        if(res.data.code == 200) {
+          this.loading = false //数据加载完成去掉遮罩
+          this.score = res.data.data.records
+          this.pagination = {...res.data.data}
+          let mapVal = this.score.map((element,index) => { //通过map得到 filter:[{text,value}]形式的数组对象
+            let newVal = {}
+            newVal.text = element.answerDate
+            newVal.value = element.answerDate
+            return newVal
+          })
+          let hash = []
+          const newArr = mapVal.reduce((item, next) => { //对新对象进行去重操作
+            hash[next.text] ? '' : hash[next.text] = true && item.push(next);
+            return item
+          }, []);
+          this.filter = newArr
+        }
+      })
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getScore()
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getScore()
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.pagination {
+  padding-top: 20px;
+}
+.table {
+  width: 980px;
+  margin: 0 auto;
+  .title {
+    margin: 20px;
+  }
+  .content-el {
+    background-color: #fff;
+    padding: 20px;
+  }
+}
+</style>

src/components/student/startExam.vue

@@ -0,0 +1,313 @@
+<!--
+ * 我的考试页面
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div id="myExam">
+    <div class="title">试卷练习</div>
+    <div class="wrapper">
+      <ul class="top">
+        <li>
+          练习列表
+        </li>
+        <li class="search-li"><div class="icon"><input type="text" placeholder="试卷名称" class="search" v-model="key"><i class="el-icon-search"></i></div></li>
+        <li><el-button type="primary" @click="search()">搜索试卷</el-button></li>
+      </ul>
+      <ul class="paper" v-loading="loading">
+        <li class="item" v-for="(item,index) in pagination.records" :key="index">
+          <h4 @click="toExamMsg(item.examCode)">{{item.source}}</h4>
+          <p class="name">{{item.source}}-{{item.description}}</p>
+          <div class="info">
+            <i class="el-icon-loading"></i><span>{{item.examDate.substr(0,10)}}</span>
+            <i class="iconfont icon-icon-time"></i><span v-if="item.totalTime != null">限时{{item.totalTime}}分钟</span>
+            <i class="iconfont icon-fenshu"></i><span>满分{{item.totalScore}}分</span>
+          </div>
+        </li>
+      </ul>
+      <div class="pagination">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pagination.current"
+          :page-sizes="[6, 10, 20, 40]"
+          :page-size="pagination.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total">
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      key: null, //搜索关键字
+      allExam: null, //所有考试信息
+      pagination: { //分页后的考试信息
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 6 //每页条数
+      }
+    }
+  },
+  created() {
+    this.getExamInfo()
+    this.loading = true
+  },
+  // watch: {
+
+  // },
+  methods: {
+    //获取当前所有考试信息
+    getExamInfo() {
+      this.$axios(`/api/exams/${this.pagination.current}/${this.pagination.size}`).then(res => {
+        this.pagination = res.data.data
+        this.loading = false
+        console.log(this.pagination)
+      }).catch(error => {
+        console.log(error)
+      })
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getExamInfo()
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getExamInfo()
+    },
+    //搜索试卷
+    search() {
+      this.$axios('/api/exams').then(res => {
+        if(res.data.code == 200) {
+          let allExam = res.data.data
+          let newPage = allExam.filter(item => {
+            return item.source.includes(this.key)
+          })
+          this.pagination.records = newPage
+        }
+      })
+    },
+    //跳转到试卷详情页
+    toExamMsg(examCode) {
+      this.$router.push({path: '/examMsg', query: {examCode: examCode}})
+      console.log(examCode)
+    }
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+.pagination {
+  padding: 20px 0px 30px 0px;
+  .el-pagination {
+    display: flex;
+    justify-content: center;
+  }
+}
+.paper {
+  h4 {
+    cursor: pointer;
+  }
+}
+.paper .item a {
+  color: #000;
+}
+.wrapper .top .order {
+  cursor: pointer;
+}
+.wrapper .top .order:hover {
+  color: #0195ff;
+  border-bottom: 2px solid #0195ff;
+}
+.wrapper .top .order:visited {
+  color: #0195ff;
+  border-bottom: 2px solid #0195ff;
+}
+.item .info i {
+  margin-right: 5px;
+  color: #0195ff;
+}
+.item .info span {
+  margin-right: 14px;
+}
+.paper .item {
+  width: 380px;
+  border-radius: 4px;
+  padding: 20px 30px;
+  border: 1px solid #eee;
+  box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
+  transition: all 0.6s ease;
+}
+.paper .item:hover {
+  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
+  transform: scale(1.03);
+}
+.paper .item .info {
+  font-size: 14px;
+  color: #88949b;
+}
+.paper .item .name {
+  font-size: 14px;
+  color: #88949b;
+}
+.paper * {
+  margin: 20px 0;
+}
+.wrapper .paper {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+.top .el-icon-search {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.top .icon {
+  position: relative;
+}
+.wrapper .top {
+  border-bottom: 1px solid #eee;
+  margin-bottom: 20px;
+}
+#myExam .search-li {
+  margin-left: auto;
+}
+.top .search-li {
+  margin-left: auto;
+}
+.top li {
+  display: flex;
+  align-items: center;
+}
+.top .search {
+  margin-left: auto;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+.top .search:hover {
+  color: #0195ff;
+  border-color: #0195ff;
+}
+.wrapper .top {
+  display: flex;
+}
+.wrapper .top li {
+  margin: 20px;
+}
+#myExam {
+  width: 980px;
+  margin: 0 auto;
+}
+#myExam .title {
+  margin: 20px;
+}
+#myExam .wrapper {
+  background-color: #fff;
+}
+.wrapper .top .order {
+  cursor: pointer;
+}
+.wrapper .top .order:hover {
+  color: #0195ff;
+  border-bottom: 2px solid #0195ff;
+}
+.wrapper .top .order:visited {
+  color: #0195ff;
+  border-bottom: 2px solid #0195ff;
+}
+.item .info i {
+  margin-right: 5px;
+  color: #0195ff;
+}
+.item .info span {
+  margin-right: 14px;
+}
+.paper .item {
+  border-radius: 4px;
+  padding: 20px 30px;
+  border: 1px solid #eee;
+  box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
+  transition: all 0.6s ease;
+}
+.paper .item:hover {
+  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45)
+}
+.paper .item .info {
+  font-size: 14px;
+  color: #88949b;
+}
+.paper .item .name {
+  font-size: 14px;
+  color: #88949b;
+}
+.paper * {
+  margin: 20px 0;
+}
+.wrapper .paper {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+.top .el-icon-search {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.top .icon {
+  position: relative;
+}
+.wrapper .top {
+  border-bottom: 1px solid #eee;
+}
+#myExam .search-li {
+  margin-left: auto;
+}
+.top .search-li {
+  margin-left: auto;
+}
+.top li {
+  display: flex;
+  align-items: center;
+}
+.top .search {
+  margin-left: auto;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+.top .search:hover {
+  color: #0195ff;
+  border-color: #0195ff;
+}
+.wrapper .top {
+  display: flex;
+}
+.wrapper .top li {
+  margin: 20px;
+}
+#myExam {
+  width: 980px;
+  margin: 0 auto;
+}
+#myExam .title {
+  margin: 20px;
+}
+#myExam .wrapper {
+  background-color: #fff;
+}
+</style>

src/components/teacher/addAnswer.vue

@@ -0,0 +1,88 @@
+<!--
+ * 获取试卷并跳转到添加题库
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div class="exam">
+    <el-table :data="pagination.records" border>
+      <el-table-column fixed="left" prop="source" label="试卷名称" width="180"></el-table-column>
+      <el-table-column prop="description" label="介绍" width="200"></el-table-column>
+      <el-table-column prop="institute" label="所属学院" width="120"></el-table-column>
+      <el-table-column prop="major" label="所属专业" width="200"></el-table-column>
+      <el-table-column prop="grade" label="年级" width="100"></el-table-column>
+      <el-table-column prop="examDate" label="考试日期" width="120"></el-table-column>
+      <el-table-column prop="totalTime" label="持续时间" width="120"></el-table-column>
+      <el-table-column prop="type" label="试卷类型" width="120"></el-table-column>
+      <el-table-column prop="tips" label="考生提示" width="400"></el-table-column>
+      <el-table-column fixed="right" label="操作" width="150">
+        <template slot-scope="scope">
+          <el-button @click="add(scope.row.paperId,scope.row.source)" type="primary" size="small">增加题库</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[4, 8, 10, 20]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total" class="page">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {}, //保存点击以后当前试卷的信息
+      pagination: { //分页后的考试信息
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 4 //每页条数
+      },
+    }
+  },
+  created() {
+    this.getExamInfo()
+  },
+  methods: {
+    getExamInfo() { //分页查询所有试卷信息
+      this.$axios(`/api/exams/${this.pagination.current}/${this.pagination.size}`).then(res => {
+        this.pagination = res.data.data
+      }).catch(error => {
+      })
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getExamInfo()
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getExamInfo()
+    },
+    add(paperId,source) { //增加题库
+      this.$router.push({path:'/addAnswerChildren',query: {paperId: paperId,subject:source}})
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+.exam {
+  padding: 0px 40px;
+  .page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .edit{
+    margin-left: 20px;
+  }
+}
+</style>

src/components/teacher/addAnswerChildren.vue

@@ -0,0 +1,704 @@
+<!--
+ * 添加题库
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div class="add">
+    <el-tabs v-model="activeName">
+      <el-tab-pane name="first">
+        <span slot="label"><i class="el-icon-circle-plus"></i>添加试题</span>
+        <section class="append">
+          <ul>
+            <li>
+              <span>题目类型:</span>
+              <el-select
+                v-model="optionValue"
+                placeholder="请选择题型"
+                class="w150"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </li>
+            <li v-if="optionValue == '选择题'">
+              <span>所属章节：</span>
+              <el-input
+                placeholder="请输入对应章节"
+                v-model="postChange.section"
+                class="w150"
+                clearable
+              >
+              </el-input>
+            </li>
+            <li v-if="optionValue == '填空题'">
+              <span>所属章节：</span>
+              <el-input
+                placeholder="请输入对应章节"
+                v-model="postFill.section"
+                class="w150"
+                clearable
+              >
+              </el-input>
+            </li>
+            <li v-if="optionValue == '判断题'">
+              <span>所属章节：</span>
+              <el-input
+                placeholder="请输入对应章节"
+                v-model="postJudge.section"
+                class="w150"
+                clearable
+              >
+              </el-input>
+            </li>
+            <li v-if="optionValue == '选择题'">
+              <span>难度等级:</span>
+              <el-select
+                v-model="postChange.level"
+                placeholder="选择难度等级"
+                class="w150"
+              >
+                <el-option
+                  v-for="item in levels"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </li>
+            <li v-if="optionValue == '填空题'">
+              <span>难度等级:</span>
+              <el-select
+                v-model="postFill.level"
+                placeholder="选择难度等级"
+                class="w150"
+              >
+                <el-option
+                  v-for="item in levels"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </li>
+            <li v-if="optionValue == '判断题'">
+              <span>难度等级:</span>
+              <el-select
+                v-model="postJudge.level"
+                placeholder="选择难度等级"
+                class="w150"
+              >
+                <el-option
+                  v-for="item in levels"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </li>
+            <li v-if="optionValue == '选择题'">
+              <span>正确选项:</span>
+              <el-select
+                v-model="postChange.rightAnswer"
+                placeholder="选择正确答案"
+                class="w150"
+              >
+                <el-option
+                  v-for="item in rights"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </li>
+          </ul>
+          <!-- 选择题部分 -->
+          <div class="change" v-if="optionValue == '选择题'">
+            <div class="title">
+              <el-tag>题目:</el-tag
+              ><span
+                >在下面的输入框中输入题目,形如--DNS
+                服务器和DHCP服务器的作用是（）</span
+              >
+              <el-input
+                type="textarea"
+                rows="4"
+                v-model="postChange.question"
+                placeholder="请输入题目内容"
+                resize="none"
+                class="answer"
+              >
+              </el-input>
+            </div>
+            <div class="options">
+              <ul>
+                <li>
+                  <el-tag type="success">A</el-tag>
+                  <el-input
+                    placeholder="请输入选项A的内容"
+                    v-model="postChange.answerA"
+                    clearable=""
+                  >
+                  </el-input>
+                </li>
+                <li>
+                  <el-tag type="success">B</el-tag>
+                  <el-input
+                    placeholder="请输入选项B的内容"
+                    v-model="postChange.answerB"
+                    clearable=""
+                  >
+                  </el-input>
+                </li>
+                <li>
+                  <el-tag type="success">C</el-tag>
+                  <el-input
+                    placeholder="请输入选项C的内容"
+                    v-model="postChange.answerC"
+                    clearable=""
+                  >
+                  </el-input>
+                </li>
+                <li>
+                  <el-tag type="success">D</el-tag>
+                  <el-input
+                    placeholder="请输入选项D的内容"
+                    v-model="postChange.answerD"
+                    clearable=""
+                  >
+                  </el-input>
+                </li>
+              </ul>
+            </div>
+            <div class="title">
+              <el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
+              <el-input
+                type="textarea"
+                rows="4"
+                v-model="postChange.analysis"
+                placeholder="请输入答案解析"
+                resize="none"
+                class="answer"
+              >
+              </el-input>
+            </div>
+            <div class="submit">
+              <el-button type="primary" @click="changeSubmit()"
+                >立即添加</el-button
+              >
+            </div>
+          </div>
+          <!-- 填空题部分 -->
+          <div class="change fill" v-if="optionValue == '填空题'">
+            <div class="title">
+              <el-tag>题目:</el-tag
+              ><span
+                >输入题目,形如--从计算机网络系统组成的角度看，计算机网络可以分为()和()。注意需要考生答题部分一定要用括号（英文半角）括起来。</span
+              >
+              <el-input
+                type="textarea"
+                rows="4"
+                v-model="postFill.question"
+                placeholder="请输入题目内容"
+                resize="none"
+                class="answer"
+              >
+              </el-input>
+            </div>
+            <div class="fillAnswer">
+              <el-tag>正确答案:</el-tag>
+              <el-input v-model="postFill.answer"></el-input>
+            </div>
+            <div class="title analysis">
+              <el-tag type="success">解析:</el-tag
+              ><span>下方输入框中输入答案解析</span>
+              <el-input
+                type="textarea"
+                rows="4"
+                v-model="postFill.analysis"
+                placeholder="请输入答案解析"
+                resize="none"
+                class="answer"
+              >
+              </el-input>
+            </div>
+            <div class="submit">
+              <el-button type="primary" @click="fillSubmit()"
+                >立即添加</el-button
+              >
+            </div>
+          </div>
+          <!-- 判断题 -->
+          <div class="change judge" v-if="optionValue == '判断题'">
+            <div class="title">
+              <el-tag>题目:</el-tag><span>在下面的输入框中输入题目</span>
+              <el-input
+                type="textarea"
+                rows="4"
+                v-model="postJudge.question"
+                placeholder="请输入题目内容"
+                resize="none"
+                class="answer"
+              >
+              </el-input>
+            </div>
+            <div class="judgeAnswer">
+              <el-radio v-model="postJudge.answer" label="T">正确</el-radio>
+              <el-radio v-model="postJudge.answer" label="F">错误</el-radio>
+            </div>
+            <div class="title">
+              <el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
+              <el-input
+                type="textarea"
+                rows="4"
+                v-model="postJudge.analysis"
+                placeholder="请输入答案解析"
+                resize="none"
+                class="answer"
+              >
+              </el-input>
+            </div>
+            <div class="submit">
+              <el-button type="primary" @click="judgeSubmit()"
+                >立即添加</el-button
+              >
+            </div>
+          </div>
+        </section>
+      </el-tab-pane>
+      <el-tab-pane name="second">
+        <span slot="label"
+          ><i class="iconfont icon-daoru-tianchong"></i>在线组卷</span
+        >
+        <div class="box">
+          <ul>
+            <li>
+              <span>选择题数量：</span>
+              <el-input type="text" v-model="changeNumber"></el-input>
+            </li>
+            <li>
+              <span>填空题数量：</span>
+              <el-input type="text" v-model="fillNumber"></el-input>
+            </li>
+            <li>
+              <span>判断题数量：</span>
+              <el-input type="text" v-model="judgeNumber"></el-input>
+            </li>
+            <li>
+              <el-button type="primary" @click="create()">立即组卷</el-button>
+            </li>
+          </ul>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      changeNumber: null, //选择题出题数量
+      fillNumber: null, //填空题出题数量
+      judgeNumber: null, //判断题出题数量
+      activeName: "first", //活动选项卡
+      options: [
+        //题库类型
+        {
+          value: "选择题",
+          label: "选择题",
+        },
+        {
+          value: "填空题",
+          label: "填空题",
+        },
+        {
+          value: "判断题",
+          label: "判断题",
+        },
+      ],
+      levels: [
+        //难度等级
+        {
+          value: "1",
+          label: "1",
+        },
+        {
+          value: "2",
+          label: "2",
+        },
+        {
+          value: "3",
+          label: "3",
+        },
+        {
+          value: "4",
+          label: "4",
+        },
+        {
+          value: "5",
+          label: "5",
+        },
+      ],
+      rights: [
+        //正确答案
+        {
+          value: "A",
+          label: "A",
+        },
+        {
+          value: "B",
+          label: "B",
+        },
+        {
+          value: "C",
+          label: "C",
+        },
+        {
+          value: "D",
+          label: "D",
+        },
+      ],
+      paperId: null,
+      optionValue: "选择题", //题型选中值
+      subject: "", //试卷名称用来接收路由参数
+      postChange: {
+        //选择题提交内容
+        subject: "", //试卷名称
+        level: "", //难度等级选中值
+        rightAnswer: "", //正确答案选中值
+        section: "", //对应章节
+        question: "", //题目
+        analysis: "", //解析
+        answerA: "",
+        answerB: "",
+        answerC: "",
+        answerD: "",
+      },
+      postFill: {
+        //填空题提交内容
+        subject: "", //试卷名称
+        level: "", //难度等级选中值
+        answer: "", //正确答案
+        section: "", //对应章节
+        question: "", //题目
+        analysis: "", //解析
+      },
+      postJudge: {
+        //判断题提交内容
+        subject: "", //试卷名称
+        level: "", //难度等级选中值
+        answer: "", //正确答案
+        section: "", //对应章节
+        question: "", //题目
+        analysis: "", //解析
+      },
+      postPaper: {
+        //考试管理表对应字段
+        paperId: null,
+        questionType: null, // 试卷类型 1--选择题  2--填空题   3--判断题
+        questionId: null,
+      },
+    };
+  },
+  created() {
+    this.getParams();
+  },
+  methods: {
+    create() {
+      this.$axios({
+        url: "/api/item",
+        method: "post",
+        data: {
+          changeNumber: this.changeNumber,
+          fillNumber: this.fillNumber,
+          judgeNumber: this.judgeNumber,
+          paperId: this.paperId,
+          subject: this.subject,
+        },
+      }).then((res) => {
+        let data = res.data;
+        if (data.code == 200) {
+          setTimeout(() => {
+            this.$router.push({ path: "/selectAnswer" });
+          }, 1000);
+          this.$message({
+            message: data.message,
+            type: "success",
+          });
+        } else if (data.code == 400) {
+          this.$message({
+            message: data.message,
+            type: "error",
+          });
+        }
+      });
+    },
+    getParams() {
+      let subject = this.$route.query.subject; //获取试卷名称
+      let paperId = this.$route.query.paperId; //获取paperId
+      this.paperId = paperId;
+      this.subject = subject;
+      this.postPaper.paperId = paperId;
+    },
+    changeSubmit() {
+      //选择题题库提交
+      this.postChange.subject = this.subject;
+      this.$axios({
+        //提交数据到选择题题库表
+        url: "/api/MultiQuestion",
+        method: "post",
+        data: {
+          ...this.postChange,
+        },
+      })
+        .then((res) => {
+          //添加成功显示提示
+          let status = res.data.code;
+          if (status == 200) {
+            this.$message({
+              message: "已添加到题库",
+              type: "success",
+            });
+            this.postChange = {
+              //选择题提交内容
+              subject: "", //试卷名称
+              level: "", //难度等级选中值
+              rightAnswer: "", //正确答案选中值
+              section: "", //对应章节
+              question: "", //题目
+              analysis: "", //解析
+              answerA: "",
+              answerB: "",
+              answerC: "",
+              answerD: "",
+            };
+          }
+        })
+        .then(() => {
+          this.$axios(`/api/multiQuestionId`).then((res) => {
+            //获取当前题目的questionId
+            let questionId = res.data.data.questionId;
+            this.postPaper.questionId = questionId;
+            this.postPaper.questionType = 1;
+            this.$axios({
+              url: "/api/paperManage",
+              method: "Post",
+              data: {
+                ...this.postPaper,
+              },
+            });
+          });
+        });
+    },
+    fillSubmit() {
+      //填空题提交
+      this.postFill.subject = this.subject;
+      this.$axios({
+        url: "/api/fillQuestion",
+        method: "post",
+        data: {
+          ...this.postFill,
+        },
+      })
+        .then((res) => {
+          let status = res.data.code;
+          if (status == 200) {
+            this.$message({
+              message: "已添加到题库",
+              type: "success",
+            });
+            this.postFill = {
+              //填空题提交内容
+              subject: "", //试卷名称
+              level: "", //难度等级选中值
+              answer: "", //正确答案
+              section: "", //对应章节
+              question: "", //题目
+              analysis: "", //解析
+            };
+          }
+        })
+        .then(() => {
+          this.$axios(`/api/fillQuestionId`).then((res) => {
+            //获取当前题目的questionId
+            let questionId = res.data.data.questionId;
+            this.postPaper.questionId = questionId;
+            this.postPaper.questionType = 2;
+            this.$axios({
+              url: "/api/paperManage",
+              method: "Post",
+              data: {
+                ...this.postPaper,
+              },
+            });
+          });
+        });
+    },
+    judgeSubmit() {
+      //判断题提交
+      this.postJudge.subject = this.subject;
+      this.$axios({
+        url: "/api/judgeQuestion",
+        method: "post",
+        data: {
+          ...this.postJudge,
+        },
+      })
+        .then((res) => {
+          let status = res.data.code;
+          if (status == 200) {
+            this.$message({
+              message: "已添加到题库",
+              type: "success",
+            });
+            this.postJudge = {
+              //判断题提交内容
+              subject: "", //试卷名称
+              level: "", //难度等级选中值
+              answer: "", //正确答案
+              section: "", //对应章节
+              question: "", //题目
+              analysis: "", //解析
+            };
+          }
+        })
+        .then(() => {
+          this.$axios(`/api/judgeQuestionId`).then((res) => {
+            //获取当前题目的questionId
+            let questionId = res.data.data.questionId;
+            this.postPaper.questionId = questionId;
+            this.postPaper.questionType = 3;
+            this.$axios({
+              url: "/api/paperManage",
+              method: "Post",
+              data: {
+                ...this.postPaper,
+              },
+            });
+          });
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.add {
+  margin: 0px 40px;
+  .box {
+    padding: 0px 20px;
+    ul li {
+      margin: 10px 0px;
+      display: flex;
+      align-items: center;
+      .el-input {
+        width: 6%;
+      }
+      .w150 {
+        margin-left: 20px;
+        width: 7%;
+      }
+    }
+  }
+  .el-icon-circle-plus {
+    margin-right: 10px;
+  }
+  .icon-daoru-tianchong {
+    margin-right: 10px;
+  }
+  .append {
+    margin: 0px 20px;
+    ul {
+      display: flex;
+      align-items: center;
+      li {
+        margin-right: 20px;
+      }
+    }
+    .change {
+      margin-top: 20px;
+      padding: 20px 16px;
+      background-color: #e7f6f6;
+      border-radius: 4px;
+      .title {
+        padding-left: 6px;
+        color: #2f4f4f;
+        span:nth-child(1) {
+          margin-right: 6px;
+        }
+        .answer {
+          margin: 20px 0px 20px 8px;
+        }
+        .el-textarea {
+          width: 98% !important;
+        }
+      }
+      .options {
+        ul {
+          display: flex;
+          flex-direction: column;
+        }
+        ul li {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 98%;
+          margin: 10px 0px;
+          span {
+            margin-right: 20px;
+          }
+        }
+      }
+      .submit {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    .fill {
+      .fillAnswer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        span {
+          margin-right: 6px;
+        }
+        .el-input {
+          width: 91% !important;
+        }
+      }
+      .analysis {
+        margin-top: 20px;
+        margin-left: 5px;
+      }
+    }
+    .judge {
+      .judgeAnswer {
+        margin-left: 20px;
+        margin-bottom: 20px;
+      }
+    }
+    .w150 {
+      width: 150px;
+    }
+    li:nth-child(2) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>
+
+

src/components/teacher/addExam.vue

@@ -0,0 +1,115 @@
+<!--
+ * 添加考试
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <section class="add">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="试卷名称">
+        <el-input v-model="form.source"></el-input>
+      </el-form-item>
+      <el-form-item label="介绍">
+        <el-input v-model="form.description"></el-input>
+      </el-form-item>
+      <el-form-item label="所属学院">
+        <el-input v-model="form.institute"></el-input>
+      </el-form-item>
+      <el-form-item label="所属专业">
+        <el-input v-model="form.major"></el-input>
+      </el-form-item>
+      <el-form-item label="年级">
+        <el-input v-model="form.grade"></el-input>
+      </el-form-item>
+      <el-form-item label="考试日期">
+        <el-col :span="11">
+          <el-date-picker placeholder="选择日期" v-model="form.examDate" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="持续时间">
+        <el-input v-model="form.totalTime"></el-input>
+      </el-form-item>
+      <!-- <el-form-item label="总分">
+        <el-input v-model="form.totalScore"></el-input>
+      </el-form-item> -->
+      <el-form-item label="考试类型">
+        <el-input v-model="form.type"></el-input>
+      </el-form-item>
+      <el-form-item label="考生提示">
+        <el-input type="textarea" v-model="form.tips"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit()">立即创建</el-button>
+        <el-button type="text" @click="cancel()">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: { //表单数据初始化
+        source: null,
+        description: null,
+        institute: null,
+        major: null,
+        grade: null,
+        examDate: null,
+        totalTime: null,
+        totalScore: null,
+        type: null,
+        tips: null,
+        paperId: null,
+      }
+    };
+  },
+  methods: {
+    formatTime(date) { //日期格式化
+      let year = date.getFullYear()
+      let month= date.getMonth()+ 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
+      let day=date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+      let hours=date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+      let minutes=date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+      let seconds=date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      // 拼接
+      return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
+    },
+    onSubmit() {
+      // let examDate = this.formatTime(this.form.examDate)
+      // this.form.examDate = examDate.substr(0,10)
+      this.$axios(`/api/examManagePaperId`).then(res => {
+        this.form.paperId = res.data.data.paperId + 1 //实现paperId自增1
+        this.$axios({
+          url: '/api/exam',
+          method: 'post',
+          data: {
+            ...this.form
+          }
+        }).then(res => {
+          if(res.data.code == 200) {
+            this.$message({
+              message: '数据添加成功',
+              type: 'success'
+            })
+            this.$router.push({path: '/selectExam'})
+          }
+        })
+      })
+    },
+    cancel() { //取消按钮
+      this.form = {}
+    },
+
+  }
+};
+</script>
+<style lang="less" scoped>
+.add {
+  padding: 0px 40px;
+  width: 400px;
+}
+</style>
+

src/components/teacher/addStudent.vue

@@ -0,0 +1,98 @@
+<!--
+ * 添加学生
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <section class="add">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="姓名">
+        <el-input v-model="form.studentName"></el-input>
+      </el-form-item>
+      <el-form-item label="性别">
+        <el-input v-model="form.sex"></el-input>
+      </el-form-item>
+      <el-form-item label="学院">
+        <el-input v-model="form.institute"></el-input>
+      </el-form-item>
+      <el-form-item label="所属专业">
+        <el-input v-model="form.major"></el-input>
+      </el-form-item>
+      <el-form-item label="年级">
+        <el-input v-model="form.grade"></el-input>
+      </el-form-item>
+      <el-form-item label="班级">
+        <el-input v-model="form.clazz"></el-input>
+      </el-form-item>
+      <el-form-item label="电话号码">
+        <el-input v-model="form.tel"></el-input>
+      </el-form-item>
+      <el-form-item label="身份证号">
+        <el-input v-model="form.cardId"></el-input>
+      </el-form-item>
+      <el-form-item label="邮箱">
+        <el-input v-model="form.email"></el-input>
+      </el-form-item>
+      <el-form-item label="密码">
+        <el-input v-model="form.pwd"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit()">立即创建</el-button>
+        <el-button type="text" @click="cancel()">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: { //表单数据初始化
+        studentName: null,
+        grade: null,
+        major: null,
+        clazz: null,
+        institute: null,
+        tel: null,
+        email: null,
+        pwd: null,
+        cardId: null,
+        sex: null,
+        role: 2
+      }
+    };
+  },
+  methods: {
+    onSubmit() { //数据提交
+      this.$axios({
+        url: '/api/student',
+        method: 'post',
+        data: {
+          ...this.form
+        }
+      }).then(res => {
+        if(res.data.code == 200) {
+          this.$message({
+            message: '数据添加成功',
+            type: 'success'
+          })
+          this.$router.push({path: '/studentManage'})
+        }
+      })
+    },
+    cancel() { //取消按钮
+      this.form = {}
+    },
+
+  }
+};
+</script>
+<style lang="less" scoped>
+.add {
+  padding: 0px 40px;
+  width: 400px;
+}
+</style>
+

src/components/teacher/allStudentsGrade.vue

@@ -0,0 +1,136 @@
+<!--
+ * 所有学生
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div class="all">
+
+    <el-form :inline="true" class="demo-form-inline">
+      <el-form-item label="姓名">
+        <el-input v-model="condition.name" placeholder="姓名"></el-input>
+      </el-form-item>
+      <el-form-item label="学院">
+        <el-input v-model="condition.institute" placeholder="学院"></el-input>
+      </el-form-item>
+      <el-form-item label="专业">
+        <el-input v-model="condition.major" placeholder="专业"></el-input>
+      </el-form-item>
+      <el-form-item label="年级">
+        <el-input v-model="condition.grade" placeholder="年级"></el-input>
+      </el-form-item>
+      <el-form-item label="班级">
+        <el-input v-model="condition.clazz" placeholder="班级"></el-input>
+      </el-form-item>
+      <el-form-item label="联系方式">
+        <el-input v-model="condition.tel" placeholder="联系方式"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getStudentGrade">查询</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="pagination.records" border>
+      <el-table-column fixed="left" prop="studentName" label="姓名" width="200"></el-table-column>
+      <el-table-column prop="institute" label="学院" width="220"></el-table-column>
+      <el-table-column prop="major" label="专业" width="240"></el-table-column>
+      <el-table-column prop="grade" label="年级" width="200"></el-table-column>
+      <el-table-column prop="clazz" label="班级" width="120"></el-table-column>
+      <el-table-column prop="sex" label="性别" width="120"></el-table-column>
+      <el-table-column prop="tel" label="联系方式" width="160"></el-table-column>
+      <el-table-column fixed="right" label="查看成绩" width="150">
+        <template slot-scope="scope">
+          <el-button @click="checkGrade(scope.row.studentId)" type="primary" size="small">查看成绩</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[6, 10]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total"
+      class="page"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pagination: {
+        //分页后的考试信息
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 6 //每页条数
+      },
+      condition: {
+        name: "",
+        tel: "",
+        grade: "",
+        clazz: "",
+        major: "",
+        institute: "",
+      }
+    };
+  },
+  created() {
+    this.getStudentGrade();
+  },
+  methods: {
+    getStudentGrade() {
+      // 根据条件获取学生成绩
+      var name = (this.condition.name.trim() == "" ? "@" : this.condition.name);
+      var grade = (this.condition.grade.trim() == "" ? "@" : this.condition.grade);
+      var tel = (this.condition.tel.trim() == "" ? "@" : this.condition.tel);
+      var institute = (this.condition.institute.trim() == "" ? "@" : this.condition.institute);
+      var major = (this.condition.major.trim() == "" ? "@" : this.condition.major);
+      var clazz = (this.condition.clazz.trim() == "" ? "@" : this.condition.clazz);
+      this.$axios(`/api/students/${this.pagination.current}/${this.pagination.size}/${name}/${grade}/${tel}/${institute}/${major}/${clazz}`).then(res => {
+        this.pagination = res.data.data;
+      }).catch(error => {});
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val;
+      this.getAnswerInfo();
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val;
+      this.getAnswerInfo();
+    },
+    checkGrade(studentId) {
+      this.$router.push({ path: "/grade", query: { studentId: studentId } });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.all {
+  padding: 0px 40px;
+  .page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .edit {
+    margin-left: 20px;
+  }
+  .el-table tr {
+    background-color: #dd5862 !important;
+  }
+}
+.el-table .warning-row {
+  background: #000 !important;
+}
+
+.el-table .success-row {
+  background: #dd5862;
+}
+</style>

src/components/teacher/answerDescription.vue

@@ -0,0 +1,35 @@
+<!--
+ * 题库管理功能介绍
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <section class="description">
+    <p class="title">题库管理功能介绍</p>
+    <p class="content">题库表设计和普通数据表设计有所区别。
+      分为了三张表,分别是选择题题库表,填空题题库表,判断题题库表,
+      每个表保存相应类型的题库,通过一张中间表,将题库和试题关联起来。
+      这样就组成了一张完整的试卷。
+    </p>
+  </section>
+</template>
+
+<style lang="less" scoped>
+.description {
+  margin-left: 40px;
+  .title {
+    font-size: 22px;
+    font-weight: 400;
+    color: rgb(31, 47, 61);
+  }
+  .content {
+    width: 600px;
+    background-color: #FAF5F2;
+    padding: 16px 32px;
+    border-radius: 4px;
+    border-left: 5px solid #FDC8C8;
+    margin: 20px 0px;
+  }
+}
+</style>

src/components/teacher/editAnswerChildren.vue

@@ -0,0 +1,583 @@
+<!--
+ * 编辑题库
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div class="add">
+    <el-tabs v-model="activeName">
+      <el-tab-pane name="first">
+        <span slot="label"><i class="el-icon-circle-plus"></i>编辑试题</span>
+        <section class="append">
+          <ul>
+            <li v-if="optionValue == '选择题'">
+              <span>所属章节：</span>
+              <el-input
+                placeholder="请输入对应章节"
+                v-model="postChange.section"
+                class="w150"
+                clearable
+              >
+              </el-input>
+            </li>
+            <li v-if="optionValue == '填空题'">
+              <span>所属章节：</span>
+              <el-input
+                placeholder="请输入对应章节"
+                v-model="postFill.section"
+                class="w150"
+                clearable
+              >
+              </el-input>
+            </li>
+            <li v-if="optionValue == '判断题'">
+              <span>所属章节：</span>
+              <el-input
+                placeholder="请输入对应章节"
+                v-model="postJudge.section"
+                class="w150"
+                clearable
+              >
+              </el-input>
+            </li>
+            <li v-if="optionValue == '选择题'">
+              <span>难度等级:</span>
+              <el-select
+                v-model="postChange.level"
+                placeholder="选择难度等级"
+                class="w150"
+              >
+                <el-option
+                  v-for="item in levels"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </li>
+            <li v-if="optionValue == '填空题'">
+              <span>难度等级:</span>
+              <el-select
+                v-model="postFill.level"
+                placeholder="选择难度等级"
+                class="w150"
+              >
+                <el-option
+                  v-for="item in levels"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </li>
+            <li v-if="optionValue == '判断题'">
+              <span>难度等级:</span>
+              <el-select
+                v-model="postJudge.level"
+                placeholder="选择难度等级"
+                class="w150"
+              >
+                <el-option
+                  v-for="item in levels"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </li>
+            <li v-if="optionValue == '选择题'">
+              <span>正确选项:</span>
+              <el-select
+                v-model="postChange.rightAnswer"
+                placeholder="选择正确答案"
+                class="w150"
+              >
+                <el-option
+                  v-for="item in rights"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </li>
+          </ul>
+          <!-- 选择题部分 -->
+          <div class="change" v-if="optionValue == '选择题'">
+            <div class="title">
+              <el-tag>题目:</el-tag
+              ><span
+                >在下面的输入框中输入题目,形如--DNS
+                服务器和DHCP服务器的作用是（）</span
+              >
+              <el-input
+                type="textarea"
+                rows="4"
+                v-model="postChange.question"
+                placeholder="请输入题目内容"
+                resize="none"
+                class="answer"
+              >
+              </el-input>
+            </div>
+            <div class="options">
+              <ul>
+                <li>
+                  <el-tag type="success">A</el-tag>
+                  <el-input
+                    placeholder="请输入选项A的内容"
+                    v-model="postChange.answerA"
+                    clearable=""
+                  >
+                  </el-input>
+                </li>
+                <li>
+                  <el-tag type="success">B</el-tag>
+                  <el-input
+                    placeholder="请输入选项B的内容"
+                    v-model="postChange.answerB"
+                    clearable=""
+                  >
+                  </el-input>
+                </li>
+                <li>
+                  <el-tag type="success">C</el-tag>
+                  <el-input
+                    placeholder="请输入选项C的内容"
+                    v-model="postChange.answerC"
+                    clearable=""
+                  >
+                  </el-input>
+                </li>
+                <li>
+                  <el-tag type="success">D</el-tag>
+                  <el-input
+                    placeholder="请输入选项D的内容"
+                    v-model="postChange.answerD"
+                    clearable=""
+                  >
+                  </el-input>
+                </li>
+              </ul>
+            </div>
+            <div class="title">
+              <el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
+              <el-input
+                type="textarea"
+                rows="4"
+                v-model="postChange.analysis"
+                placeholder="请输入答案解析"
+                resize="none"
+                class="answer"
+              >
+              </el-input>
+            </div>
+            <div class="submit">
+              <el-button type="primary" @click="changeSubmit()"
+                >提交修改</el-button
+              >
+            </div>
+          </div>
+          <!-- 填空题部分 -->
+          <div class="change fill" v-if="optionValue == '填空题'">
+            <div class="title">
+              <el-tag>题目:</el-tag
+              ><span
+                >输入题目,形如--从计算机网络系统组成的角度看，计算机网络可以分为()和()。注意需要考生答题部分一定要用括号（英文半角）括起来。</span
+              >
+              <el-input
+                type="textarea"
+                rows="4"
+                v-model="postFill.question"
+                placeholder="请输入题目内容"
+                resize="none"
+                class="answer"
+              >
+              </el-input>
+            </div>
+            <div class="fillAnswer">
+              <el-tag>正确答案:</el-tag>
+              <el-input v-model="postFill.answer"></el-input>
+            </div>
+            <div class="title analysis">
+              <el-tag type="success">解析:</el-tag
+              ><span>下方输入框中输入答案解析</span>
+              <el-input
+                type="textarea"
+                rows="4"
+                v-model="postFill.analysis"
+                placeholder="请输入答案解析"
+                resize="none"
+                class="answer"
+              >
+              </el-input>
+            </div>
+            <div class="submit">
+              <el-button type="primary" @click="fillSubmit()"
+                >提交修改</el-button
+              >
+            </div>
+          </div>
+          <!-- 判断题 -->
+          <div class="change judge" v-if="optionValue == '判断题'">
+            <div class="title">
+              <el-tag>题目:</el-tag><span>在下面的输入框中输入题目</span>
+              <el-input
+                type="textarea"
+                rows="4"
+                v-model="postJudge.question"
+                placeholder="请输入题目内容"
+                resize="none"
+                class="answer"
+              >
+              </el-input>
+            </div>
+            <div class="judgeAnswer">
+              <el-radio v-model="postJudge.answer" label="T">正确</el-radio>
+              <el-radio v-model="postJudge.answer" label="F">错误</el-radio>
+            </div>
+            <div class="title">
+              <el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
+              <el-input
+                type="textarea"
+                rows="4"
+                v-model="postJudge.analysis"
+                placeholder="请输入答案解析"
+                resize="none"
+                class="answer"
+              >
+              </el-input>
+            </div>
+            <div class="submit">
+              <el-button type="primary" @click="judgeSubmit()"
+                >提交修改</el-button
+              >
+            </div>
+          </div>
+        </section>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: "first", //活动选项卡
+      options: [
+        //题库类型
+        {
+          value: "选择题",
+          label: "选择题",
+        },
+        {
+          value: "填空题",
+          label: "填空题",
+        },
+        {
+          value: "判断题",
+          label: "判断题",
+        },
+      ],
+      levels: [
+        //难度等级
+        {
+          value: "1",
+          label: "1",
+        },
+        {
+          value: "2",
+          label: "2",
+        },
+        {
+          value: "3",
+          label: "3",
+        },
+        {
+          value: "4",
+          label: "4",
+        },
+        {
+          value: "5",
+          label: "5",
+        },
+      ],
+      rights: [
+        //正确答案
+        {
+          value: "A",
+          label: "A",
+        },
+        {
+          value: "B",
+          label: "B",
+        },
+        {
+          value: "C",
+          label: "C",
+        },
+        {
+          value: "D",
+          label: "D",
+        },
+      ],
+      optionValue: "选择题", //题型选中值
+      postChange: {
+        //选择题提交内容
+        subject: "", //试卷名称
+        level: "", //难度等级选中值
+        rightAnswer: "", //正确答案选中值
+        section: "", //对应章节
+        question: "", //题目
+        analysis: "", //解析
+        answerA: "",
+        answerB: "",
+        answerC: "",
+        answerD: "",
+      },
+      postFill: {
+        //填空题提交内容
+        subject: "", //试卷名称
+        level: "", //难度等级选中值
+        answer: "", //正确答案
+        section: "", //对应章节
+        question: "", //题目
+        analysis: "", //解析
+      },
+      postJudge: {
+        //判断题提交内容
+        subject: "", //试卷名称
+        level: "", //难度等级选中值
+        answer: "", //正确答案
+        section: "", //对应章节
+        question: "", //题目
+        analysis: "", //解析
+      },
+      type: "选择题",
+      questionId: "",
+    };
+  },
+  mounted() {
+    this.getQuestion();
+  },
+  created() {
+  },
+  methods: {
+    getQuestion() {
+        // 获取题目
+        this.type = this.$route.query.type;
+        this.questionId = this.$route.query.questionId;
+
+        this.optionValue = this.type;
+        // 根据类型和id获取题目
+        this.$axios(
+            `/api/answers/${this.type}/${this.questionId}`
+        )
+        .then((res) => {
+            switch(this.type) {
+                case "选择题":
+                    this.postChange = res.data.data.multiQuestion;
+                    break;
+                case "判断题":
+                    this.postJudge = res.data.data.judgeQuestion;
+                    break;
+                case "填空题":
+                    this.postFill = res.data.data.fillQuestion;
+                    console.log(this.postFill)
+                    break;
+            }
+        })
+        .catch((error) => {});
+    },
+    changeSubmit() {
+      //选择题题库提交
+      this.postChange.questionId = this.questionId;
+      this.$axios({
+        //提交数据到选择题题库表
+        url: "/api/editMultiQuestion",
+        method: "post",
+        data: {
+          ...this.postChange,
+        },
+      })
+        .then((res) => {
+          //添加成功显示提示
+          let status = res.data.code;
+          if (status == 200) {
+            this.$message({
+              message: "已修改题目",
+              type: "success",
+            });
+            this.postChange = {};
+          }
+        })
+        .then(() => {
+            this.getQuestion();
+        });
+    },
+    fillSubmit() {
+      //填空题提交
+      this.postFill.questionId = this.questionId;
+      this.$axios({
+        url: "/api/editFillQuestion",
+        method: "post",
+        data: {
+          ...this.postFill,
+        },
+      })
+        .then((res) => {
+          let status = res.data.code;
+          if (status == 200) {
+            this.$message({
+              message: "已修改题目",
+              type: "success",
+            });
+            this.postFill = {};
+          }
+        })
+        .then(() => {
+            this.getQuestion();
+        });
+    },
+    judgeSubmit() {
+      //判断题提交
+      this.postJudge.questionId = this.questionId;
+      this.$axios({
+        url: "/api/editJudgeQuestion",
+        method: "post",
+        data: {
+          ...this.postJudge,
+        },
+      })
+        .then((res) => {
+          let status = res.data.code;
+          if (status == 200) {
+            this.$message({
+              message: "已修改题目",
+              type: "success",
+            });
+            this.postJudge = {};
+          }
+        })
+        .then(() => {
+            this.getQuestion();
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.add {
+  margin: 0px 40px;
+  .box {
+    padding: 0px 20px;
+    ul li {
+      margin: 10px 0px;
+      display: flex;
+      align-items: center;
+      .el-input {
+        width: 6%;
+      }
+      .w150 {
+        margin-left: 20px;
+        width: 7%;
+      }
+    }
+  }
+  .el-icon-circle-plus {
+    margin-right: 10px;
+  }
+  .icon-daoru-tianchong {
+    margin-right: 10px;
+  }
+  .append {
+    margin: 0px 20px;
+    ul {
+      display: flex;
+      align-items: center;
+      li {
+        margin-right: 20px;
+      }
+    }
+    .change {
+      margin-top: 20px;
+      padding: 20px 16px;
+      background-color: #e7f6f6;
+      border-radius: 4px;
+      .title {
+        padding-left: 6px;
+        color: #2f4f4f;
+        span:nth-child(1) {
+          margin-right: 6px;
+        }
+        .answer {
+          margin: 20px 0px 20px 8px;
+        }
+        .el-textarea {
+          width: 98% !important;
+        }
+      }
+      .options {
+        ul {
+          display: flex;
+          flex-direction: column;
+        }
+        ul li {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 98%;
+          margin: 10px 0px;
+          span {
+            margin-right: 20px;
+          }
+        }
+      }
+      .submit {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    .fill {
+      .fillAnswer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        span {
+          margin-right: 6px;
+        }
+        .el-input {
+          width: 91% !important;
+        }
+      }
+      .analysis {
+        margin-top: 20px;
+        margin-left: 5px;
+      }
+    }
+    .judge {
+      .judgeAnswer {
+        margin-left: 20px;
+        margin-bottom: 20px;
+      }
+    }
+    .w150 {
+      width: 150px;
+    }
+    li:nth-child(2) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>
+
+

src/components/teacher/examDescription.vue

@@ -0,0 +1,34 @@
+<!--
+ * 考试管理功能介绍
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <section class="description">
+    <p class="title">考试管理功能介绍</p>
+    <p class="content">老师发布了考试,学生才可以在主页面看到相应的考试信息。
+      有考试安排表以后,才能给该次考试添加题目,对应数据表是exammanage。
+      该表保存该次考试,课程名称,考试时间,所属专业,学院等等信息。
+    </p>
+  </section>
+</template>
+
+<style lang="less" scoped>
+.description {
+  margin-left: 40px;
+  .title {
+    font-size: 22px;
+    font-weight: 400;
+    color: rgb(31, 47, 61);
+  }
+  .content {
+    width: 600px;
+    background-color: rgb(236, 248, 255);
+    padding: 16px 32px;
+    border-radius: 4px;
+    border-left: 5px solid rgb(80, 191, 255);
+    margin: 20px 0px;
+  }
+}
+</style>

src/components/teacher/selectAnswer.vue

@@ -0,0 +1,147 @@
+<!--
+ * 查询所有题库
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div class="exam">
+    <el-form :inline="true" class="demo-form-inline">
+      <el-form-item label="试卷名称">
+        <el-input v-model="subject" placeholder="试卷名称"></el-input>
+      </el-form-item>
+      <el-form-item label="章节">
+        <el-input v-model="section" placeholder="章节"></el-input>
+      </el-form-item>
+      <el-form-item label="题目内容">
+        <el-input v-model="question" placeholder="题目内容"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getAnswerInfo">查询</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="pagination.records" border :row-class-name="tableRowClassName">
+      <el-table-column fixed="left" prop="subject" label="试卷名称" width="180"></el-table-column>
+      <el-table-column prop="question" label="题目信息" width="490"></el-table-column>
+      <el-table-column prop="section" label="所属章节" width="200"></el-table-column>
+      <el-table-column prop="type" label="题目类型" width="200"></el-table-column>
+      <el-table-column prop="score" label="试题分数" width="150"></el-table-column>
+      <el-table-column prop="level" label="难度等级" width="133"></el-table-column>
+      <el-table-column fixed="right" label="操作" width="240">
+        <template slot-scope="scope">
+          <el-button @click="toEdit(scope.row.type, scope.row.questionId)" type="primary" size="small">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[6, 10]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total"
+      class="page"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pagination: {
+        //分页后的考试信息
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 6 //每页条数
+
+      },
+      section: "",
+      subject: "",
+      question: "",
+    };
+  },
+  created() {
+    this.getAnswerInfo();
+  },
+  methods: {
+    toEdit(type, id) {
+      // 前往编辑题目
+      this.$router.push({path:'/editAnswerChildren',query: {type: type, questionId: id}})
+    },
+    getAnswerInfo(size, current) {
+      //分页查询所有试卷信息
+      if(typeof size === 'number' && !isNaN(size)) {
+        this.pagination.size = size;
+      }
+      if(typeof current === 'number' && !isNaN(current)) {
+        this.pagination.current = current;
+      } else {
+        this.pagination.current = 1;
+      }
+      var subject = this.subject;
+      if(this.subject.trim() == "") {
+        subject = "@";
+      }
+      var section = this.section;
+      if(this.section.trim() == "") {
+        section = "@";
+      }
+      var question = this.question;
+      if(this.question.trim() == "") {
+        question = "@";
+      }
+      this.$axios(
+        `/api/answers/${this.pagination.current}/${this.pagination.size}/${subject}/${section}/${question}`
+      )
+        .then(res => {
+          this.pagination = res.data.data;
+        })
+        .catch(error => {});
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.getAnswerInfo(val);
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.getAnswerInfo(undefined, val);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 == 0) {
+        return "warning-row";
+      } else {
+        return "success-row";
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.exam {
+  padding: 0px 40px;
+  .page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .edit {
+    margin-left: 20px;
+  }
+  .el-table tr {
+    background-color: #DD5862 !important;
+  }
+}
+  .el-table .warning-row {
+    background: #000 !important;
+
+  }
+
+  .el-table .success-row {
+    background: #DD5862;
+  }
+
+</style>

src/components/teacher/selectExam.vue

@@ -0,0 +1,395 @@
+<!--
+ * 查询所有考试
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div class="exam">
+    <el-table :data="pagination.records" border>
+      <el-table-column
+        fixed="left"
+        prop="source"
+        label="试卷名称"
+        width="180"
+      ></el-table-column>
+      <el-table-column
+        prop="description"
+        label="介绍"
+        width="200"
+      ></el-table-column>
+      <el-table-column
+        prop="institute"
+        label="所属学院"
+        width="120"
+      ></el-table-column>
+      <el-table-column
+        prop="major"
+        label="所属专业"
+        width="200"
+      ></el-table-column>
+      <el-table-column prop="grade" label="年级" width="100"></el-table-column>
+      <el-table-column
+        prop="examDate"
+        label="考试日期"
+        width="120"
+      ></el-table-column>
+      <el-table-column
+        prop="totalTime"
+        label="持续时间"
+        width="120"
+      ></el-table-column>
+      <el-table-column
+        prop="totalScore"
+        label="总分"
+        width="120"
+      ></el-table-column>
+      <el-table-column
+        prop="type"
+        label="试卷类型"
+        width="120"
+      ></el-table-column>
+      <el-table-column
+        prop="tips"
+        label="考生提示"
+        width="400"
+      ></el-table-column>
+      <el-table-column fixed="right" label="操作" width="300">
+        <template slot-scope="scope">
+          <el-button type="success" @click="getExamDetail(scope.row.examCode, scope.row.paperId)" size="small"
+            >试题详情</el-button
+          >
+          <el-button
+            @click="edit(scope.row.examCode)"
+            type="primary"
+            size="small"
+            >编辑</el-button
+          >
+          <el-button
+            @click="deleteRecord(scope.row.examCode)"
+            type="danger"
+            size="small"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[4, 8, 10, 20]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total"
+      class="page"
+    >
+    </el-pagination>
+    <!-- 编辑对话框-->
+    <el-dialog
+      title="编辑试卷信息"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <section class="update">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="试卷名称">
+            <el-input v-model="form.source"></el-input>
+          </el-form-item>
+          <el-form-item label="介绍">
+            <el-input v-model="form.description"></el-input>
+          </el-form-item>
+          <el-form-item label="所属学院">
+            <el-input v-model="form.institute"></el-input>
+          </el-form-item>
+          <el-form-item label="所属专业">
+            <el-input v-model="form.major"></el-input>
+          </el-form-item>
+          <el-form-item label="年级">
+            <el-input v-model="form.grade"></el-input>
+          </el-form-item>
+          <el-form-item label="考试日期">
+            <el-col :span="11">
+              <el-date-picker
+                type="date"
+                placeholder="选择日期"
+                v-model="form.examDate"
+                value-format="yyyy-MM-dd"
+                style="width: 100%"
+              ></el-date-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="持续时间">
+            <el-input v-model="form.totalTime"></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="总分">
+            <el-input v-model="form.totalScore"></el-input>
+          </el-form-item> -->
+          <el-form-item label="试卷类型">
+            <el-input v-model="form.type"></el-input>
+          </el-form-item>
+          <el-form-item label="考生提示">
+            <el-input type="textarea" v-model="form.tips"></el-input>
+          </el-form-item>
+        </el-form>
+      </section>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submit()">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 查询试卷对话框 -->
+    <el-dialog title="试卷内容" :visible.sync="showExamDetail" width="60%">
+      <span>
+        <div class="content">
+          <el-collapse v-model="activeName">
+            <el-collapse-item class="header" name="0">
+              <template slot="title">
+                <div class="title">
+                  <span>{{ examData.source }}</span
+                  ><i class="header-icon el-icon-info"></i>
+                  <span class="time"
+                    >{{ score[0] + score[1] + score[2] }}分 /
+                    {{ examData.totalTime }}分钟</span
+                  >
+                </div>
+              </template>
+              <el-collapse class="inner">
+                <el-collapse-item>
+                  <template slot="title">
+                    <div class="titlei">
+                      选择题 (共{{ topicCount[0] }}题 共计{{ score[0] }}分)
+                    </div>
+                  </template>
+                  <div class="contenti">
+                    <ul
+                      class="question"
+                      v-for="(list, index) in topic[1]"
+                      :key="index"
+                    >
+                      <li>
+                        {{ index + 1 }}. {{ list.question }} {{ list.score }}分
+                        <a style="color: red" href="#" @click.prevent="deleteQuestion(1, list.questionId)">删除</a>
+                      </li>
+                    </ul>
+                  </div>
+                </el-collapse-item>
+                <el-collapse-item>
+                  <template slot="title">
+                    <div class="titlei">
+                      填空题 (共{{ topicCount[1] }}题 共计{{ score[1] }}分)
+                    </div>
+                  </template>
+                  <div class="contenti">
+                    <ul
+                      class="question"
+                      v-for="(list, index) in topic[2]"
+                      :key="index"
+                    >
+                      <li>
+                        {{ topicCount[0] + index + 1 }}.{{ list.question }}
+                        {{ list.score }}分
+                        <a style="color: red" href="#" @click.prevent="deleteQuestion(2, list.questionId)">删除</a>
+                      </li>
+                    </ul>
+                  </div>
+                </el-collapse-item>
+                <el-collapse-item>
+                  <template slot="title">
+                    <div class="titlei">
+                      判断题 (共{{ topicCount[2] }}题 共计{{ score[2] }}分)
+                    </div>
+                  </template>
+                  <div class="contenti">
+                    <ul
+                      class="question"
+                      v-for="(list, index) in topic[3]"
+                      :key="index"
+                    >
+                      <li>
+                        {{ topicCount[0] + topicCount[1] + index + 1 }}.
+                        {{ list.question }} {{ list.score }}分
+                        <a style="color: red" href="#" @click.prevent="deleteQuestion(3, list.questionId)">删除</a>
+                      </li>
+                    </ul>
+                  </div>
+                </el-collapse-item>
+              </el-collapse>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showExamDetail = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {}, //保存点击以后当前试卷的信息
+      pagination: {
+        //分页后的考试信息
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 4, //每页条数
+      },
+      dialogVisible: false,
+      showExamDetail: false, //是否展示试卷
+      activeName: '0',  //默认打开序号
+      topicCount: [],//每种类型题目的总数
+      score: [],  //每种类型分数的总数
+      examData: { //考试信息
+        // source: null,
+        // totalScore: null,
+      },
+      topic: {  //试卷信息
+
+      },
+      examDetailCode: "",   // 当前查看试题详情中，考试编码code
+      examDetailPaperId: "",    // 当前查看的试题详情中，试卷id
+    };
+  },
+  created() {
+    this.getExamInfo();
+
+  },
+  methods: {
+    deleteQuestion(type, questionId) {
+      // type: 1选择 2填空 3判断
+      var paperId = this.examDetailPaperId;
+      this.$confirm("确认从试卷中移除该试题？")
+        .then((_) => {
+          this.$axios(`/api/paper/delete/${paperId}/${type}/${questionId}`).then(res => {  //通过examCode请求试卷详细信息
+            this.getExamDetail(this.examDetailCode, paperId);
+          })
+        })
+        .catch((_) => {});
+    },
+    getExamDetail(examCode, paperId) {
+      this.examDetailCode = examCode;
+      this.examDetailPaperId = paperId;
+      this.topicCount = [];
+      this.score = [];
+      this.examData = {},
+      this.topic = {},
+
+      this.showExamDetail = true;
+
+      this.$axios(`/api/exam/${examCode}`).then(res => {  //通过examCode请求试卷详细信息
+        res.data.data.examDate = res.data.data.examDate.substr(0,10)
+        this.examData = { ...res.data.data}
+        let paperId = this.examData.paperId
+        this.$axios(`/api/paper/${paperId}`).then(res => {  //通过paperId获取试题题目信息
+          this.topic = {...res.data}
+          let keys = Object.keys(this.topic) //对象转数组
+          keys.forEach(e => {
+            let data = this.topic[e]
+            this.topicCount.push(data.length)
+            let currentScore = 0
+            for(let i = 0; i< data.length; i++) { //循环每种题型,计算出总分
+              currentScore += data[i].score
+            }
+            this.score.push(currentScore) //把每种题型总分存入score
+          })
+        })
+      })
+    },
+    edit(examCode) {
+      //编辑试卷
+      this.dialogVisible = true;
+      this.$axios(`/api/exam/${examCode}`).then((res) => {
+        //根据试卷id请求后台
+        if (res.data.code == 200) {
+          this.form = res.data.data;
+        }
+      });
+    },
+    handleClose(done) {
+      //关闭提醒
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+    submit() {
+      //提交修改后的试卷信息
+      this.dialogVisible = false;
+
+      this.$axios({
+        url: "/api/exam",
+        method: "put",
+        data: {
+          ...this.form,
+        },
+      }).then((res) => {
+        if (res.data.code == 200) {
+          this.$message({
+            //成功修改提示
+            message: "更新成功",
+            type: "success",
+          });
+        }
+        this.getExamInfo();
+      });
+    },
+    deleteRecord(examCode) {
+      this.$confirm("确定删除该记录吗,该操作不可逆！！！", "删除提示", {
+        confirmButtonText: "确定删除",
+        cancelButtonText: "算了,留着",
+        type: "danger",
+      })
+        .then(() => {
+          //确认删除
+          this.$axios({
+            url: `/api/exam/${examCode}`,
+            method: "delete",
+          }).then((res) => {
+            this.getExamInfo();
+          });
+        })
+        .catch(() => {});
+    },
+    getExamInfo() {
+      //分页查询所有试卷信息
+      this.$axios(
+        `/api/exams/${this.pagination.current}/${this.pagination.size}`
+      )
+        .then((res) => {
+          this.pagination = res.data.data;
+        })
+        .catch((error) => {});
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val;
+      this.getExamInfo();
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val;
+      this.getExamInfo();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.exam {
+  padding: 0px 40px;
+  .page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .edit {
+    margin-left: 20px;
+  }
+}
+</style>

src/components/teacher/selectExamToPart.vue

@@ -0,0 +1,90 @@
+<!--
+ * 查询所有考试跳转到分段页面
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div class="exam">
+    <el-table :data="pagination.records" border>
+      <el-table-column fixed="left" prop="source" label="试卷名称" width="180"></el-table-column>
+      <el-table-column prop="description" label="介绍" width="200"></el-table-column>
+      <el-table-column prop="institute" label="所属学院" width="120"></el-table-column>
+      <el-table-column prop="major" label="所属专业" width="200"></el-table-column>
+      <el-table-column prop="grade" label="年级" width="100"></el-table-column>
+      <el-table-column prop="examDate" label="考试日期" width="120"></el-table-column>
+      <el-table-column prop="totalTime" label="持续时间" width="120"></el-table-column>
+      <el-table-column prop="totalScore" label="总分" width="120"></el-table-column>
+      <el-table-column prop="type" label="试卷类型" width="120"></el-table-column>
+      <el-table-column prop="tips" label="考生提示" width="400"></el-table-column>
+      <el-table-column fixed="right" label="操作" width="150">
+        <template slot-scope="scope">
+          <el-button @click="toPart(scope.row.examCode,scope.row.source)" type="primary" size="small">查看分段</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[4, 8, 10, 20]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total" class="page">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {}, //保存点击以后当前试卷的信息
+      pagination: { //分页后的考试信息
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 4 //每页条数
+      },
+      dialogVisible: false
+    }
+  },
+  created() {
+    this.getExamInfo()
+  },
+  methods: {
+    getExamInfo() { //分页查询所有试卷信息
+      this.$axios(`/api/exams/${this.pagination.current}/${this.pagination.size}`).then(res => {
+        this.pagination = res.data.data
+      }).catch(error => {
+      })
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getExamInfo()
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getExamInfo()
+    },
+    toPart(examCode,source) { //跳转到分段charts页面
+      this.$router.push({path: '/scorePart', query:{examCode: examCode, source: source}})
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+.exam {
+  padding: 0px 40px;
+  .page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .edit{
+    margin-left: 20px;
+  }
+}
+</style>

src/components/teacher/studentManage.vue

@@ -0,0 +1,218 @@
+<!--
+ * 学生管理页面
+ *
+ * @Author: ShanZhu
+ * @Date: 2023-11-23
+-->
+<template>
+  <div class="all">
+    <el-form :inline="true" class="demo-form-inline">
+      <el-form-item label="姓名">
+        <el-input v-model="condition.name" placeholder="姓名"></el-input>
+      </el-form-item>
+      <el-form-item label="学院">
+        <el-input v-model="condition.institute" placeholder="学院"></el-input>
+      </el-form-item>
+      <el-form-item label="专业">
+        <el-input v-model="condition.major" placeholder="专业"></el-input>
+      </el-form-item>
+      <el-form-item label="年级">
+        <el-input v-model="condition.grade" placeholder="年级"></el-input>
+      </el-form-item>
+      <el-form-item label="班级">
+        <el-input v-model="condition.clazz" placeholder="班级"></el-input>
+      </el-form-item>
+      <el-form-item label="联系方式">
+        <el-input v-model="condition.tel" placeholder="联系方式"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getStudentGrade">查询</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="pagination.records" border>
+      <el-table-column fixed="left" prop="studentName" label="姓名" width="180"></el-table-column>
+      <el-table-column prop="institute" label="学院" width="200"></el-table-column>
+      <el-table-column prop="major" label="专业" width="200"></el-table-column>
+      <el-table-column prop="grade" label="年级" width="200"></el-table-column>
+      <el-table-column prop="clazz" label="班级" width="100"></el-table-column>
+      <el-table-column prop="sex" label="性别" width="120"></el-table-column>
+      <el-table-column prop="tel" label="联系方式" width="240"></el-table-column>
+      <el-table-column fixed="right" label="操作" width="240">
+        <template slot-scope="scope">
+          <el-button @click="checkGrade(scope.row.studentId)" type="primary" size="small">编辑</el-button>
+          <el-button @click="deleteById(scope.row.studentId)" type="danger" size="small">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[6, 10]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total"
+      class="page">
+    </el-pagination>
+    <!-- 编辑对话框-->
+    <el-dialog
+      title="编辑学生信息"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose">
+      <section class="update">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="姓名">
+            <el-input v-model="form.studentName"></el-input>
+          </el-form-item>
+          <el-form-item label="学院">
+            <el-input v-model="form.institute"></el-input>
+          </el-form-item>
+          <el-form-item label="专业">
+            <el-input v-model="form.major"></el-input>
+          </el-form-item>
+          <el-form-item label="年级">
+            <el-input v-model="form.grade"></el-input>
+          </el-form-item>
+          <el-form-item label="班级">
+            <el-input v-model="form.clazz"></el-input>
+          </el-form-item>
+          <el-form-item label="性别">
+            <el-input v-model="form.sex"></el-input>
+          </el-form-item>
+          <el-form-item label="电话号码">
+            <el-input v-model="form.tel"></el-input>
+          </el-form-item>
+        </el-form>
+      </section>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submit()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pagination: {
+        //分页后的考试信息
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 6, //每页条数
+      },
+      dialogVisible: false, //对话框
+      form: {}, //保存点击以后当前试卷的信息,
+      condition: {
+        name: "",
+        tel: "",
+        grade: "",
+        clazz: "",
+        major: "",
+        institute: "",
+      }
+    };
+  },
+  created() {
+    this.getStudentGrade();
+  },
+  methods: {
+    getStudentGrade() {
+      // 根据条件获取学生成绩
+      var name = (this.condition.name.trim() == "" ? "@" : this.condition.name);
+      var grade = (this.condition.grade.trim() == "" ? "@" : this.condition.grade);
+      var tel = (this.condition.tel.trim() == "" ? "@" : this.condition.tel);
+      var institute = (this.condition.institute.trim() == "" ? "@" : this.condition.institute);
+      var major = (this.condition.major.trim() == "" ? "@" : this.condition.major);
+      var clazz = (this.condition.clazz.trim() == "" ? "@" : this.condition.clazz);
+      this.$axios(`/api/students/${this.pagination.current}/${this.pagination.size}/${name}/${grade}/${tel}/${institute}/${major}/${clazz}`).then(res => {
+        this.pagination = res.data.data;
+      }).catch(error => {});
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val;
+      this.getStudentGrade();
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val;
+      this.getStudentGrade();
+    },
+    checkGrade(studentId) { //修改学生信息
+      this.dialogVisible = true
+      this.$axios(`/api/student/${studentId}`).then(res => {
+        this.form = res.data.data
+      })
+    },
+    deleteById(studentId) { //删除当前学生
+      var _this = this;
+      this.$confirm("确定删除当前学生吗？删除后无法恢复","Warning",{
+        confirmButtonText: '确定删除',
+        cancelButtonText: '算了,留着吧',
+        type: 'danger'
+      }).then(()=> { //确认删除
+        this.$axios({
+          url: `/api/student/${studentId}`,
+          method: 'delete',
+        }).then(res => {
+          this.getStudentGrade()
+        })
+      }).catch(() => {
+
+      })
+    },
+    submit() { //提交更改
+      this.dialogVisible = false
+      this.$axios({
+        url: '/api/student',
+        method: 'put',
+        data: {
+          ...this.form
+        }
+      }).then(res => {
+        if(res.data.code ==200) {
+          this.$message({
+            message: '更新成功',
+            type: 'success'
+          })
+        }
+        this.getStudentGrade()
+      })
+    },
+    handleClose(done) { //关闭提醒
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        }).catch(_ => {});
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+.all {
+  padding: 0px 40px;
+  .page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .edit {
+    margin-left: 20px;
+  }
+  .el-table tr {
+    background-color: #dd5862 !important;
+  }
+}
+.el-table .warning-row {
+  background: #000 !important;
+}
+
+.el-table .success-row {
+  background: #dd5862;
+}
+</style>

src/main.js

@@ -0,0 +1,30 @@
+/*
+ * 主函数
+
+ */
+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 store from '@/vuex/store'
+
+Vue.use(ElementUI)
+Vue.use(VueCookies)
+
+Vue.config.productionTip = false
+Vue.prototype.bus = new Vue()
+Vue.prototype.$echarts = echarts
+Vue.prototype.$axios = axios
+
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App),
+  components: { App },
+  template: '<App/>'
+})

src/router/index.js

@@ -0,0 +1,109 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+Vue.use(Router)
+
+
+
+const VueRouterPush = Router.prototype.push
+
+Router.prototype.push = function push (to) {
+  return VueRouterPush.call(this, to).catch(err => err)
+}
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'login', //登录界面
+      component: () => import('@/components/common/login')
+    },
+    {
+      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: '/scorePart',
+          component: () => import('@/components/charts/scorePart')
+        },
+        {
+          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: '/editAnswerChildren', //编辑题库主界面
+          component: () => import('@/components/teacher/editAnswerChildren')
+        },
+        {
+          path: '/addAnswerChildren', //点击试卷跳转到添加题库页面
+          component: () => import('@/components/teacher/addAnswerChildren')
+        },
+        {
+          path: '/studentManage', //学生管理界面
+          component: () => import('@/components/teacher/studentManage')
+        },
+        {
+          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:'/startExam', component: () => import('@/components/student/startExam')},
+        {path: '/manager', component: () => import('@/components/student/manager')},
+        {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')}
+  ]
+})

src/vuex/store.js

@@ -0,0 +1,64 @@
+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: [{ item2: '考试查询', path: 'selectExam' }, { item3: '添加考试', path: '/addExam' }],
+  },
+  {
+    index: '2',
+    title: '题库管理',
+    icon: 'icon-tiku',
+    content: [{ item2: '所有题库', path: '/selectAnswer' }, { item3: '增加题库', path: '/addAnswer' }, { path: '/addAnswerChildren' }],
+  },
+  {
+    index: '3',
+    title: '成绩查询',
+    icon: 'icon-performance',
+    content: [{ item1: '学生成绩查询', path: '/allStudentsGrade' }, { path: '/grade' }, { item2: '成绩分段查询', path: '/selectExamToPart' }, { path: '/scorePart' }],
+  },
+  {
+    index: '4',
+    title: '学生管理',
+    icon: 'icon-role',
+    content: [{ item1: '学生管理', path: '/studentManage' }, { item2: '添加学生', path: '/addStudent' }],
+  },
+  ],
+}
+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
+})