当前位置：文江博客话题详情

使用Laravel和vue.js可视化数据的表

发布于 2025-02-01 02:08:34 字数 3027 浏览 0 评论 0 原文

我一直在努力制作一个简单的VUE JS和Laravel数据显示网页，这是为了在表中显示所有数据，但是我没有运气，所以我已经发布了这个问题，但是现在错误已更改，因此我再次发布。到达 /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

不确定这是什么手段或是否与未显示在表上显示的数据有任何相关性或还有其他内容。另外，当我加载代码编辑器时，我的vue扩展程序说它找不到 tsconfig.json 或 jsconfig.json 在项目文件中。

因此，这里对任何帮助都非常感谢：home.blade.php：

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

homecomponent：

<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']);
});

Web路由：

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

postcontroller

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

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

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

如果您需要版本使用拉拉维尔：8.83 VUE：“^2.6.12” laravel-vue-pagination：“^2.3.1”

原文

I have been working on making a simple vue js and laravel data displaying web page it is meant to display all the data in a table but I have had no such luck in doing so I have already posted this question but the error has now changed so I am posting again. I am able to see all the json data when I go to the /api directory even the different pages I will need for pagination with all the page numbers is there but when I go to the console I get a Json Error:

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

Not sure what this means or if it has any relevance to the data not being showed on the table or is there something else. Also when I load up the code editor my vue extension says it cannot find the tsconfig.json or jsconfig.json in project file.

So, any help is much appreciated here is the code: Home.blade.php:

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

HomeComponent:

<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:

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

Web route:

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

PostController

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

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

Output when console logging response:

If you need the versions use
Laravel:8.83
vue:"^2.6.12"
laravel-vue-pagination:"^2.3.1"

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

百思不得你姐 2025-02-08 02:08:34

Aright，我刚刚创建了一个新项目，一切都在起作用，因此这是您显然可以忽略 laravel 安装的步骤。

作曲家创建项目-Prefer-Dist Laravel/Laravel Test（您可以忽略）
作曲家需要Laravel/UI（您可以忽略）
PHP Artisan UI VUE（您可以忽略）
NPM安装＆amp;＆amp;＆amp;＆amp; NPM安装（您可以忽略，但请确保安装paginate）
NPM UPDATE VUE-LOADER（您可以忽略）
基本 vue 在 app.js 中设置，如下：（您可以忽略）


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 component中导入您的组件）

<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.blade.app 添加元素和脚本标签以查看，（我没有添加 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 [email protected]

我没有安装原始的杂货您已经安装了以前的安装，以确保您不会结束创建一个新项目或等。

编辑02： github链接

Aright, I've just created a new project and everything was working so here's the steps which you can obviously ignore Laravel installation.

Composer create-project --prefer-dist laravel/laravel test(you can ignore)
Composer require laravel/ui(you can ignore)
php artisan ui vue(you can ignore)
npm install && npm install [email protected] (you can ignore, but make sure you install paginate)
npm update vue-loader (you can ignore)
Basic VUE setup in app.js as below : (you can ignore)


require('./bootstrap');

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


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

In Example-Component.vue : (don't forget to import your component in VUE component)

<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 Add Element and script tag to view, (I haven't added CSS because i only wanted to test 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 (You should call your API via controller which is the recommended way, I've done this using api.php directly to don't waste time and lines of codes and description in here.)

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

So, you've already installed your Laravel project, if you're not sure about your paginate component, just remove It like below :

npm uninstall package-name-in-package.json

And install it as i said :

install [email protected]

I haven't installed the original paginate to make sure you get what you want base on what you've installed before, to make sure you don't end to creating a new project or etc.

Edit 02 : Github Link

回复收藏 0 原文

请持续率性 2025-02-08 02:08:34

i此错误是由于JSON引起的，您已从控制器返回您

，您可以在 mdn文档

您可以通过添加您的控制器的响应来尝试一下

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));
}

I This error is caused due to json you have returned from controller

you check out more at MDN docs

you can try this out by adding in you controller response of getting post

response(json_encode($posts));

And Also try this out


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));
}

回复收藏 0 原文

~没有更多了~