创新设计记录-2：管理员管理用户

创新设计记录-2：管理员管理用户

管理员管理用户的后端方法已经在“创新设计记录-1”中提到了，本文记录管理前端的部分

管理员可以实现的功能有：

查看所有的用户，封禁/解禁用户，并通过发邮件的方式通知该用户。

查看用户

管理员登录之后，显示的界面如上图所示。

代码如下：

 <div class="user-list">
    <!-- 查询当前注册的用户 -->
    <div class="user-list-container">
      <h2>当前注册的用户</h2>
      <ul>
        <li v-for="user in users" :key="user.id" class="user-item">
          <div class="user-info">
            <span><strong>名字：</strong>{{ user.name }}</span>
            <span><strong>邮箱：</strong>{{ user.email }}</span>
            <span><strong>性别：</strong>{{ user.sex }}</span>
            <span><strong>年龄：</strong>{{ user.age }}</span>
            <span><strong>帐号状态：</strong>{{ user.is_active ? '正常' : '异常' }}</span>
          </div>
          <div class="user-button">
            <el-button type="success" @click="to_user_conv_history(user)">查看对话历史记录</el-button>
            <button @click="user.is_active ? methodOne(user) : methodTwo(user)"
              :class="user.is_active ? 'normal-button' : 'error-button'">
              {{ user.is_active ? '封禁' : '解封' }}
            </button>
          </div>
        </li>
      </ul>
    </div>

这里使用的是原生的html的列表的方式展示所有的用户。

当界面刚进入的时候，vue的生命周期钩子created()中获取所有的用户列表：

created() {
    this.getUsers();
}
 getUsers() {
      getuser().then(res => {
        if (res.data.code === 200) {
          this.users = res.data.data.user_list;
          ElMessage({
            message: '查询成功',
            type: 'success'
          })
        }
      })
    },
/**
getUser的axios请求
*/
function getuser(){
    return request.get('/admin/get_user')
}

操作用户

查看用户对话的历史记录

管理员可以查看所有用户与大模型对话的历史记录，我们在一般用户端已经有了查看用户历史对话记录的页面，这里我们就可以直接用router.push()直接路由到这个页面，顺便带着这个用户的user_id就可以访问他的历史记录了。

to_user_conv_history(user){
      let user_id = user.id
      this.$router.push({
        path: '/history_chats',
        query: {
          user_id: user_id
        }
      })
    }

这里考虑到用户原本也是通过自己的user_id来获取自己的历史记录，因此，修改一下history_chat的获取历史记录的逻辑：

onMounted(() => {
  // user_id.value = localStorage.getItem('user_id');
  user_id.value = route.query.user_id

  console.log(router);
  // 调用 getChatList 函数  
  getChatList();
});

摒弃本来的从localstorage中获取登陆后保存的用户id，这样又会造成另一个问题：用户自己进入的时候，出现无法查看自己的历史记录的现象，因此我们在菜单中路由的时候就把用户自己的user_id传入到路由url中去：

<el-menu-item :index="history_index_url">
    <template #title>
        <el-icon>
            <document />
        </el-icon>
        历史对话
    </template>
</el-menu-item>
<script>
const history_index_url = computed(() => {
  return '/history_chats?user_id=' + localStorage.getItem('user_id')
})
</script>

这样就完美的实现了该功能。

查看第一个用户的对话历史记录如下

查看详细的对话：

封禁/解禁用户：

封禁解禁用户本质上是改变数据库中User.isActive属性。

 <button @click="user.is_active ? methodOne(user) : methodTwo(user)"
         :class="user.is_active ? 'normal-button' : 'error-button'">
     {{ user.is_active ? '封禁' : '解封' }}
</button>
<script>
    methodOne(user) {
      //console.log('Method One for user:', user);
      let form = {
        id: "",
        username: user.name,
        user_id: user.id
      }
      block_user(form).then(res => {
        if (res.data.code === 200) {
          user.is_active = false;
          ElMessage({
            message: '封禁成功',
            type: 'success'
          })
        }
      })
    },
    methodTwo(user) {
      let form = {
        id: "",
        username: user.name,
        user_id: user.id
      }
      relive_user(form).then(res => {
        if (res.data.code === 200) {
          user.is_active = true;
          ElMessage({
            message: '解封成功',
            type: 'success'
          })
        }
      })
    },
</script>

这里因为后端写了封禁/解禁用户两个方法，因此前端也写两个方法实现封禁/解禁

至此，管理员的功能完成