基于ssm+vue的综合项目 健康体检管理系统-第二章--管理系统-检查项管理

总结

第二天主要对检查项做了一些增删改查

1 新建功能

• 首先点击新建按钮需要打开新建界面然后对前两项进行校验
  

       //添加
                handleAdd () {
                    //进行表单校验
                    this.$refs['dataAddForm'].validate((valid)=>{
                        if (valid){
                     	....
                     }
                },

• 新建功能 将表单填写的数据异步请求发送给后台进行数据操作
  
  前台代码

 //添加
                handleAdd () {
                    //进行表单校验
                    this.$refs['dataAddForm'].validate((valid)=>{
                        if (valid){
                            axios.post("/checkitem/add.do",this.formData).then((res)=>{
                                this.dialogFormVisible=false;
                                //判断回调函数是否添加成功
                                if (res.data.flag){
                                    //调用分页查询方法
                                    this.findPage();
                                    //给出提示信息
                                    this.$message({
                                        message:res.data.message,
                                        type:'success'
                                    })
                                }else {
                                    this.$message.error(res.data.message);
                                }
                            })
                        }else {
                            this.$message.error("输入信息错误,请检查你的信息");
                        }
                    })
                },

后台代码

  /**
     * 添加检查项 Controller
     * @param checkItem 检查项对象
     * @return Result 封装的返回结果
     */
    @RequestMapping("/add")
    public Result add(@RequestBody CheckItem checkItem) {
        try {
            checkItemService.add(checkItem);
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, MessageConstant.ADD_CHECKITEM_FAIL);
        }
        return new Result(true, MessageConstant.ADD_CHECKITEM_SUCCESS);
    }

  /**
     * 添加检查项方法 Service
     * @param checkItem 检查项对象
     */
    public void add(CheckItem checkItem) {
        checkItemDao.add(checkItem);
    }
      /**
     * 添加检查项 Mapper
     * @param checkItem 检查项实体类
     */
     void add(CheckItem checkItem);

  <!--添加检查项-->
    <insert id="add" parameterType="com.itheima.pojo.CheckItem">
        insert into t_checkitem(code, name, sex, age, price, type, remark, attention)
        values (#{code}, #{name}, #{sex}, #{age}, #{price}, #{type}, #{remark}, #{attention})
    </insert>

具体如上基本都是增删改查代码结合前台的异步请求

2 分页查询功能

• 当页面加载完毕时调用vue的created钩子函数调用分页查询方法
• 后台返回一个queryPageBean对象封装为json数据传递给前台
• 前台展示数据

 				 //分页查询
               findPage() {
                   let param={
                       //当前页码
                       currentPage: this.pagination.currentPage,
                       //每页显示的总条数
                       pageSize:this.pagination.pageSize,
                       //查询的条件
                       queryString:this.pagination.queryString
                   };
                   axios.post("/checkitem/findPage.do",param).then((res)=>{
                      //解析Controller响应回来的数据
                       //查询出来的总条数
                       this.pagination.total=res.data.total;
                       this.dataList=res.data.rows;
                   })
               },

3 搜索功能

• 在查询的时候带上一个搜索的字符串sql写上动态sql如果搜索框有值就根据这个值按条件查询
• 如果没有值就分页查询,主要是前台传递过来的三个参数
• 在业务层做文章获取当前页、和每页显示的行数、还有需要搜索的参数

    @Override
    public PageResult pageQuery(QueryPageBean queryPageBean) {
        Integer currentPage = queryPageBean.getCurrentPage();
        Integer pageSize = queryPageBean.getPageSize();
        String queryString = queryPageBean.getQueryString();
        PageHelper.startPage(currentPage, pageSize);
        Page<CheckItem> page = checkItemDao.selectByCondition(queryString);
        long total = page.getTotal();
        List<CheckItem> rows = page.getResult();
        return new PageResult(total, rows);
    }

4 编辑功能

• 在点开编辑安妮时需要弹出框口
• 然后回显数据,根据当前row.id查询出这一行的数据并回显到表单内
• 当点击确定之后异步请求到controller中根据传过来的id查询返回一个对应的检查项的实体类
• 然后前台显示编辑成功,如果后台错误将显示编辑失败

         //编辑
                handleEdit() {
                    //进行表达校验
                    this.$refs['dataEditForm'].validate((valid)=>{
                        if (valid){
                            //说明表单数据通过,可以提交数据
                            axios.post("/checkitem/edit.do",this.formData).then((res)=>{
                                if (res.data.flag){
                                    this.$message({
                                        type:'success',
                                        message:res.data.message
                                    })
                                }else {
                                    this.$message.error(res.data.message);
                                }
                            }).finally(()=>{
                                //无论修改成功还是失败都调用分页查询方法
                                this.findPage();
                                //分页查询之后需要隐藏编辑页面
                                this.dialogFormVisible4Edit=false;
                            })
                        }else {
                            this.$message.error("表单数据校验失败");
                            //如果下面还有其他的代码就需要加上下面这句代码,以包安全以前直接返回
                            return false;
                        }
                    })
                }

5 删除功能

• 当点击删除按钮时传递一个id异步请求到controller调用service的删除方法在调用mapper的删除方法
• 这里有一个注意点，就是检查项和检查组有一个中间表，在删除的时候需要判断一下传送过来的id是否在中间表中如果并没有联系，就可以删除

     if (checkitemIds != null && checkitemIds.length > 0){
            for (Integer checkitemId : checkitemIds){
                Map<String, Integer> map = new HashMap<>();
                map.put("checkGroupId", checkGroupId);
                map.put("checkitemId", checkitemId);
                checkgroupDao.setCheckGroupAndCheItem(map);
            }