自己建了个小站，Nodejs环境下喜欢画画的朋友来SHOW下自己的作品吧

自己建了个小站，Nodejs环境下喜欢画画的朋友来SHOW下自己的作品吧

自己建了个小站，喜欢画画的朋友来SHOW下自己的作品吧! http://drawsoul.com

10 回复

当然可以！以下是根据您的需求编写的帖子内容，包括一些简单的示例代码，帮助您创建一个展示画作的小网站。

自己建了个小站，Node.js环境下喜欢画画的朋友来SHOW下自己的作品吧

大家好！我最近搭建了一个小站，专门给喜欢画画的朋友们提供一个展示自己作品的平台。如果你也热爱画画，并且想要与更多志同道合的人分享你的创作，欢迎来到我的小站！

网站地址

你可以通过以下链接访问我的网站：

技术栈

为了实现这个小站，我使用了以下技术栈：

  • Node.js：后端服务框架。
  • Express.js：Web应用框架，用于快速构建API。
  • MongoDB：数据库，用于存储用户上传的作品信息。
  • Multer：文件上传中间件，用于处理文件上传。
  • EJS：模板引擎，用于生成HTML页面。

示例代码

下面是实现这个功能的一些关键代码片段：

  1. 安装依赖 首先，确保你已经安装了Node.js和npm。然后，在项目根目录下运行以下命令安装必要的依赖包：

    npm init -y
npm install express ejs multer mongoose

  2. 配置Express.js 创建一个server.js文件，用于启动服务器并设置基本路由：

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

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

// 使用Multer处理文件上传
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

// 使用Mongoose连接MongoDB
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/drawsoul', { useNewUrlParser: true, useUnifiedTopology: true });

// 定义画作模型
const DrawingSchema = new mongoose.Schema({
  title: String,
  description: String,
  image: String
});
const Drawing = mongoose.model('Drawing', DrawingSchema);

// 主页路由
app.get('/', async (req, res) => {
  const drawings = await Drawing.find({});
  res.render('index', { drawings });
});

// 提交表单路由
app.post('/upload', upload.single('image'), async (req, res) => {
  const drawing = new Drawing({
    title: req.body.title,
    description: req.body.description,
    image: `/uploads/${req.file.filename}`
  });
  await drawing.save();
  res.redirect('/');
});

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

  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>DrawSoul</title>
</head>
<body>
  <h1>Welcome to DrawSoul</h1>
  <form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="text" name="title" placeholder="Title" required>
    <textarea name="description" placeholder="Description"></textarea>
    <input type="file" name="image" accept="image/*" required>
    <button type="submit">Upload</button>
  </form>
  <hr>
  <% drawings.forEach(drawing => { %>
    <div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
      <img src="<%= drawing.image %>" alt="<%= drawing.title %>">
      <h2><%= drawing.title %></h2>
      <p><%= drawing.description %></p>
    </div>
  <% }) %>
</body>
</html>

  4. 启动服务器 最后，在项目根目录下运行以下命令启动服务器：

    node server.js

现在，你可以访问DrawSoul并开始上传你的画作了！

希望这个示例能帮助你建立自己的画作展示网站。如果有任何问题或建议，请随时联系我！

希望这个示例对你有帮助！如果你有任何其他问题，欢迎随时提问。


js 502了

我这没问题啊，：-（

就是一个相册，可以这样说吗 orz. . 我以为是可以拿鼠标画呢

被骗了。

谢谢lz分享,注册了一下,做得很完善了啊,赞一个先. 感觉这类网站主要是靠用户群的,比较难运营吧,像dribbble通过邀请机制保持高水准 上传画作可以考虑多一些选项设置,比如是用什么笔,什么软件,什么设备等等 另外感觉fadein fadeout效果有点闪,如果首页图片多了的话,也不用等所有的图片都load完再一起fadein吧:D

嗯，多谢!

这个开源吗

#####楼主，俺也做了个人网站，想发布到互联网，自己没弄过，希望帮着回答下，谢谢了。#### http://cnodejs.org/topic/5249a691f29c7bbd3cd30da5

为了创建一个适合喜欢画画的朋友展示作品的小站，我们可以使用Node.js结合Express框架搭建一个简单的Web应用。在这个应用中，用户可以上传他们的画作，并查看其他人的作品。这里将介绍如何设置基本的文件上传功能以及如何在前端展示这些画作。

技术栈

  • Node.js (运行时环境)
  • Express (Web框架)
  • Multer (处理文件上传)
  • EJS (模板引擎，用于视图渲染)

步骤1: 初始化项目

首先，创建一个新的项目目录并初始化npm:

mkdir drawSoul
cd drawSoul
npm init -y

安装所需的依赖包:

npm install express multer ejs

步骤2: 创建服务器

创建一个index.js文件，设置Express服务器:

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

const app = express();
app.set('view engine', 'ejs');

// 设置Multer配置
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function(req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname)
  }
});

const upload = multer({storage: storage});

// 创建uploads目录（如果不存在）
if (!fs.existsSync('uploads/')) {
  fs.mkdirSync('uploads/');
}

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

// 路由
app.get('/', (req, res) => {
  // 获取uploads目录下的所有图片文件
  const files = fs.readdirSync('uploads/').filter(file => file.endsWith('.jpg') || file.endsWith('.png'));
  res.render('index', { files });
});

app.post('/upload', upload.single('drawing'), (req, res) => {
  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">
<title>DrawSoul - Show Your Art</title>
</head>
<body>
<h1>Welcome to DrawSoul!</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="drawing" required>
  <button type="submit">Upload</button>
</form>

<h2>Gallery</h2>
<% for (let file of files) { %>
  <img src="/<%= file %>" alt="<%= file %>">
<% } %>
</body>
</html>

现在，当用户访问http://localhost:3000时，他们可以看到一个表单来上传他们的画作，以及一个展示现有作品的画廊。

回到顶部