下面是关于“基于Node-red的在线评语系统”的完整攻略：

1. 概述

Node-RED是一款基于浏览器的可视化编程工具，使用它，我们可以通过拼接不同的Node节点来实现特定的功能。同时，Node-RED还支持导出一个具有完整逻辑的Node.js应用或NPM包，这使得我们可以用Node-RED来实现一些需要进行调试或后期维护的项目开发。

本攻略旨在通过使用Node-RED来实现一个在线评语系统。系统将具有以下特点：

可视化的操作界面：使用Node-RED的可视化节点来完成评价数据的录入和展示。
公网访问：使用Node-RED的HTTP和Websocket节点实现系统的远程访问。

2. 环境设置和准备

在开始使用Node-RED之前，我们需要确认本地环境已经满足以下要求：

安装Node.js环境
安装npm包管理器

下面，在终端中执行以下命令安装Node-RED：

npm install -g node-red

完成安装后，在终端中执行以下命令启动Node-RED：

node-red

Node-RED将自动启动，并在浏览器中打开一个界面：http://localhost:1880。

3. 设计评语系统

3.1 创建评价录入界面

我们需要在Node-RED中创建一个用于录入评价数据的界面。界面中将包括一些表单元素，例如姓名、评价等级和评价内容。

我们使用Node-RED的UI部件来实现这一功能。首先，在左侧栏拖拽一个“tab”节点并重命名为“评价系统”。然后，在该节点下方拖入一个“UI Template”节点。在“UI Template”节点中，我们可以使用HTML、CSS和JavaScript等语言来编写自定义的表单界面。

下面是一个简单的例子（该界面包含姓名、评分和评价内容三项元素）：

<script type="text/html" data-template-name="评价录入界面">
    <div class="form-group">
        <label for="name">姓名</label>
        <input id="name" type="text" class="form-control"></input>
    </div>
    <div class="form-group">
        <label for="rating">评分</label>
        <select id="rating" class="form-control">
            <option value="1">一星</option>
            <option value="2">二星</option>
            <option value="3">三星</option>
            <option value="4">四星</option>
            <option value="5">五星</option>
        </select>
    </div>
    <div class="form-group">
        <label for="comment">评价内容</label>
        <textarea id="comment" class="form-control" rows="5"></textarea>
    </div>
    <button type="submit" class="btn btn-primary" ng-click="send()">提交</button>
</script>

在UI Template节点中，我们还需要定义一个JavaScript函数来响应表单提交事件。该函数将从表单中提取数据并发起一个HTTP请求，将评价数据保存至后端数据库。下面是一个示例函数：

$scope.send = function() {
    var name = document.getElementById('name').value;
    var rating = document.getElementById('rating').value;
    var comment = document.getElementById('comment').value;
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (req.readyState == 4 && req.status == 200) {
            alert('提交成功！');
        }
    }
    req.open('POST', '/comments', true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    req.send('name=' + name + '&rating=' + rating + '&comment=' + comment);
}

3.2 创建评价展示界面

我们需要在Node-RED中创建一个用于展示评价数据的界面。界面中将显示所有已经提交的评价数据。

我们同样使用Node-RED的UI部件来实现这一功能。首先，在左侧栏拖拽一个“tab”节点并重命名为“评价系统”。然后，继续在该节点下方拖入一个“UI Template”节点。在“UI Template”节点中，我们可以使用HTML、CSS和JavaScript等语言来编写自定义的表格界面。

下面是一个简单的例子（该界面包含日期、姓名、评分和评价内容四项元素）：

<script type="text/html" data-template-name="评价展示界面">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>日期</th>
                <th>姓名</th>
                <th>评分</th>
                <th>评价内容</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="comment in comments">
                <td>{{ comment.date }}</td>
                <td>{{ comment.name }}</td>
                <td>{{ comment.rating }}</td>
                <td>{{ comment.comment }}</td>
            </tr>
        </tbody>
    </table>
</script>

在UI Template节点中，我们还需要使用JavaScript函数来获取并展示所有已经提交的评价数据。该函数将从后端数据库中获取数据并将其传递到UI界面中进行展示。下面是一个示例函数：

$scope.getComments = function() {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (req.readyState == 4 && req.status == 200) {
            $scope.comments = JSON.parse(req.responseText);
            $scope.$apply();
        }
    }
    req.open('GET', '/comments', true);
    req.send();
}

3.3 设计后端逻辑

为了实现前端UI与后端数据库的对接，我们需要在Node-RED中创建对应的后端逻辑。Node-RED提供了许多HTTP节点和SQL数据库节点，可以方便地实现后端逻辑。

本教程中，我们使用MySQL作为后端数据库。首先，在Node-RED的左侧栏中找到“安装”选项卡，搜索“node-red-contrib-mysql”插件并安装。安装完成后，该插件将提供了一组SQL数据库节点供我们使用。

下面是插件提供的SQL节点列表：

mysql：MySQL数据库查询节点。
mysql in：MySQL数据库输入节点，用于插入新记录。
mysql out：MySQL数据库输出节点，用于更新现有记录。
mysql exec：MySQL数据库执行节点，用于执行自定义SQL语句。

我们使用mysql in节点来将评价数据写入后端数据库。node-red-contrib-mysql 插件使用默认值，不用进行任何设置即可正常使用。

同样地，我们使用mysql节点来从后端数据库中获取所有评价数据。该节点使用自定义SQL查询来实现，下面是一个查询示例：

SELECT * FROM comments ORDER BY date DESC

最后需要在该节点下方创建一个Websocket节点，并设置其Websocket事件监听端口为1880。这将使得我们可以通过该端口远程访问该评语系统。

4. 系统发布

当我们完成了评语系统的设计后，就可以将其发布到公网上供用户使用了。Node-RED 提供了一种便捷的发布方式，即使用Node-RED的导出功能导出为一个Node.js应用或NPM包。我们可以将导出的包给客户或托管在服务器上。

下面介绍如何将Node-RED的项目导出为Node.js应用，并使用PM2进程管理器在后台运行：

首先，在Node-RED的右上方找到“菜单”按钮并选择“导出”>“Node.js”。在弹出的窗口中，设置导出路径和名称并完成导出。

然后，在终端中执行以下命令安装PM2：

npm install -g pm2

使用以下命令运行导出的Node.js应用：

pm2 start app.js --name "评语系统"

至此，我们就成功地将评语系统发布到了公网上，并可以通过Websocket端口进行访问。

5. 示例说明

下面，我们以添加“查看评价次数”和“查看好评数量”两项为例来介绍如何扩展该系统。

5.1 添加“查看评价次数”

我们需要在Node-RED中添加两个节点来实现该功能：

inject节点：定时发送一个流入的消息。
function节点：处理收到的消息，从后端数据库中获取评价次数并输出。

下面是两个节点的配置：

inject节点配置：
Payload：timestamp
Repeat：60
Interval：1
Output：Payload
function节点配置：

JavaScript var req = new XMLHttpRequest(); req.onreadystatechange = function() { if (req.readyState == 4 && req.status == 200) { var comments = JSON.parse(req.responseText); msg.payload = comments.length; node.send(msg); } } req.open('GET', '/comments', true); req.send();

添加完毕后，我们就可以在评语系统右上角看到一个数字，表示已有多少人评价了。

5.2 添加“查看好评数量”

我们需要在Node-RED中添加两个节点来实现该功能：

function节点：从收到的评价数据中筛选出评分为5分的项。
change节点：统计评分的5分项和总评价数，计算好评率并输出。

下面是两个节点的配置：

function节点配置：

JavaScript var rating = msg.rating; if (rating == 5) { node.send(msg); }

change节点配置：
Operation：Move
Move：rating
To：good_ratings
Options：Keep

添加完毕后，我们就可以在评语系统右上角看到一个好评率（评分为5分的评价次数与总评价次数的比例），并且在评价展示界面中能够看到所有的好评项。

至此，我们已经完成了一个基于Node-RED的在线评语系统，并通过添加“查看评价次数”和“查看好评数量”两项，为系统增添了额外的功能。

注意，以上仅是一份简单的示例教程，实际开发中还需要考虑许多细节和问题。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于Node-red的在线评语系统(可视化编程,公网访问) - Python技术站

基于Node-red的在线评语系统(可视化编程,公网访问)