search

Home  >  Article  >  Web Front-end  >  How to run layui project with front-end and back-end separation

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

下次还敢
下次还敢Original
2024-04-04 03:45:17489browse

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>

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>

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>

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>

6. Run the project

Run the server.js file to start the server: 

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

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!

layui npm express public JS http https ui
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to run layuiNext article：How to run layui

Related articles

See more