新手求问一个弱智问题：如何在Nodejs中开始编程？

新手求问一个弱智问题：如何在Nodejs中开始编程？

现在大四，想用nodejs配合html5做个毕设。刚开始学nodejs不久。 请问我怎么把我html页面中用到的js类库，style等文件挂到服务器上呢？

11 回复

当然可以！对于刚开始学习 Node.js 的同学来说，把 HTML 页面中的 JS 类库、样式文件等资源挂到服务器上其实是一个非常基础且常见的任务。我们可以使用 Express 框架来快速搭建一个简单的服务器，并配置静态资源的访问。

步骤 1: 安装 Node.js 和 Express

首先确保你已经安装了 Node.js。你可以从官网下载并安装：https://nodejs.org/en/download/

然后，在你的项目目录下，通过 npm（Node.js 包管理器）安装 Express：

npm init -y
npm install express

步骤 2: 创建基本的服务器

创建一个新的 JavaScript 文件，例如 server.js，并在其中编写以下代码：

const express = require('express');
const path = require('path');

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

// 配置静态资源路径
app.use(express.static(path.join(__dirname, 'public')));

// 处理根路径的请求
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'index.html'));
});

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

步骤 3: 创建 HTML 页面和其他资源

在项目目录中，创建一个名为 public 的文件夹，用于存放所有的静态资源，如 CSS 文件、JS 文件和图片等。例如：

  • public/styles.css
  • public/script.js
  • public/image.png

同时，创建一个 views 文件夹来存放你的 HTML 文件：

  • views/index.html

示例 HTML 文件

在 views/index.html 中，你可以这样引用这些资源：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Project</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="/script.js"></script>
</body>
</html>

步骤 4: 运行服务器

回到命令行，运行你的服务器：

node server.js

打开浏览器，访问 http://localhost:3000，你应该能看到你的 HTML 页面，以及所有正确加载的静态资源。

这就是如何在 Node.js 中设置一个简单的服务器，并提供静态资源的基本步骤。希望这对你有所帮助！


nodejs中有个public文件夹，是放js，css，image文件的。

然后用express的use方法引进去？

在app.js中有配置公共文件的路径，然后看views下的index.ejs中的css引用方法就可以了

大概懂事怎么回事了！太感谢了！！！工程中views和public等这种项目结构的文件夹是自己建的？

用express可以新建项目。还是先看看那本书吧。nodejs开发指南。里面的入门讲解还是很多的，实例就不要试了，版本变化太大了。

恩恩，借那个书了。。两个版本区别真大。而且涉及到跟socket.io配合的地方也各种变啊

如果用express的话，推荐直接看express的官方API，因为书上的版本还是比较老的，很多API已经不存在或者使用方法进行了变更……

嗯，书上的东西大概看了下，思路还是那样，然后看一下官方的2.x到3.x的改动就差不多了。

嗯，谢谢，已经搞定了。

要在Node.js中开始编程，并且将HTML页面中的JS类库、样式文件等挂到服务器上，你可以使用Express框架来快速搭建一个简单的Web服务器。以下是一个简单的步骤和示例代码：

步骤：

  1. 安装Node.js：确保你的计算机上已安装Node.js。
  2. 创建项目文件夹：在命令行中创建一个新的文件夹用于存放项目文件。
  3. 初始化项目：进入项目文件夹，运行 npm init 初始化一个新的Node.js项目。
  4. 安装Express：在项目文件夹中运行 npm install express 安装Express框架。
  5. 设置静态文件服务：使用Express的express.static中间件来提供静态文件（如CSS、JavaScript文件）。
  6. 启动服务器：编写一个简单的Node.js脚本来启动服务器。

示例代码：

首先，在项目根目录下创建一个名为 server.js 的文件，然后输入以下代码：

const express = require('express');
const path = require('path');

// 创建应用实例
const app = express();
const port = 3000;

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 设置主页路由
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'views', 'index.html'));
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});

文件结构说明：

  • public/ 目录用于存放CSS、JavaScript和其他静态文件。
  • views/ 目录用于存放HTML文件。

例如，你的项目文件夹可能看起来像这样：

my-node-project/
├── node_modules/
├── public/
│   ├── style.css
│   └── script.js
├── views/
│   └── index.html
├── server.js
└── package.json

运行服务器：

在命令行中，确保你在项目文件夹中，然后运行 node server.js。打开浏览器并访问 http://localhost:3000/，你应该能看到你的 index.html 页面。

通过这种方式，你可以轻松地将HTML页面中的JS类库、样式文件等挂到服务器上。希望这对你有所帮助！

回到顶部