学生成绩管理系统(教师端新增和删除功能完成)

目录

1.效果图展示

1.新增学生信息功能

 2.删除学生信息功能

​编辑

2.功能说明 

1.新增学生成绩信息

2.删除学生成绩信息

3.技术说明 

4.重要代码体现 

 1.新增学生成绩信息功能 

1.添加表单代码 

2.表单验证规则代码 

3.添加请求代码

4.后端添加功能代码 

 5.JavaBean字段验证代码

2.删除学生成绩信息功能 

1.前段确认代码

2.删除请求代码 

3.后端删除功能代码 

5.总结 

---

1.效果图展示

1.新增学生信息功能

 2.删除学生信息功能

2.功能说明 

1.新增学生成绩信息

        该功能是在显示页面输入合规的学生信息包括学号，姓名，成绩等通过表单携带数据发送给

后端来完成添加信息。填写的学生信息会做两次验证，分别为前端验证和后端验证。前端采用

rules进行验证，在数据吃编写验证规则，提示相关信息。后端采用hibernate-validator 来完成验

证，在Javabean字段上通过注解来设计验证规则与提示相关信息。

2.删除学生成绩信息

        该功能实在页面点击删除按钮并且提示是否确认删除来进行操作，若点击确认，则发送请求

到后端进行相关数据的删除，若点击取消，则不做任何操作。这里点击删除得到表单行的数据是通

过 #default="scope" 属性来得到，在发送请求到后端是取出学号(scope.row.username)来进行删除

操作。

3.技术说明 

        完成这两个功能在验证信息后端引入了 hibernate-validator  前端则常规验证，后端通过两个

方法完成前段请求。

4.重要代码体现 

 1.新增学生成绩信息功能 

1.添加表单代码 

 <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <el-form :model="form" label-width="120px" :rules="rules" ref="form">
        <el-form-item label="学号" prop="username">
          <el-input v-model="form.username" style="width: 80%"></el-input>
          {{ this.validMsg.username }}
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" style="width: 80%"></el-input>
          {{ this.validMsg.name }}
        </el-form-item>
        <el-form-item label="期中成绩(40%)" prop="midscore">
          <el-input v-model="form.midscore" style="width: 80%"></el-input>
          {{ this.validMsg.midscore }}
        </el-form-item>
        <el-form-item label="期末成绩(40%)" prop="finalscore">
          <el-input v-model="form.finalscore" style="width: 80%"></el-input>
          {{ this.validMsg.finalscore }}
        </el-form-item>
        <el-form-item label="平时成绩(20%)" prop="dailyscore">
          <el-input v-model="form.dailyscore" style="width: 80%"></el-input>
          {{ this.validMsg.dailyscore }}
        </el-form-item>
      </el-form>
      <template #footer><span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
            type="primary" @click="save()">确 定</el-button> </span>
      </template>
    </el-dialog>

2.表单验证规则代码 

rules: {
        username: [
          {required: true, message: "请输入学号", trigger: "blur"},
          {pattern: /^[-+]?([1-9]\d*|0)(\.\d+)?$/, message: "请输入数字", tigger: "blur"}
        ],
        name: [
          {required: true, message: "请输入姓名", trigger: "blur"},
        ],
        midscore: [
          {required: true, message: "请输入期中成绩", tigger: "blur"},
          {pattern: /^[-+]?([1-9]\d*|0)(\.\d+)?$/, message: "请输入数字", tigger: "blur"}
        ],
        finalscore: [
          {required: true, message: "请输入期末成绩", tigger: "blur"},
          {pattern: /^[-+]?([1-9]\d*|0)$/, message: "请输入数字", tigger: "blur"}
        ],
        dailyscore: [
          {required: true, message: "请输入平时成绩", tigger: "blur"},
          {pattern: /^[-+]?([1-9]\d*|0)$/, message: "请输入数字", tigger: "blur"}
        ]
      }

3.添加请求代码

request.post("/api/save", this.form).then(
                res => {
                  if (res.code === "200") {
                    this.$message({
                          type: "success",
                          message: '添加成功'
                        }
                    )
                    this.dialogVisible = false
                    this.list()
                  } else if (res.code === "400") {
                    this.validMsg.username = res.data.username;
                    this.validMsg.name = res.data.name;
                    this.validMsg.midscore = res.data.midscore;
                    this.validMsg.finalscore = res.data.finalscore;
                    this.validMsg.dailyscore = res.data.dailyscore;
                  }
                }
            )
          } else {
            this.$message({
              type: "error",
              message: '验证失败,未提交'
            })
          }
          return false;  //放弃提交

4.后端添加功能代码 

@PostMapping("/save")
    public Result saveStudentScore(@RequestBody @Validated Grade grade, Errors errors) {
        HashMap<String, Object> map = new HashMap<>();
        List<FieldError> fieldErrors = errors.getFieldErrors();
        for (FieldError fieldError : fieldErrors) {
            map.put(fieldError.getField(), fieldError.getDefaultMessage());
        }
        if (ObjectUtils.isEmpty(map)) {
            double score = Math.round(grade.getMidscore() * 0.4 + grade.getFinalscore() * 0.4 + grade.getDailyscore() * 0.2);
            grade.setTotalscore(score);
            gradeService.save(grade);
            return Result.success();
        } else {
            return Result.error("400", "后端校验失败", map);
        }
    }

 5.JavaBean字段验证代码

 @TableId
    @NotEmpty(message = "请输入学号")
    private String username;
    @NotEmpty(message = "请输入姓名")
    private String name;
    @NotNull
    @Range(min = 0, message = "分数不能小于0大于100", max = 100)
    private Double midscore;
    @NotNull
    @Range(min = 0, message = "分数不能小于0大于100", max = 100)
    private Double finalscore;
    @NotNull
    @Range(min = 0, message = "分数不能小于0大于100", max = 100)
    private Double dailyscore;
    private Double totalscore;

2.删除学生成绩信息功能 

1.前段确认代码

<el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.username)">
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>

2.删除请求代码 

 request.delete("/api/deleteGrade", {
        params: {
          username
        }
      }).then(
          res => {
            this.$message({
              type: "success",
              message: '删除成功'
            })
            this.list()
          }
      )

3.后端删除功能代码 

 @DeleteMapping(value = "/deleteGrade")
    public Result deleteGrade(@RequestParam(value = "username") String username) {
        gradeService.removeById(username);
        return Result.success();
    }

5.总结 

        添加和删除功能：添加的时候填写数据的时候前端会进行验证，未符合规则会做出相应提示，不准提交发送请求，若填写数据前端符合规则，后端会进行二次验证，若不通过，也不会进行添加而是返回相应错误信息，删除则是简单的携带数据发送请求，后端删除对应数据的信息。欢迎小伙伴们支出缺漏之处，将更好的想法写在评论区把。