JavaScript:社交新闻网页

kllo__

已于 2022-02-24 11:36:25 修改

阅读量482

点赞数

分类专栏： javascript 文章标签： javascript p2p linq

于 2022-02-24 10:48:30 首次发布

本文链接：https://blog.youkuaiyun.com/kllo__/article/details/123090849

版权

javascript 专栏收录该内容

56 篇文章

订阅专栏

建立在之前的基础上：javascript:新闻链接的显示、添加、与删除_kllo__的博客-优快云博客

目标

建立一个社交新闻网页

<html>

<head>
  <meta charset="utf-8">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>A social news web page</title>
</head>

<body>
  <div class="container">

    <!-- Bootstrap navigation bar -->
    <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">
      <!-- Dynamic content goes here -->
    </div>

  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

body {
  background-color: #eee;
}

/* Main link element (<div> tag) */
.link {
  background: white;
  padding: 10px;
  margin-bottom: 10px;
}

/* Link title (<a> tag) */
.linkTitle {
  color: #428bca;
  text-decoration: none;
  margin-right: 5px;
}
.linkTitle:hover {
  text-decoration: none;
}

/* Link URL (<span> tag) */
.linkUrl {
  font-weight: normal;
  font-size: 80%;
}

/* Link headline containing title & URL (<h4> tag) */
.linkHeadline {
  margin: 0;
}

/* Link author (<span> tag) */
.linkAuthor {
  font-weight: normal;
  font-size: 80%;
}

.linkForm {
  margin-bottom: 20px;
}

功能需求

1、链接由其标题、URL和作者（提交者）组成

2、如果新链接URL不以“http://”或“https://”开头，则自动在其开头添加“http://”

3、该网页至少显示三个现有的链接

4、存在一个供新用户提交新链接的按钮。单击按钮时，链接列表前会出现一个表单，用于输入新的链接的属性（作者、标题和URL）

5、所有的链接属性字段都想必需的，不能为空

6、当用户验证新链接时，它会显示在链接列表顶部，替换表单。一条消息指示操作成功，然后2秒后消失。

技术要求

1、尽量重用以前项目中有用的代码

2、正确缩进

3、遵循驼峰命名法

4、避免重复代码

预期结果

主页：

添加链接：

显示添加的链接：

具体实现

// Represent a link
class Link {
  constructor(title, url, author) {
    let absoluteUrl = url;
    // Check if url starts with "http://" or "https://"
    if (
      !absoluteUrl.startsWith("http://") &&
      !absoluteUrl.startsWith("https://")
    ) {
      // If not, add "http://" at the beginning
      absoluteUrl = `http://${absoluteUrl}`;
    }

    // Add data properties
    this.title = title;
    this.author = author;
    this.url = absoluteUrl;
  }

  // Describe the link as a string
  toString() {
    return `${this.title} (${this.url}). Author: ${this.author}`;
  }
}

const contentElement = document.getElementById("content");

// Create and return a DOM element showing a link
const createLinkElement = link => {
  // Create DOM element for link title
  const titleElement = document.createElement("a");
  titleElement.href = link.url;
  titleElement.classList.add("linkTitle");
  titleElement.appendChild(document.createTextNode(link.title));

  // Create DOM element for link URL
  const urlElement = document.createElement("span");
  urlElement.classList.add("linkUrl");
  urlElement.appendChild(document.createTextNode(link.url));

  // Create DOM element for link headline, containing title & URL
  const headlineElement = document.createElement("h4");
  headlineElement.classList.add("linkHeadline");
  headlineElement.appendChild(titleElement);
  headlineElement.appendChild(urlElement);

  // Create DOM element for link author
  const authorElement = document.createElement("span");
  authorElement.classList.add("linkAuthor");
  authorElement.appendChild(
    document.createTextNode(`Submitted by ${link.author}`)
  );

  // Create DOM element for link
  const linkElement = document.createElement("div");
  linkElement.classList.add("link");
  linkElement.appendChild(headlineElement);
  linkElement.appendChild(authorElement);

  return linkElement;
};

// Create and return a DOM input element
// Parameters are name, placeholder text and input size
const createInputElement = (name, placeholder, size) => {
  const inputElement = document.createElement("input");
  inputElement.type = "text";
  inputElement.setAttribute("name", name);
  inputElement.setAttribute("placeholder", placeholder);
  inputElement.setAttribute("size", size);
  inputElement.setAttribute("required", "true");
  inputElement.classList.add("form-control");
  return inputElement;
};

// Create and return a form for submitting a new link
const createLinkForm = () => {
  // Create input fields for link properties
  const authorElement = createInputElement("author", "Enter author", 20);
  const titleElement = createInputElement("title", "Enter link title", 40);
  const urlElement = createInputElement("url", "Enter link URL", 40);

  // Create submit button
  const submitElement = document.createElement("input");
  submitElement.type = "submit";
  submitElement.value = "Add link";
  submitElement.classList.add("btn");
  submitElement.classList.add("btn-primary");

  // Create link submission form
  const linkFormElement = document.createElement("form");
  linkFormElement.classList.add("linkForm");
  linkFormElement.classList.add("form-inline");
  linkFormElement.appendChild(authorElement);
  linkFormElement.appendChild(titleElement);
  linkFormElement.appendChild(urlElement);
  linkFormElement.appendChild(submitElement);

  // Handle form submission
  linkFormElement.addEventListener("submit", e => {
    // Cancel default form behavior
    e.preventDefault();

    // Create new link object from field values
    const newLink = new Link(
      titleElement.value,
      urlElement.value,
      authorElement.value
    );

    // Add new link to page, replacing form
    const newLinkElement = createLinkElement(newLink);
    contentElement.replaceChild(newLinkElement, e.target);

    // Create info message indicating success
    const infoElement = document.createElement("div");
    infoElement.classList.add("alert");
    infoElement.classList.add("alert-success");
    infoElement.textContent = `The link ${newLink.title} has been succesfully added!`;
    contentElement.insertBefore(infoElement, newLinkElement);
    // Remove info message after 2 seconds
    setTimeout(() => {
      contentElement.removeChild(infoElement);
    }, 2000);
  });

  return linkFormElement;
};

// Initial links array
const links = [];
links.push(new Link("Hacker News", "https://news.ycombinator.com", "Baptiste"));
links.push(new Link("Reddit", "https://reddit.com", "Thomas"));
links.push(new Link("Boing Boing", "boingboing.net", "Daniel"));

// Add each link to page
links.forEach(link => {
  const linkElement = createLinkElement(link);
  contentElement.appendChild(linkElement);
});

// Handle click on link submit button
document.getElementById("submitButton").addEventListener("click", () => {
  // Create link submission form
  const formElement = createLinkForm();
  // Add form on page before the first link
  contentElement.insertBefore(formElement, document.querySelector(".link"));
});

// Write - Your - Code
class Link {
  constructor(title, url, author) {
    let absoluteUrl = url;
    // Check if url starts with "http://" or "https://"
    if (
      !absoluteUrl.startsWith("http://") &&
      !absoluteUrl.startsWith("https://")
    ) {
      // If not, add "http://" at the beginning
      absoluteUrl = `http://${absoluteUrl}`;
    }
 
    // Add data properties
    this.title = title;
    this.author = author;
    this.url = absoluteUrl;
  }
 
  // Describe the link as a string
  toString() {
    return `${this.title} (${this.url}). Submitted by ${this.author}`;
  }
}


const contentElement = document.getElementById("content");

// Create and return a DOM element showing a link
const createLinkElement = link => {
  // 创建标题元素
  const titleElement = document.createElement("a");
  titleElement.href = link.url;
  titleElement.classList.add("linkTitle");
  titleElement.appendChild(document.createTextNode(link.title));

  // 创建url元素
  const urlElement = document.createElement("span");
  urlElement.classList.add("linkUrl");
  urlElement.appendChild(document.createTextNode(link.url));

  // 创建 headline 元素 包含标题和url
  const headlineElement = document.createElement("h4");
  headlineElement.classList.add("linkHeadline");
  headlineElement.appendChild(titleElement);
  headlineElement.appendChild(urlElement);

  // 创建作者元素
  const authorElement = document.createElement("span");
  authorElement.classList.add("linkAuthor");
  authorElement.appendChild(
    document.createTextNode(`Submitted by ${link.author}`)
  );

  // 创建link元素
  const linkElement = document.createElement("div");
  linkElement.classList.add("link");
  linkElement.appendChild(headlineElement);
  linkElement.appendChild(authorElement);

  return linkElement;
};


// Initial links array
const links = [];
links.push(new Link("Hacker News", "https://news.ycombinator.com", "Baptiste"));
links.push(new Link("Reddit", "https://reddit.com", "Thomas"));
links.push(new Link("Boing Boing", "boingboing.net", "Daniel"));

//添加link到页面中
links.forEach(link =>
{
  contentElement.appendChild(createLinkElement(link));
});

//添加link
//创建输入框
const createInputElement = (name, placeholder, size)=>
{
  const inputElement = document.createElement("input");
  inputElement.type = "text";
  inputElement.setAttribute("name", name);
  inputElement.setAttribute("placeholder", placeholder);
  inputElement.setAttribute("size", size);
  inputElement.setAttribute("required", "true");
  inputElement.classList.add("form-control");
  return inputElement;
};
//创建表单元素
const createLinkForm = ()=>
{
  //创建作者输入框
  const authorElement = createInputElement("author", "Enter author", 20);
  const titleElement = createInputElement("title", "Enter link title", 40);
  const urlElement = createInputElement("url", "Enter link url", 40);
  //创建 Add link 提交按钮
  const submitElement = document.createElement("input");
  submitElement.type = "submit";
  submitElement.value = "Add link";
  submitElement.classList.add("btn");
  submitElement.classList.add("btn-primary");

  //创建表单元素
  const linkFormElement = document.createElement("form");
  linkFormElement.classList.add("linkForm");
  linkFormElement.classList.add("form-inline");
  linkFormElement.appendChild(authorElement);
  linkFormElement.appendChild(titleElement);
  linkFormElement.appendChild(urlElement);
  linkFormElement.appendChild(submitElement);

  // 添加事件监听器
  linkFormElement.addEventListener("submit", e =>
  {
    e.preventDefault();

    const newLink = new Link(
      titleElement.value,
      urlElement.value,
      authorElement.value
    );

    const newLinkElement = createLinkElement(newLink);
    contentElement.replaceChild(newLinkElement, e.target);

    //创建提示信息
    const infoElement = document.createElement("div");
    infoElement.classList.add("alert");
    infoElement.classList.add("alert-success");

    infoElement.textContent = `The link ${newLink.title} has been successfully added!`;
    contentElement.insertBefore(infoElement, newLinkElement);
    setTimeout(()=>
    {
      contentElement.removeChild(infoElement);
    }, 2000);
    
  });
  return linkFormElement;
};
//点击按钮弹出表单
const submitBtnElement = document.getElementById("submitButton");
submitBtnElement.addEventListener("click", ()=>
{
  const formElement = createLinkForm();
  contentElement.insertBefore(formElement, document.querySelector(".link"));
});