フロントエンドとバックエンドを分離してlayuiプロジェクトを実行する方法-ライユイのチュートリアル-php.cn

ホームページ

ウェブフロントエンド

ライユイのチュートリアル

フロントエンドとバックエンドを分離してlayuiプロジェクトを実行する方法

下次还敢

Apr 04, 2024 am 03:45 AM

csslayuiデータアクセス

Layui フロントエンドとバックエンドの分離プロジェクトを実行するには、次の手順を順番に実行する必要があります: Node.js と NPM をインストールします。 Node.js プロジェクトを初期化します。依存関係をインストールします。サーバー側のコードを作成します。フロントエンドコードを作成します。サーバー側のコードを実行します。

フロントエンドとバックエンドを分離してlayuiプロジェクトを実行する方法

Layui フロントエンドとバックエンドの分離プロジェクトを実行する方法

layui は、レスポンシブなインターフェイスとバックエンドインターフェイスを構築するための強力なフロントエンド UI フレームワークです。インタラクティブな Web アプリケーション。 フロントエンドとバックエンドの分離とは、アプリケーションのフロントエンドとバックエンド (ロジックおよびデータアクセス層) を別々に開発することを指します。

#Layui フロントエンドとバックエンドの分離プロジェクトを実行する手順は次のとおりです: #1. Node.js と NPM

## をインストールします。 #まず、コンピューターに Node.js と NPM がインストールされていることを確認します。インストーラーは【Node.js公式サイト】(https://nodejs.org/)からダウンロードできます。

2. プロジェクトを初期化します

新しいプロジェクトディレクトリを作成し、NPM を使用して新しい Node.js プロジェクトを初期化します:

mkdir my-project
cd my-project
npm init -y

3. 依存関係をインストールします

Layui、Express、body-parser など、プロジェクトに必要な依存関係をインストールします:

npm install layui express body-parser --save

server.js# にサーバー側コード

を作成します。 ## ファイルサーバー側コードを次の場所に作成します:

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

// 使用 body-parser 解析请求主体
app.use(bodyParser.json());

// 设置静态文件目录
app.use(express.static('public'));

// 定义路由
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

// 监听端口
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

5. フロントエンドコードを作成しますフロントエンドコードを

public

ディレクトリに作成します:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Layui 前后端分离示例</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
  <div id="app"></div>
  <script src="layui/layui.js"></script>
  <script>
    layui.use('layer', () => {
      layer.msg('Hello from Layui!');
    });
  </script>
</body>
</html>

6. プロジェクトを実行します

server.js