VUE项目实战25实现用户状态的修改

Posted 2022-01-07 光仔December

接上篇《24、分页效果实现》
上一篇我们实现了用户列表的分页效果，本篇我们来实现用户状态的修改效果。

目前虽然我们可以通过状态的开关按钮来点击“开启”或“关闭”状态，但实际上只改变了状态的前端样式，后台的状态是没有改变的，刷新之后会变回原来的状态：

解决这个问题，我们只需要将前台的用户状态更改，同步到后台数据库中即可。
第一步，我们要监听到Switch控件状态值的改变，获取到最新的状态；
第二步，调用后台相应的API接口，将修改后的状态更新至数据库。

首先我们来监听Switch控件的状态，查看官方文档，可以了解到Switch控件有一个“change”事件，它在Switch状态发生变化时会进行回调：

我们在el-switch标签中绑定一个change事件，并制定一个名为“userStateChange()”函数，然后把这一行对象传过去：

<el-table-column label="状态" prop="mg_state">
    <template slot-scope="scope">
        <el-switch v-model="scope.row.mg_state"
          active-color="#13ce66"
          inactive-color="#ff4949" @change="userStateChange(scope.row)"> 
        </el-switch>
    </template>
</el-table-column>

然后在下面的方法区域定义该方法：

//监听switch开关状态的改变
userStateChange(userinfo)
  console.log(userinfo);

此时回到项目用户模块，点击Switch控件，可以看到触发了userStateChange方法：

可以看到接收到的状态是最新的Switch状态（false变成了true）。

下面我们调用API接口来保存用户状态。接口文档如下（1.3.3修改用户状态）：

请求路径中带“:”的表示动态参数，即参数拼接在请求路径中；下面的put类型在http中一般表示修改类型请求。如果接口调用成功，服务器会返回修改好的用户信息，以及相应的200状态。

我们来编写调用方法：

//监听switch开关状态的改变
async userStateChange(userinfo)
  console.log(userinfo);
  const data:res = await this.$http.put('users/'+userinfo.id+"/state/"+userinfo.mg_state);
  if(res.meta.status!=200)
    userinfo.mg_state=!userinfo.mg_state;//操作失败状态恢复
    return this.$message.error('更新用户状态失败！');
  
  this.$message.success('更新用户状态成功！');

此时我们回到页面，重置第二个用户的状态，可以看到修改成功，然后再刷新页面，状态也是刚刚修改的最新状态了：

如果修改失败，就不会更改用户的状态：

以上就是修改用户状态的操作。
下一篇我们来学习实现搜索的功能。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/u013517797/article/details/122015341