Node.js：开启异次元壁之旅，零起点开发壁纸分享小程序

2022-11-08 00:00:14

用 Node.js 打造一个壁纸分享小程序：零基础到实战

嘿，各位充满激情的开发者们！准备好踏上一场异次元壁之旅了吗？今天，我们将携手 Node.js，从零开始打造一个独一无二的壁纸分享小程序。不管你是初出茅庐的新手，还是经验丰富的编程老手，Node.js 都会成为你的得力助手，助你在小程序开发的道路上大放异彩。

Node.js 的魅力：后端开发的好伙伴

Node.js，一个威力无比的 JavaScript 运行时环境，将作为我们后端服务的基石。它的异步非阻塞特性，让我们可以在数据处理和用户交互方面游刃有余。无论你是对 Node.js 陌生还是已有些许了解，我们将一步步揭开它的神秘面纱，让你成为后端开发的大师。

打造后端 Node 服务：从零到一

从创建一个 Node 项目开始，我们将逐步构建我们的后端 Node 服务。数据库连接、数据模型设计、路由处理、用户鉴权……这些关键模块都将在我们手中一一呈现。每一步都将有细致的讲解，让你对 Node.js 的使用如数家珍。

// Node.js 项目创建
npm init -y

// 数据库连接
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/wallpaper-db');

// 数据模型设计
const WallpaperSchema = new mongoose.Schema({
  title: String,
  url: String
});

const Wallpaper = mongoose.model('Wallpaper', WallpaperSchema);

// 路由处理
const express = require('express');
const router = express.Router();

router.get('/wallpapers', async (req, res) => {
  const wallpapers = await Wallpaper.find();
  res.json(wallpapers);
});

router.post('/wallpapers', async (req, res) => {
  const wallpaper = new Wallpaper(req.body);
  await wallpaper.save();
  res.json(wallpaper);
});

// 用户鉴权
const passport = require('passport');
router.use(passport.authenticate('jwt', { session: false }));

壁纸分享小程序：前端页面与后端连接

后端服务搞定后，让我们把目光投向前端。我们将共同完成壁纸分享小程序的前端页面设计和实现。 HTML、CSS 和 JavaScript 将成为我们手中的画笔，挥洒出这个精美绝伦的壁纸世界。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>壁纸分享</h1>
    <ul id="wallpapers"></ul>

    <script src="script.js"></script>
  </body>
</html>

// 前端脚本
const wallpapers = document.getElementById('wallpapers');

fetch('/wallpapers')
  .then(res => res.json())
  .then(data => {
    data.forEach(wallpaper => {
      const li = document.createElement('li');
      li.innerHTML = `<img src="${wallpaper.url}" alt="${wallpaper.title}" />`;
      wallpapers.appendChild(li);
    });
  });