表格未显示 laravel vue 组件中数据库中的数据

Posted 2023-03-14

【中文标题】表格未显示 laravel vue 组件中数据库中的数据

【英文标题】：Table not showing the data from database in laravel vue component

【发布时间】：2019-10-29 11:40:55

【问题描述】：

在过去的几天里，我一直在关注一个非常优秀的 youtuber 上关于 VUE 应用程序的教程。当我突然停下来时，我正在按照教程中提到的每一个步骤进行操作。这是因为我的数据库中的数据没有显示在前端。数据库确实显示我正在正确存储数据，并且没有任何错误。 我卡住的视频是：https://youtu.be/bUXhGw4aQtA

这是我的控制器中的索引代码

public function index()
    
        return User::latest()->paginate(10);
    

这里是 app.js

/**
 * First we will load all of this project's javascript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');
import 
  Form,
  HasError,
  AlertError
 from 'vform'

window.Form = Form;
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

import VueRouter from 'vue-router'
Vue.use(VueRouter)

let routes = [
    path: '/dashboard',
    component: require('./components/Dashboard.vue').default
  ,
  
    path: '/profile',
    component: require('./components/Profile.vue').default
  ,
  
    path: '/users',
    component: require('./components/Users.vue').default
  
]

const router = new VueRouter(
  mode: 'history',
  routes // short for `routes: routes`
)

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue(
  el: '#app',
  router
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
    <div class="container">
           <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Users Table</h3>

                <div class="card-tools">
                    <button class="btn btn-success" data-toggle="modal" data-target="#addNew">Add new <i class="fas fa-user-plus"></i></button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body table-responsive p-0">
                <table class="table table-hover">
                  <tbody>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Type</th>
                        <th>Registered At</th>
                        <th>Modify</th>
                  </tr>


                  <tr v-for="user in users.data" :key="user.id">


                    <td>user.id</td>
                    <td>user.name</td>
                    <td>user.email</td>
                    <td>user.type | upText</td>
                    <td>user.created_at | myDate</td>

                    <td>
                          <a href="#" >
                              <i class="fa fa-edit blue"></i>
                          </a>
                          /
                          <a href="#">
                              <i class="fa fa-trash red"></i>
                          </a>
                      </td>
                    </tr>
                </tbody>
                </table>                  
              </div>
            </div>
            <!-- /.card -->
          </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addNewLabel">Add Users</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button> 
                </div>
                <form @submit.prevent="createUser">
                <div class="modal-body">
                    <div class="form-group">
                      <input v-model="form.name" type="text" name="name"
                        placeholder="Name"
                        class="form-control" :class=" 'is-invalid': form.errors.has('name') ">
                      <has-error :form="form" field="name"></has-error>
                    </div>

                    <div class="form-group">
                      <input v-model="form.email" type="text" name="email"
                        placeholder="email"
                        class="form-control" :class=" 'is-invalid': form.errors.has('email') ">
                      <has-error :form="form" field="email"></has-error>
                    </div>

                    <div class="form-group">
                      <textarea v-model="form.bio" type="text" name="bio"
                        placeholder="Bio"
                        class="form-control" :class=" 'is-invalid': form.errors.has('bio') "></textarea>
                      <has-error :form="form" field="bio"></has-error>
                    </div>

                    <div class="form-group">
                      <select v-model="form.type" type="text" name="type"
                        class="form-control" :class=" 'is-invalid': form.errors.has('type') ">
                        <option value="">Select user Role</option>
                        <option value="user">Employee</option>
                        <option value="manager">Manager</option>
                      </select>
                      <has-error :form="form" field="name"></has-error>
                    </div>

                    <div class="form-group">
                      <input v-model="form.password" type="password" name="password"
                        placeholder="password"
                        class="form-control" :class=" 'is-invalid': form.errors.has('password') ">
                      <has-error :form="form" field="password"></has-error>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>

                </form>
                </div>
            </div>
            </div>            
    </div>
</template>

<script>
  export default 
    data() 
      return 
        users: ,
        form: new Form(
          name: '',
          email: '',
          password: '',
          type: '',
          bio: '',
          photo: '',
        )
      
    ,
    methods: 
      loadUsers() 
        axios.get("api/user").then((
          data
        ) => (this.user = data));
      ,
      createUser() 
        this.form.post('api/user');
      
    ,
    created() 
      this.loadUsers();
    
  
</script>

如果我需要任何其他代码来详细说明我在这里的查询，请告诉我。我已经尝试了所有我能想到和搜索的选项，但无法让它发挥作用。希望另一双眼睛可以帮助我找出问题所在。

我希望有一个完整的表格来显示我的数据库中的所有行，而前端什么也没有显示。 （注意：我确实在 Chrome 的开发者选项中检查了网络选项卡，只有一个 xhr 类型，它显示状态 200。

【问题讨论】：

为什么不使用开发者工具来console.log方法中的API调用结果作为开始。这样可以确保前端收到来自后端的数据

我需要一些帮助，因为我对所有这些 vue 和 API 都是新手

你在数据中的用户应该是一个数组，而不是对象。您在 loadusers() 函数中的 axios 调用是错误的，然后在迭代时，它不是 ~user in users.data~ 而是 ~user in users~。检查我修改后的答案。

【参考方案1】：

我建议你去 youtube 上搜索 laravel/vue 教程，那里有大量的好资源可以帮助你。 对于您要实现的目标，如果您已经很好地安装了组件并且可以在浏览器上的组件中看到一个虚拟测试，那么您就完成了一半。 在你的 vue 组件的挂载钩子中，对你的后端 (laravel) 进行 api 调用，以获取这样的用户；

axios.get('/get_all_users').then((res)=>
  this.users = res.data
  //do a console.log(res.data) to ensure you are getting the users collection
).catch((err) => 
  console.log(err)
);

在您的数据对象中，创建一个空数组来保存您的用户；

data()
  return
    users: []
  

现在，在你的 web.php 中，为这个 api 调用创建一个 GET 路由；

ROUTE::get('/get_all_users', 'UsersController@FetchUsers');

注意，你的控制器和方法不一定如上面那样命名，创建一个控制器，在里面，写一个方法来获取用户，并尽快在这里使用； 在你的控制器中，编写你的方法；

public function FetchUsers()
  $users = User::latest()->get();
  return response()->json($users, 200);

另请注意，您需要像这样在控制器文件的顶部导入您的用户模型；

use App\User;

在此之前还要确保您已经创建了与您的用户表相关的用户模型； 现在，如果一切正常，您应该可以在浏览器开发人员工具控制台上看到用户数组。 然后在您的模板中，像这样遍历用户数据；

<tr v-for="user in users" :key="user.id">
  <td> user.id  </td>
  <td> user.name  </td>
  <td> user.email  </td>
  <td> user.created_at  </td>
</tr>

如果您需要进一步说明，我很乐意为您提供帮助。

【参考方案2】：

您需要以 json 格式返回数据。你可以使用 Laravel [资源] (https://laravel.com/docs/5.8/eloquent-resources)

创建用户资源

php artisan make:resource User

用户控制器

use App\Http\Resources\User as UserResource;

关于你的方法

$user = User::latest()->paginate(10);
return UserResource::collection($user)