Layui を使用してファイルのアップロードとダウンロードをサポートするリソース管理システムを開発する方法-jsチュートリアル-php.cn

Layui を使用してファイルのアップロードとダウンロードをサポートするリソース管理システムを開発する方法

PHPz

リリース： 2023-10-24 09:19:47

オリジナル

1492 人が閲覧しました

Layui を使用してファイルのアップロードとダウンロードをサポートするリソース管理システムを開発する方法

はじめに:
インターネットの発展に伴い、データの管理が容易になりました。リソースの確保が重要な課題となっています。企業内のドキュメント管理であっても、個人のファイルストレージであっても、効率的で使いやすいリソース管理システムが必要です。 Layui は、シンプルで明確な設計と豊富なコンポーネントライブラリを備えた軽量のフロントエンドフレームワークで、リソース管理システムの開発に非常に適しています。この記事では、Layui を使用してファイルのアップロードとダウンロードをサポートするリソース管理システムを開発する方法と、具体的なコード例を紹介します。

1. 開発環境をセットアップする
開発を開始する前に、適切な開発環境をセットアップする必要があります。まず、Node.js と npm (ノードパッケージマネージャー) がインストールされていることを確認します。次に、npm を介して Layui コマンドラインツールをインストールします:

npm install -g layui

ログイン後にコピー

Layui コマンドを使用して、新しい Layui プロジェクトを作成できます:

layui new resource-manage

ログイン後にコピー

このコマンドは、It is という名前の新しい Layui プロジェクトを作成します。 resource-manage のフォルダーに移動し、Layui プロジェクトを自動的に初期化します。

2. ページレイアウトとモジュールの設計
次に、ページレイアウトとリソース管理システムの基本モジュールを設計する必要があります。 Layui のグリッドシステムを使用すると、ページレイアウトを柔軟に調整できます。ファイルの検索とアップロードのためにページの上部にナビゲーションバーを配置します。左側のサイドバーはファイルカテゴリの表示とファイルの移動に使用され、右側はファイルリストとファイルの詳細の表示に使用されます。

ページレイアウトを実装する前に、必要な Layui コンポーネントとスタイルを導入し、プロジェクトのルートディレクトリにあるindex.html ファイルを開く必要があります。まず、Layui のスタイルファイルを導入します:

<link rel="stylesheet" href="../layui/css/layui.css">

ログイン後にコピー

次に、Layui の JavaScript ファイルを導入します:

<script src="../layui/layui.js"></script>

ログイン後にコピー

次に、Layui の特性を備えた div コンテナを body タグに追加します:

<body>
  <div class="layui-layout layui-layout-admin"> 
    <!-- 页面布局代码 -->
  </div>
</body>

ログイン後にコピー

3ファイルのアップロードおよびダウンロード機能の実装

ファイルアップロード

Layui は、ファイルアップロード機能の実装に使用できる便利なファイルアップロードコンポーネント layui-upload を提供します。まず、HTML にアップロードボタンを追加します:

<div class="layui-btn layui-btn-normal" id="upload-btn">上传文件</div>

ログイン後にコピー

次に、JavaScript でアップロードボタンのクリックイベントをリッスンし、layui-upload を使用してファイルのアップロードを処理する必要があります:

<script>
  layui.use(['upload'], function() {
    var upload = layui.upload;
    
    // 文件上传事件监听
    upload.render({
      elem: '#upload-btn',  // 绑定上传按钮的 id
      url: '/upload',  // 文件上传的接口地址
      done: function(res) {  // 上传成功的回调函数
        console.log(res);
        // 文件上传成功的处理逻辑
      },
      error: function() {  // 上传出错的回调函数
        // 文件上传出错的处理逻辑
      }
    });
  });
</script>

ログイン後にコピー

ファイルダウンロード

Layuiでは直接ファイルをダウンロードするコンポーネントは提供していませんが、JavaScriptを記述することでファイルダウンロード機能を実装することができます。まず、HTML にダウンロードリンクを追加する必要があります:

<a href="/download/file.pdf" download>下载文件</a>

ログイン後にコピー

次に、ダウンロードリンクをクリックしてファイルのダウンロードをトリガーします。

4. リソース管理システムの機能改善

ファイル一覧表示

リソース管理システムでは、ファイル一覧をユーザーに表示する必要があります。ユーザー。 Layui の Table コンポーネントを使用してこの機能を実現できます。まず、HTML でテーブルコンテナを追加します:

<table class="layui-table" lay-filter="file-table">
  <thead>
    <tr>
      <th>文件名</th>
      <th>大小</th>
      <th>上传时间</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 文件列表数据 -->
  </tbody>
</table>

ログイン後にコピー

次に、JavaScript でlayui.table.render() 関数を使用してテーブルをレンダリングし、データソースを設定します:

<script>
  layui.use(['table'], function() {
    var table = layui.table;
    
    // 表格渲染
    table.render({
      elem: '#file-table',  // 绑定表格容器的 id
      url: '/api/files',  // 表格数据接口地址
      cols: [[
        {field: 'name', title: '文件名'},
        {field: 'size', title: '大小'},
        {field: 'time', title: '上传时间'},
        {fixed: 'right', title:'操作', toolbar: '#file-operation'}
      ]]
    });
  });
</script>

ログイン後にコピー

ファイル削除機能

ファイルリストの操作欄にファイルを削除するための削除ボタンを追加しました。 Layui のツールバーメソッドを使用してこの機能を実現できます。

まず、HTML でテンプレートを追加し、削除ボタンを定義します。

<script type="text/html" id="file-operation">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

ログイン後にコピー

次に、JavaScript でテーブルのツールバーのクリックイベントをリッスンし、イベントタイプに応じて対応する操作を実行します。

<script>
  table.on('tool(file-table)', function(obj){
    if(obj.event === 'delete'){
      // 删除文件的处理逻辑
    }
  });
</script>

ログイン後にコピー

5. 概要
この記事では、Layui を使用してファイルのアップロードとダウンロードをサポートするリソース管理システムを開発する方法を紹介します。 LayuiのスタイルファイルとJavaScriptファイルを導入し、ページレイアウトやモジュール設計を実装しました。ファイルアップロード機能はlayui-uploadを使用して実装し、ファイルダウンロード機能はJavaScriptを記述することで実装します。最後に、layui.table コンポーネントとlayui.form コンポーネントを使用して、リソース管理システムの機能を向上させます。

この記事の学習を通じて、読者は Layui を使用してリソース管理システムを開発する方法を習得し、一定のフロントエンド開発機能を備えていると思います。次に、読者は、独自のニーズに応じてコード例をさらに開発および最適化し、より充実した効率的なリソース管理システムを実現できます。

以上がLayui を使用してファイルのアップロードとダウンロードをサポートするリソース管理システムを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。