简单的前端新闻管理系统代码示例

以下是一个简单的管理新闻的前端代码示例，用于展示如何使用 HTML 和 JavaScript 创建一个基本的新闻管理系统：

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <title>管理新闻</title>
</head>
<body>
  <h1>管理新闻</h1>
  <form>
    <label for='title'>标题：</label>
    <input type='text' id='title' name='title'><br><br>
    <label for='author'>作者：</label>
    <input type='text' id='author' name='author'><br><br>
    <label for='content'>内容：</label><br>
    <textarea id='content' name='content' rows='10' cols='50'></textarea><br><br>
    <button type='submit' onclick='submitNews()'>提交</button>
  </form>
  <br>
  <table>
    <thead>
      <tr>
        <th>标题</th>
        <th>作者</th>
        <th>内容</th>
      </tr>
    </thead>
    <tbody id='newsList'>
    </tbody>
  </table>

  <script>
    var newsList = [];

    function submitNews() {
      var title = document.getElementById('title').value;
      var author = document.getElementById('author').value;
      var content = document.getElementById('content').value;

      var news = {
        title: title,
        author: author,
        content: content
      };

      newsList.push(news);
      renderNewsList();
    }

    function renderNewsList() {
      var newsTable = document.getElementById('newsList');
      newsTable.innerHTML = '';

      for (var i = 0; i < newsList.length; i++) {
        var news = newsList[i];
        var row = newsTable.insertRow(i);

        var titleCell = row.insertCell(0);
        titleCell.innerHTML = news.title;

        var authorCell = row.insertCell(1);
        authorCell.innerHTML = news.author;

        var contentCell = row.insertCell(2);
        contentCell.innerHTML = news.content;
      }
    }
  </script>
</body>
</html>

该代码包含一个表单用于添加新闻，以及一个表格用于展示已添加的新闻。表格中的每一行展示一条新闻的标题、作者和内容。新闻以 JavaScript 对象的形式存储在数组中，并通过循环渲染到表格中。当提交按钮被点击时，会将表单中的数据添加到新闻数组中并重新渲染表格。

代码功能说明:

• 添加新闻:
  • 用户在表单中填写标题、作者和内容。
  • 点击“提交”按钮后，submitNews() 函数会收集表单数据，将其存储在 news 对象中，并添加到 newsList 数组中。
  • renderNewsList() 函数被调用，以重新渲染表格并显示新添加的新闻。
• 展示新闻列表:
  • renderNewsList() 函数负责渲染新闻列表表格。
  • 函数首先清空表格内容，然后循环遍历 newsList 数组。
  • 对于每个新闻对象，函数会创建一行并插入表格中，并填充标题、作者和内容单元格。
• 数据存储:
  • 新闻数据以 JavaScript 对象的形式存储在 newsList 数组中。
  • 该数组在页面加载时被初始化为空数组，并在用户添加新闻时被更新。

进一步扩展:

• 可以使用 localStorage 或其他存储机制来持久化新闻数据，以便在页面刷新后仍然保存。
• 可以添加编辑和删除新闻的功能。
• 可以添加分页、搜索、排序等功能，以提高新闻管理系统的可用性。
• 可以使用 CSS 样式化页面，以使其更加美观。