1111

.babelrc

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

.editorconfig

+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+yarn.lock
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.postcssrc.js

+// 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

+# 项目介绍及启动说明
+
+> 在线考试系统-前端项目文件。
+
+### 安装建议
+
+> 建议使用`yarn`来安装项目依赖，首先安装yarn，然后设置yarn源为淘宝镜像
+
+``` bash
+# 安装yarn
+npm install yarn -g
+
+# 查看是否安装成功
+yarn -v
+
+# 设置yarn源为淘宝镜像源
+yarn config set registry https://registry.npm.taobao.org
+
+# 安装依赖
+yarn install or npm install
+
+# 启动项目
+yarn dev or npm run dev
+
+# 打包构建
+yarn build or npm run build

build/build.js

+'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

+'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

+'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

+'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

+'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

+'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

+'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

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

config/index.js

+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {
+      '/api': {
+        target: 'http://localhost:8080',//本地地址
+        // target: 'http://gopikachu.top:8080',// 线上部署地址
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
+        }
+      }
+    },
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

config/prod.env.js

+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>考试</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package.json

+{
+  "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-json-excel": "^0.3.0",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1",
+    "vuex-persistedstate": "^2.5.4"
+  },
+  "devDependencies": {
+    "@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",
+    "less": "^4.1.3",
+    "less-loader": "5.0.0",
+    "lib-flexible": "^0.3.2",
+    "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-px2rem": "^0.3.0",
+    "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

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

src/components/admin/addTeacher.vue

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

src/components/admin/index.vue

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

src/components/admin/tacherManage.vue

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

src/components/charts/grade.vue

+// 成绩统计页面
+<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查询成绩
+        console.log(res)
+        if(res.data.code == 200) {
+          let rootData = res.data.data
+          rootData.forEach((element,index) => {
+            this.tableDataX.push(`第${index + 1}次`)
+            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

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

src/components/common/header.vue

+<!-- 顶部信息栏 -->
+<template>
+  <header id="topbar">
+    <el-row>
+      <el-col :span="4" class="topbar-left">
+        <span class="title" @click="index()">考试后台管理</span>
+      </el-col>
+      <el-col :span="20" class="topbar-right">
+        <i class="el-icon-menu" @click="toggle()"></i>
+        <div class="user">
+          <span>{{user.userName}}</span>
+          <img src="@/assets/img/userimg.png" class="user-img" ref="img" @click="showSetting()" />
+          <transition name="fade">
+            <div class="out" ref="out" v-show="login_flag">
+              <ul>
+                <li><a href="javascript:;">用户信息</a></li>
+                <li><a href="javascript:;">设置</a></li>
+                <li class="exit" @click="exit()"><a href="javascript:;">退出登录</a></li>
+              </ul>
+            </div>
+          </transition>
+        </div>
+      </el-col>
+    </el-row>
+  </header>
+</template>
+
+<script>
+import {mapState,mapMutations} from 'vuex'
+export default {
+  data() {
+    return {
+      login_flag: false,
+      user: { //用户信息
+        userName: null,
+        userId: null
+      } 
+    }
+  },
+  created() {
+    this.getUserInfo()
+  },
+  computed: mapState(["flag","menu"]),
+  methods: {
+    //显示、隐藏退出按钮
+    showSetting() {
+      this.login_flag = !this.login_flag
+    },
+    //左侧栏放大缩小
+    ...mapMutations(["toggle"]),
+    getUserInfo() { //获取用户信息
+      let userName = this.$cookies.get("cname")
+      let userId = this.$cookies.get("cid")
+      this.user.userName = userName
+      this.user.userId = userId
+    },
+    index() {
+      this.$router.push({path: '/index'})
+    },
+    exit() {
+      let role = this.$cookies.get("role")
+      this.$router.push({path:"/"}) //跳转到登录页面
+      this.$cookies.remove("cname") //清除cookie
+      this.$cookies.remove("cid")
+      this.$cookies.remove("role")
+      if(role == 0) {
+        this.menu.pop()
+      }
+    }
+  },
+}
+</script>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+#topbar {
+  position: relative;
+  z-index: 10;
+  background-color: #124280;
+  height: 80px;
+  line-height: 80px;
+  color: #fff;
+  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
+}
+#topbar .topbar-left {
+  height: 80px;
+  display: flex;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+.topbar-left .icon-kaoshi {
+  font-size: 60px;
+}
+.topbar-left .title {
+  font-size: 20px;
+  cursor: pointer;
+}
+.topbar-right {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.topbar-right .user-img {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+.topbar-right .el-icon-menu {
+  font-size: 30px;
+  margin-left: 20px;
+}
+.topbar-right .user {
+  position: relative;
+  margin-right: 40px;
+  display: flex;
+}
+.topbar-right .user .user-img {
+  margin-top: 15px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+.user .out {
+  font-size: 14px;
+  position: absolute;
+  top: 80px;
+  right: 0px;
+  background-color: #fff;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  padding: 12px;
+}
+.user .out ul {
+  list-style: none;
+}
+.user .out ul > li {
+  height: 26px;
+  line-height: 26px;
+}
+.out a {
+  text-decoration: none;
+  color: #000;
+}
+.out .exit {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid #ccc;
+}
+</style>

src/components/common/hello.vue

+<template>
+  <section class="index">
+    <div class="hello">
+      <i class="iconfont icon-xihuan"></i><span>很高兴遇见你,{{user.userName}}老师。</span>
+    </div>
+    <div class="msg">
+      <p class="title">教务公告：</p>
+      <ul>
+        <li @click="openMsg()"><i class="iconfont icon-flag"></i>清明节放假通知</li>
+        <li @click="openMsg()"><i class="iconfont icon-flag"></i>下周例行工作报告会</li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      user: { //用户信息
+        userName: null,
+        userId: null
+      } 
+    }
+  },
+  created() {
+    this.getUserInfo()
+  },
+  methods: {
+    getUserInfo() { //获取用户信息
+      let userName = this.$cookies.get("cname")
+      let userId = this.$cookies.get("cid")
+      this.user.userName = userName
+      this.user.userId = userId
+    },
+    openMsg() {
+      this.$alert('根据《国务院办公厅关于2019年部分节假日安排的通知》精神，越城区行政服务中心将于4月5日（星期五）至4月7日（星期天）进行清明节放假调休，共3天，放假期间不受理业务。4月8日（星期一）开始正常上班受理业务。望市民朋友相互转告，给您带来不便，敬请谅解。','清明节放假通知',{
+        confirmButtonText: '确定'
+      })
+    }
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+.index {
+  margin-left: 70px;
+  .hello {
+    font-size: 20px;
+    color: #726f70;
+    .icon-xihuan {
+      font-size: 30px;
+      color: #dd6572;
+    }
+  }
+  .msg {
+    .title {
+      font-size: 16px;
+      color: #000;
+      margin-top: 20px;
+      margin-left: 10px;
+    }
+    ul {
+      display: flex;
+      flex-direction: column;
+      width: 200px;
+      overflow: hidden;
+    }
+    li {
+      margin-top: 10px;
+      font-size: 14px;
+      color: lightcoral;
+      cursor: pointer;
+      display: inline-block;
+    }
+  }
+}
+</style>
+

src/components/common/jumpLogin.vue

+<!-- 用户登录中转界面 -->
+<template>
+  <div id="login">
+       <h1>考试系统登陆中。。。。。。。。。</h1>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+export default {
+  name: "jumpLogin",
+  data() {
+    return {
+      role: 2,
+      labelPosition: 'left'
+    }
+  },
+  created() {
+    debugger
+    this.login()
+  },
+  methods: {
+    //用户登录请求后台处理
+    login() {
+      console.log("登录操作执行-------");
+      this.$axios({
+        url: `/api/loginYh`,
+        method: 'post'
+      }).then(res=>{
+        let resData = res.data.data
+        if(resData != null) {
+              this.$cookies.set("cname", resData.studentName)
+              this.$cookies.set("cid", resData.studentId)
+              this.$cookies.set("role", resData.role)
+              this.$router.push({path: '/answer?examCode=20190001'})          
+        }
+        if(resData == null) { //错误提示
+          this.$message({
+            showClose: true,
+            type: 'error',
+            message: '用户名或者密码错误'
+          })
+        }
+      })
+    },
+    clickTag(key) {
+      this.role = key
+    }
+  },
+  computed: mapState(["userInfo"]),
+}
+</script>
\ No newline at end of file

src/components/common/login.vue

+<!-- 用户登录界面 -->
+<template>
+  <div id="login">
+    <div class="bg"></div>
+    <el-row class="main-container">
+      <el-col :lg="8" :xs="16" :md="10" :span="10">
+        <div class="top">
+          <i class="iconfont icon-kaoshi"></i><span class="title">在线考试系统</span>
+        </div>
+        <div class="bottom">
+          <div class="container">
+            <p class="title">账号登录</p>
+            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
+              <el-form-item label="用户名">
+                <el-input v-model.number="formLabelAlign.username" placeholder="请输入用户名"></el-input>
+              </el-form-item>
+              <el-form-item label="密码">
+                <el-input v-model="formLabelAlign.password" placeholder="请输入密码" type='password'></el-input>
+              </el-form-item>
+              <div class="submit">
+                <el-button type="primary" class="row-login" @click="login()">登录</el-button>
+              </div>
+              <!-- <div class="options">
+                <p class="find"><a href="javascript:;">找回密码</a></p>
+                <div class="register">
+                  <span>没有账号?</span>
+                  <span><a href="javascript:;">去注册</a></span>
+                </div>
+              </div> -->
+            </el-form>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row class="footer">
+      <el-col>
+      </el-col>
+    </el-row>
+    <section class="remind">
+      <span>管理员账号：9527</span>
+      <span>教师账号：20081001</span>
+      <span>用户账号：20154001</span>
+      <span>密码都是：123456</span>
+    </section>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+export default {
+  name: "login",
+  data() {
+    return {
+      role: 2,
+      labelPosition: 'left',
+      formLabelAlign: {
+        username: '20154084',
+        password: '123456'
+      }
+    }
+  },
+  methods: {
+    //用户登录请求后台处理
+    login() {
+      console.log("登录操作执行-------");
+      this.$axios({
+        url: `/api/login`,
+        method: 'post',
+        data: {
+          ...this.formLabelAlign
+        }
+      }).then(res=>{
+        let resData = res.data.data
+        if(resData != null) {
+          switch(resData.role) {
+            case "0":  //管理员
+              this.$cookies.set("cname", resData.adminName)
+              this.$cookies.set("cid", resData.adminId)
+              this.$cookies.set("role", 0)
+              this.$router.push({path: '/index' }) //跳转到首页
+              break
+            case "1": //教师
+              this.$cookies.set("cname", resData.teacherName)
+              this.$cookies.set("cid", resData.teacherId)
+              this.$cookies.set("role", 1)
+              this.$router.push({path: '/index' }) //跳转到教师用户
+              break
+            case "2": //学生
+              this.$cookies.set("cname", resData.studentName)
+              this.$cookies.set("cid", resData.studentId)
+              this.$router.push({path: '/student'})
+              break
+          }
+        }
+        if(resData == null) { //错误提示
+          this.$message({
+            showClose: true,
+            type: 'error',
+            message: '用户名或者密码错误'
+          })
+        }
+      })
+    },
+    clickTag(key) {
+      this.role = key
+    }
+  },
+  computed: mapState(["userInfo"]),
+  mounted() {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.remind {
+  border-radius: 4px;
+  padding: 10px 20px;
+  display: flex;
+  position: fixed;
+  right: 20px;
+  bottom: 50%;
+  flex-direction: column;
+  color: #606266;
+  background-color: #fff;
+  border-left: 4px solid #409eff;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
+}
+.container {
+  margin-bottom: 32px;
+}
+.container .el-radio-group {
+  margin: 30px 0px;
+}
+a:link {
+  color:#ff962a;
+  text-decoration:none;
+}
+#login {
+  font-size: 14px;
+  color: #000;
+  background-color: #fff;
+}
+#login .bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  overflow-y: auto;
+  height: 100%;
+  background: url('../../assets/img/loginbg.png')center top / cover no-repeat;
+  background-color: #b6bccdd1 !important;
+}
+#login .main-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#login .main-container .top {
+  margin-top: 100px;
+  font-size: 30px;
+  color: #ff962a;
+  display: flex;
+  justify-content: center;
+}
+#login .top .icon-kaoshi {
+  font-size: 80px;
+}
+#login .top .title {
+  margin-top: 20px;
+}
+#login .bottom {
+  display:flex;
+  justify-content: center;
+  background-color:#fff;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+#login .bottom .title {
+  text-align: center;
+  font-size: 30px;
+}
+.bottom .container .title {
+  margin: 30px 0px;;
+}
+.bottom .submit .row-login {
+  width: 100%;
+  background-color: #04468b;
+  border-color: #04468b;
+  margin: 20px 0px 10px 0px;
+  padding: 15px 20px;
+}
+.bottom .submit {
+  display: flex;
+  justify-content: center;
+}
+.footer {
+  margin-top: 50px;
+  text-align: center;
+}
+.footer .msg1 {
+  font-size: 18px;
+  color: #fff;
+  margin-bottom: 15px;
+}
+.footer .msg2 {
+  font-size: 14px;
+  color: #e3e3e3;
+  margin-top: 70px;
+}
+.bottom .options {
+  margin-bottom: 40px;
+  color: #ff962a;
+  display: flex;
+  justify-content: space-between;
+}
+.bottom .options > a {
+  color: #ff962a;
+}
+.bottom .options .register span:nth-child(1) {
+  color: #8C8C8C;
+}
+</style>

src/components/common/mainLeft.vue

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

src/components/common/mainTop.vue

+<!--顶部面包屑导航-->
+<template>
+  <div class="bar">
+    
+  </div>
+</template>
\ No newline at end of file

src/components/common/navigator.vue

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

src/components/student/answerScore.vue

+<template>
+  <div class="score">
+    <div class="title">
+      <p class="name">刑侦总队-"刑侦百科"</p>
+      <!-- <p class="description">(总分：36分)</p> -->
+    </div>
+    <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>
+        <div class="final" @click="over()">结束考试</div>
+      </ul>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isTransition: false, //是否渲染完成
+      score: 0, //总分
+      imgShow: false, //不及格图片显示
+      imgSrc: {
+        fail1: require("@/assets/img/cry1.gif"),
+        fail2: require('@/assets/img/cry2.jpg'),
+        pass1: require('@/assets/img/good1.jpg'),
+        pass2: require('@/assets/img/good2.gif')
+      },
+      startTime: null, //考试开始时间
+      endTime: null, //考试结束时间
+    }
+  },
+  created() {
+    this.transiton()
+    this.getScore()
+  },
+  methods: {
+    transiton() {  //一秒后过渡
+      setTimeout(() => {
+        this.isTransition = true
+        this.imgShow = 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
+    },
+    over() { //跳转总队公安网
+      window.open("http://www.xz.cq/#/home","_self")
+    }
+  }
+}
+</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;
+  }
+}
+.final {
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+  margin: 20px 0px;
+  border-radius: 4px;
+  height: 40px;
+  line-height: 30px;
+  color: #fff;
+  margin-top: 22px;
+  background-color: #2776df;
+}
+.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: #fff;
+      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

+// 点击试卷后的缩略信息
+<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)">开始答题</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" class="stitle" >
+            <div class="title">
+              <span>{{examData.source}}</span><i class="header-icon el-icon-info"></i>
+              <span class="time">{{examData.totalScore}}分 / {{examData.totalTime}}分钟</span>
+              <el-button type="primary" size="small">点击查看试题详情</el-button>
+            </div>
+          </template>
+          <el-collapse class="inner">
+            <el-collapse-item>
+              <template slot="title" name="1">
+                <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" name="2">
+                <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" name="3">
+                <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

+<!--学生考试首页-->
+<template>
+<div class="bg">
+  <div id="student">
+    <el-row class="padding-50">
+      <el-col :span="24">
+        <ul class="list">
+          <!-- <li><a href="javascript:;" @click="exam()">我的试卷</a></li> -->
+          <!-- <li><a href="javascript:;" @click="practice()">我的练习</a></li> -->
+          <li><router-link to="/scoreTable">我的分数</router-link></li>
+          <li><router-link to="/scoreTjTable">我的分数统计</router-link></li>
+          <li  v-if="roleflag"><router-link to="/scoreDwTjTable">单位分数统计</router-link></li>
+          <li class="right">
+            {{user.userName}}
+<!--            <div class="final" @click="over()">结束考试</div>-->
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+    <!--路由区域-->
+    <div class="main">
+      <router-view></router-view>
+    </div>
+    <v-footer></v-footer>
+  </div>
+  </div>
+</template>
+
+<script>
+import myFooter from "@/components/student/myFooter"
+import {mapState} from 'vuex'
+export default {
+  components: {
+    "v-footer": myFooter
+  },
+  data() {
+    return {
+      flag: false,
+      user: {},
+      roleflag: false
+    }
+  },
+  created() {
+    this.userInfo()
+  },
+  methods: {
+    exit() {  //退出登录
+      this.$router.push({path:"/"}) //跳转到登录页面
+      this.$cookies.remove("cname") //清除cookie
+      this.$cookies.remove("cid")
+    },
+    manage() {  //跳转到修改密码页面
+      this.$router.push({path: '/manager'})
+    },
+    userInfo() {
+      let role = this.$cookies.get("role")
+      debugger
+      if(role == "0"){
+      this.roleflag = true;
+      }
+      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'})
+    },
+    over() { //跳转总队公安网
+      window.open("http://www.xz.cq/#/home","_self")
+    }
+  },
+  computed:mapState(["isPractice"])
+}
+</script>
+
+<style scoped>
+.right .icon {
+  margin-right: 0px;
+}
+#student .padding-50 {
+  margin: 0 auto;
+  padding: 0 50px;
+  box-shadow: 0 0 10px 4px rgba(1,149,255,0.1);
+  color: #fff;
+}
+.list a {
+  text-decoration: none;
+  color: #fff;
+}
+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;
+}
+.bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  overflow-y: auto;
+  height: 100%;
+  background: url('../../assets/img/dtbj.png')center top / cover no-repeat;
+  background-color: #b6bccdd1 !important;
+}
+.final {
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+  margin: 20px 0px;
+  border-radius: 4px;
+  line-height: 30px;
+  color: #fff;
+  margin-top: 22px;
+  background-color: #2776df;
+}
+</style>

src/components/student/manager.vue

+<!--管理中心-->
+<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>
\ No newline at end of file

src/components/student/message.vue

+// 给我留言页面
+<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">Comment</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

+// 我的试卷页面
+<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

+<!--页脚部分-->
+<template>
+  <footer id="footer">
+    <ul>
+      
+    </ul>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "myFooter"
+}
+</script>
+
+<style scoped>
+#footer a {
+  color: #919698;
+  font-size: 14px;
+}
+
+#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/scoreDwTjTable.vue

+//显示学生成绩
+<template>
+  <div class="table">
+    <p class="title">单位分数统计</p>
+    <download-excel style="margin-right: 10px;" class="export-excel-wrapper" :data="scoreTj" :fields="json_fields"  name="单位分数统计.xls">
+	<el-button >导 出</el-button>
+</download-excel>	
+    <section class="content-el">
+      <el-table ref="filterTable" :data="scoreTj" v-loading="loading">
+        <el-table-column prop="clazz" label="单位" width="400" show-overflow-tooltip="true">
+        <template slot-scope="scope">
+         <el-button  @click="handleClazzClick(scope.row)" style="padding:0">
+                     {{ scope.row.clazz }}
+         </el-button>
+        </template>
+        </el-table-column>
+        <el-table-column prop="rycount" label="答题人数" width="200"></el-table-column>
+        <el-table-column prop="count" label="答题次数" width="200"></el-table-column>
+        <el-table-column prop="right" label="答题正确率" width="200"></el-table-column>
+        <el-table-column prop="countsum" label="总成绩" width="200"></el-table-column>
+      </el-table>
+    </section>
+     <el-dialog
+    :title="titleDialog"
+    :visible.sync="openDialog"
+    width="850px"
+    class="dialogLand"
+    append-to-body
+>
+      <el-table ref="filterTable" :data="scoreTjXq" v-loading="loadingDialog">
+        <el-table-column prop="studentId" label="ip" width="150"></el-table-column>
+        <el-table-column prop="studentName" label="姓名" width="150"></el-table-column>
+        <el-table-column prop="count" label="答题次数" width="150"></el-table-column>
+        <el-table-column prop="dtcount" label="答题量" width="150"></el-table-column>
+        <el-table-column prop="right" label="答题正确率" width="150"></el-table-column>
+        <el-table-column prop="countsum" label="总成绩" width="150"></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="[5,10]"
+          :page-size="pagination.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total">
+        </el-pagination>
+      </el-row>
+</el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pagination: { //分页后的留言列表
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 5 //每页条数
+      },
+      loading: false, //加载标识符
+      scoreTj: [], //单位成绩TJ
+      filter: null, //过滤参数
+       // 遮罩层
+      loadingDialog: true,
+      // 弹出层标题
+      titleDialog: "",
+      // 是否显示弹出层
+      openDialog: false,
+      scoreTjXq:[],
+      // 单位
+      clazz:null,
+      json_fields: { // 导出对应表格头部以及数据
+			  "单位":'clazz',
+				"答题人数":'rycount',
+				"答题次数":'count',
+				"答题正确率":'right',
+				"总成绩":'countsum',
+			}
+    }
+  },
+  created() {
+    this.getScoreTj()
+    this.loading = true //数据加载则遮罩表格
+  },
+  methods: {
+    getScoreTj() {
+      let studentId = this.$cookies.get("cid")
+      this.$axios(`/api/scoreDwTj`).then(res => {
+        debugger
+        if(res.data.code == 200) {
+          this.loading = false //数据加载完成去掉遮罩
+          this.scoreTj = res.data.data
+        }
+      })
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.nextClazzClick(this.clazz)
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.nextClazzClick(this.clazz)
+    },
+    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;
+    },
+    // 某列单位点击
+    handleClazzClick(row) {
+      this.openDialog=true;
+      this.titleDialog="详情"
+      this.clazz = row;
+      this.pagination = { //分页后的留言列表
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 5 //每页条数
+      },
+      this.$axios(`/api/scoreDwTsTj/${this.pagination.current}/${this.pagination.size}/${row.clazz}`).then(res => {
+        this.loadingDialog = false
+        this.scoreTjXq=res.data.data.records
+        this.pagination = {...res.data.data}
+      })
+    },
+    // 下一页请求
+    nextClazzClick(row) {
+      this.clazz = row;
+      this.$axios(`/api/scoreDwTsTj/${this.pagination.current}/${this.pagination.size}/${row.clazz}`).then(res => {
+        this.loadingDialog = false
+        this.scoreTjXq=res.data.data.records
+        this.pagination = {...res.data.data}
+      })
+    },
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.pagination {
+  padding-top: 20px;
+}
+.table {
+  width: 1100px;
+  margin: 0 auto;
+  .title {
+    margin: 20px;
+    color: #fff;
+  }
+  .content-el {
+    background-color: #fff;
+    padding: 20px;
+  }
+}
+</style>

src/components/student/scoreTable.vue

+//显示学生成绩
+<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="250"
+          column-key="answerDate"
+          :filters="filter"
+          :filter-method="filterHandler">
+        </el-table-column>
+        <el-table-column
+          prop="subject"
+          label="试题名称"
+          width="300"
+          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="200"></el-table-column>
+        <!-- <el-table-column label="是否及格" width="100">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.etScore>= 6 ? 'success' : 'danger'">{{scope.row.etScore >= 6 ? "及格" : "不及格"}}</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: 800px;
+  margin: 0 auto;
+  .title {
+    margin: 20px;
+    color: #fff;
+  }
+  .content-el {
+    background-color: #fff;
+    padding: 20px;
+  }
+}
+</style>

src/components/student/scoreTjTable.vue

+//显示学生成绩
+<template>
+  <div class="table">
+    <p class="title">我的分数统计</p>
+    <section class="content-el">
+      <el-table ref="filterTable" :data="scoreTj" v-loading="loading">
+        <el-table-column prop="count" label="答题次数" width="200"></el-table-column>
+        <el-table-column
+          prop="dtcount"
+          label="答题量"
+          width="200">
+        </el-table-column>
+        <el-table-column prop="right" label="答题正确率" width="200"></el-table-column>
+        <el-table-column prop="countsum" label="总成绩" width="200"></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: 1, //记录条数
+        size: 10 //每页条数
+      },
+      loading: false, //加载标识符
+      scoreTj: [], //学生成绩TJ
+      filter: null //过滤参数
+    }
+  },
+  created() {
+    this.getScoreTj()
+    this.loading = true //数据加载则遮罩表格
+  },
+  methods: {
+    getScoreTj() {
+      let studentId = this.$cookies.get("cid")
+      this.$axios(`/api/scoreTj/${studentId}`).then(res => {
+        debugger
+        if(res.data.code == 200) {
+          this.loading = false //数据加载完成去掉遮罩
+          this.scoreTj = res.data.data
+        }
+      })
+    },
+    //改变当前记录条数
+    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: 850px;
+  margin: 0 auto;
+  .title {
+    margin: 20px;
+    color: #fff;
+  }
+  .content-el {
+    background-color: #fff;
+    padding: 20px;
+  }
+}
+</style>

src/components/student/startExam.vue

+// 我的考试页面
+<template>
+  <div id="myExam">
+    <div class="title">我的练习</div>
+    <div class="wrapper">
+      <ul class="top">
+        <li class="order">
+            <span>全部</span>
+        </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;
+}
+.wrapper .top .order {
+  cursor: pointer;
+}
+.wrapper .top .order:hover {
+  color: #0195ff;
+  border-bottom: 2px solid #0195ff;
+}
+.wrapper .top .order:visited {
+  color: #0195ff;
+  border-bottom: 2px solid #0195ff;
+}
+.item .info i {
+  margin-right: 5px;
+  color: #0195ff;
+}
+.item .info span {
+  margin-right: 14px;
+}
+.paper .item {
+  border-radius: 4px;
+  padding: 20px 30px;
+  border: 1px solid #eee;
+  box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
+  transition: all 0.6s ease;
+}
+.paper .item:hover {
+  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45)
+}
+.paper .item .info {
+  font-size: 14px;
+  color: #88949b;
+}
+.paper .item .name {
+  font-size: 14px;
+  color: #88949b;
+}
+.paper * {
+  margin: 20px 0;
+}
+.wrapper .paper {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+.top .el-icon-search {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.top .icon {
+  position: relative;
+}
+.wrapper .top {
+  border-bottom: 1px solid #eee;
+}
+#myExam .search-li {
+  margin-left: auto;
+}
+.top .search-li {
+  margin-left: auto;
+}
+.top li {
+  display: flex;
+  align-items: center;
+}
+.top .search {
+  margin-left: auto;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+.top .search:hover {
+  color: #0195ff;
+  border-color: #0195ff;
+}
+.wrapper .top {
+  display: flex;
+}
+.wrapper .top li {
+  margin: 20px;
+}
+#myExam {
+  width: 980px;
+  margin: 0 auto;
+}
+#myExam .title {
+  margin: 20px;
+}
+#myExam .wrapper {
+  background-color: #fff;
+}
+</style>

src/components/teacher/addAnswer.vue

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

src/components/teacher/addExam.vue

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

src/components/teacher/addStudent.vue

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

src/components/teacher/allStudentsGrade.vue

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

src/components/teacher/answerDescription.vue

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

src/components/teacher/examDescription.vue

+<!-- 考试管理功能介绍 -->
+<template>
+  <section class="description">
+    <p class="title">考试管理功能介绍</p>
+    <p class="content">老师发布了考试,学生才可以在主页面看到相应的考试信息。
+    </p>
+  </section>
+</template>
+
+<style lang="less" scoped>
+.description {
+  margin-left: 40px;
+  .title {
+    font-size: 22px;
+    font-weight: 400;
+    color: rgb(31, 47, 61);
+  }
+  .content {
+    width: 600px;
+    background-color: rgb(236, 248, 255);
+    padding: 16px 32px;
+    border-radius: 4px;
+    border-left: 5px solid rgb(80, 191, 255);
+    margin: 20px 0px;
+  }
+}
+</style>

src/components/teacher/selectAnswer.vue

+//查询所有题库
+<template>
+  <div class="exam">
+    <el-table :data="pagination.records" border :row-class-name="tableRowClassName">
+      <el-table-column fixed="left" prop="subject" label="试卷名称" width="180"></el-table-column>
+      <el-table-column prop="question" label="题目信息" width="490"></el-table-column>
+      <el-table-column prop="section" label="所属章节" width="200"></el-table-column>
+      <el-table-column prop="type" label="题目类型" width="200"></el-table-column>
+      <el-table-column prop="score" label="试题分数" width="150"></el-table-column>
+      <el-table-column prop="level" label="难度等级" width="133"></el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[6, 10]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total"
+      class="page"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pagination: {
+        //分页后的考试信息
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 6 //每页条数
+      }
+    };
+  },
+  created() {
+    this.getAnswerInfo();
+  },
+  methods: {
+    getAnswerInfo() {
+      //分页查询所有试卷信息
+      this.$axios(
+        `/api/answers/${this.pagination.current}/${this.pagination.size}`
+      )
+        .then(res => {
+          this.pagination = res.data.data;
+          console.log(res);
+        })
+        .catch(error => {});
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val;
+      this.getAnswerInfo();
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val;
+      this.getAnswerInfo();
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 == 0) {
+        return "warning-row";
+      } else {
+        return "success-row";
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.exam {
+  padding: 0px 40px;
+  .page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .edit {
+    margin-left: 20px;
+  }
+  .el-table tr {
+    background-color: #DD5862 !important;
+  }
+}
+  .el-table .warning-row {
+    background: #000 !important;
+    
+  }
+
+  .el-table .success-row {
+    background: #DD5862;
+  }
+
+</style>

src/components/teacher/selectExam.vue

+//查询所有考试
+<template>
+  <div class="exam">
+    <el-table :data="pagination.records" border>
+      <el-table-column fixed="left" prop="source" label="试卷名称" width="180"></el-table-column>
+      <el-table-column prop="description" label="介绍" width="200"></el-table-column>
+      <el-table-column prop="institute" label="所属学院" width="120"></el-table-column>
+      <el-table-column prop="major" label="所属专业" width="200"></el-table-column>
+      <el-table-column prop="grade" label="年级" width="100"></el-table-column>
+      <el-table-column prop="examDate" label="考试日期" width="120"></el-table-column>
+      <el-table-column prop="totalTime" label="持续时间" width="120"></el-table-column>
+      <el-table-column prop="totalScore" label="总分" width="120"></el-table-column>
+      <el-table-column prop="type" label="试卷类型" width="120"></el-table-column>
+      <el-table-column prop="tips" label="考生提示" width="400"></el-table-column>
+      <el-table-column fixed="right" label="操作" width="150">
+        <template slot-scope="scope">
+          <el-button @click="edit(scope.row.examCode)" type="primary" size="small">编辑</el-button>
+          <el-button @click="deleteRecord(scope.row.examCode)" type="danger" size="small">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[4, 8, 10, 20]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total" class="page">
+    </el-pagination>
+    <!-- 编辑对话框-->
+    <el-dialog
+      title="编辑试卷信息"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose">
+      <section class="update">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="试卷名称">
+            <el-input v-model="form.source"></el-input>
+          </el-form-item>
+          <el-form-item label="介绍">
+            <el-input v-model="form.description"></el-input>
+          </el-form-item>
+          <el-form-item label="所属学院">
+            <el-input v-model="form.institute"></el-input>
+          </el-form-item>
+          <el-form-item label="所属专业">
+            <el-input v-model="form.major"></el-input>
+          </el-form-item>
+          <el-form-item label="年级">
+            <el-input v-model="form.grade"></el-input>
+          </el-form-item>
+          <el-form-item label="考试日期">
+            <el-col :span="11">
+              <el-date-picker type="date" placeholder="选择日期" v-model="form.examDate" style="width: 100%;"></el-date-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="持续时间">
+            <el-input v-model="form.totalTime"></el-input>
+          </el-form-item>
+          <el-form-item label="总分">
+            <el-input v-model="form.totalScore"></el-input>
+          </el-form-item>
+          <el-form-item label="试卷类型">
+            <el-input v-model="form.type"></el-input>
+          </el-form-item>
+          <el-form-item label="考生提示">
+            <el-input type="textarea" v-model="form.tips"></el-input>
+          </el-form-item>
+        </el-form>
+      </section>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submit()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {}, //保存点击以后当前试卷的信息
+      pagination: { //分页后的考试信息
+        current: 1, //当前页
+        total: null, //记录条数
+        size: 4 //每页条数
+      },
+      dialogVisible: false
+    }
+  },
+  created() {
+    this.getExamInfo()
+  },
+  methods: {
+    edit(examCode) { //编辑试卷
+      this.dialogVisible = true
+      this.$axios(`/api/exam/${examCode}`).then(res => { //根据试卷id请求后台
+        if(res.data.code == 200) {
+          this.form = res.data.data
+        }
+      })
+    },
+    handleClose(done) { //关闭提醒
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        }).catch(_ => {});
+    },
+    submit() { //提交修改后的试卷信息
+      this.dialogVisible = false
+      this.$axios({
+        url: '/api/exam',
+        method: 'put',
+        data: {
+          ...this.form
+        }
+      }).then(res => {
+        if(res.data.code == 200) {
+          this.$message({ //成功修改提示
+            message: '更新成功',
+            type: 'success'
+          })
+        }
+        this.getExamInfo()
+      })
+    },
+    deleteRecord(examCode) {
+      this.$confirm("确定删除该记录吗,该操作不可逆！！！","删除提示",{
+        confirmButtonText: '确定删除',
+        cancelButtonText: '算了,留着',
+        type: 'danger'
+      }).then(()=> { //确认删除
+        this.$axios({
+          url: `/api/exam/${examCode}`,
+          method: 'delete',
+        }).then(res => {
+          this.getExamInfo()
+        })
+      }).catch(() => {
+
+      })
+    },
+    getExamInfo() { //分页查询所有试卷信息
+      this.$axios(`/api/exams/${this.pagination.current}/${this.pagination.size}`).then(res => {
+        this.pagination = res.data.data
+      }).catch(error => {
+      })
+    },
+    //改变当前记录条数
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getExamInfo()
+    },
+    //改变当前页码，重新发送请求
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getExamInfo()
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.exam {
+  padding: 0px 40px;
+  .page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .edit{
+    margin-left: 20px;
+  }
+}
+</style>

src/components/teacher/selectExamToPart.vue

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

src/components/teacher/studentManage.vue

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