Table 使用 laravel 和 vue.js 可视化数据

Question

我一直在努力制作一个简单的 vue js 和 laravel 数据显示网页，它旨在显示 table 中的所有数据，但我没有这么幸运我已经发布了这个问题，但错误现在已经改变，所以我再次发布。当我进入 /api 目录时，我能够看到所有 json 数据，即使是我需要分页的不同页面，所有页码都在那里，但是当我进入控制台时，我得到Json 错误：

Source map error: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON 
data
Resource URL: http://127.0.0.1:8000/js/app.js
Source Map URL: laravel-vue-pagination.common.js.map

不确定这意味着什么，或者它是否与 table 上未显示的数据有任何关联，或者是否还有其他内容。此外，当我加载代码编辑器时，我的 vue 扩展说它无法在项目文件中找到 tsconfig.json 或 jsconfig.json。

所以，非常感谢任何帮助，这里是代码：Home.blade.php:

 @extends('layouts.app')
@section('content')
<div class="container" id="app">
<home-component></home-component>
</div>
@endsection

主页组件：

<template>
<div class="container">
<div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Home component</div>
                <ul>
                    <li v-for="post in laravelData.data" :key="post._id">{{ post.STATUS }}</li>
                </ul>

                <Pagination :data="laravelData" @pagination-change-page="getResults" />
            </div>
        </div>
    </div>
    </div>
    </template>

    <script>
    import LaravelVuePagination from 'shetabit-laravel-vue-pagination';

  export default{
   components: {
        'Pagination': LaravelVuePagination
  },
 data() {
  return {
    laravelData: {}
};
},

mounted(){
this.getResults();
},
methods:{
        getResults(page = 1) {
            axios.get('api/users?page=' + page)
                .then(response => {
                    this.laravelData = response.data;
                });
        }

},

}
</script>

api 路线：

Route::middleware('api')->group(function () {
Route::get('/home', [PostController::class, 'home']);
});

网络路由：

Route::get('{any}', function () {return view('home');})->where('any', '.*');

后控制器

public function home() {
    $posts = Post::paginate(4);

    return response()->json($posts);
}

控制台记录响应时的输出：

如果你需要版本使用 Laravel:8.83 视图：“^2.6.12” laravel-vue-分页:"^2.3.1"

Answer 1

我这个错误是由于json你已经从控制器返回

您可以在 MDN docs

查看更多内容

您可以通过在您的控制器中添加获取 post

的响应来进行尝试

response(json_encode($posts));

也试试这个


getResults(page=1){
    axios.get('/api/home?page='+page)
   .then(response=>{this.results=JSON.parse(response.data) 
 ,console.log(this.results)}) 
   .catch(error => console.log(error));
}

Answer 2

好吧，我刚刚创建了一个新项目并且一切正常，所以这里是您显然可以忽略的步骤 Laravel 安装。

作曲家create-project --prefer-dist laravel/laravel 测试（可以忽略）
Composer require laravel/ui（可以忽略）
php artisan ui vue（可以忽略）
npm install && npm install shetabit-laravel-vue-pagination@2.3.2（可以忽略，但一定要安装paginate）
npm update vue-loader（可以忽略）
app.js 中的基本 VUE 设置如下：（您可以忽略）


require('./bootstrap');

window.Vue = require('vue').default;


import App from "./components/ExampleComponent.vue";
const app = new Vue({
    el: '#app',
    render: h => h(App),
});

在 Example-Component.vue 中：（不要忘记在 VUE 组件中导入您的组件）

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>
                    <ul>
                        <li v-for="post in laravelData.data" :key="post.id">{{ post.fname }}</li>
                    </ul>

                    <Pagination :data="laravelData" @pagination-change-page="getResults" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LaravelVuePagination from 'shetabit-laravel-vue-pagination';
    export default {
        components: {
            'Pagination': LaravelVuePagination
        },
        data() {
            return {
                // Our data object that holds the Laravel paginator data
                laravelData: {},
            }
        },

        mounted() {
            // Fetch initial results
            this.getResults();
        },

        methods: {
            // Our method to GET results from a Laravel endpoint
            getResults(page = 1) {
                axios.get('api/users?page=' + page)
                    .then(response => {
                        this.laravelData = response.data;
                    });
            }
        }
    }
</script>

welcome.blade.app添加Element和script标签查看，（我没有添加CSS因为我只是想测试VUE app）

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
            <div id="app"></div>
        </div>
    </body>

    <script src="{{ mix('js/app.js') }}"></script>
</html>

api.php（您应该通过控制器调用您的 API，这是推荐的方式，我直接使用 api.php 完成了此操作，以免浪费时间和代码行和描述在这里。）

Route::get('users', function () {
    $users = \App\Models\Product::paginate(4);
    return response()->json($users);
});

所以，你已经安装了你的 Laravel 项目，如果你不确定你的分页组件，只需像下面那样删除它：

npm uninstall package-name-in-package.json

然后按照我说的安装它：

install shetabit-laravel-vue-pagination@2.3.2

我没有安装原始的 paginate 以确保您根据之前安装的内容获得您想要的内容，以确保您不会结束创建新项目等。

编辑 02：Github Link

Table 使用 laravel 和 vue.js 可视化数据

Table to visualize data using laravel and vue.js

javascript

php

laravel

vue.js

pagination