I. Introduction to the examination system

A new SpringBoot +Vue test system, support a variety of questions: multiple choice, multiple choice, judgment, fill-in-the-blank, comprehensive and mathematical formulas. Support online exams, teachers mark papers online.

Ii. Project structure

Back-end technology stack

  • SpringBoot: SpringBoot is a new framework provided by the Pivotal team that is designed to simplify the creation, running, debugging, and deployment of Spring applications.
  • Mybatis: a persistence layer framework that interacts with databases to persist data to relational databases
  • Shiro: A powerful and easy-to-use Java security framework for authentication, authorization, encryption, and session management that can be used to protect any application – from command line applications and mobile applications to large Web and enterprise applications.
  • Mysql: a lightweight relational database management system developed by mysql AB and currently owned by Oracle.
  • Redis: a completely open source, free, BSD compliant, high performance key-value database.

The front-end technology

  • Vue: A set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up.
  • Vuex: A state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way.
  • Element-ui: A Vue 2.0-based desktop component library for developers, designers, and product managers.
  • Vue-router: vue. js official route manager.
  • Axios: A Promise-based HTTP library that can be used in browsers and Node.js.

Test system as a whole for the front and back end of the separation project, the author on this basis, the back end is divided into two administrators and students test back end, back end code is together. The front end does a similar split, so it’s really two back-end projects, two front-end projects. This article first talk about the students test part of the back end of the environment. Functions include: students to do course questions online, online examination, error questions this function record, examination record, personal center.

The back-end project address The back-end project address: https://gitee.com/zhuimengshaonian/wisdom-education

  • Administrator background: education-admin-API
  • Background: education-student-API

Front-end project address

  • Administrator front-end: https://gitee.com/zhuimengshaonian/wisdom-education-admin-front
  • Students examination front end: https://gitee.com/zhuimengshaonian/wisdom-education-front

Third, in actual combat

3.1 Back-end Services

Download the project

git clone https://gitee.com/zhuimengshaonian/wisdom-education.git
Copy the code

Initialize the database create the database education, execute the database script. Here the database script is in the project’s DB directory.

SQL # initialize table structure init-data. SQL # initialize table structureCopy the code

The system_log table is missing a field request_URL of type VARCHAR (100). To modify the configuration, read the project configuration file and see the prod configuration file used by the project. Therefore, we can directly look at the application-prod.yml file. Here we focus on the database connection and add the redis configuration.

Server: port: 8001 # server port servlet: context-path: / #spring JDBC configuration Spring: #redis: jedis: pool: max-active: 8 max-wait: 30 max-idle: 8 min-idle: 0 port: 6379 host: localhost password: 123456 # jdbc:mysql://localhost:3306/education? serverTimezone=GMT%2B8&useSSL=true&useUnicode=true&characterEncoding=utf8 username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.DriverCopy the code

Run the Application

runEducationStudentApiApplicationClass to start back-end services locally.

3.2 Front-end Service

Download the project

git clone https://gitee.com/zhuimengshaonian/wisdom-education-front.git
Copy the code

Use VSCode to open the front-end project. Here I use config/index.js. Here I mainly modify the proxyTable content:

proxyTable: {
      '/proxyApi': {
          target: 'http://localhost:8001'.            changeOrigin: true.            pathRewrite: {
 '/proxyApi': 'http://localhost:8001'  }  }  } Copy the code

To run the project locally, run the following command from a command line window, or from VSCode’s terminal.

npm install # install dependencies
npm run dev Start the development environment, default http://localhost:8080/
Copy the code

To deploy the project on the server side, execute the following package command and then deploy using the Web container.

npm run build # Project packaging
npm run build --report Package the project and output the analysis report
Copy the code

3.3 Running Effect

Browser accesshttp://localhost:8080Default user password: student 123456 Operation effect:

Four, the last

The project has the basic functions of the examination system. This section describes the construction of the front and back end of the students’ examination. Another important part is the administrator front-end project, I am not specialized in front-end, I have not solved the administrator front-end project, I have encountered a lot of problems in the process of trying, FAQ to make a record. In fact, the problem is not terrible, rational use of search engine + open brain thinking function, the way is more than difficult! I’m sure the problem can be solved. The next part is about the construction of the front and back end of the administrator part of the examination system.

FAQ

  • NPM install Error: Can’t find Python executable “Python “, you Can set the Python env variable Solution: Run the NPM install -g windows-build-tools command
  • 2. NPM install displays an error message: MSBUILD: error MSB4132: Cannot identify tool version 2.0. The available tool version is 4.0. The solution: https://blog.csdn.net/sunxiaoju/article/details/102567548
  • 3. A Node-sass error occurs when the front-end project is installed in Windows. NPM install [email protected] –save
  • 4.Vue Packages Version Mismatch :[email protected], [email protected]. Solution: Keep the same version: NPM install [email protected] –save
  • 5.How to fix ReferenceError: Primordials is not defined in node. Solution: NPM -g install gulp-cli

Restless ape man
Continuous technology sharing!