【商城实战(29)】解锁消息通知功能，打造极致用户体验

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

---

一、消息通知服务选择与接口申请

在商城系统中，消息通知功能是提升用户体验、增强用户粘性以及促进业务流程顺畅进行的关键环节。通过及时、准确地向用户传达各类信息，如订单状态变更、商品促销活动、物流更新等，能够有效提高用户对商城的关注度和信任度，进而推动业务的增长。

1.1 短信通知

• 特点：短信通知具有即时性强、覆盖面广的特点，几乎所有手机用户都能接收短信，不受网络环境和设备限制。而且短信通知能够直接触达用户手机，即使手机处于锁屏或未打开应用的状态，用户也能第一时间收到通知，确保重要信息不被遗漏。
• 适用场景：适用于发送重要且紧急的通知，如订单支付成功、订单发货提醒、密码重置验证码等。在这些场景下，需要用户立即知晓相关信息，短信通知的即时性能够满足这一需求。

1.2 邮件通知

• 特点：邮件通知可以承载丰富的内容，如图片、链接、详细的文字描述等，能够为用户提供更全面的信息。同时，邮件通知便于用户保存和查阅历史记录，方便用户后续回顾相关信息。
• 适用场景：适合发送内容较为丰富、详细的通知，如商品推荐、促销活动详情、月度账单等。这些通知通常需要包含较多的信息，邮件的丰富格式能够更好地展示这些内容。

1.3 站内信通知

• 特点：站内信通知是在商城应用内部进行消息传递，不会受到外部网络和通讯运营商的影响，稳定性较高。而且站内信通知可以与商城的用户体系紧密结合，方便对用户行为进行跟踪和分析。
• 适用场景：适用于一般性的消息通知，如系统公告、私信消息、活动参与提醒等。这些通知对于即时性要求相对较低，用户在打开商城应用时能够及时查看即可。

1.4 接口申请步骤

1. 短信通知接口申请：以腾讯云短信服务为例，首先需要注册腾讯云账号，完成实名认证。然后进入腾讯云短信服务控制台，在控制台中提交企业相关资质证明（如营业执照、法人身份证等）、联系人信息、使用场景说明等资料。提交资料后，等待腾讯云审核，审核通过后即可获得短信接口的使用权限，包括 API 密钥、签名等信息。
2. 邮件通知接口申请：若选择腾讯云邮件推送服务，同样先注册腾讯云账号并实名认证。在腾讯云邮件推送控制台中，进行发信域名配置，添加并验证发信域名；同时可以维护收件人列表，创建和管理邮件模板。完成这些操作后，即可使用腾讯云邮件推送的 API 或 SMTP 方式发送邮件。
3. 站内信通知接口申请：由于站内信通知是在商城系统内部实现，不需要申请外部接口。但需要在数据库中设计相关的数据表来存储站内信的内容、发送者、接收者、发送时间、阅读状态等信息。例如，可以设计三张表：站内信发送表（记录站内信发送人以及接收人的信息，通过发送时间和收信人信息状态判定是否为过时消息，对接收人进行删除处理）、站内信信息表（记录站内信的消息内容，状态可做草稿箱处理，关联 id 是站内信的 id）、站内信接收表（记录站内信的接收人的信息，当用户登录时去查询站内信发送表是否有该用户且未过时的站内信，进行写入）。

二、后端消息发送接口开发

2.1 技术选型与环境搭建

后端开发选用 Spring Boot 框架，是因为其具有强大的自动配置功能，能极大地简化项目的配置过程，使开发者可以专注于业务逻辑的实现。同时，Spring Boot 内置了 Tomcat 等服务器，方便项目的快速部署和运行。而 Mybatis - plus 作为 MyBatis 的增强工具，在 MyBatis 的基础上提供了更强大的功能，如代码生成器、通用 CRUD 操作等，能够显著提高开发效率。

在搭建开发环境时，首先确保已经安装了 JDK 1.8 及以上版本，因为高版本的 JDK 提供了更多的新特性和性能优化，能更好地支持项目的开发。然后，使用 Maven 进行项目依赖管理，在项目的 pom.xml 文件中添加以下依赖：

<dependencies>
    <!-- Spring Boot Starter -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Mybatis - plus Starter -->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>最新版本号</version>
    </dependency>
    <!-- 数据库驱动 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

在配置文件 application.yml 中，进行数据库连接配置：

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/your_database_name?useUnicode=true&characterEncoding=utf-8&useSSL=false
    username: your_username
    password: your_password

这样，就完成了开发环境的搭建和项目依赖的配置。

2.2 消息发送接口设计

消息发送接口支持多种消息类型，包括短信通知、邮件通知和站内信通知。以订单状态变更通知为例，设计接口如下：

• 接口路径：/api/message/send/orderStatusChange
• 请求方法：POST
• 请求参数：

{
    "orderId": "123456",
    "status": "paid",
    "userId": "user123",
    "messageType": "sms"
}

其中，orderId 表示订单 ID，status 表示订单状态，userId 表示用户 ID，messageType 表示消息类型（sms 代表短信通知，email 代表邮件通知，inbox 代表站内信通知）。

• 返回值：

{
    "code": 200,
    "message": "消息发送成功",
    "data": null
}

code 表示状态码，200 表示成功，其他值表示失败；message 表示消息内容，用于描述操作结果；data 表示返回的数据，这里暂时为空。

2.3 代码实现

创建消息实体类：

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

@Data
@TableName("message")
public class Message {
    private Long id;
    private String orderId;
    private String status;
    private String userId;
    private String messageType;
    private String content;
    // 其他字段，如发送时间、接收时间等
}

编写消息发送服务接口：

import com.baomidou.mybatisplus.extension.service.IService;

public interface MessageService extends IService<Message> {
    boolean sendMessage(Message message);
}

编写消息发送服务实现类：

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

@Service
public class MessageServiceImpl extends ServiceImpl<MessageMapper, Message> implements MessageService {
    @Override
    public boolean sendMessage(Message message) {
        // 短信通知逻辑
        if ("sms".equals(message.getMessageType())) {
            // 调用短信接口发送短信
            // 这里假设已经获取到短信发送的工具类SmsUtil
            boolean result = SmsUtil.sendSms(message.getUserId(), message.getContent());
            if (result) {
                // 发送成功，保存消息记录到数据库
                save(message);
                return true;
            } else {
                return false;
            }
        }
        // 邮件通知逻辑
        else if ("email".equals(message.getMessageType())) {
            // 调用邮件接口发送邮件
            // 这里假设已经获取到邮件发送的工具类EmailUtil
            boolean result = EmailUtil.sendEmail(message.getUserId(), message.getContent());
            if (result) {
                // 发送成功，保存消息记录到数据库
                save(message);
                return true;
            } else {
                return false;
            }
        }
        // 站内信通知逻辑
        else if ("inbox".equals(message.getMessageType())) {
            // 保存站内信到数据库
            save(message);
            return true;
        }
        return false;
    }
}

创建控制器类，处理消息发送请求：

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 MessageController {
    @Autowired
    private MessageService messageService;

    @PostMapping("/api/message/send/orderStatusChange")
    public Result sendOrderStatusChangeMessage(@RequestBody Message message) {
        boolean result = messageService.sendMessage(message);
        if (result) {
            return Result.success("消息发送成功");
        } else {
            return Result.error("消息发送失败");
        }
    }
}

Result 类定义：

import lombok.Data;

@Data
public class Result {
    private int code;
    private String message;
    private Object data;

    public static Result success(String message) {
        Result result = new Result();
        result.setCode(200);
        result.setMessage(message);
        result.setData(null);
        return result;
    }

    public static Result error(String message) {
        Result result = new Result();
        result.setCode(500);
        result.setMessage(message);
        result.setData(null);
        return result;
    }
}

通过以上代码，实现了后端消息发送接口的开发，能够根据不同的消息类型发送订单状态变更通知，并将消息记录保存到数据库中。

三、前端消息展示及提醒功能实现

3.1 技术选型与页面搭建

前端选用 uniapp，是因为它是一个使用 Vue.js 开发所有前端应用的框架，能够实现一套代码多端运行，极大地提高了开发效率，降低了开发成本。对于商城应用来说，需要同时支持多个平台，uniapp 的跨平台特性正好满足这一需求。

在搭建前端项目时，首先需要安装 HBuilder X 开发工具，它是一款专为 uni-app 开发打造的 IDE，提供了丰富的功能和便捷的操作界面。打开 HBuilder X 后，通过 “新建项目”，选择 “uni-app”，填写项目名称、保存路径等信息，点击 “创建”，即可完成项目的初始化。

接着，在项目的 src/pages 目录下创建消息展示页面，例如 message.vue。在 message.vue 中，使用 uniapp 提供的组件和样式，搭建消息展示页面的基本结构：

<template>
  <view class="message-container">
    <view class="message-header">
      <text>消息通知</text>
    </view>
    <view class="message-list">
      <view v-for="(message, index) in messageList" :key="index" class="message-item">
        <text>{{ message.content }}</text>
        <text>{{ message.time }}</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.message-container {
  padding: 20px;
  background-color: #f5f5f5;
}
.message-header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}
.message-list {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.message-item {
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.message-item:last-child {
  border-bottom: none;
}
</style>

3.2 消息展示与提醒逻辑设计

1. 从后端获取消息：在页面加载时，通过 uni.request 方法向后端发送请求，获取用户的消息列表。请求的接口地址为后端提供的消息查询接口，例如 /api/message/list。在请求时，需要携带用户的身份信息，如 token，以验证用户身份。
2. 展示消息列表：将从后端获取到的消息数据存储在 Vue 实例的 data 属性中，如 messageList。使用 v-for 指令遍历 messageList，将每条消息的内容和时间展示在页面上。
3. 实现消息提醒：为了实现消息提醒功能，可以使用 uniapp 的推送功能。在用户打开应用时，向推送服务器注册设备信息，获取设备的唯一标识，如 clientId。当后端有新消息时，通过推送服务器向用户设备发送推送通知。在 uniapp 中，可以监听推送通知的接收事件，当接收到通知时，使用 uni.showToast 方法显示消息提醒，告知用户有新消息。同时，在页面上实时更新消息列表，显示最新的消息。

3.3 代码实现

在 message.vue 的 script 标签中，编写如下代码：

export default {
  data() {
    return {
      messageList: []
    };
  },
  onLoad() {
    this.getMessages();
  },
  methods: {
    getMessages() {
      uni.request({
        url: 'http://localhost:8080/api/message/list',
        method: 'GET',
        header: {
          'Authorization': 'Bearer'+ uni.getStorageSync('token')
        },
        success: res => {
          if (res.statusCode === 200) {
            this.messageList = res.data;
          }
        },
        fail: err => {
          console.error(err);
        }
      });
    }
  },
  onShow() {
    // 监听推送通知
    uni.onPushReceive((res) => {
      uni.showToast({
        title: '新消息',
        icon: 'none'
      });
      this.getMessages();
    });
  }
};

通过以上代码，实现了前端消息展示及提醒功能。在页面加载时，从后端获取消息列表并展示；当接收到推送通知时，显示消息提醒并更新消息列表，确保用户能够及时获取重要信息。

四、功能测试与优化

4.1 功能测试

在完成消息通知功能的开发后，需要对其进行全面的功能测试，以确保该功能能够正常运行，满足用户的需求。测试过程中，使用 Postman 工具来发送不同类型的消息请求，模拟用户在实际使用过程中可能遇到的各种场景。

• 发送不同类型消息：使用 Postman 发送短信通知请求，在请求体中按照接口定义的格式，正确填写订单 ID、订单状态、用户 ID 以及消息类型（设置为 “sms”）等参数。例如，发送一个订单支付成功的短信通知，订单 ID 为 “654321”，订单状态为 “paid”，用户 ID 为 “user456”。观察短信通知接口的响应，确保响应状态码为 200，并且返回的消息提示为 “消息发送成功”。同时，检查接收短信的手机是否成功收到短信，短信内容是否准确无误，包含订单 ID、订单状态等关键信息。
• 检查消息接收和展示情况：在前端页面上，使用开发者工具查看网络请求，确认是否成功向后端发送获取消息列表的请求，并且请求的参数是否正确。查看前端页面展示的消息列表，检查消息的内容是否与后端存储的消息一致，消息的时间显示是否准确。同时，模拟用户点击消息的操作，检查是否能够正确跳转到对应的详情页面，展示更多的消息细节。此外，还需要测试消息提醒功能，通过推送服务器向用户设备发送推送通知，观察用户设备是否能够及时收到通知，通知的提示信息是否清晰明确。

4.2 性能优化

消息通知功能在实际运行过程中，可能会面临一些性能问题，影响用户体验。通过对这些问题的分析，提出相应的优化建议和方案，以提升消息通知功能的性能。

• 消息发送延迟：消息发送延迟可能是由于短信接口或邮件接口的响应速度较慢，或者是消息发送队列出现拥堵导致的。为了解决这个问题，可以引入消息队列中间件，如 RabbitMQ。当后端接收到消息发送请求时，将消息放入 RabbitMQ 队列中，然后立即返回响应给前端，告知用户消息已接收。消息发送服务从队列中取出消息，异步地调用短信接口或邮件接口发送消息。这样可以避免因接口响应慢而导致前端等待时间过长，提高系统的响应速度。同时，合理配置消息队列的参数，如队列大小、消费者数量等，以确保消息能够及时处理，避免队列拥堵。
• 前端页面加载缓慢：前端页面加载缓慢可能是因为一次性加载的消息数据过多，或者是前端代码的性能优化不足。可以对消息数据进行分页加载，当用户打开消息展示页面时，只加载第一页的消息数据。在页面底部添加分页导航按钮，用户点击下一页时，再向后端请求下一页的数据。这样可以减少初始加载的数据量，提高页面的加载速度。同时，对前端代码进行优化，如压缩和合并 CSS、JavaScript 文件，减少 HTTP 请求次数；使用懒加载技术，延迟加载非关键资源，如图片等；优化 DOM 结构和 CSS 样式，减少页面重绘和回流。通过这些优化措施，可以显著提升前端页面的加载速度和响应性能。

五、总结与展望

在本次商城消息通知功能的开发过程中，我们深入研究并成功实现了短信通知、邮件通知和站内信通知三种常见的消息通知方式。通过合理选择消息通知服务，并精心申请相应的接口，为功能的实现奠定了坚实的基础。在后端开发方面，借助 Spring Boot 框架和 Mybatis - plus 的强大功能，我们高效地开发了消息发送接口，使其能够灵活支持不同类型的消息发送，满足了商城业务多样化的需求。前端部分则利用 uniapp 实现了消息展示及提醒功能，确保用户能够及时、便捷地获取重要信息，极大地提升了用户体验。

消息通知功能对于商城系统而言具有举足轻重的作用。它不仅能够显著提升用户体验，让用户随时了解商城的最新动态和个人订单信息，增强用户对商城的信任和依赖；还能有效促进业务流程的顺畅进行，例如通过及时的订单状态变更通知，减少用户的等待时间和疑虑，提高订单的转化率和完成率，从而为商城的业务运营提供有力支持，提升运营效率。

展望未来，消息通知功能还有着广阔的扩展空间和丰富的应用场景。在技术层面，可以进一步优化消息发送的效率和稳定性，引入更先进的消息队列技术和分布式架构，以应对高并发的消息发送需求。同时，加强对消息内容的个性化定制和精准推送，利用大数据分析和人工智能技术，深入挖掘用户的兴趣和行为数据，根据用户的偏好和需求，为其推送更加个性化、符合其兴趣的消息，提高消息的点击率和转化率。

在应用场景方面，可以将消息通知功能与更多的业务场景相结合，如会员体系、客户关系管理等。例如，针对会员用户，提供专属的会员权益通知、生日福利通知等；在客户关系管理中，通过消息通知实现与用户的主动沟通和互动，及时解决用户的问题和反馈，增强用户的满意度和忠诚度。此外，随着移动互联网和物联网技术的不断发展，消息通知功能还可以拓展到更多的终端设备和应用场景，为用户提供更加全面、便捷的服务。