Java前端Vue-13(学生管理系统二)

接听上回功能续写：

4.3 关键字搜索

1 后端开发

第一步：在PageRequest中新增key关键字，并提供getter和setter方法

第二步：在业务ClassService的queryClassByPage方法中新增模糊查询代码：

/**
     * 带关键字搜索
     * @param pageRequest
     * @return
     */
    public PageResult queryClassByPage(PageRequest pageRequest){
   
        PageResult pr = new PageResult();
        // 1 分页查找：PageHelper.startPage 作用紧跟着他的第一条sql语句
        // 第一个参数：页码，第几页
        // 第二个参数：每页条数，每页多少条数据
        PageHelper.startPage(pageRequest.getPage(),pageRequest.getRows());
        System.out.println("分页助手");
        // 关键字条件查询
        Example example = new Example(Classes.class);
        // 判断条件 pageRequest.getKey() != ""
        // 确保key不为空，才会拼接条件
        if(pageRequest.getKey()!=null&&(!"".equals(pageRequest.getKey()))){
   
            // 拼接条件
            example.createCriteria().andLike("classname","%"+pageRequest.getKey()+"%");
        }
//        List<Classes> list = classesMapper.selectAll();// select * from classes ||| where id between  x and y
        // select * from classes where classname like '%key%' ||| and id between x and y
        List<Classes> list = classesMapper.selectByExample(example);

        // 封装结果
        PageInfo<Classes> pageInfo = new PageInfo<>(list);

        pr.setCode(1);
        pr.setMsg("查找成功");
        pr.setTotal(pageInfo.getTotal());

        pr.setData(pageInfo.getList());
        return pr;
    }

2 前端开发

第一步：在ClassList.vue中新增关键字key

第二步：页面输入框绑定关键字

第三步：在搜索按钮上添加click事件

4.4 新增班级

1 后端开发

第一步：ClassService中新增保存的方法

public void addClass(Classes classes){
   
    classesMapper.insert(classes);
}

第二步:ClassController中新增保存方法

@PostMapping
public ResponseEntity<BaseResult> addClass(@RequestBody Classes classes){
   

    classService.addClass(classes);
    BaseResult br = new BaseResult(1,"成功");
    return ResponseEntity.ok(br);
}

2 前端开发

第一步: ClassesAdd.vue组件

<template>
  <div>
      <el-form ref="classes" :model="classes" label-width="80px">
        <el-form-item label="班级名称">
            <el-input v-model="classes.classname"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="addClass()">新增</el-button>
        </el-form-item>
        </el-form>
  </div>
</template>

<script>
export default {
   
    data() {
   
        return {
   
            classes:{
   }
        }
    },
    methods: {
   
        addClass(){
   
            
        }
    },
}
</script>

第二步：配置子路由

第三步：ClassesList页面添加跳转

2 后端新增的提交

4.5 修改班级

1 修改回显

1. 后端开发

第一步：在ClassService中添加如下方法

/**
     * 功能：班级回显
     * 根据id查找班级信息
     *
     */
    public Classes findById(Integer id){
   
        return classesMapper.selectByPrimaryKey(id);
    }

第二步：在ClassController中添加如下方法：

 @GetMapping("/{id}")
    public ResponseEntity<BaseResult> findById(@PathVariable("id") Integer id){
   
        Classes classes = classService.findById(id);
        BaseResult br = new BaseResult(1, "成功", classes);
        return ResponseEntity.ok(br);
    }

2. 前端开发

第一步：获取表格数据，两种方式

第二步:创建UpdateClass.vue

<template>
  <div>
      修改页面
      <el-form ref="classForm" :model="classForm" label-width="80px">
        <el-form-item label="班级名称">
            <el-input v-model="classForm.classname"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">修改</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
   
    data() {
   
        return {
   
            classForm:{
   }
        }
    },
    methods: {
   
        onSubmit(){
   
            
        }
    },
}
</script>

<style>

</style>

第三步：配置路由

第四步：ClassList页面配置页面跳转并传递id

第五步：在UpdateClass.vue中查找数据，回显

2 修改提交

1. 后端开发

第一步：在ClassService中添加如下方法

    public void updateClass(Classes classes){
   
        classesMapper.updateByPrimaryKey(classes);
    }

第二步：在ClassController中添加如下方法：

@PutMapping
 public ResponseEntity<BaseResult> updateClass(@RequestBody Classes classes){
   
        classService.updateClass(classes);
        BaseResult br = new BaseResult(1, "成功");
        return ResponseEntity.ok(br);
 }

2. 前端开发

在UpdateClass.vue中新增方法

4.6 删除班级

1. 后端开发

第一步：在ClassService中添加如下方法：

public void deleteClass(Integer id){
   
    classesMapper.deleteByPrimaryKey(id);
}

第二步：在ClassController中添加如下方法：

@DeleteMapping("/{id}")
public ResponseEntity<BaseResult> deleteClass(@PathVariable("id") Integer id){