Maison >interface Web >Tutoriel Layui >Comment exécuter un projet layui avec séparation front-end et back-end

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

下次还敢original: 2024-04-04 03:45:17520parcourir

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

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>

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>

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

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!

layui npm express public JS http https ui

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment exécuter LayuiArticle suivant：Comment exécuter Layui

Articles Liés

Voir plus