1. Python技术站首页
  2. Web开发
  3. Flask

JS实现留言板功能

• Flask
yizhihongxing

JS实现留言板功能需要分为前端和后端两部分来完成。前端主要负责用户交互的展示和处理，后端主要负责数据的存储和传递。

前端实现

1. HTML和CSS

首先需要创建一个包含留言板所需元素的HTML文件，并使用CSS样式美化页面。留言板所需的元素可能包括标题、留言内容输入框、留言列表等等。需要注意的是，留言列表实际上是一个包含多个留言的容器，而每个留言又由多个元素组成，如留言的作者、时间、内容等。

2. JavaScript

接下来需要使用JavaScript处理用户的留言输入和页面展示。具体来说，可以实现以下功能：

  • 用户点击“提交”按钮后，获取留言内容并将其添加到留言列表（需要将用户输入的内容进行转义，防止注入攻击）
  • 点击“删除”按钮可以删除对应的留言
  • 点击“修改”按钮可以修改对应的留言
  • 对留言列表进行分页和排序
  • 通过AJAX调用后端接口，将留言内容提交到后端

这些功能可以使用原生的JavaScript来实现，也可以使用现成的前端框架如jQuery、Vue、React等来实现。

后端实现

1. 数据库

要存储用户的留言，需要创建一张留言表并定义列名和数据类型。一般来说，我们需要留言的作者、时间、内容等信息，并将这些信息按照一定的规范存储到数据库中。

2. 后端接口

创建后端接口，接收前端传递过来的留言信息，将其存储到数据库中，并返回插入成功的结果。后端接口一般使用PHP、Java或Node.js等语言来实现。接口的编写需要注意输入参数的验证和输出结果的格式。

例如，在Node.js中，可以使用Express框架创建API接口：

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

const pool = mysql.createPool({
  connectionLimit: 5,
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'test'
});

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post('/message', (req, res) => {
  const { author, content } = req.body;
  pool.query('INSERT INTO messages (author, content) VALUES (?, ?)', [author, content], (err, results) => {
    if (err) {
      console.error(err);
      res.status(500).json({ success: false, message: '添加留言失败' });
    } else {
      res.json({ success: true, message: '添加留言成功' });
    }
  });
});

app.listen(3000, () => console.log('Server is running.'));

示例

示例1：使用jQuery实现留言

以下代码使用jQuery实现留言功能，使用AJAX调用后端接口提交留言信息。留言列表使用Bootstrap样式实现，具有删除和分页功能。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>留言板</title>
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h1>留言板</h1>
        <form id="message-form">
          <div class="form-group">
            <label>作者</label>
            <input type="text" class="form-control" name="author">
          </div>
          <div class="form-group">
            <label>内容</label>
            <textarea rows="5" class="form-control" name="content"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">提交</button>
        </form>
      </div>
      <div class="col-sm-6">
        <h1>留言列表</h1>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>#</th>
              <th>作者</th>
              <th>时间</th>
              <th>内容</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="message-list"></tbody>
        </table>
        <ul class="pagination"></ul>
      </div>
    </div>
  </div>
  <script>
    $(function () {
      const MESSAGE_PAGE_SIZE = 10;

      // 获取留言列表
      const getMessageList = function (page) {
        $.ajax({
          url: 'http://localhost:3000/messages',
          type: 'GET',
          data: {
            page: page,
            size: MESSAGE_PAGE_SIZE
          },
          dataType: 'json',
          success: function (data) {
            const list = data.list || [];
            const total = data.total || 0;
            const currentPage = data.currentPage || 1;
            const pageCount = Math.ceil(total / MESSAGE_PAGE_SIZE);
            const $pagination = $('.pagination').empty();

            // 构建分页链接
            for (let i = 1; i <= pageCount; i++) {
              const $li = $('<li>');
              const $a = $('<a>', { href: 'javascript: void(0)', text: i });
              if (i === currentPage) {
                $li.addClass('active');
              }
              $li.append($a);
              $pagination.append($li);
            }

            // 构建留言列表
            const $list = $('#message-list').empty();
            list.forEach((item, index) => {
              const $tr = $('<tr>');
              $tr.append($('<td>', { text: index + 1 }));
              $tr.append($('<td>', { text: item.author }));
              $tr.append($('<td>', { text: item.createdAt }));
              $tr.append($('<td>', { text: item.content }));
              const $td = $('<td>');
              const $buttonDelete = $('<button>', {
                type: 'button',
                class: 'btn btn-danger',
                text: '删除'
              });
              $buttonDelete.click(() => deleteMessage(item.id));
              const $buttonEdit = $('<button>', {
                type: 'button',
                class: 'btn btn-primary',
                text: '编辑'
              });
              $buttonEdit.click(() => editMessage(item));
              $td.append($buttonDelete);
              $td.append($buttonEdit);
              $tr.append($td);
              $list.append($tr);
            });
          },
          error: function (err) {
            console.error(err);
          }
        });
      };

      // 删除留言
      const deleteMessage = function (id) {
        $.ajax({
          url: `http://localhost:3000/messages/${id}`,
          type: 'DELETE',
          dataType: 'json',
          success: function () {
            getMessageList();
          },
          error: function (err) {
            console.error(err);
          }
        });
      };

      // 编辑留言
      const editMessage = function (item) {
        const author = prompt('请输入作者', item.author);
        const content = prompt('请输入内容', item.content);
        if (author && content) {
          $.ajax({
            url: `http://localhost:3000/messages/${item.id}`,
            type: 'PUT',
            dataType: 'json',
            data: { author, content },
            success: function () {
              getMessageList();
            },
            error: function (err) {
              console.error(err);
            }
          });
        }
      };

      // 提交留言
      $('#message-form').submit(function (event) {
        event.preventDefault();
        const author = $(this).find('[name="author"]').val();
        const content = $(this).find('[name="content"]').val();
        if (author && content) {
          $.ajax({
            url: 'http://localhost:3000/messages',
            type: 'POST',
            data: { author, content },
            dataType: 'json',
            success: function () {
              $(event.target).get(0).reset();
              getMessageList();
            },
            error: function (err) {
              console.error(err);
            }
          });
        }
      });

      // 绑定分页链接点击事件
      $('.pagination').on('click', 'a', function () {
        const $a = $(this);
        if (!$a.parent().hasClass('active')) {
          const page = +$a.text();
          getMessageList(page);
        }
      });

      // 初始化页面
      getMessageList();
    });
  </script>
</body>
</html>

示例2：使用React实现留言

以下代码使用React实现留言功能，通过调用后端接口提交和获取留言信息。留言列表使用Antd样式实现，具有删除、分页和编辑功能。

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { List, Input, Button, message, Pagination } from 'antd';
import moment from 'moment';
import 'antd/dist/antd.css';
import './index.css';

const MESSAGE_PAGE_SIZE = 10;

const App = () => {
  const [author, setAuthor] = useState('');
  const [content, setContent] = useState('');
  const [list, setList] = useState([]);
  const [total, setTotal] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    getMessageList();
  }, [currentPage]);

  const getMessageList = (page = 1) => {
    fetch(`http://localhost:3000/messages?page=${page}&size=${MESSAGE_PAGE_SIZE}`)
      .then(res => res.json())
      .then(data => {
        setList(data.list || []);
        setTotal(data.total || 0);
        setCurrentPage(data.currentPage || 1);
      })
      .catch(err => console.error(err));
  };

  const deleteMessage = id => {
    fetch(`http://localhost:3000/messages/${id}`, { method: 'DELETE' })
      .then(() => getMessageList())
      .catch(err => console.error(err));
  };

  const editMessage = item => {
    const author = prompt('请输入作者', item.author);
    const content = prompt('请输入内容', item.content);
    if (author && content) {
      fetch(`http://localhost:3000/messages/${item.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ author, content })
      })
        .then(() => getMessageList())
        .catch(err => console.error(err));
    }
  }

  const handleSubmit = event => {
    event.preventDefault();
    if (author && content) {
      fetch('http://localhost:3000/messages', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ author, content })
      })
        .then(() => {
          setAuthor('');
          setContent('');
          getMessageList();
        })
        .catch(err => console.error(err));
    }
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-sm-6">
          <h1>留言板</h1>
          <form onSubmit={handleSubmit}>
            <div className="form-group">
              <label>作者</label>
              <Input value={author} onChange={e => setAuthor(e.target.value)} />
            </div>
            <div className="form-group">
              <label>内容</label>
              <Input.TextArea rows={5} value={content} onChange={e => setContent(e.target.value)} />
            </div>
            <Button type="primary" htmlType="submit">提交</Button>
          </form>
        </div>
        <div className="col-sm-6">
          <h1>留言列表</h1>
          <List
            itemLayout="horizontal"
            dataSource={list}
            renderItem={item => (
              <List.Item
                actions={[
                  <Button type="danger" onClick={() => deleteMessage(item.id)}>删除</Button>,
                  <Button type="primary" onClick={() => editMessage(item)}>编辑</Button>
                ]}
              >
                <List.Item.Meta
                  title={item.author}
                  description={moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}
                />
                {item.content}
              </List.Item>
            )}
          />
          <Pagination
            total={total}
            pageSize={MESSAGE_PAGE_SIZE}
            current={currentPage}
            onChange={page => setCurrentPage(page)}
          />
        </div>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现留言板功能 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月16日
下一篇 2023年5月16日

相关文章

  • Vue+Flask实现图片传输功能

    【Vue+Flask实现图片传输功能】 本攻略将分为两条示例来详细讲解如何使用Vue和Flask实现图片传输功能。 【示例一】 在本例中，我们将使用Flask作为后端，使用Vue作为前端，来实现图片上传和展示功能。 前端Vue代码 首先，在Vue的模板中添加一个上传文件的input标签和一个展示图片的img标签，如下所示： <template> …

    Flask 2023年5月15日
    00

  • 在Python程序和Flask框架中使用SQLAlchemy的教程

    以下是关于在Python程序和Flask框架中使用SQLAlchemy的完整攻略。 一、什么是SQLAlchemy SQLAlchemy 是一个 Python 的 SQL 工具和 ORM 框架。它通过 SQL 表达式和对象关系映射来支持数据库交互。 它提供了一致的 SQL 表达式语言，以及自定义对象关系映射（ORM）APIs。 二、在Python程序中使用S…

    Flask 2023年5月15日
    00

  • http通过StreamingHttpResponse完成连续的数据传输长链接方式

    当我们需要在Web应用程序中实现连续的数据传输时，可以使用HTTP的StreamingHttpResponse来完成长链接方式。由于HTTP是基于请求-响应模型的，因此我们无法像传统Socket编程那样实现长链接方式，这时StreamingHttpResponse就为我们提供了一种有效的解决办法。 首先，我们需要明确的是，StreamingHttpRespo…

    Flask 2023年5月16日
    00

  • mvc框架打造笔记之wsgi协议的优缺点以及接口实现

    我来为你详细讲解“MVC框架打造笔记之WSGI协议的优缺点以及接口实现”的完整攻略。 WSGI协议的优缺点 优点 WSGI协议的优点主要有以下几点： WSGI协议是Python Web框架的标准化统一接口，可以让不同的Web框架之间互相兼容和共享资源。 WSGI协议提供了一种简单、轻量级的Web应用程序接口，可以让开发者轻松地构建Web应用程序，同时可以选择…

    Flask 2023年5月16日
    00

  • 使用Django和Flask获取访问来源referrer

    获取访问来源referrer是一个很有用的功能，它可以让我们查看访问者是从哪个页面跳转而来。在Django和Flask中，获取referrer的方法也是不同的，下面我会分别提供两个完整的攻略来实现这个功能。 Django中获取referrer的方法 Django中获取referrer的方法比较简单，我们直接在视图函数中获取request.META属性中的HT…

    Flask 2023年5月16日
    00

  • python flask实现分页效果

    下面我就为你详细讲解一下“Python Flask实现分页效果”的攻略。为了更好地说明，我会包含两条示例，分别是使用flask_sqlalchemy和flask_mongoengine实现分页效果。 1. 创建Flask应用 首先，我们要创建一个基本的Flask应用。在创建之前，需要先安装flask： pip install flask 下面是一个简单的示例…

    Flask 2023年5月15日
    00

  • python flask实现分页的示例代码

    接下来我将为您详细讲解如何使用 Python Flask 实现分页功能的示例代码攻略。 1. 实现分页功能 – 示例1 第一步，安装 Flask 和 Flask-Pagination： pip install Flask pip install Flask-Pagination 第二步，引入 Flask 和 Flask-Pagination： from fl…

    Flask 2023年5月15日
    00

  • Flask框架响应、调度方法和蓝图操作实例分析

    Flask是一款基于Werkzeug和Jinja2的轻量级Web框架，具有优雅简洁的代码风格、灵活性和可扩展性。在Flask框架中，响应、调度方法和蓝图操作是非常关键的内容，下面我们将对这三个方面进行详细讲解，并分别给出两个实例进行说明。 Flask框架响应 在Flask框架中，响应是指服务器返回给客户端的数据，Flask框架内置了多种响应类型，如HTML页…

    Flask 2023年5月15日
    00
合作推广
合作推广
分享本页
返回顶部