Rumah > Artikel > hujung hadapan web > Bagaimana untuk menjalankan projek layui dengan pemisahan bahagian hadapan dan belakang
Bagaimana untuk menjalankan projek layui dengan pemisahan bahagian hadapan dan belakang
- 下次还敢asal
- 2024-04-04 03:45:17487semak imbas
Untuk menjalankan projek pemisahan bahagian hadapan dan belakang Layui, anda perlu melakukan langkah berikut mengikut urutan: Pasang Node.js dan NPM. Mulakan projek Node.js. Pasang kebergantungan. Buat kod sebelah pelayan. Buat kod bahagian hadapan. Jalankan kod sebelah pelayan.
Cara menjalankan projek pemisahan bahagian hadapan dan belakang Layui
layui ialah rangka kerja UI bahagian hadapan yang berkuasa untuk membina aplikasi web yang responsif dan interaktif. Pemisahan bahagian hadapan dan bahagian belakang bermaksud membangunkan bahagian hadapan dan bahagian belakang (lapisan logik dan akses data) aplikasi secara berasingan.
Langkah-langkah untuk menjalankan projek pemisahan bahagian hadapan dan belakang Layui adalah seperti berikut:
1 Pasang Node.js dan NPM
Pertama, pastikan komputer anda memasang Node.js dan NPM. Anda boleh memuat turun pemasang daripada [tapak web rasmi Node.js](https://nodejs.org/).
2 Mulakan projek
Buat direktori projek baharu, dan kemudian gunakan NPM untuk memulakan projek Node.js baharu:
<code class="shell">mkdir my-project cd my-project npm init -y</code>
3 Pasang kebergantungan
Pasang kebergantungan yang diperlukan untuk projek, termasuk Layui, Express dan body-parser:
<code class="shell">npm install layui express body-parser --save</code>
4. Cipta kod bahagian pelayan
Buat kod bahagian pelayan dalam fail 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
server.js untuk memulakan pelayan: 🎜rrreee🎜Lawati . http://localhost:3000 dalam pelayar Lihat aplikasi. 🎜Atas ialah kandungan terperinci Bagaimana untuk menjalankan projek layui dengan pemisahan bahagian hadapan dan belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!