The JavaScript Way第十九章数据库：MongoDB与JavaScript集成-CSDN博客

The JavaScript Way第十九章数据库：MongoDB与JavaScript集成

【免费下载链接】thejsway The JavaScript Way book 项目地址: https://gitcode.com/gh_mirrors/th/thejsway

你是否曾想过如何让JavaScript应用拥有持久化存储能力？第十九章将带你探索MongoDB与JavaScript的集成方案，通过实战项目掌握数据持久化的核心技能。读完本章后，你将能够构建带有数据库支持的交互式网页应用，实现数据的存储、读取和动态展示。

项目背景：社交新闻网页应用

本章项目基于之前创建的社交新闻程序，目标是开发一个功能完善的社交新闻网页。该项目灵感来源于《Discover Meteor》一书的示例应用，将帮助你将前端JavaScript技能与后端数据存储结合起来。

功能需求

社交新闻网页需要实现以下核心功能：

链接包含标题、URL和作者信息
自动为URL添加"http://"前缀（如果缺失）
页面显示至少三条已有链接
提交按钮可触发新建链接表单
表单字段为必填项
提交成功后显示提示信息（2秒后自动消失）
新链接显示在列表顶部

技术架构

项目采用纯前端技术栈构建，主要包括：

HTML5结构搭建
CSS3样式美化（使用Bootstrap框架）
JavaScript DOM操作
本地存储解决方案

项目完整代码可参考manuscript/chapter19.md，其中包含详细的实现步骤和解释。

实现步骤

1. 页面结构设计

首先需要创建基础的HTML结构，包括导航栏、内容区域和必要的外部资源引用。下面是完整的HTML代码：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="../css/publink.css" rel="stylesheet" type="text/css">
  <title>A social news web page</title>
</head>
<body>
  <div class="container">
    <!-- 导航栏 -->
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
          <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-link" aria-hidden="true"></span> PubLink</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <button type="button" id="submitButton" class="btn btn-default navbar-btn">Submit</button>
          <p class="navbar-text navbar-right">A social news web page built with ❤ and JavaScript</p>
        </div>
      </div>
    </nav>
    <div id="content">
      <!-- 动态内容将在这里显示 -->
    </div>
  </div>
  <script src="../js/publink.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

2. 样式设计

为确保页面美观且用户友好，需要添加以下CSS样式：

body {
  background-color: #eee;
}

/* 链接元素样式 */
.link {
  background: white;
  padding: 10px;
  margin-bottom: 10px;
}

/* 链接标题样式 */
.linkTitle {
  color: #428bca;
  text-decoration: none;
  margin-right: 5px;
}
.linkTitle:hover {
  text-decoration: none;
}

/* 链接URL样式 */
.linkUrl {
  font-weight: normal;
  font-size: 80%;
}

/* 链接标题区域样式 */
.linkHeadline {
  margin: 0;
}

/* 链接作者样式 */
.linkAuthor {
  font-weight: normal;
  font-size: 80%;
}

/* 表单样式 */
.linkForm {
  margin-bottom: 20px;
}

完整的样式代码可在项目的CSS文件中查看：publink.css

3. JavaScript功能实现

JavaScript部分是整个项目的核心，负责数据处理和DOM操作。主要包括以下功能模块：

链接数据管理
表单显示与隐藏
表单验证
数据渲染
用户反馈

下面是主要的JavaScript代码结构：

// 链接数据数组
const links = [
  {
    title: "Example Link 1",
    url: "https://example.com",
    author: "John Doe"
  },
  // 更多初始链接...
];

// DOM元素引用
const contentDiv = document.getElementById('content');
const submitButton = document.getElementById('submitButton');

// 初始化页面
function initialize() {
  renderLinks();
  setupEventListeners();
}

// 渲染链接列表
function renderLinks() {
  // 清空内容区域
  contentDiv.innerHTML = '';
  
  // 渲染每个链接
  links.forEach(link => {
    const linkElement = createLinkElement(link);
    contentDiv.appendChild(linkElement);
  });
}

// 创建单个链接元素
function createLinkElement(link) {
  // 创建并返回DOM元素
  // ...
}

// 设置事件监听器
function setupEventListeners() {
  submitButton.addEventListener('click', toggleForm);
  // 其他事件监听...
}

// 切换表单显示状态
function toggleForm() {
  // 显示或隐藏表单
  // ...
}

// 处理表单提交
function handleFormSubmit(event) {
  // 表单验证和数据处理
  // ...
}

// 初始化应用
document.addEventListener('DOMContentLoaded', initialize);

完整的JavaScript实现可参考项目源码：publink.js