点击实现循环切换的效果

最新推荐文章于 2022-10-11 16:01:24 发布

YangshiH

最新推荐文章于 2022-10-11 16:01:24 发布

阅读量186

点赞数

文章标签： java 前端 vue.js mybatis

本文链接：https://blog.csdn.net/qq_51386003/article/details/125839290

版权

通过点击按钮来实现切换效果

1、首先在XML里写sql

<update id = "updateStatus">
    update t_announcement set release_status = #{releaseStatus} where id = #{id}
</update>

根据id来更新这一条的发布状态

2、写入Mapper

Integer updateStatus(@Param("releaseStatus")Integer releaseStatus, @Param("id")Integer id);

@Param的作用就是给参数命名，比如在mapper里面某方法A（int id），当添加注解后A（@Param("userId") int id），也就是说外部想要取出传入的id值，只需要取它的参数名userId就可以了。

3、写Service

Integer updateStatus(Integer releaseStatus, Integer id);

Service层不需要@Param注解

4、ServiceImpl

 @Autowired
 private AnnouncementMapper announcementMapper;

 @Override
 public Integer updateStatus(Integer releaseStatus, Integer id) {
     return this.announcementMapper.updateStatus(releaseStatus,id);
 }

5、Controller

  @GetMapping("/UpdateReleaseStatus")
    public ResultJson UpdateReleaseStatus(Integer id,Integer releaseStatus){
        int flag = 0;
        if(releaseStatus == 0){
            flag = announcementService.updateStatus(1,id);
        }else if(releaseStatus == 1){
            flag = announcementService.updateStatus(2,id);
        }else{
            flag = announcementService.updateStatus(0,id);
        }
        if(flag != 0){
            return ResultJson.ok();
        }
        return ResultJson.failure(ResultCode.SERVER_ERROR);
    }

定义一个初始值为0的flag，当releaseStatus == 0时（草稿状态），进入if的判断条件。

令flag等于updateStatus的值，若值为1，说明更新成功。

Vue前台：

 <el-table-column prop="releaseStatus" label="发布状态">
 <template slot-scope="scope">
     <el-button v-show="scope.row.releaseStatus==3"></el-button>
     <el-button type="info" plain size="mini" v-show="scope.row.releaseStatus==0"
     @click="changeStatus(scope.row.id,scope.row.releaseStatus)">
         草稿
     </el-button>
     <el-button type="success" plain size="mini" v-show="scope.row.releaseStatus==1"
     @click="changeStatus(scope.row.id,scope.row.releaseStatus)">
         已发布
     </el-button>
     <el-button type="danger" plain size="mini" v-show="scope.row.releaseStatus==2"
     @click="changeStatus(scope.row.id,scope.row.releaseStatus)">
         下架
      </el-button>
 </template>
 </el-table-column>

changeStatus函数

    changeStatus: function(id,releaseStatus){
                setTimeout(()=>{
                    this.axios({
                    method: "GET",
                    url:"/v1/announcement/UpdateReleaseStatus?id="+id+"&releaseStatus="+releaseStatus,
                }).then((res) => {
                    // this.$data.loading = false;
                    let code = res.data.code;
                    if (code == 200) {
                        this.pageList();   //刷新页面
                    }
                }).catch((error) => {
                    console.log(error)
                });
                },500)
            },

设置一个setTimeout定时任务，毫秒为单位，防止点击过快出现错误。