4 叮当猫 2天前 118次点击
.add-post {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #2196F3;
color: white;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.post-card {
border: 1px solid #ddd;
padding: 15px;
margin: 10px;
border-radius: 8px;
}
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
// 获取帖子列表
async function loadPosts() {
const res = await fetch('/posts');
const posts = await res.json();
document.getElementById('posts').innerHTML = posts.map(post => `
${post.content}
评论数: ${post.comments?.length || 0}
`).join('');
}
// 创建新帖子
async function createPost() {
const post = {
title: document.getElementById('postTitle').value,
content: document.getElementById('postContent').value
};
await fetch('/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(post)
});
closeModal();
loadPosts();
}
function showPostModal() {
document.getElementById('postModal').style.display = 'block';
}
function closeModal() {
document.getElementById('postModal').style.display = 'none';
}
// 初始化加载帖子
loadPosts();
.comment-box {
margin-top: 20px;
padding: 15px;
border-top: 1px solid #eee;
}
.comment {
margin: 10px 0;
padding: 10px;
background: #f5f5f5;
}
const postId = new URLSearchParams(location.search).get('id');
// 加载帖子详情
async function loadPost() {
const res = await fetch(`/posts/${postId}`);
const post = await res.json();
document.getElementById('postDetail').innerHTML = `
${post.content}
`;
document.getElementById('comments').innerHTML =
(post.comments || []).map(comment => `
${comment.content}
${new Date(comment.createdAt).toLocaleString()}
`).join('');
}
// 添加评论
async function addComment() {
const content = document.getElementById('commentContent').value;
await fetch(`/posts/${postId}/comments`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content })
});
loadPost();
}
loadPost();
// server.js
const express = require('express');
const mongoose = require('mongoose');
const app = express();
app.use(express.json());
// 连接 MongoDB
mongoose.connect('mongodb://localhost/forum', { useNewUrlParser: true });
// 定义数据模型
const PostSchema = new mongoose.Schema({
title: String,
content: String,
comments: [{
content: String,
createdAt: { type: Date, default: Date.now }
}],
createdAt: { type: Date, default: Date.now }
});
const Post = mongoose.model('Post', PostSchema);
// 接口路由
app.get('/posts', async (req, res) => {
const posts = await Post.find().sort({ createdAt: -1 });
res.json(posts);
});
app.post('/posts', async (req, res) => {
const post = new Post(req.body);
await post.save();
res.status(201).json(post);
});
app.get('/posts/:id', async (req, res) => {
const post = await Post.findById(req.params.id);
res.json(post);
});
app.post('/posts/:id/comments', async (req, res) => {
const post = await Post.findById(req.params.id);
post.comments.push(req.body);
await post.save();
res.status(201).json(post);
});
app.listen(3000, () => console.log('Server running on port 3000'));