springboot+vue student course selection management system

Project Introduction This is a project that adopts front-end and back-end separate development. The front-end is developed with Vue, and the back-end is developed with SpringBoot + Mybatis.

project deployment

1. Import studentms.sql into mysql database

2. Run the front-end webstorm import student_client run

3. Run the backend idea to import student_server

Project display

Student home page display

Course selection:

After selecting a course, you can check the class schedule to see:

Teacher menu

front end

1. Project operation

Due to a large number of new attributes such as ES6/7, node requires version 6.0 or higher

2. Technology stack

Vuex

Router

Axios

Element ui

sessionStorage

3. Project introduction

Developed with Vue 2.0, the dynamic rendering of data is realized by calling the data interface provided by the backend. Project default port number 8080

Use the monitor, thanks to the powerful dynamic SQL function of Mybatis, to achieve high-performance dynamic search function

Use router to configure routing to achieve dynamic rendering of navigation bars for different user types

Use axios to asynchronously load backend data

Use element ui to realize the front-end verification function of the form

Use sessionStorage to implement login interception

Implemented the data paging function based on front-end and back-end respectively

4. System functions

1、admin

Realize CRUD for teachers, students and courses

Realize all-round control over teacher business and student business

2、teacher

Realize the query of the courses I offer and the information of the students who choose my courses

Login to Student Grades

3、student

Realize the function of course selection and withdrawal

Realize the function of querying results

backend part

1. Project operation

JDK version needs 1.8 or above

2. Technology stack

Spring boot 2.6.3

My shoe

Maven

3. Project introduction

It is developed in Restful style and uses CrossOrigin to solve cross-domain problems. Use annotations and xml files to configure SQL statements to realize the function of dynamic SQL and provide a complete data interface for the front end.

Since the vue project occupies the default Tomcat port of 8080, the specified project starts at port 10086, which can be configured with a YAML file and packaged with a Maven project.

4. System functions

Realize all data interfaces of front-end Ajax requests, and Get requests are developed in RESTful style.

Database Design

part of the code

@RestController
@CrossOrigin("*")
@RequestMapping("/course")
public class CourseController {
    @Autowired
    private CourseService courseService;

    @PostMapping("/findBySearch")
    public List<Course> findBySearch(@RequestBody Map<String, String> map) {
        return courseService.findBySearch(map);
    }

    @GetMapping("/findById/{cid}")
    public List<Course> findById(@PathVariable Integer cid) {
        return courseService.findBySearch(cid);
    }

    @PostMapping("/save")
    public boolean save(@RequestBody Course course) {
        System.out.println(course);
        return courseService.insertCourse(course);
    }

    @GetMapping("/deleteById/{cid}")
    public boolean deleteById(@PathVariable Integer cid) {
        System.out.println("正在删除课程 cid: " + cid);
        return courseService.deleteById(cid);
    }

    @PostMapping("/updateCourse")
    public boolean updateCourse(@RequestBody Course course) {
        System.out.println("正在修改课程: " + course);
        return courseService.updateById(course);
    }

}

The mybatis used in the background does not use MP, and the back-end port is 10086. The request sent by the front-end axios is a hard-coded back-end address, which has room for optimization.

<template>
  <div>
    <el-form style="width: 60%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="课程名" prop="cname">
        <el-input v-model="ruleForm.cname"></el-input>
      </el-form-item>
      <el-form-item label="学分" prop="ccredit">
        <el-input v-model.number="ruleForm.ccredit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="test">test</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        cname: null,
        ccredit: null
      },
      rules: {
        cname: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        ccredit: [
          { required: true, message: '请输入学分', trigger: 'change' },
          { type: 'number', message: '请输入数字', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 通过前端校验
          const that = this
          // console.log(this.ruleForm)
 
          axios.post("http://localhost:10086/course/save", this.ruleForm).then(function (resp) {
            console.log(resp)
            if (resp.data === true) {
              that.$message({
                showClose: true,
                message: '插入成功',
                type: 'success'
              });
            }
            else {
              that.$message.error('插入失败，请检查数据库t');
            }
            that.$router.push("/queryCourse")
          })
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    test() {
      console.log(this.ruleForm)
    }
  }
}
</script>

The front end is a relatively standard vue page.

Generally speaking, it is a relatively good system with great learning value!