遍历文件夹中的文件并根据文件打印html内容

Question

我目前正在学习使用 PHP Laravel。 在我当前的项目中，我的模板中有多个“相同”的 html 代码，我想通过循环实现这些代码的自动化。

因为我有每个项目的图像和每个项目的语言文件，所以我想在我的 vue 模板中为我的项目图像文件夹或我的项目语言文件文件夹中的每个文件使用一个 foreach 循环。如果我想轻松扩展内容，这也会更容易。

我有这样的想法。

PHP：

<?php
    $files = scandir('../resources/lang/en/project');
    $files2 = scandir('Images/projects');
?>

模板：

@foreach($files as $file)
    <div class="row project">
        <div class="col-md-7 order-md-2">
            <h3 class="heading project-heading">{{ __('$file.title') }}<span class="text-muted">{{ __('$file.location') }}</span></h3>
            <p class="lead">{{ __('$file.content') }}</p>
        </div>
        <div class="col-md-5 order-md-1">
            <img class="project-image img-fluid mx-auto" src="/Images/projects/$file.jpg" alt="placeholder">
        </div>
    </div>
@endforeach

这不起作用，我主要是在寻找一些关于如何解决这个用例的意见。

Answer 1

在回答您的问题之前，我建议您退后一步并learn the basics of Laravel，然后再通过与 Laravel 一起使用其他技术来增加额外的复杂性。这只是一个建议，您正在自己的学习之旅中，但同时尝试学习太多东西可能会让人不知所措。

不管怎样，继续。

我不会直接回答您的问题，而是提供一个基本示例，说明您如何阅读并遍历目录的内容。然后，您可以根据需要对其进行调整。

假设您在 routes/web.php 文件中定义了一条路线，您将导航到该路线以显示一些文件：

routes/web.php

Route::get('/', function () {
    // Using Laravels built in storage helper,
    // get all the files in the 'public/projects/images' folder
    // NOTE: the 'public' folder is symlinked to 'storage',
    // add files to 'storage' rather than 'public'
    $files = Illuminate\Support\Facades\Storage::disk('public')->listContents('projects/images');

    // display a view and pass the files to the view
    return view('file-list', compact('files'));
});

以上通常会在控制器中执行，但为了方便起见，我已将其添加到路由中。

resources/views/file-list.blade.php

如果您真的保持简单并且只想使用Blade 开始，您可以执行以下操作：

<ul>
    @foreach ($files as $file)
        <li>{{ $file['basename'] }}</li>
    @endforeach
</ul>

传递给视图的$files 变量是array，因此我们循环$files 将$files 数组中的每个元素称为$file（这也是一个数组）和对于每个$file 元素，我们显示其文件名（基本名称）。 $file 上可用的其他索引是：

  "type" => "file"
  "path" => "projects/images/de.jpg"
  "timestamp" => 1621078308
  "size" => 0
  "dirname" => "projects/images"
  "basename" => "de.jpg"
  "extension" => "jpg"
  "filename" => "de"

注意@foreach 是一个 Blade 指令。

我假设你已经在你的 Laravel 应用程序中安装了 Vue，并且你知道如何添加 Vue 组件。

在某处为自己创建一个新的Vue 组件，例如resources/js/components/FileListComponent.vue，并将其注册到您的Vue 实例中。在您的组件内添加以下内容：

<template>
  <ul id="files-list">
    <li v-for="(file, index) in files" :key="index">
        {{ file.basename }}
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    files: Object,
  }
};
</script>

我们所做的是创建一个Vue 组件，它需要一个files prop，这将是我们之前获得的$files，我们将在使用该组件时提供它。使用 files 属性，我们使用 v-for（它提供与 Blade 中的 @foreach/@for 等效的功能）遍历文件，并像以前一样显示每个元素的文件名。

要使用该组件，请将组件添加到之前创建的resources/views/file-list.blade.php 视图并提供files 属性：

<file-list-component :files="{{ json_encode($files) }}" />

假设您已正确完成所有操作，您应该会看到与以前相同的输出，或者如果您在刀片视图中仍然有 @foreach。