layuiバックエンドの構築方法

angryTom
リリース: 2019-07-27 16:05:45
オリジナル
7355 人が閲覧しました

layuiバックエンドの構築方法

layui について詳しく知りたい場合は、次をクリックしてください: layui チュートリアル

## layui(同音異義語:UI風)は、独自のモジュール仕様で記述されたフロントエンドUIフレームワークで、ネイティブHTML/CSS/JSの記述形式と構成形式に準拠しており、敷居が非常に低く、すぐに使用できます。 。外観はミニマルですが、内部は充実しています。サイズは軽く、コンポーネントが豊富です。コア コードから API に至るすべての詳細が注意深く作成されており、迅速なインターフェイス開発に非常に適しています。 lauiui の最初のバージョンは、2016 年の黄金の秋にリリースされました。これは、MVVM の最下層に基づいた UI フレームワークとは異なりますが、トレンドに逆らうことなく、自然への回帰を信じています。正確に言うと、サーバーサイド プログラマ向けにカスタマイズされたものです。さまざまなフロントエンド ツールの複雑な構成に関与する必要はありません。ブラウザ自体、およびすべての要素と対話に直面するだけで済みます。必要なものがすぐに見つかります。

1. 公式 Web サイトからlayui をダウンロードします (任意のドライブ文字に保存できます)

アドレス: http://www.layui .com/

ダウンロードが完了すると、次のような構造になっていることがわかります。

├─css //css ディレクトリ

│ │─modules //Module css ディレクトリ (通常、モジュールが比較的大きい場合は、次の 3 つのように個別に抽出します:) │ │ §─laydate

│ │ §─layer

│ │ └─layim

│ └─layui.css //コアスタイルファイル

├─font // フォントアイコンディレクトリ

├─images // 画像リソースディレクトリ(現在はlayimが使用するGIFのみ)とエディタ Expression)

│─lay //モジュールコアディレクトリ

│ └─modules //各モジュールコンポーネント

│─layui.js //基本コアライブラリ

lux─layui.all.js //layui.js とすべてのモジュールを含むマージされたファイル

2.layui の完全な開発パッケージを Git リポジトリから次の場所にダウンロードします。 2 番目のステップの開発を容易にする

ダウンロード アドレス: https://github.com/sentsin/layui/

3. npm インストール (提供されています)最初にnode.jsをインストールする必要があります-----この操作については、次のセクションnode.jsのインストールを参照してください)

一般的には次の目的で使用されます。 WebPack 管理layuiバックエンドの構築方法

4. 上記の操作が完了したら、新しいプロジェクトを作成します (ここでは例として MVC)

そして、ダウンロードしたファイルを移動します上の図に示すように、layui (完全に移動します。ファイル名やその他の情報は変更しないでください) をプロジェクトに追加します。

layuiバックエンドの構築方法

layuiバックエンドの構築方法

5.layui がデプロイされたので、効果を表示するための新しいページを作成できます。

MVC で新しいレイアウト ページを作成します (一部のフレーム内の内容は同じなので再利用できるので、新しいレイアウト ページを作成します。他のプロジェクトで新しいマスター ページやユーザー コントロールなどを作成することもできます) アドレス: http:// www.layui.com/demo/admin.html 背景レイアウトを書き込みます

選択してレイアウト コードを取得し、そのコードをレイアウト ページに貼り付けます。

layuiバックエンドの構築方法 新しいレイアウト ページとビュー ページを作成します。レイアウト ページのメイン コンテンツ領域に、

@RenderBody()

メソッドを追加します。これは他のプロジェクトには当てはまりません。次のように

ビューを追加します--layuiバックエンドの構築方法

#ビューを実行して、次の効果が得られますlayuiバックエンドの構築方法

レイアウト ページのリストにジャンプ リンクを追加します --layuiバックエンドの構築方法

新しい FormTable ビューを作成します (レイアウト ページを追加する必要があることに注意してください) layuiバックエンドの構築方法、他の要素を追加します。フォーム要素はここに追加されます。アドレス: http://www.layui.com /demo/form.html、[コードの表示] を選択し、必要なコードをページに貼り付けます - -

index.cshtml ページ を実行した後、リスト 1 をクリックすると、次の効果が表示されます。

layuiバックエンドの構築方法

上記の操作は、単純にlayuiをビルドすることです。そしてバックグラウンドシステムを構築します。

以上がlayuiバックエンドの構築方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート