【商城实战(72)】解锁用户评价与晒单功能开发秘籍

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配，乃至运营推广策略，102 章内容层层递进。无论是想深入钻研技术细节，还是探寻商城运营之道，本专栏都能提供从 0 到 1 的系统讲解，助力你打造独具竞争力的电商平台，开启电商实战之旅。

---

一、搭建用户评价与晒单页面

1.1 技术选型说明

• uniapp：这是一个使用 Vue.js 开发所有前端应用的框架，能够一次编写代码，多端发布，包括 iOS、Android、H5 以及各种小程序等。对于移动前端开发而言，它极大地提高了开发效率，减少了针对不同平台单独开发的工作量 ，并且基于 Vue.js，拥有简洁的语法和强大的响应式数据绑定机制，便于进行页面交互逻辑的编写。
• Element plus：基于 Vue 3 的桌面端 UI 组件库，提供了丰富的组件，如按钮、表单、表格等。在 PC 前端开发中，利用这些组件可以快速构建出美观、交互性强的界面，且组件设计遵循响应式原则，能适应不同屏幕尺寸的 PC 设备，提升用户体验。
• SpringBoot：作为后端框架，其内置了 Tomcat、Jetty 和 Undertow 等服务器，无需额外安装和配置。自动配置功能可根据项目中的依赖关系自动配置应用程序，大大简化了配置过程。同时，还提供了大量开箱即用的功能和插件，如 Spring Data、Spring Security 和 Spring Cloud 等，方便开发者快速构建应用程序，并进行扩展和集成其他技术。
• Mybatis-plus：一款基于 MyBatis 框架的增强工具，支持多种数据库，如 MySQL、Oracle 等。它提供了丰富的 API 和注解，能通过简单的配置和使用实现 ORM 操作，减少手写 SQL 的工作量。还具备代码生成器，可自动生成实体类、Mapper 接口以及 XML 映射文件，提高开发效率。此外，支持分页查询、动态查询、乐观锁、性能分析等实用功能。

1.2 前端实现（uniapp）

• 页面结构：使用view组件搭建整体布局，通过form表单组件收集用户评价信息，包括评价内容输入框、图片上传组件等。

<template>
  <view class="evaluation-page">
    <view class="form-item">
      <label>评价内容：</label>
      <textarea v-model="evaluation.content" placeholder="请输入评价内容"></textarea>
    </view>
    <view class="form-item">
      <label>上传图片：</label>
      <view class="image-upload">
        <button @click="chooseImage">选择图片</button>
        <view class="image-preview" v-for="(image, index) in evaluation.images" :key="index">
          <image :src="image" mode="aspectFill"></image>
          <button @click="deleteImage(index)">删除</button>
        </view>
      </view>
    </view>
    <button @click="submitEvaluation">提交评价</button>
  </view>
</template>

• 样式：通过style标签设置页面样式，使页面布局合理、美观。

<style scoped>
.evaluation-page {
  padding: 20px;
}
.form-item {
  margin-bottom: 15px;
}
.form-item label {
  display: block;
  margin-bottom: 5px;
}
textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
}
.image-upload {
  display: flex;
  align-items: center;
}
.image-upload button {
  margin-right: 10px;
}
.image-preview {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
}
.image-preview image {
  width: 100px;
  height: 100px;
}
.image-preview button {
  position: absolute;
  top: 0;
  right: 0;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

• 交互逻辑：在script标签中定义数据和方法，实现图片选择、删除以及评价提交功能。

<script>
export default {
  data() {
    return {
      evaluation: {
        content: '',
        images: []
      }
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 9,
        success: res => {
          this.evaluation.images = res.tempFilePaths;
        }
      });
    },
    deleteImage(index) {
      this.evaluation.images.splice(index, 1);
    },
    submitEvaluation() {
      // 这里使用uni.request发送POST请求到后端
      uni.request({
        url: 'http://your-backend-url/evaluation/submit',
        method: 'POST',
        data: this.evaluation,
        success: res => {
          if (res.statusCode === 200) {
            uni.showToast({
              title: '评价提交成功',
              icon:'success'
            });
          } else {
            uni.showToast({
              title: '评价提交失败',
              icon: 'none'
            });
          }
        },
        fail: err => {
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

1.3 前端实现（Element plus）

• 页面结构：利用 Element plus 的el-form、el-form-item、el-input、el-upload等组件构建页面。

<template>
  <div class="evaluation-page">
    <el-form :model="evaluation" label-width="120px">
      <el-form-item label="评价内容">
        <el-input type="textarea" v-model="evaluation.content" placeholder="请输入评价内容"></el-input>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
          class="image-upload"
          :action="uploadUrl"
          :multiple="true"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
          :before-upload="beforeUpload">
          <el-button type="primary">选择图片</el-button>
        </el-upload>
        <div class="image-preview" v-for="(image, index) in evaluation.images" :key="index">
          <img :src="image" style="width: 100px; height: 100px; margin-right: 10px;">
          <el-button type="text" @click="deleteImage(index)">删除</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitEvaluation">提交评价</el-button>
  </div>
</template>

• 样式：同样通过style标签设置样式，与 uniapp 实现的样式类似，但在细节上根据 PC 端的特点进行调整，使页面在 PC 端显示更加协调。

<style scoped>
.evaluation-page {
  padding: 20px;
}
.image-upload {
  display: inline-block;
  margin-right: 10px;
}
.image-preview {
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
}
</style>

• 交互逻辑：在script中定义数据和方法，处理图片上传、删除以及评价提交逻辑，与 uniapp 的实现思路相似，但在请求后端接口时使用axios。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      evaluation: {
        content: '',
        images: []
      },
      uploadUrl: 'http://your-backend-url/upload'
    };
  },
  methods: {
    handleUploadSuccess(response, file) {
      this.evaluation.images.push(response.data.url);
    },
    beforeUpload(file) {
      return true;
    },
    deleteImage(index) {
      this.evaluation.images.splice(index, 1);
    },
    submitEvaluation() {
      axios.post('http://your-backend-url/evaluation/submit', this.evaluation)
      .then(response => {
          if (response.status === 200) {
            this.$message.success('评价提交成功');
          } else {
            this.$message.error('评价提交失败');
          }
        })
      .catch(error => {
          this.$message.error('网络请求失败');
        });
    }
  }
};
</script>

1.4 后端实现（SpringBoot + Mybatis-plus）

• 添加依赖：在pom.xml文件中添加 SpringBoot、Mybatis-plus、MySQL 驱动等相关依赖。

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

• 配置文件：在application.yml中配置数据库连接信息以及 Mybatis-plus 相关配置。

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/your-database-name?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
    username: your-username
    password: your-password
mybatis-plus:
  type-aliases-package: com.example.demo.entity
  mapper-locations: classpath:/mapper/*.xml

• 实体类：创建评价实体类Evaluation，对应数据库中的评价表。

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.util.List;

@Data
@TableName("evaluation")
public class Evaluation {
    private Long id;
    private String content;
    private List<String> images;
    // 其他字段，如用户ID、商品ID、评价时间等
}

• Mapper 接口：继承BaseMapper接口，Mybatis-plus 会自动为我们实现基本的 CRUD 操作，无需手写 mapper 文件。

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.Evaluation;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface EvaluationMapper extends BaseMapper<Evaluation> {
}

• Service 层：实现评价提交的业务逻辑。

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.entity.Evaluation;
import com.example.demo.mapper.EvaluationMapper;
import org.springframework.stereotype.Service;

@Service
public class EvaluationService extends ServiceImpl<EvaluationMapper, Evaluation> {
    public boolean submitEvaluation(Evaluation evaluation) {
        return save(evaluation);
    }
}

• Controller 层：接收前端传来的评价数据，并调用 Service 层方法进行处理。

import com.example.demo.entity.Evaluation;
import com.example.demo.service.EvaluationService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class EvaluationController {
    @Autowired
    private EvaluationService evaluationService;

    @PostMapping("/evaluation/submit")
    public String submitEvaluation(@RequestBody Evaluation evaluation) {
        if (evaluationService.submitEvaluation(evaluation)) {
            return "评价提交成功";
        } else {
            return "评价提交失败";
        }
    }
}

Mybatis-plus 的优势在于其强大的 CRUD 操作支持，内置通用 Mapper 和 Service，通过少量配置即可实现单表大部分 CRUD 操作。同时，提供了丰富的条件构造器，方便进行复杂查询，并且支持多种主键策略、代码生成、分页插件等功能，大大提高了开发效率 。在本项目中，使用 Mybatis-plus 可以快速实现与数据库的交互，减少开发工作量。

二、实现评价审核机制

2.1 机制原理介绍

评价审核机制旨在维护商城评价的质量和真实性，为用户提供有价值的参考。当用户提交评价后，系统首先通过预设的敏感词库对评价内容进行过滤。敏感词库包含违反法律法规、低俗、辱骂、广告等不良信息的词汇。利用字符串匹配算法，如 KMP 算法，快速在评价内容中查找敏感词。一旦检测到敏感词，该评价将被标记为待人工审核。

对于未检测到敏感词的评价，系统会进一步分析评价内容的情感倾向、信息完整性等因素。通过自然语言处理技术，如情感分析算法，判断评价的情感是积极、消极还是中性。对于情感倾向异常（如过度夸张的好评或差评）或者信息过于简单（如仅输入一个字或符号）的评价，也会纳入人工审核范围。

人工审核人员会根据明确的审核标准对标记的评价进行细致审查。审核标准涵盖评价是否与商品或服务相关、是否存在虚假内容、是否侵犯他人隐私等方面。对于审核通过的评价，将被标记为 “已通过”，并展示在商品详情页或评价列表中；对于未通过审核的评价，会标记为 “未通过”，并向用户反馈未通过原因，如 “包含敏感词”“内容不真实” 等 。同时，系统会记录审核过程中的相关信息，包括审核人员、审核时间等，以便后续追溯和统计分析。

2.2 前端交互实现（uniapp 与 Element plus）

在 uniapp 中，当用户提交评价后，页面会显示 “评价提交成功，等待审核” 的提示信息，使用uni.showToast实现。在评价列表页面，对于已审核通过的评价，展示正常的评价内容和相关图片；对于未审核的评价，在评价内容区域显示 “该评价正在审核中” 的提示。

// 提交评价成功提示
uni.showToast({
  title: '评价提交成功，等待审核',
  icon: 'none'
});

在 Element plus 中，同样在提交评价后通过this.$message提示用户等待审核。在评价展示列表中，使用v-if指令根据评价的审核状态进行不同的显示。

<template>
  <el-table :data="evaluationList">
    <el-table-column label="评价内容">
      <template slot-scope="scope">
        <div v-if="scope.row.status === 'passed'">{{ scope.row.content }}</div>
        <div v-else-if="scope.row.status === 'pending'">该评价正在审核中</div>
        <div v-else>该评价未通过审核</div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      evaluationList: []
    };
  },
  methods: {
    // 提交评价方法
    submitEvaluation() {
      // 提交逻辑
      this.$message.info('评价提交成功，等待审核');
    }
  }
};
</script>

2.3 后端核心代码实现（SpringBoot + Mybatis-plus）

在 SpringBoot 项目中，首先在评价实体类Evaluation中添加审核状态字段status，取值为pending（待审核）、passed（已通过）、rejected（未通过）。

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.util.List;

@Data
@TableName("evaluation")
public class Evaluation {
    private Long id;
    private String content;
    private List<String> images;
    // 其他字段，如用户ID、商品ID、评价时间等
    private String status;
}

在 Service 层添加审核方法，根据审核结果更新评价的审核状态。

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.entity.Evaluation;
import com.example.demo.mapper.EvaluationMapper;
import org.springframework.stereotype.Service;

@Service
public class EvaluationService extends ServiceImpl<EvaluationMapper, Evaluation> {
    public boolean auditEvaluation(Long id, String status) {
        Evaluation evaluation = new Evaluation();
        evaluation.setId(id);
        evaluation.setStatus(status);
        return updateById(evaluation);
    }
}

在 Controller 层提供审核接口，接收前端传来的评价 ID 和审核状态。

import com.example.demo.entity.Evaluation;
import com.example.demo.service.EvaluationService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@RestController
public class EvaluationController {
    @Autowired
    private EvaluationService evaluationService;

    @PostMapping("/evaluation/audit")
    public String auditEvaluation(@RequestBody Map<String, Object> request) {
        Long id = (Long) request.get("id");
        String status = (String) request.get("status");
        if (evaluationService.auditEvaluation(id, status)) {
            return "评价审核成功";
        } else {
            return "评价审核失败";
        }
    }
}

这样，通过前端与后端的协同工作，实现了完整的评价审核机制，确保商城评价的质量和可信度。

三、开发评价回复功能

3.1 功能设计思路

评价回复功能旨在增强商家与用户之间的互动，提升用户体验，促进良好的购物氛围。当用户发表评价后，商家能够针对该评价进行回复，解答用户的疑问、表达感谢或处理用户提出的问题。这不仅有助于用户更好地了解商品或服务，还能让用户感受到商家的关注和重视，从而提高用户对商城的满意度和忠诚度。

从系统架构角度看，前端负责收集商家的回复内容，并将其发送到后端。后端接收请求后，对回复数据进行验证和处理，然后将回复信息存储到数据库中。在数据存储方面，为了清晰关联评价与回复，在数据库表设计上，回复表会包含评价 ID 字段，通过该字段建立与评价表的外键关联 ，确保数据的一致性和完整性。当用户查看评价时，前端通过调用后端接口获取对应的回复信息，并将其展示在评价旁边，形成完整的互动展示。

3.2 前端交互细节（uniapp 与 Element plus）

在 uniapp 中，在评价展示页面，对于每条评价，下方会显示 “回复” 按钮。点击该按钮后，弹出一个输入框，商家可以在其中输入回复内容。输入完成后，点击 “发送” 按钮，通过uni.request将回复数据发送到后端。

<template>
  <view class="evaluation-item" v-for="(evaluation, index) in evaluationList" :key="index">
    <view class="evaluation-content">{{ evaluation.content }}</view>
    <view class="reply-btn" @click="showReplyInput(index)">回复</view>
    <view v-if="replyIndex === index" class="reply-input">
      <textarea v-model="replyContent" placeholder="请输入回复内容"></textarea>
      <button @click="sendReply(index)">发送</button>
    </view>
    <view class="reply-list">
      <view class="reply-item" v-for="(reply, replyIndex) in evaluation.replies" :key="replyIndex">
        {{ reply.content }}
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      evaluationList: [],
      replyIndex: -1,
      replyContent: ''
    };
  },
  methods: {
    showReplyInput(index) {
      this.replyIndex = index;
    },
    sendReply(index) {
      const evaluationId = this.evaluationList[index].id;
      const replyData = {
        evaluationId: evaluationId,
        content: this.replyContent
      };
      uni.request({
        url: 'http://your-backend-url/reply/submit',
        method: 'POST',
        data: replyData,
        success: res => {
          if (res.statusCode === 200) {
            this.evaluationList[index].replies.push({ content: this.replyContent });
            this.replyIndex = -1;
            this.replyContent = '';
          } else {
            uni.showToast({
              title: '回复失败',
              icon: 'none'
            });
          }
        },
        fail: err => {
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

在 Element plus 中，使用el-dialog组件实现回复输入框的弹出效果。点击 “回复” 按钮，打开对话框，输入回复内容后点击 “确定” 按钮，通过axios发送请求到后端。

<template>
  <el-table :data="evaluationList">
    <el-table-column label="评价内容">
      <template slot-scope="scope">
        {{ scope.row.content }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="text" @click="showReplyDialog(scope.$index)">回复</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog :visible.sync="replyDialogVisible" title="回复评价">
    <el-form :model="replyForm">
      <el-form-item label="回复内容">
        <el-input type="textarea" v-model="replyForm.content"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="replyDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="sendReply">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      evaluationList: [],
      replyDialogVisible: false,
      replyForm: {
        content: ''
      },
      currentEvaluationIndex: -1
    };
  },
  methods: {
    showReplyDialog(index) {
      this.currentEvaluationIndex = index;
      this.replyDialogVisible = true;
    },
    sendReply() {
      const evaluationId = this.evaluationList[this.currentEvaluationIndex].id;
      const replyData = {
        evaluationId: evaluationId,
        content: this.replyForm.content
      };
      axios.post('http://your-backend-url/reply/submit', replyData)
      .then(response => {
          if (response.status === 200) {
            this.evaluationList[this.currentEvaluationIndex].replies.push({ content: this.replyForm.content });
            this.replyDialogVisible = false;
            this.replyForm.content = '';
          } else {
            this.$message.error('回复失败');
          }
        })
      .catch(error => {
          this.$message.error('网络请求失败');
        });
    }
  }
};
</script>

3.3 后端实现代码（SpringBoot + Mybatis-plus）

在 SpringBoot 项目中，首先创建回复实体类Reply，包含回复 ID、评价 ID、回复内容、回复时间等字段。

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.util.Date;

@Data
@TableName("reply")
public class Reply {
    private Long id;
    private Long evaluationId;
    private String content;
    private Date replyTime;
    // 其他可能的字段，如回复者信息等
}

在 Mapper 接口中，继承BaseMapper接口，实现回复数据的基本 CRUD 操作。

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.Reply;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface ReplyMapper extends BaseMapper<Reply> {
}

在 Service 层，实现回复提交的业务逻辑，包括保存回复数据到数据库，并处理可能的异常情况。

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.entity.Reply;
import com.example.demo.mapper.ReplyMapper;
import org.springframework.stereotype.Service;

@Service
public class ReplyService extends ServiceImpl<ReplyMapper, Reply> {
    public boolean submitReply(Reply reply) {
        reply.setReplyTime(new Date());
        return save(reply);
    }
}

在 Controller 层，提供回复提交的接口，接收前端传来的回复数据，并调用 Service 层方法进行处理。

import com.example.demo.entity.Reply;
import com.example.demo.service.ReplyService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ReplyController {
    @Autowired
    private ReplyService replyService;

    @PostMapping("/reply/submit")
    public String submitReply(@RequestBody Reply reply) {
        if (replyService.submitReply(reply)) {
            return "回复提交成功";
        } else {
            return "回复提交失败";
        }
    }
}

通过以上前端与后端的协同开发，实现了商城的评价回复功能，为商家与用户之间的互动提供了有效的技术支持。

四、总结与展望

在本次商城用户评价与晒单功能开发中，我们综合运用 uniapp、Element plus、SpringBoot 和 Mybatis-plus 等技术，成功搭建了功能完善的评价与晒单模块。从前端页面的构建到后端业务逻辑的实现以及数据库的交互，各个环节紧密配合，实现了用户评价与晒单的基本功能、评价审核机制以及评价回复功能。

通过这次开发，我们充分利用了 uniapp 的跨平台优势和 Element plus 丰富的组件库，为用户提供了良好的交互体验；SpringBoot 的快速开发特性和 Mybatis-plus 强大的数据库操作能力，保障了后端服务的高效稳定运行。在开发过程中，也遇到了诸如前后端数据格式匹配、接口调试等问题，但通过团队协作和技术调研，都得以顺利解决。

展望未来，在功能优化方面，我们可以进一步完善评价审核机制中的自然语言处理算法，提高对评价内容语义理解的准确性，更精准地判断评价质量。同时，优化评价回复功能的交互设计，增加快捷回复模板等功能，提高商家回复效率。在技术拓展上，可以考虑引入消息队列，如 RabbitMQ，实现评价数据的异步处理，提升系统的响应性能；探索将区块链技术应用于评价数据存储，保证评价数据的不可篡改和真实性 ，增强用户对评价系统的信任。随着技术的不断发展和用户需求的日益增长，我们将持续改进和完善用户评价与晒单功能，为商城的发展提供有力支持。