完成成绩统计页面

.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: cyh
+ * @Date:  2024-10-11
+-->
+<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/charts/grade.vue

@@ -0,0 +1,99 @@
+<!--
+ * 成绩统计页面
+ *
+ * @Author: ShanZhu
+ * @Date: 2024-12-16
+-->
+<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/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/main.js

@@ -0,0 +1,32 @@
+/*
+ * 主函数
+ *
+ * @Author: cyh
+ * @Date:  2024-10-11
+ */
+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
+})