基于NLP制作用户评论分析系统-实验手册

在线学习中心课程基于NLP制作用户评论分析系统-实验手册

本页目录

10分钟

任务 2 新建评论及情感分析数据获取

任务目的

小程序中需要包含一个新建评论的功能，这一步将会在页面中构建新建评论的相关代码。同时为了对新建的评论进行情感分析，还会通过云函数调用NLP中的情感分析API，获取评论的情感分析数据。获取到的情感分析数据暂时通过控制台打印，后面的任务会将其保存到数据库中，实现项目功能整合。

任务步骤

1.功能预期效果展示

经过这一步的操作，我们希望能够完成如下功能：

展示一个页面，页面上包含一个话题的标题，以及一个用于填写评论内容的文本框，还有一个用于提交评论的按钮。当用户在文本框中输入评论内容，并且点击 “新建评论” 按钮进行提交时，控制台将会返回评论内容的情感分析结果。

具体展示效果如下：

4-2-1 情感分析预期效果展示

接下来将进行这一部分功能的实现。

2.添加新增评论功能本地代码

(1)引入Vant相关组件。

在index页面的index.json文件中引入van-field和van-button组件，这两个组件分别用于进行文本框和按钮的展示。

index.json文件中的完整代码展示如下：

【修改文件：index.json，所在页面：index】

{
  "usingComponents": {
    "van-cell": "@vant/weapp/cell",
    "van-cell-group": "@vant/weapp/cell-group",
    "van-button": "@vant/weapp/button",
    "van-field": "@vant/weapp/field"
  }
}

注：单元格相关的组件cell和cell-group暂时不用，但稍后展示评论列表时需要用到，这里也一并添加进来。

(2)编写wxml页面代码。

在index页面的index.wxml文件中编辑页面结构代码，添加如下代码：

【修改文件：index.wxml，所在页面：index】

<text class="title">话题：今天你开心吗？</text>
<van-cell-group>
  <van-field
    value="{{ comment }}"
    center
    clearable
    label="写评论"
    placeholder="请输入评论内容"
    border="{{ false }}"
    use-button-slot
    bind:change="onChange"
    error-message="{{ errorMsg }}"
  >
  </van-field>
</van-cell-group>
<van-button type="primary" block size="default" bind:click="addComment">新建评论</van-button>

这些代码分别用于展示页面上的标题、存放评论内容的文本框和新建评论按钮。同时在新建评论的按钮上绑定了addComment函数，稍后将在index.js文件中进行函数功能的配置。

(3)编写wxss样式代码。

本项目中涉及到的样式代码不多，直接将所有样式代码添加到应用的app.wxss文件中，可以对全局应用代码中的样式。需要在app.wxss中添加的样式代码如下：

【修改文件：app.wxss】

page {
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* 顶部标题 */
.title {
  font-size:40rpx;
  font-weight: bold;
  margin: 30rpx;
}
/* 副标题 */
.subtitle {
  font-size: 28rpx;
  margin: 30rpx;
}
/* 评论样式 */
.isPositive {
  color: #ff584e;
}
.isNegative {
  color: #29cc85;
}
/* 评论列表 */
.comments {
  height:600rpx;
  width: 90%;
  margin-left:5%;
}

/* 情感分析图表 */
.sentiment {
  background: #f6f6f6;
  height: 260rpx;
  position: relative;
}
.sentiment .sentimentCanvas {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-100%, -100%);
  width: 260rpx;
  height: 260rpx;
}
.sentiment .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sentiment .sentiment-number {
  display: inline-block;
  top: 100%;
  left: 50%;
  position: absolute;
  transform: translate(20%, -140%);
}
.sentiment .negative-groud {
  background: #ff584e;
}
.sentiment .positive-groud {
  background: #29cc85;
}
.sentiment .groud {
  width: 20rpx;
  height: 20rpx;
  display: inline-block;
  border-radius: 50%;
  margin-right: 20rpx;
}
.sentiment .negative {
  color: #ff584e;
}
.sentiment .positive {
  color: #29cc85;
}
.sentiment .center-text {
  font-family: PingFangSC-Medium;
  font-size: 42rpx;
  letter-spacing: 0;
  text-align: center;
}
.sentiment .sentiment-text {
  font-family: PingFangSC-Regular;
  font-size: 26rpx;
  color: #898989;
  letter-spacing: 0;
  text-align: justify;
  line-height: 48rpx;
}
.sentiment .sentiment-view {
  margin-bottom: 40rpx;
}
.sentiment .number {
  font-family: PingFangSC-Regular;
  font-size: 26rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: justify;
  line-height: 48rpx;
}

添加并保存后，设置的样式将会自动在全局应用。部分样式会在稍后添加新功能时生效。

注：app.wxss中添加的样式会在全局生效，页面中的wxss只会在当前页面生效，如果两边的样式同时存在，页面样式的优先级大于全局样式。

(4)编写js逻辑代码。

在index页面的index.js中添加页面的逻辑代码。需要添加的代码内容如下：

【修改文件：index.js，所在页面：index】

Page({
  // 页面的初始数据
  data: {
    comment: "",
    errorMsg: ""
  },

  onChange(event) {
    // event.detail 为当前输入的值
    this.comment = event.detail
    if (this.comment != "") {
      this.setData({
        "errorMsg": ""
      })
    }
  },

  // 调用云函数addComment，传递用户提交的内容，并返回执行结果
  addComment(event) {
    if (this.comment == undefined) {
      this.setData({
        "errorMsg": "文本内容不能为空"
      })
      return false
    }
    // 执行函数：添加评论到云开发数据库
    wx.cloud.callFunction({
      name: "addComment",
      data: {
        val: this.comment
      }
    }).then(res => {
      console.log(this.comment)
      console.log(res.result)
    }).catch(res => {
      this.setData({
        "errorMsg": "请输入有意义的文本"
      })
    })
  },
})

对应的代码逻辑说明如下：

Page({})：对应小程序的页面对象，小程序的所有页面内容以及逻辑功能，均需要在借助此页面对象才能实现。
data：对应页面的初始数据，希望通过数据绑定在wxml页面中展示的数据，也可以在此处添加。
onChange(event){}：用于监听页面上的数据变化，此处主要用于获取文本框中输入的内容，监听到的数据内容可以通过event.val获取。
addComment(event){}：点击 “新建评论”按钮时触发的函数，此处添加了条件判断，如果用户输入内容为空，展示提示信息并阻止提交。如果内容非空，将会提交到同名的云函数addComment中（此函数目前尚未定义，稍后将会添加）。
.then()：对应云函数成功调用时，执行此部分的代码，此处将会打印评论内容和情感分析结果。
.catch()：调用云函数并捕获到异常时，将会执行此部分的代码，此处将会展示提示信息。

(5)页面效果展示。

在项目中添加上面步骤中的代码后，将会展示如下的页面效果：

4-2-2 情感分析页面效果展示

说明页面效果已经符合预期。但调用情感分析的云函数还没有创建，云函数的功能未被实现，下一步将会在云函数中实现情感分析接口的调用操作。

3.云函数实现情感分析接口调用

(1)API Explorer简介。

接下来需要在小程序中创建一个云函数，用于调用情感分析的接口，并将获取到的结果存储到数据库中（稍后进行）。在进行云函数的创建之前，学员需要先了解NLP中的情感分析接口应该如何调用，能够实现什么样的功能。

想要体验NLP的API调用，可以使用腾讯云官方提供的 API 3.0 Explorer 。

访问上方的链接，将会进入 API Explorer 的控制台界面，上方链接默认进入的是情感分析API的控制台，界面展示效果如下：

4-2-3 API Explorer介绍

API Explorer提供了在线调用、签名验证、SDK代码生成和快速检索接口等能力。是一款非常强大的API调用工具，学员如有调用腾讯云产品中的其他API的需求，也可以借助此工具实现。

接下来将会通过此工具调用情感分析接口，并生成接口调用的请求代码。

(2)情感分析接口调用尝试。

这一步中将会尝试进行情感分析接口的调用，相关的操作在 API Explorer 中进行。为了方便展示调用结果，此处会先以在线调用的形式进行演示。

在 API Explorer 中填写好个人密钥和所需参数，然后在右侧选择 “在线调用” ，点击下方的 “发送请求” 按钮，如果输入信息无误，即可查看情感分析的返回结果。情感分析请求尝试的示意图展示如下：

4-2-4 情感分析请求尝试

学员可以自行尝试发送请求，并查看请求的分析结果。

注：自然语言处理NLP每日包含50万次的免费请求次数，足够个人日常测试使用。更多详细的数据可以通过 NLP控制台查看。（创建腾讯云账号后默认开通NLP服务，无需手动购买。）

如果上方的操作中能够顺利获取请求结果，说明情感分析API的调用功能已经实现。此时可以点击 “代码生成” ，并勾选 “Node.js” （小程序云函数调用API使用Node.js代码），获取请求代码：

4-2-5 获取Node.js请求代码

请求代码中被标注的部分，对应的是学员在构建请求代码时可能需要进行手动修改的部分。

有了上方的请求代码，便可以在小程序中实现评论文本的情感分析功能。

(3)创建云函数addComment。

想要使用一个云函数，需要先将其创建。

4-2-6 新建Node.js云函数

创建好的 Node.js 中，主要包含index.js和package.json两个文件，分别对应云函数的逻辑代码和描述文件，下面会通过对这两个文件进行简单的修改，来实现情感分析接口的调用功能。

(4)package.json文件配置。

通过上方情感分析生成的代码，可以看到使用 Node.js 调用腾讯云API时，需要先导入tencentcloud-sdk-nodejs模块，所以在addComment云函数的package.json文件中，需要将其添加到依赖环境中。

将模块名和对应版本，以对象的形式添加到dependencies中即可。示例代码如下：

【修改文件：package.json，所在云函数：addComment】

"dependencies": {
  "wx-server-sdk": "latest",
  "tencentcloud-sdk-nodejs": "latest"
}

稍后进行代码上传时，会在云端自动进行依赖安装。

(5)index.js文件配置。

接下来需要在addComment云函数的index.js文件中，导入所需依赖，并添加情感分析请求的代码，然后返回获取到的请求结果。完整的示例代码如下：

【修改文件：index.js，所在云函数：addComment】

// 云函数入口文件
const cloud = require('wx-server-sdk')
// 导入tencentcloud-sdk-nodejs模块
const tencentcloud = require("tencentcloud-sdk-nodejs")

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  // 调用getResult返回情感分析结果
  return await getResult(event.val)
}

// 创建获取情感分析结果的请求函数
function getResult(comment) {
  const NlpClient = tencentcloud.nlp.v20190408.Client;
  const models = tencentcloud.nlp.v20190408.Models;
  const Credential = tencentcloud.common.Credential;
  const ClientProfile = tencentcloud.common.ClientProfile;
  const HttpProfile = tencentcloud.common.HttpProfile;
  // [需要手动填写]此处填入学员的密钥信息
  let cred = new Credential("<SecretId>", "<SecretKey>");
  let httpProfile = new HttpProfile();
  httpProfile.endpoint = "nlp.tencentcloudapi.com";
  let clientProfile = new ClientProfile();
  clientProfile.httpProfile = httpProfile;
  // [需要手动填写]此处将 "ap-guangzhou" 替换为学员所属地域的服务器
  let client = new NlpClient(cred, "ap-guangzhou", clientProfile);
  let req = new models.SentimentAnalysisRequest();
  let params = '{"Text":"' + comment + '"}'
  req.from_json_string(params);

  // 将请求结果以Promise对象形式返回
  return new Promise((resolve, reject) => {
    client.SentimentAnalysis(req, function (errMsg, response) {
      if (errMsg) {
        reject(errMsg);
      }
      console.log(response.to_json_string());
      resolve(response)
    });
  })
    .then((res) => {
      return res
    })
}

学员在使用这一部分的代码前，需要将密钥和所属地域（可选）中的内容进行替换。这一部分的代码主要实现了调用情感分析接口，并将获取到的分析结果返回本地的功能。

下面对代码中的关键修改进行解释说明。

导入tencentcloud-sdk-nodejs模块，用于实现 Node.js 调用腾讯云API：

const tencentcloud = require("tencentcloud-sdk-nodejs")

调用getResult函数，执行情感分析的请求代码，传入的参数event.val对应小程序中接收到的评论文本：

return await getResult(event.val)

创建函数getResult用于获取情感分析的请求结果。中间的请求体，对应 API Explorer 中生成的请求代码，最终以Promise对象的形式返回请求结果，便于对异步请求的执行结果进行接收：

function getResult(comment) {
  ......
  // 将请求结果以Promise对象形式返回
  return new Promise((resolve, reject) => {
    ......
}

经过这一步的操作，云函数获取情感分析结果的功能已经实现，接下来需要上传编写好的云函数。

(6)上传云函数。

右键点击要上传的云函数，选择 “上传并部署：云端安装依赖（不上传 node modules）”：

4-2-7 上传addComment云函数

等待云函数上传成功，即可成功进行云函数的调用。

(7)情感分析功能验证。

尝试在模拟器的文本框中输入评论内容，并点击“新建评论”按钮。如果能够成功在终端打印评论，且能成功获取到情感分析的数据，说明新建评论及情感分析数据获取的功能已经实现。

4-2-8 情感分析完成效果展示

上一节: 任务 1 小程序云开发项目创建下一节: 任务 3 云开发数据库保存情感分析数据

直播支持申请

职业发展学习路径

热门技术学习路径

目录

评价

推荐