프론트엔드와 백엔드를 분리하여 Layui 프로젝트를 실행하는 방법-레이이 튜토리얼-php.cn

프론트엔드와 백엔드를 분리하여 Layui 프로젝트를 실행하는 방법

下次还敢

풀어 주다： 2024-04-04 03:45:17

원래의

515명이 탐색했습니다.

Layui 프론트엔드와 백엔드 분리 프로젝트를 실행하려면 Node.js와 NPM을 설치하는 단계를 순서대로 수행해야 합니다. Node.js 프로젝트를 초기화합니다. 종속성을 설치합니다. 서버 측 코드를 만듭니다. 프런트 엔드 코드를 만듭니다. 서버측 코드를 실행합니다.

프론트엔드와 백엔드를 분리하여 Layui 프로젝트를 실행하는 방법

Layui 프런트엔드 및 백엔드 분리 프로젝트 실행 방법

layui는 반응형 및 대화형 웹 애플리케이션을 구축하기 위한 강력한 프런트엔드 UI 프레임워크입니다. 프런트엔드와 백엔드 분리는 애플리케이션의 프런트엔드와 백엔드(논리 및 데이터 액세스 계층)를 별도로 개발하는 것을 의미합니다.

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 파일에서 서버측 코드 생성: 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:3000rrreee

에서 프런트엔드 코드 생성 🎜🎜. public code> 디렉토리에 프런트엔드 코드 생성: 🎜rrreee🎜6. 프로젝트 실행 🎜🎜<code>server.js

파일을 실행하여 서버 시작: 🎜rrreee🎜 방문 브라우저에서 http://localhost:3000 애플리케이션을 봅니다. 🎜

위 내용은 프론트엔드와 백엔드를 분리하여 Layui 프로젝트를 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!