《Nodejs开发指南》例子代码重写

《Nodejs开发指南》例子代码重写

使用新版本(4.2.0)express， jade模板引擎重写。刚接触nodejs没多久，花好几天写完， 本机基本能运行，发出来分享下。

github地址： https://github.com/wteam-xq3/microBlog

3 回复

当然可以！以下是一个基于新版 Node.js (例如 v18.x) 和 Express 4.18.2 的简单博客应用的示例代码。这个示例将展示如何使用 Express 和 Jade 模板引擎来创建一个简单的博客页面。

示例代码

安装依赖

首先，确保你已经安装了 Node.js 和 npm。然后，在项目根目录中创建 package.json 文件，并安装所需的依赖：

npm init -y
npm install express jade body-parser

创建服务器文件

接下来，创建一个名为 app.js 的文件，并添加以下代码：

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

const app = express();
const PORT = process.env.PORT || 3000;

// 设置模板引擎为 Jade
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// 使用 body-parser 中间件处理表单数据
app.use(bodyParser.urlencoded({ extended: false }));

// 静态文件服务
app.use(express.static(path.join(__dirname, 'public')));

// 路由定义
app.get('/', (req, res) => {
    const posts = [
        { title: 'Hello World', content: 'This is my first post.' },
        { title: 'Node.js Rocks', content: 'Learn to build scalable apps with Node.js.' }
    ];
    res.render('index', { posts });
});

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

创建视图文件

在项目根目录下创建一个 views 文件夹，并在其中创建一个 index.jade 文件，内容如下：

doctype html
html
  head
    title Micro Blog
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1 Micro Blog
    ul
      each post in posts
        li
          h2=post.title
          p=post.content
    form(action='/', method='post')
      input(type='text', name='title', placeholder='Title')
      textarea(name='content', placeholder='Content')
      button(type='submit') Post

创建静态资源文件

在项目根目录下创建一个 public 文件夹，并在其中创建一个 stylesheets 文件夹。在这个文件夹中创建一个 style.css 文件，内容如下：

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

h1 {
  color: #333;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  padding: 10px;
}

运行项目

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

node app.js

打开浏览器访问 http://localhost:3000，你应该能看到一个简单的博客页面，包含两个预设的博客文章，并且有一个表单用于发布新的文章。

希望这个示例对你有帮助！如果你有任何问题或需要进一步的帮助，请随时告诉我。


本人node新手，在看此书的时候，从第五章开始很多例子都太旧了。 无从下手的感觉。 更糟糕的是，下载模块会出现“registry error parsing json”的错误。 对于新人，请问有什么可以入门的书籍或资料？ 谢谢

根据你的描述，我理解你希望重写《Nodejs开发指南》中的一个例子代码，使用新版本的Express和Jade模板引擎。虽然你没有提供具体的例子代码，但我可以为你提供一个简单的示例，展示如何使用当前版本的Express（例如Express 4.x）和Pug（Jade的后继者）来创建一个简单的博客应用。

示例代码

首先，确保安装了必要的依赖：

npm init -y
npm install express pug body-parser

接下来，创建一个简单的Express应用：

// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 3000;

// 设置视图引擎为Pug
app.set('view engine', 'pug');

// 使用body-parser中间件解析请求体
app.use(bodyParser.urlencoded({ extended: false }));

// 静态文件服务
app.use(express.static('public'));

// 路由定义
app.get('/', (req, res) => {
    const posts = [
        { title: 'Hello World', content: 'This is my first post.' },
        { title: 'Node.js', content: 'Learning Node.js is fun!' }
    ];
    res.render('index', { posts });
});

app.listen(port, () => {
    console.log(`App listening at http://localhost:${port}`);
});

然后创建一个简单的Pug模板文件views/index.pug：

doctype html
html
  head
    title MicroBlog
  body
    h1 MicroBlog
    ul
      each post in posts
        li
          h2= post.title
          p= post.content

最后，确保在项目根目录下有一个public文件夹，可以用来存放静态资源如CSS、JavaScript等。

解释

  • Express: 是一个流行的Web框架，用于快速构建Node.js应用程序。
  • Pug: 是一个简洁的模板引擎，用于生成HTML。它是Jade的继承者，但更新更符合现代标准。
  • body-parser: 一个中间件，用于解析请求体，使我们能够处理表单数据。
  • 路由: 定义了如何响应客户端的请求。在这个例子中，我们只定义了一个根路径/的GET请求处理函数。

这个简单的例子展示了如何使用Express和Pug来创建一个简单的博客应用。你可以根据实际需求扩展这个应用，比如添加数据库支持、用户认证等功能。希望这对你有所帮助！

回到顶部