【商城实战(74)】数据采集与整理，夯实电商运营基石

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

一、确定商城需采集的数据类型
- 1.1 用户行为数据
- 1.2 商品销售数据
- 1.3 系统日志数据
二、选择数据采集工具并部署采集代码
- 2.1 埋点技术在前端的数据采集
- 2.2 日志采集器在后端的数据采集
- 2.3 采集代码的部署与注意事项
三、清洗采集到的数据
- 3.1 处理缺失值
- 3.2 处理重复值
- 3.3 数据质量保障措施

一、确定商城需采集的数据类型

在商城系统中，全面且准确的数据采集是后续数据分析与业务决策的基石。我们主要确定采集以下几类关键数据：

1.1 用户行为数据

用户行为数据包含用户在商城中的各类操作记录，如浏览记录，记录用户访问过的商品页面、分类页面等，能直观反映用户的兴趣点；搜索关键词，可了解用户的需求和关注点；点击行为，包括点击商品图片、按钮、链接等，有助于分析用户的操作偏好；购买路径，即用户从进入商城到完成购买的一系列页面跳转轨迹，这对优化商城页面布局和购物流程意义重大。

在 uniapp 移动前端，利用生命周期函数和事件绑定获取用户行为数据，如在页面的onLoad、onShow生命周期中记录页面访问时间，示例代码如下：

export default {onLoad() {const pageVisitTime = new Date().getTime();// 假设后端接口为 /user/behavioruni.request({url: 'http://your-backend-url/user/behavior',method: 'POST',data: {userId: this.userId,action: 'page_visit',page: this.$route.path,time: pageVisitTime},success: res => {console.log('用户行为数据发送成功', res.data);},fail: err => {console.error('用户行为数据发送失败', err);}});}
}

在 Element plus PC 前端，借助 Vue 的指令和事件监听，如使用v-on:click监听按钮点击事件，获取点击行为数据：

<template><el-button v-on:click="handleButtonClick">点击按钮</el-button>
</template><script>
export default {methods: {handleButtonClick() {const clickTime = new Date().getTime();// 假设后端接口为 /user/behavioraxios.post('http://your-backend-url/user/behavior', {userId: this.userId,action: 'button_click',buttonName: '点击按钮',time: clickTime}).then(res => {console.log('用户行为数据发送成功', res.data);}).catch(err => {console.error('用户行为数据发送失败', err);});}}
}
</script>

在 Spring Boot 后端，定义 Controller 层接口接收前端传来的用户行为数据，通过 Service 层调用 Mybatis-plus 将数据存入数据库。例如：

@RestController
public class UserBehaviorController {@Autowiredprivate UserBehaviorService userBehaviorService;@PostMapping("/user/behavior")public String handleUserBehavior(@RequestBody UserBehavior userBehavior) {userBehaviorService.save(userBehavior);return "success";}
}

UserBehavior实体类对应数据库表，Mybatis-plus 自动实现数据持久化，无需手写 Mapper 文件。

1.2 商品销售数据

商品销售数据涵盖商品 ID，用于唯一标识商品；销量，体现商品的受欢迎程度；销售额，直接反映商品的商业价值；销售时间，可分析销售趋势和时间相关性。这些数据对于库存管理至关重要，通过销量和库存对比，可及时补货或调整库存策略；在商品定价策略上，结合销售额和成本分析，能制定更合理的价格。

在 Spring Boot 后端，通过 SQL 查询语句或 Mybatis-plus 的 QueryWrapper 构建查询条件获取商品销售数据。例如，获取某时间段内的商品销售数据：

@Service
public class ProductSalesService extends ServiceImpl<ProductSalesMapper, ProductSales> {public List<ProductSales> getProductSalesByTime(String startTime, String endTime) {QueryWrapper<ProductSales> wrapper = new QueryWrapper<>();wrapper.between("sale_time", startTime, endTime);return list(wrapper);}
}

Controller 层接口：

@RestController
public class ProductSalesController {@Autowiredprivate ProductSalesService productSalesService;@GetMapping("/product/sales/time")public List<ProductSales> getProductSalesByTime(@RequestParam String startTime, @RequestParam String endTime) {return productSalesService.getProductSalesByTime(startTime, endTime);}
}

在 uniapp 移动前端，通过uni.request请求后端接口获取商品销售数据：

uni.request({url: 'http://your-backend-url/product/sales/time',method: 'GET',data: {startTime: '2024-01-01',endTime: '2024-01-31'},success: res => {console.log('商品销售数据获取成功', res.data);},fail: err => {console.error('商品销售数据获取失败', err);}
});

Element plus PC 前端类似，使用axios请求后端接口。

1.3 系统日志数据

系统日志数据用于记录系统操作，如用户登录、退出，管理员的系统配置操作等；错误信息，包括代码异常、数据库连接错误等，便于及时发现和解决系统问题；性能指标，如接口响应时间、服务器资源利用率等，对系统性能优化和稳定性保障意义非凡。

在 Spring Boot 后端，利用日志框架（如 Logback）记录系统日志，通过配置文件定义日志输出格式和级别。例如，在logback.xml中配置：

<configuration><appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender"><encoder><pattern>%d{yyyy-MM-dd HH:mm:ss} [%thread] %-5level %logger{36} - %msg%n</pattern></encoder></appender><root level="info"><appender-ref ref="STDOUT" /></root>
</configuration>

在代码中使用日志记录，如：

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;@Service
public class SystemLogService {private static final Logger logger = LoggerFactory.getLogger(SystemLogService.class);public void logSystemOperation(String operation, String userId) {logger.info("用户 {} 进行了操作: {}", userId, operation);}
}

在 uniapp 移动前端和 Element plus PC 前端，可通过自定义日志上报机制，将前端发生的错误和操作信息发送到后端。例如，uniapp 中捕获错误并上报：

try {// 可能出错的代码
} catch (error) {uni.request({url: 'http://your-backend-url/log/front',method: 'POST',data: {errorMessage: error.message,stack: error.stack,page: this.$route.path},success: res => {console.log('前端日志上报成功', res.data);},fail: err => {console.error('前端日志上报失败', err);}});
}

后端接收并处理前端上报的日志数据，存入数据库供后续分析。

二、选择数据采集工具并部署采集代码

2.1 埋点技术在前端的数据采集

埋点技术是前端数据采集中常用的手段，它能精准捕捉用户在页面上的各类交互行为。埋点可分为代码埋点、可视化埋点和无痕埋点，这里我们主要探讨代码埋点和可视化埋点在 uniapp 和 Element plus 中的实现。

在 uniapp 中实现代码埋点，可利用其生命周期和事件绑定机制。比如，要统计页面的访问次数和停留时间，在页面的onLoad生命周期中记录页面加载时间，在onUnload中计算并上报停留时间：

export default {data() {return {pageLoadTime: null};},onLoad() {this.pageLoadTime = new Date().getTime();// 记录页面访问事件uni.request({url: 'http://your-backend-url/track',method: 'POST',data: {userId: this.userId,event: 'page_visit',page: this.$route.path},success: res => {console.log('页面访问事件上报成功', res.data);},fail: err => {console.error('页面访问事件上报失败', err);}});},onUnload() {const pageStayTime = new Date().getTime() - this.pageLoadTime;// 上报页面停留时间uni.request({url: 'http://your-backend-url/track',method: 'POST',data: {userId: this.userId,event: 'page_stay_time',page: this.$route.path,stayTime: pageStayTime},success: res => {console.log('页面停留时间上报成功', res.data);},fail: err => {console.error('页面停留时间上报失败', err);}});}
}

在 Element plus 中，借助 Vue 的指令和事件监听实现代码埋点。例如，为按钮添加点击埋点：

<template><el-button v-on:click="handleButtonClick" v-trace="buttonName">点击按钮</el-button>
</template><script>
export default {data() {return {buttonName: '点击按钮'};},methods: {handleButtonClick() {// 假设已经全局挂载了埋点上报方法$tracker.reportthis.$tracker.report({evName: this.buttonName,evInfo: '按钮被点击'});}}
}
</script>

其中，v-trace指令可用于快速为元素添加埋点标识，在指令的实现中，当元素被点击时，获取指令绑定的值作为事件名称等信息进行上报。

可视化埋点方面，可借助第三方可视化埋点工具。以某可视化埋点工具为例，在 uniapp 项目中集成时，先在项目中引入该工具的 SDK，然后在页面加载时，通过 SDK 提供的 API 注册页面元素的埋点信息。例如：

import VisualTracker from 'your-visual-tracker-sdk';export default {onLoad() {VisualTracker.init({appId: 'your-app-id',pageName: this.$route.path});VisualTracker.registerElement({element: document.getElementById('specific-element-id'),event: 'click',data: {category: 'button',action: 'click'}});}
}

在 Element plus 项目中类似，通过 SDK 的可视化界面，用户可直接在页面上选择需要埋点的元素，配置埋点事件和相关数据，工具会自动生成埋点代码并在运行时采集数据上报。

2.2 日志采集器在后端的数据采集

后端数据采集主要依赖日志采集器，常见的有 Logback 和 Log4j。这里以 Logback 为例，结合 Spring Boot 框架进行配置。

首先在pom.xml文件中添加 Spring Boot 和 Logback 的依赖：

<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-logging</artifactId></dependency>
</dependencies>

在src/main/resources目录下创建logback-spring.xml配置文件，配置如下：

<configuration><appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender"><encoder><pattern>%d{yyyy-MM-dd HH:mm:ss} [%thread] %-5level %logger{36} - %msg%n</pattern></encoder></appender><appender name="FILE" class="ch.qos.logback.core.FileAppender"><file>logs/app.log</file><encoder><pattern>%d{yyyy-MM-dd HH:mm:ss} [%thread] %-5level %logger{36} - %msg%n</pattern></encoder></appender><root level="info"><appender-ref ref="STDOUT" /><appender-ref ref="FILE" /></root>
</configuration>

上述配置中，STDOUT appender 将日志输出到控制台，FILE appender 将日志输出到logs/app.log文件。通过pattern标签定义日志输出格式，包含时间、线程、日志级别、类名和日志信息。

在业务代码中，使用LoggerFactory获取日志记录器进行日志记录。例如，在一个 Service 类中记录业务操作日志：

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;@Service
public class OrderService {private static final Logger logger = LoggerFactory.getLogger(OrderService.class);public void createOrder(String orderInfo) {logger.info("创建订单，订单信息: {}", orderInfo);// 订单创建逻辑}
}

当createOrder方法被调用时，会记录一条 INFO 级别的日志，包含订单创建的信息。

Mybatis-plus 与日志采集器结合时，可通过配置让 Mybatis-plus 输出 SQL 执行日志，便于调试和性能分析。在application.yml中添加配置：

mybatis-plus:configuration:log-impl: org.apache.ibatis.logging.slf4j.Slf4jImpl

这样，Mybatis-plus 执行的 SQL 语句及参数等信息会被日志采集器记录，在logback-spring.xml配置的输出目标中展示。

2.3 采集代码的部署与注意事项

将采集代码部署到生产环境时，首先要确保服务器环境满足要求。对于前端代码，在 uniapp 项目中，打包生成的文件需上传到 Web 服务器，如 Nginx。在 Nginx 配置文件中，设置好静态资源路径，指向 uniapp 打包生成的文件目录。例如：

server {listen       80;server_name  your-domain.com;location / {root   /path/to/your/uniapp/dist;index  index.html index.htm;try_files $uri $uri/ /index.html;}
}

Element plus 项目同理，打包后的文件部署到 Web 服务器，配置好服务器路径。

对于后端 Spring Boot 项目，可将其打包成 Jar 包，通过命令行启动：

java -jar your-project.jar

在服务器上，需安装 Java 运行环境，确保版本与项目要求一致。同时，安装数据库客户端，保证 Mybatis-plus 能正常连接数据库。

部署过程中，要注意数据传输安全。对于前端采集的数据，可采用 HTTPS 协议进行传输，防止数据被窃取或篡改。在后端，对敏感日志信息进行加密存储，如用户密码等。

性能优化也是关键，前端埋点代码要避免影响页面加载速度和用户体验，尽量采用异步方式发送数据。后端日志采集要合理配置日志级别，避免因日志过多影响系统性能，对于大量日志数据，可采用日志聚合工具（如 ELK Stack）进行集中管理和分析。

三、清洗采集到的数据

采集到的数据往往存在各种质量问题，如缺失值、重复值等，这些问题会影响数据分析的准确性和可靠性，因此需要对数据进行清洗，以确保数据质量。

3.1 处理缺失值

在商城数据中，缺失值可能出现在各个数据类型中。对于用户数据，可能存在年龄、性别等字段缺失；商品数据中，可能有商品描述、价格等字段缺失。常见的缺失值处理方法如下：

删除记录：当缺失值所在的记录对整体分析影响较小时，可直接删除。例如，在用户行为数据中，如果某条记录的多个关键行为字段都缺失，且该记录数量占比较小，可考虑删除。在 Spring Boot 中使用 Mybatis-plus 实现时，假设UserBehavior为用户行为实体类，代码示例如下：

@Service
public class UserBehaviorService extends ServiceImpl<UserBehaviorMapper, UserBehavior> {public void deleteMissingRecords() {QueryWrapper<UserBehavior> wrapper = new QueryWrapper<>();wrapper.isNull("behavior_field1").or().isNull("behavior_field2");remove(wrapper);}
}

均值填充：适用于数值型数据。如商品销售数据中的销量字段，若存在缺失值，可计算该商品历史销量的均值进行填充。代码示例：

@Service
public class ProductSalesService extends ServiceImpl<ProductSalesMapper, ProductSales> {public void fillMissingSalesWithMean() {List<ProductSales> salesList = list();Map<Long, Double> productMeanSales = new HashMap<>();// 计算每个商品的平均销量salesList.forEach(sales -> {if (!productMeanSales.containsKey(sales.getProductId())) {productMeanSales.put(sales.getProductId(), 0.0);}productMeanSales.put(sales.getProductId(), productMeanSales.get(sales.getProductId()) + sales.getSalesVolume());});productMeanSales.forEach((productId, totalSales) -> {long count = salesList.stream().filter(s -> s.getProductId().equals(productId)).count();productMeanSales.put(productId, totalSales / count);});// 填充缺失值salesList.forEach(sales -> {if (sales.getSalesVolume() == null) {sales.setSalesVolume(productMeanSales.get(sales.getProductId()).intValue());updateById(sales);}});}
}

中位数填充：同样用于数值型数据，能减少异常值影响。以商品价格为例，若有价格缺失，可使用中位数填充。实现代码类似均值填充，只是计算时获取中位数。
众数填充：用于分类数据。如用户性别字段缺失，可用数据集中出现频率最高的性别填充。假设User实体类有gender字段，代码示例：

@Service
public class UserService extends ServiceImpl<UserMapper, User> {public void fillMissingGenderWithMode() {QueryWrapper<User> wrapper = new QueryWrapper<>();wrapper.select("gender", "count(*) as count").groupBy("gender").orderByDesc("count");List<Map<String, Object>> result = baseMapper.selectMaps(wrapper);String modeGender = (String) result.get(0).get("gender");wrapper = new QueryWrapper<>();wrapper.isNull("gender");List<User> users = list(wrapper);users.forEach(user -> {user.setGender(modeGender);updateById(user);});}
}

基于模型填充：利用机器学习模型预测填充缺失值。如构建回归模型预测商品销量缺失值，先准备训练数据，将有完整销量数据的记录作为训练集，以其他相关字段为特征，销量为目标变量，训练模型后对缺失值进行预测填充。这涉及到更多机器学习相关的库和复杂的代码逻辑，此处暂不详细展开代码示例。

3.2 处理重复值

重复值会占用存储空间，干扰数据分析，需要进行处理。常见的去重方式有基于唯一标识去重和模糊去重。

基于唯一标识去重：在订单数据中，订单号通常是唯一标识。利用 Mybatis-plus 实现去重，假设Order实体类对应订单表，有orderId字段作为唯一标识，代码如下：

@Service
public class OrderService extends ServiceImpl<OrderMapper, Order> {public void removeDuplicateOrders() {QueryWrapper<Order> wrapper = new QueryWrapper<>();wrapper.select("distinct *").groupBy("order_id");List<Order> distinctOrders = list(wrapper);// 先删除原表数据remove(null);// 重新插入去重后的数据saveBatch(distinctOrders);}
}

模糊去重：当数据没有明显唯一标识或存在模糊性时使用。例如商品名称相似但有细微差异的数据去重，可通过字符串相似度算法（如编辑距离算法、余弦相似度算法）计算相似度，将相似度高且判定为重复的记录合并或删除。以编辑距离算法为例，使用Apache Commons Text库，假设Product实体类有productName字段，代码示例：

import org.apache.commons.text.similarity.LevenshteinDistance;@Service
public class ProductService extends ServiceImpl<ProductMapper, Product> {public void removeFuzzyDuplicateProducts() {List<Product> productList = list();List<Product> distinctProducts = new ArrayList<>();LevenshteinDistance levenshteinDistance = new LevenshteinDistance();for (Product product : productList) {boolean isDuplicate = false;for (Product distinctProduct : distinctProducts) {int distance = levenshteinDistance.apply(product.getProductName(), distinctProduct.getProductName());if (distance < 3) { // 距离阈值，可根据实际情况调整isDuplicate = true;break;}}if (!isDuplicate) {distinctProducts.add(product);}}// 先删除原表数据remove(null);// 重新插入去重后的数据saveBatch(distinctProducts);}
}

3.3 数据质量保障措施

数据质量是商城运营决策的关键依据，高质量的数据能为精准营销、库存管理、客户关系维护等业务提供有力支持。为确保清洗后的数据准确、完整、一致，可采取以下措施：

数据校验规则：在数据入库前进行校验。例如，用户注册数据中，对邮箱格式进行校验，使用正则表达式判断邮箱是否符合格式规范。假设User实体类有email字段，在 Controller 层校验代码如下：

@RestController
public class UserController {@Autowiredprivate UserService userService;@PostMapping("/user/register")public String registerUser(@RequestBody User user) {String emailPattern = "^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+$";if (!user.getEmail().matches(emailPattern)) {return "邮箱格式错误";}if (userService.save(user)) {return "注册成功";} else {return "注册失败";}}
}