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.
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 :
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/).
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>
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>
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>在 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>运行 server.js 文件启动服务器：
<code class="shell">node server.js</code>
在浏览器中访问 http://localhost:3000rrreee
. 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!
![Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
