So führen Sie ein Laui-Projekt mit Front-End- und Back-End-Trennung aus-Layui-Tutorial-php.cn

So führen Sie ein Laui-Projekt mit Front-End- und Back-End-Trennung aus

下次还敢

Freigeben： 2024-04-04 03:45:17

Original

514 Leute haben es durchsucht

Um das Front-End- und Back-End-Trennungsprojekt von Layui auszuführen, müssen Sie die folgenden Schritte der Reihe nach ausführen: Node.js und NPM installieren. Initialisieren Sie das Node.js-Projekt. Abhängigkeiten installieren. Erstellen Sie serverseitigen Code. Erstellen Sie Frontend-Code. Führen Sie serverseitigen Code aus.

So führen Sie ein Laui-Projekt mit Front-End- und Back-End-Trennung aus

So führen Sie das Front-End- und Back-End-Trennungsprojekt von Layui aus

Layui ist ein leistungsstarkes Front-End-UI-Framework zum Erstellen reaktionsfähiger und interaktiver Webanwendungen. Trennung von Front-End und Back-End bedeutet, Front-End und Back-End (Logik- und Datenzugriffsschicht) der Anwendung getrennt zu entwickeln.

Die Schritte zum Ausführen von Layui-Front-End- und Back-End-Trennungsprojekten sind wie folgt:

1. Installieren Sie Node.js und NPM

Stellen Sie zunächst sicher, dass auf Ihrem Computer Node.js und NPM installiert sind. Sie können das Installationsprogramm von der [offiziellen Website von Node.js](https://nodejs.org/) herunterladen.

2. Initialisieren Sie das Projekt

Erstellen Sie ein neues Projektverzeichnis und initialisieren Sie dann mit NPM ein neues Node.js-Projekt:

<code class="shell">mkdir my-project
cd my-project
npm init -y</code>

Nach dem Login kopieren

3. Installieren Sie Abhängigkeiten

Installieren Sie die für das Projekt erforderlichen Abhängigkeiten, einschließlich Layui, Express und Body-Parser:

<code class="shell">npm install layui express body-parser --save</code>

Nach dem Login kopieren

4. Serverseitigen Code erstellen

Serverseitigen Code in der Datei server.js erstellen: server.js 文件中创建服务器端代码：

<code class="javascript">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');
});</code>

Nach dem Login kopieren

5. 创建前端代码

在 public 目录中创建前端代码：

<code class="html"><!-- 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></code>

Nach dem Login kopieren

6. 运行项目

运行 server.js 文件启动服务器：

<code class="shell">node server.js</code>

Nach dem Login kopieren

在浏览器中访问 http://localhost:3000rrreee

5. Front-End-Code erstellen 🎜🎜in

 public Erstellen Sie den Front-End-Code im Code>-Verzeichnis: 🎜rrreee🎜6. Führen Sie das Projekt aus. 🎜🎜Führen Sie die Datei <code>server.js

aus, um den Server zu starten: 🎜rrreee🎜Besuchen Sie http://localhost:3000 im Browser Anwendung anzeigen. 🎜

Das obige ist der detaillierte Inhalt vonSo führen Sie ein Laui-Projekt mit Front-End- und Back-End-Trennung aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!