Laravel 9 + Vue.js 3实现MySQL指定数据行展示方案咨询

你可以通过前端过滤或后端过滤两种方式实现只展示指定行的数据，以下是具体实现方法：

方案一：前端过滤（适合数据量较小的场景） #

在Vue组件内对获取到的原始数据进行筛选，直接渲染符合条件的条目。推荐用计算属性实现，性能更优。

示例代码 #

<template>
  <!-- 循环渲染过滤后的结果 -->
  <div v-for="item in filteredItems" :key="item.id">
    {{ item.name }}
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

const items = ref([]);

// 从后端获取全量数据
onMounted(async () => {
  const res = await axios.get('/api/users');
  items.value = res.data;
});

// 计算属性：过滤出name为John Doe2的行，可根据需求修改匹配规则
const filteredItems = computed(() => {
  // 精确匹配
  return items.value.filter(item => item.name === 'John Doe2');
  
  // 若需要模糊匹配（比如包含Doe2的名称），可改成：
  // return items.value.filter(item => item.name.includes('Doe2'));
});
</script>

也可以直接在v-for中搭配v-if实现，但数据量大时性能不如计算属性：

<template>
  <div v-for="item in items" :key="item.id" v-if="item.name === 'John Doe2'">
    {{ item.name }}
  </div>
</template>

方案二：后端过滤（适合数据量大、需权限控制或减少带宽的场景） #

让Laravel接口直接返回符合条件的数据，前端无需额外处理，直接渲染即可。这种方式能减少数据传输量，也更安全（避免前端拿到敏感数据）。

Laravel后端代码 #

// routes/api.php
Route::get('/users', [UserController::class, 'index']);

// app/Http/Controllers/UserController.php
use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function index(Request $request)
    {
        // 可接收前端传入的过滤参数，或直接固定条件
        $targetName = $request->query('name', 'John Doe2');
        
        // 查询并返回符合条件的数据
        return User::where('name', $targetName)->get();
    }
}

Vue前端代码 #

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const items = ref([]);

// 请求时携带过滤参数，直接获取指定数据
onMounted(async () => {
  const res = await axios.get('/api/users', {
    params: { name: 'John Doe2' }
  });
  items.value = res.data;
});
</script>

内容的提问来源于stack exchange，提问作者user21099803