【node学习】使用node简单搭建一个网页和todo

Elik-hb

已于 2024-06-19 20:41:00 修改

阅读量325

点赞数 3

分类专栏： node 文章标签： node.js

于 2024-06-14 16:28:08 首次发布

本文链接：https://blog.csdn.net/qq_65099052/article/details/139684825

版权

node 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如何使用 Node.js 和 Express 搭建动态网页

搭建一个简单的动态网页是学习 Node.js 和 Express 的一个很好的实践。本文将分步骤指导你如何从零开始搭建一个动态网页应用。

步骤 1：安装 Node.js 和 npm

首先，确保你已经安装了 Node.js 和 npm（Node 包管理器）。可以从 Node.js 官方网站下载并安装最新版本。

步骤 2：初始化项目

在终端或命令行中，创建一个新的项目目录并初始化 npm：

mkdir dynamic-webpage
cd dynamic-webpage
npm init -y

这会在项目目录中创建一个 package.json 文件，包含项目的基本配置信息。

步骤 3：安装 Express 框架

Express 是一个简洁且灵活的 Node.js web 应用框架。安装 Express 及其依赖包：

npm install express

步骤 4：创建服务器文件

在项目目录中创建一个名为 server.js 的文件，并编写以下内容：

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

// 设置视图引擎
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

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

// 路由
app.get('/', (req, res) => {
  res.render('index', { title: '动态网页示例', message: '欢迎使用 Node.js 和 Express 搭建的动态网页！' });
});

// 启动服务器
app.listen(port, () => {
  console.log(`服务器正在运行在 http://localhost:${port}`);
});

这段代码创建了一个基本的 Express 服务器，设置了视图引擎为 EJS，并定义了一个简单的路由。

步骤 5：创建视图模板

在项目目录中创建一个名为 views 的文件夹，并在其中创建一个名为 index.ejs 的文件，编写以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>

这个模板文件使用 EJS 语法，可以将服务器传递的数据动态地插入到 HTML 中。

步骤 6：创建静态文件

在项目目录中创建一个名为 public 的文件夹，可以在其中存放静态文件，如 CSS、JavaScript、图片等。

步骤 7：运行服务器

在终端中运行以下命令启动服务器：

node server.js

如果一切顺利，你应该会看到以下输出：

服务器正在运行在 http://localhost:3000

步骤 8：访问动态网页

打开浏览器，访问 http://localhost:3000，你应该会看到一个包含动态内容的网页，显示标题和欢迎信息。

如何使用 Node.js 和 Express 搭建一个动态的 Todo 应用

搭建一个 Todo 应用是学习 Node.js 和 Express 的一个很好的实践项目。本文将逐步指导你如何从零开始搭建一个动态的 Todo 应用。

步骤 1：安装 Node.js 和 npm

首先，确保你已经安装了 Node.js 和 npm（Node 包管理器）。可以从 Node.js 官方网站下载并安装最新版本。

步骤 2：初始化项目

在终端或命令行中，创建一个新的项目目录并初始化 npm：

mkdir todo-app
cd todo-app
npm init -y

这会在项目目录中创建一个 package.json 文件，包含项目的基本配置信息。

步骤 3：安装 Express 框架

Express 是一个简洁且灵活的 Node.js web 应用框架。安装 Express 及其依赖包：

npm install express

步骤 4：安装其他必要的包

安装 EJS 视图引擎和 Body Parser 中间件，用于处理 POST 请求的数据：

npm install ejs body-parser

步骤 5：创建服务器文件

在项目目录中创建一个名为 server.js 的文件，并编写以下内容：

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));

// 设置视图引擎
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

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

let todoList = [];

// 路由
app.get('/', (req, res) => {
  res.render('index', { title: 'Todo 应用', todos: todoList });
});

app.post('/add', (req, res) => {
  const newTodo = req.body.todo;
  if (newTodo) {
    todoList.push(newTodo);
  }
  res.redirect('/');
});

// 启动服务器
app.listen(port, () => {
  console.log(`服务器正在运行在 http://localhost:${port}`);
});

这段代码创建了一个基本的 Express 服务器，设置了视图引擎为 EJS，并定义了两个路由：一个用于显示 Todo 列表，另一个用于添加新的 Todo 项。

步骤 6：创建视图模板

在项目目录中创建一个名为 views 的文件夹，并在其中创建一个名为 index.ejs 的文件，编写以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .container {
      max-width: 600px;
      margin: 50px auto;
      text-align: center;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      background: #f4f4f4;
      margin: 10px 0;
      padding: 10px;
      border-radius: 5px;
    }
    form input {
      padding: 10px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1><%= title %></h1>
    <form action="/add" method="POST">
      <input type="text" name="todo" placeholder="输入新的待办事项" required>
      <button type="submit">添加</button>
    </form>
    <ul>
      <% todos.forEach(function(todo) { %>
        <li><%= todo %></li>
      <% }); %>
    </ul>
  </div>
</body>
</html>

这个模板文件使用 EJS 语法，可以将服务器传递的数据动态地插入到 HTML 中，显示 Todo 列表并提供一个表单来添加新的 Todo 项。

步骤 7：创建静态文件

在项目目录中创建一个名为 public 的文件夹，可以在其中存放静态文件，如 CSS、JavaScript、图片等。对于这个简单的应用，可以将 CSS 样式直接写在 index.ejs 文件中。

步骤 8：运行服务器

在终端中运行以下命令启动服务器：

node server.js

如果一切顺利，你应该会看到以下输出：

服务器正在运行在 http://localhost:3000

步骤 9：访问 Todo 应用

打开浏览器，访问 http://localhost:3000，你应该会看到一个包含动态内容的 Todo 应用，显示当前的 Todo 列表并提供一个表单来添加新的 Todo 项。

综上，我们就可以了解了基本构造，和开发一个todo小例子

Elik-hb

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
【node学习】使用node简单搭建一个网页和todo

Express 是一个快速、开放、极简的 Node.js web 应用框架。的文件夹，可以在其中存放静态文件，如 CSS、JavaScript、图片等。首先，需要安装 Node.js 和 npm（Node 包管理器）。的文件夹，并在其中创建一个名为。，可以看到一个包含动态内容的网页。这会在项目目录中创建一个。在项目目录中创建一个名为。在项目目录中创建一个名为。在项目目录中创建一个名为。
复制链接

扫一扫