Javascript+Nodejs全栈前端全能|果fx

原创

sou百课优

发布于 2024-11-13 00:23:16

650

发布于 2024-11-13 00:23:16

以下是一个简单的 JavaScript + Node.js 全栈实战示例，展示如何创建一个基本的全栈应用，其中包括前端（使用 HTML 和 JavaScript）和后端（使用 Node.js 和 Express）。

项目结构

my-fullstack-app
│
├── backend
│   ├── server.js
│   └── package.json
│
└── frontend
    ├── index.html
    └── script.js

步骤 1: 创建后端

创建 backend 文件夹，并在其中运行以下命令来初始化 Node.js 项目：

mkdir backend
cd backend
npm init -y

安装 Express：

npm install express cors

创建 server.js 文件并添加以下代码：

// backend/server.js
const express = require('express');
const cors = require('cors');

const app = express();
const PORT = 3000;

app.use(cors());
app.use(express.json());

// 简单的 API 路由
app.get('/api/message', (req, res) => {
    res.json({ message: 'Hello from the backend!' });
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

启动后端服务：

node server.js

步骤 2: 创建前端

创建 frontend 文件夹，并在其中创建 index.html 和 script.js 文件。

在 index.html 中添加以下代码：

<!-- frontend/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullstack App</title>
</head>
<body>
    <h1>Message from Backend:</h1>
    <div id="message"></div>
    <script src="script.js"></script>
</body>
</html>

在 script.js 中添加以下代码：

// frontend/script.js
async function fetchMessage() {
    try {
        const response = await fetch('http://localhost:3000/api/message');
        const data = await response.json();
        document.getElementById('message').innerText = data.message;
    } catch (error) {
        console.error('Error fetching message:', error);
    }
}

// 当页面加载完成时调用
window.onload = fetchMessage;

步骤 3: 运行前端

使用任意 HTTP 服务器（如 live-server, http-server 等）来托管你的 frontend 文件夹。你可以全局安装 http-server 并运行它：

npm install -g http-server
cd frontend
http-server

打开浏览器并访问 http://localhost:8080（或终端上显示的其他端口），你会看到来自后端的消息。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

登录后参与评论

0 条评论

热度