layui前後端分離的項目怎麼跑起來-Layui教程-PHP中文網

layui前後端分離的項目怎麼跑起來

下次还敢

發布： 2024-04-04 03:45:17

原創

515 人瀏覽過

執行 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 專案：

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

登入後複製

3. 安裝依賴項

安裝專案所需的依賴項，包括Layui、Express 和body-parser：

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

登入後複製

4. 建立伺服器端程式碼

在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>

登入後複製

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>

登入後複製

6. 執行專案

執行server.js 檔案啟動伺服器：

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

登入後複製

在瀏覽器中存取http://localhost:3000 查看應用程式。

以上是layui前後端分離的項目怎麼跑起來的詳細內容。更多資訊請關注PHP中文網其他相關文章！