Java Project Student Management System 3 Adding Students

​ Welcome to this blog. Yesterday we learned about querying all. Today we will explore an exciting topic - the student addition function of the Java project student management system. As one of the key functions of a student management system, the student addition module acts as a bridge between educators and student information. Through this article, we will gain an in-depth understanding of how to implement this function through the Java programming language, allowing you to manage student information more efficiently.

Add students

analyze

Insert image description here

Added: backend

1)Service
  • interface

    Insert image description here

        /**
         * 添加学生
         * @param student
         * @return
         */
        Boolean save(Student student);
    
  • Implementation class

    Insert image description here

    @Override
        public Boolean save(Student student) {
          
          
            //1 保存基本信息
            int result = studentMapper.insert(student);
            //TODO 2 保存关联数据
    
    
            return result == 1;
        }
    
2)Controller

Insert image description here

    @PostMapping
    public ResponseEntity<String> add(@RequestBody Student student) {
    
    
        //添加
        boolean result = studentService.save(student);
        //处理结果
        if(result) {
    
    
            return ResponseEntity.ok("添加成功");
        }
        return ResponseEntity.ok("添加失败");
    }

Added: frontend

Insert image description here

<template>
  <div>
    <el-form ref="form" :model="student" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="student.sname"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="student.age"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="student.gender">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker type="date" v-model="student.birthday" value-format="yyyy-MM-dd" placeholder="选择您的生气" ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addStudent">添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    {
   
   {student}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {}
    }
  },
  methods: {
    async addStudent() {
      let { data } = await this.$http.post('/student', this.student)
      //提示
      this.$message.success(data)
      //this.$message.error(data) //失败
      //跳转到列表页面
      this.$router.push('/studentList')
    }
  },
}
</script>

<style>

</style>

Class List: Frontend

Insert image description here

<template>
  <div>
    <el-form ref="form" :model="student" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="student.sname"></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-select v-model="student.cid" clearable placeholder="请选择班级">
          <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="student.age"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="student.gender">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker type="date" v-model="student.birthday" value-format="yyyy-MM-dd" placeholder="选择您的生气" ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addStudent">添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    {
   
   {student}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {},
      classesList: [],    //所有班级
    }
  },
  methods: {
    async addStudent() {
      let { data } = await this.$http.post('/student', this.student)
      //提示
      this.$message.success(data)
      //this.$message.error(data) //失败
      //跳转到列表页面
      this.$router.push('/studentList')
    },
    async selectAllClasses() {
      let { data } = await this.$http.get('/classes')
      this.classesList = data
    },
  },
  mounted() {   //页面加载成功
    //查询所有班级
    this.selectAllClasses()
  },
}
</script>

<style>

</style>

City Cascade: Frontend (Sync)

  • Step 1: Send ajax to query all cities

  • Step 2: Display city data using cascading menus

  • Step 3: Modify the backend City and filter the data whose collection is empty

  • Step 4: Modify the front-end to add content and convert the cityArr array into cityIds string

  • Step 1: Send ajax to query all cities

    Insert image description here

  • Step 2: Display city data using cascading menus
    Insert image description here

  • Step 3: Modify the backend City and filter the data whose collection is empty

    Insert image description here

  • Step 4: Modify the front-end to add content and convert the cityArr array into cityIds string

    Insert image description here

<template>
  <div>
    <el-form ref="form" :model="student" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="student.sname"></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-select v-model="student.cid" clearable placeholder="请选择班级">
          <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="student.age"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="student.gender">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker type="date" v-model="student.birthday" value-format="yyyy-MM-dd" placeholder="选择您的生气" ></el-date-picker>
      </el-form-item>
      <el-form-item label="城市">
        <el-cascader
          v-model="student.cityArr"
          :options="cityList"
          :props="{ expandTrigger: 'hover', value: 'cid', label: 'cityName',children: 'children' }">
        </el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addStudent">添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    {
   
   {student}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {
        cityArr: []
      },
      classesList: [],    //所有班级
      cityList: [],       //所有城市
    }
  },
  methods: {
    async addStudent() {
      // 处理数据
      this.student.cityIds = this.student.cityArr.join(",")
      //debugger
      // 添加ajax
      let { data } = await this.$http.post('/student', this.student)
      //提示
      this.$message.success(data)
      //this.$message.error(data) //失败
      //跳转到列表页面
      this.$router.push('/studentList')
    },
    async selectAllClasses() {
      let { data } = await this.$http.get('/classes')
      this.classesList = data
    },
    async selectAllCity() {
      let {data : cityList} = await this.$http.get('/city')
      this.cityList = cityList
    }
  },
  mounted() {   //页面加载成功
    //查询所有班级
    this.selectAllClasses()
    //查询所有城市
    this.selectAllCity();
  },
}
</script>

<style>

</style>

Course selection: Front-end

  • Step 1: Use ajax to query all courses

  • Step 2: Display using checkboxes

  • Step 1: Use ajax to query all courses

Insert image description here

  • Step 2: Display using checkboxes

    Insert image description here

Improved addition: backend

  • Step 1: Modify student and add courseIds attribute

  • Step 2: Create StudentCourse javaBean

  • Step 3: Create StudentCourseMapper

  • Step 4: Modify Student, modify the id attribute annotation, and obtain the id automatically generated by the database when adding.

  • Step 5: Modify StudentService

  • Step 1: Modify student and add courseIds attribute

    Insert image description here

  • Step 2: Create StudentCourse javaBean

    Insert image description here

    package com.czxy.domain;
    
    import javax.persistence.Column;
    import javax.persistence.Id;
    import javax.persistence.Table;
    
    /**
     * @author 桐叔
     * @email [email protected]
     * @description
     */
    @Table(name = "tb_student_course")
    public class StudentCourse {
          
          
        @Column(name = "s_id")
        private Integer sid;
    
        @Column(name = "c_id")
        private Integer cid;
    
        private Double score;
    
    }
    
    /*
    CREATE TABLE `tb_student_course` (
      `s_id` INT NOT NULL COMMENT '学生ID',
      `c_id` INT NOT NULL COMMENT '课程ID',
      `score` DOUBLE DEFAULT NULL,
      PRIMARY KEY (`s_id`,`c_id`)
    );
     */
    
  • Step 3: Create StudentCourseMapper

    package com.czxy.mapper;
    
    import com.czxy.domain.StudentCourse;
    import tk.mybatis.mapper.common.Mapper;
    
    /**
     * @author 桐叔
     * @email [email protected]
     * @description
     */
    public interface StudentCourseMapper extends Mapper<StudentCourse> {
          
          
    }
    
    
  • Step 4: Modify Student, modify the id attribute annotation, and obtain the id automatically generated by the database when adding.

    Insert image description here

  • Step 5: Modify StudentService

    Insert image description here

    At this point, we have successfully completed the student addition function of the Java project student management system. By studying this article, you not only learned how to develop a powerful student management system through Java language, but also deeply studied how to implement the student addition module. Whether you are an educator or a learner interested in Java programming, this knowledge will be of great help to you in your daily work or academic research.

Guess you like

Origin blog.csdn.net/haodian666/article/details/134982278