検索

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

Jul 27, 2019 pm 04:05 PM
layui後部

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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。