用Nodejs写了个瀑布流网站

用Nodejs写了个瀑布流网站

演示地址： http://skylerzhang.duapp.com/mvc.html

https://github.com/skylerzhang/pbl

用百度的云的node环境搭建了一个简单的瀑布流网站

后台 bae+mysql+nodejs

前台 seajs + mvc模块化

13 回复

用Node.js写了个瀑布流网站

演示地址

介绍

我使用百度的云平台（BAE）以及MySQL数据库，结合Node.js编写了一个简单的瀑布流网站。该网站使用了seajs进行模块化管理，并采用了MVC架构。

后台技术栈

  • BAE：百度的云平台，提供了Node.js运行环境。
  • MySQL：用于存储图片数据。
  • Node.js：后端逻辑处理，包括数据查询、处理和返回JSON格式的数据。

前台技术栈

  • Sea.js：一个JavaScript模块加载器，用于模块化开发。
  • MVC模块化：前端采用MVC架构，便于代码管理和维护。

示例代码

后端代码（Node.js + Express）

首先安装必要的依赖：

npm install express mysql body-parser

创建一个简单的Express服务器，用于提供JSON数据：

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');

const app = express();
app.use(bodyParser.json());

// 创建数据库连接
const db = mysql.createConnection({
  host: 'your_mysql_host',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database'
});

db.connect((err) => {
  if (err) throw err;
  console.log('Connected to MySQL database!');
});

// 获取图片数据
app.get('/api/images', (req, res) => {
  const query = 'SELECT * FROM images';
  db.query(query, (err, results) => {
    if (err) throw err;
    res.json(results);
  });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
前端代码（Seajs + MVC）

使用Seajs进行模块化加载：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>瀑布流网站</title>
  <script src="https://cdn.jsdelivr.net/npm/seajs@4.0.1/dist/sea.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    seajs.use('./main');
  </script>
</body>
</html>

在main.js中实现MVC架构：

// main.js
define(function(require, exports, module) {
  const $ = require('jquery');
  const template = require('./template');

  // 控制器
  class Controller {
    constructor() {
      this.init();
    }

    init() {
      this.fetchData();
    }

    fetchData() {
      $.getJSON('/api/images', (data) => {
        this.render(data);
      });
    }

    render(data) {
      const html = template.render(data);
      $('#container').html(html);
    }
  }

  new Controller();
});

在template.js中定义模板引擎：

// template.js
define(function(require, exports, module) {
  const template = {
    render(data) {
      return data.map(item => `
        <div class="item">
          <img src="${item.url}" alt="${item.title}">
        </div>
      `).join('');
    }
  };

  module.exports = template;
});

以上代码展示了如何使用Node.js和Express构建一个简单的后端API，并通过Seajs和MVC架构在前端实现瀑布流布局。希望这些示例代码能帮助你理解整个项目的结构和实现方式。


不错，支持一个。

建议楼主，赶紧把项目文件里面的一些关键数据给替换掉，比如什么port ，user,pwd之类的
点击

改了，感谢提醒

这图片不错

表示图片不错

某度是不是收费的？

好黄好暴力( ⊙o⊙ )哇

有点糙

http://youzhihu.com/date 这个算不算瀑布流，用html+css实现

楼主图片不错哦~

这种不算吧，每个都一样大小的。看看：http://tympanus.net/Development/GridLoadingEffects/index2.html

要用Node.js实现一个瀑布流网站，主要涉及后端的数据提供和前端的布局呈现。以下是一个简化版的实现步骤：

后端（Node.js）

  1. 安装必要的库:

    npm install express mysql body-parser

  2. 创建基本的服务器逻辑 (server.js):

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

const app = express();
app.use(bodyParser.json());

// 创建MySQL连接
const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'testdb'
});

db.connect((err) => {
  if (err) throw err;
  console.log('Connected to MySQL database!');
});

// 获取图片列表的API
app.get('/api/images', (req, res) => {
  const query = 'SELECT * FROM images';
  db.query(query, (err, results) => {
    if (err) throw err;
    res.send(results);
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

前端（HTML + JavaScript）

  1. 使用Seajs进行模块化开发 (index.html):
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MVC Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sea.js/3.0.0/sea.js"></script>
  <style>
    .masonry {
      column-count: 4;
      column-gap: 1em;
    }
    .item {
      display: inline-block;
      margin: 0 0 1em;
      width: 100%;
      background-color: #eee;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="masonry" id="masonry"></div>
  <script>
    seajs.config({
      base: '/assets/',
      alias: {
        'jquery': 'path/to/jquery.min.js',
        'seamasonry': 'path/to/seamasonry.js'  // 自定义Masonry插件
      }
    });

    seajs.use(['jquery', 'seamasonry'], function($, seamasonry) {
      $.getJSON('/api/images', function(data) {
        const container = document.getElementById('masonry');
        data.forEach(item => {
          const div = document.createElement('div');
          div.className = 'item';
          div.innerHTML = `<img src="${item.url}" alt="${item.name}">`;
          container.appendChild(div);
        });
        seamasonry(container);  // 初始化Masonry布局
      });
    });
  </script>
</body>
</html>

注意事项

  • 确保MySQL数据库中有images表，并且表中包含url和name字段。
  • 使用Seajs加载jQuery和自定义的Masonry插件来实现瀑布流效果。
  • 这里使用了简单的GET请求获取数据，实际生产环境中可能需要处理更多错误情况和安全性问题。

以上就是用Node.js构建瀑布流网站的一个基础示例。你可以根据需求进一步优化和完善功能。

回到顶部