Hello everyone, I'm Brother Feng. I saw a good springboot+vue student course selection management system with front and back ends separated. Let me share it.

Project Introduction

This is a project developed with front-end and back-end separation. The front-end is developed with Vue, and the back-end is developed with SpringBoot + Mybatis.

project deployment

1. Import studentms.sql into the mysql database

2. Run the front-end webstorm to import student_client and run

3. Run the backend idea to import student_server

Project display

1. Login interface

2. admin main interface

3. Dynamic search box and table display

4. Display of the home page of the student terminal

5. Search and edit teacher grades

front end

1. Project operation

Due to the large number of new attributes such as ES6/7 involved, 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("/student")
public class StudentController {
    @Autowired
    private StudentService studentService;

    @PostMapping("/addStudent")
    public boolean addStudent(@RequestBody Student student) {
        System.out.println("正在保存学生对象" + student);
        return studentService.save(student);
    }

    @PostMapping("/login")
    public boolean login(@RequestBody Student student) {
        System.out.println("正在验证学生登陆 " + student);
        Student s = studentService.findById(student.getSid());
        if (s == null || !s.getPassword().equals(student.getPassword())) {
            return false;
        }
        else {
            return true;
        }
    }

    @PostMapping("/findBySearch")
    public List<Student> findBySearch(@RequestBody Student student) {
        Integer fuzzy = (student.getPassword() == null) ? 0 : 1;
        return studentService.findBySearch(student.getSid(), student.getSname(), fuzzy);
    }

    @GetMapping("/findById/{sid}")
    public Student findById(@PathVariable("sid") Integer sid) {
        System.out.println("正在查询学生信息 By id " + sid);
        return studentService.findById(sid);
    }

    @GetMapping("/findByPage/{page}/{size}")
    public List<Student> findByPage(@PathVariable("page") int page, @PathVariable("size") int size) {
        System.out.println("查询学生列表分页 " + page + " " + size);
        return studentService.findByPage(page, size);
    }

    @GetMapping("/getLength")
    public Integer getLength() {
        return studentService.getLength();
    }

    @GetMapping("/deleteById/{sid}")
    public boolean deleteById(@PathVariable("sid") int sid) {
        System.out.println("正在删除学生 sid：" + sid);
        return studentService.deleteById(sid);
    }

    @PostMapping("/updateStudent")
    public boolean updateStudent(@RequestBody Student student) {
        System.out.println("更新 " + student);
        return studentService.updateById(student);
    }
}

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