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

Posted 光仔December

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE项目实战25实现用户状态的修改相关的知识,希望对你有一定的参考价值。

接上篇《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

以上是关于VUE项目实战25实现用户状态的修改的主要内容,如果未能解决你的问题,请参考以下文章

VUE项目实战26实现用户信息搜索功能

VUE项目实战26实现用户信息搜索功能

VUE项目实战29.实现修改用户功能

VUE项目实战24分页效果实现

VUE项目实战30.实现删除用户功能

VUE项目实战23改造状态列的显示效果