How to run layui project with front-end and back-end separation-Layui Tutorial-php.cn

How to run layui project with front-end and back-end separation

下次还敢

Release： 2024-04-04 03:45:17

Original

458 people have browsed it

To run the Layui front-end and back-end separation project, you need to perform the following steps in sequence: Install Node.js and NPM. Initialize the Node.js project. Install dependencies. Create server-side code. Create front-end code. Run server-side code.

How to run layui project with front-end and back-end separation

How to run Layui front-end and back-end separation project

layui is a powerful front-end UI framework for building responsive and interactive web application. Separation of front-end and back-end refers to developing the front-end and back-end (logic and data access layer) of the application separately.

The steps to run the Layui front-end and back-end separation project are as follows:

1. Install Node.js and NPM

First, make sure your computer has it installed Node.js and NPM. You can download the installer from [Node.js official website](https://nodejs.org/).

2. Initialize the project

Create a new project directory, and then use NPM to initialize a new Node.js project:

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

Copy after login

3. Install dependencies

Install the dependencies required for the project, including Layui, Express and body-parser:

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

Copy after login

4. Create the server-side code

in the server.js file Create the server-side code in:

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

Copy after login

5. Create the front-end code

Create the front-end code in the public directory:

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

Copy after login

6. Run the project

Run the server.js file to start the server:

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

Copy after login

Visit http://localhost:3000 in the browser to view the application.

The above is the detailed content of How to run layui project with front-end and back-end separation. For more information, please follow other related articles on the PHP Chinese website!