vue实现通过获取登录用户的userId和userName从数据库筛选展示出他处理的那部分数据的代码

这里是一个简单的示例代码，仅供参考：

前端代码：

<!-- 在模板中展示数据 -->
<template>
  <div>
    <h2>{{ user.userName }}的数据</h2>
    <ul>
      <li v-for="item in data" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {}, // 保存登录用户信息
      data: [] // 保存查询结果
    }
  },
  mounted() {
    // 发送请求获取登录用户信息
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      // 发送请求获取登录用户信息
      // 这里假设后端接口返回的数据格式为 { userId: 1, userName: '张三' }
      // 实际情况中需要根据接口返回的数据格式进行修改
      axios.get('/api/userInfo').then(res => {
        this.user = res.data
        // 获取该用户处理的数据
        this.getData()
      })
    },
    getData() {
      // 发送请求获取该用户处理的数据
      axios.get('/api/data', {
        params: {
          userId: this.user.userId,
          userName: this.user.userName
        }
      }).then(res => {
        this.data = res.data
      })
    }
  }
}
</script>

后端代码：

// 用户信息和数据存储在数据库中，这里使用mongoose作为操作数据库的工具
const mongoose = require('mongoose')

// 定义用户模型
const User = mongoose.model('User', {
  userId: Number,
  userName: String
})

// 定义数据模型
const Data = mongoose.model('Data', {
  userId: Number,
  title: String
})

// 获取登录用户信息的接口
app.get('/api/userInfo', (req, res) => {
  // 假设用户已经登录，这里直接返回用户信息
  res.json({
    userId: 1,
    userName: '张三'
  })
})

// 获取该用户处理的数据的接口
app.get('/api/data', (req, res) => {
  const { userId, userName } = req.query
  // 查询该用户处理的数据
  Data.find({
    userId,
    // 假设该用户只能处理自己名字里包含'张'的数据
    title: { $regex: userName }
  }).then(data => {
    res.json(data)
  })
})

当用户访问该页面时，会自动发送请求获取登录用户信息并获取该用户处理的数据，并在页面中展示出来。