Comment exécuter un projet layui avec séparation front-end et back-end-Tutoriel Layui-php.cn

Comment exécuter un projet layui avec séparation front-end et back-end

下次还敢

Libérer： 2024-04-04 03:45:17

original

515 Les gens l'ont consulté

Pour exécuter le projet de séparation front-end et back-end Layui, vous devez effectuer les étapes suivantes dans l'ordre : Installer Node.js et NPM. Initialisez le projet Node.js. Installez les dépendances. Créez du code côté serveur. Créez du code frontal. Exécutez le code côté serveur.

Comment exécuter un projet layui avec séparation front-end et back-end

Comment exécuter le projet de séparation front-end et back-end Layui

layui est un puissant framework d'interface utilisateur frontale pour créer des applications Web réactives et interactives. Séparation du front-end et du back-end signifie développer séparément le front-end et le back-end (couche logique et accès aux données) de l'application.

Les étapes pour exécuter les projets de séparation front-end et back-end Layui sont les suivantes :

1 Installez Node.js et NPM

Tout d'abord, assurez-vous que Node.js et NPM sont installés sur votre ordinateur. Vous pouvez télécharger le programme d'installation à partir du [site officiel de Node.js](https://nodejs.org/).

2. Initialisez le projet

Créez un nouveau répertoire de projet, puis utilisez NPM pour initialiser un nouveau projet Node.js :

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

Copier après la connexion

3 Installez les dépendances

Installez les dépendances requises pour le projet, notamment Layui, Express et body-parser :

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

Copier après la connexion

4. Créez du code côté serveur

Créez du code côté serveur dans le fichier 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>

Copier après la connexion

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>

Copier après la connexion

6. 运行项目

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

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

Copier après la connexion

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

5. Créez du code frontal 🎜🎜dans

. public Créez le code front-end dans le répertoire code> : 🎜rrreee🎜6. Exécutez le projet 🎜🎜Exécutez le fichier <code>server.js

pour démarrer le serveur : 🎜rrreee🎜Visitez http://localhost:3000 dans le navigateur Afficher l'application. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!