Microblog 的demo终于用Nodejs调试成功了

Microblog 的demo终于用Nodejs调试成功了

microblog demo


6 回复

Microblog 的demo终于用Nodejs调试成功了

经过几天的努力,我终于成功地用Node.js搭建了一个Microblog的演示版。这个过程充满了挑战,但也让我对Node.js有了更深的理解。下面是我在实现过程中的一些关键步骤和代码片段。

项目结构

首先,我们来了解一下项目的目录结构:

/microblog-demo
|-- /public
|   |-- /css
|   |-- /js
|-- /routes
|-- /views
|-- app.js
|-- package.json

安装依赖

我们需要安装一些必要的依赖包,如Express、Mongoose等。可以在package.json中添加这些依赖,并通过npm install命令安装它们。

{
  "name": "microblog-demo",
  "version": "1.0.0",
  "description": "A microblog demo built with Node.js and Express",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "mongoose": "^5.10.1",
    "ejs": "^3.1.6"
  }
}

初始化应用

接下来,我们创建一个基本的Express应用。在app.js中初始化Express应用并设置路由。

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

const app = express();

// 设置模板引擎
app.set('view engine', 'ejs');

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

// 连接数据库
mongoose.connect('mongodb://localhost:27017/microblog', { useNewUrlParser: true, useUnifiedTopology: true });

// 定义模型
const PostSchema = new mongoose.Schema({
  title: String,
  content: String,
  createdAt: { type: Date, default: Date.now }
});

const Post = mongoose.model('Post', PostSchema);

// 路由
app.get('/', async (req, res) => {
  const posts = await Post.find().sort({ createdAt: -1 });
  res.render('index', { posts });
});

app.post('/posts', async (req, res) => {
  const post = new Post(req.body);
  await post.save();
  res.redirect('/');
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

视图

最后,我们定义视图文件。在/views/index.ejs中编写HTML模板。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Microblog Demo</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <h1>Microblog Demo</h1>
  <form action="/posts" method="POST">
    <input type="text" name="title" placeholder="Title" required>
    <textarea name="content" placeholder="Content" required></textarea>
    <button type="submit">Post</button>
  </form>

  <% posts.forEach(post => { %>
    <div class="post">
      <h2><%= post.title %></h2>
      <p><%= post.content %></p>
      <small><%= post.createdAt.toLocaleString() %></small>
    </div>
  <% }) %>
</body>
</html>

总结

通过上述步骤,我们成功地搭建了一个简单的Microblog演示版。这只是一个起点,你可以在此基础上继续扩展功能,比如用户认证、评论系统等。希望这篇教程对你有所帮助!


图片怎么不显示呢?

还是直接帖网址吧, 话说 Microblog 具体是什么?

你好,你是在什么环境下,如果是再xp下的话,能把源码发来看看吗?学习学习~~~

这个帖子描述了你在Node.js上成功调试了一个Microblog的演示项目。Microblog是一种简单的微博应用,允许用户发布短消息、关注其他用户等。

示例代码

为了展示一个基本的Microblog应用,我们可以使用Express框架来创建一个简单的Web应用。以下是一个基本的实现:

1. 初始化项目

首先,你需要初始化一个新的Node.js项目,并安装所需的依赖包:

npm init -y
npm install express body-parser ejs

2. 创建基本的服务器

接下来,创建一个app.js文件,编写基本的服务器逻辑:

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

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.set('view engine', 'ejs');

let posts = [];

app.get('/', (req, res) => {
    res.render('index', { posts });
});

app.post('/post', (req, res) => {
    const { message } = req.body;
    posts.push({ id: Date.now(), message });
    res.redirect('/');
});

app.listen(3000, () => console.log('Server started on port 3000'));

3. 创建视图

在项目中创建一个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>Microblog</title>
</head>
<body>
    <h1>Microblog</h1>
    <form action="/post" method="POST">
        <textarea name="message" rows="4" cols="50" placeholder="Write your post here..."></textarea>
        <button type="submit">Post</button>
    </form>

    <% for (let post of posts) { %>
        <div style="border: 1px solid #ccc; padding: 10px; margin-top: 10px;">
            <p><%= post.message %></p>
        </div>
    <% } %>
</body>
</html>

以上代码实现了一个非常基础的Microblog应用,用户可以在首页输入文本并发布,所有发布的消息都会显示在页面上。

总结

这个例子展示了如何使用Node.js和Express框架快速搭建一个简单的Microblog应用。实际项目中,你可能还需要考虑用户认证、数据持久化等更复杂的功能。希望这个示例对你有所帮助!

回到顶部