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

---

一、跨域请求问题

1.1 问题描述

在使用 uniapp 与 SpringBoot 搭建商城项目的过程中，当 uniapp 前端页面向 SpringBoot 后端发起请求时，出现了跨域问题。具体表现为在浏览器控制台中报错，类似 “Access to XMLHttpRequest at ’ 后端接口地址 ’ from origin ’ 前端页面地址 ’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” 这样的错误提示，导致前端无法正常获取后端接口的数据，影响了商城功能的正常使用，比如商品列表展示、用户登录注册等功能因为跨域问题无法请求到后端接口数据而出现异常。

1.2 排查思路

当遇到跨域问题报错时，首先从浏览器控制台的报错信息入手。根据上述报错信息，得知是因为响应头中没有 “Access-Control-Allow-Origin” 字段，这明显是同源策略导致的跨域问题。接着在浏览器的开发者工具中查看网络请求，检查请求头和响应头。在请求头中确认 “Origin” 字段正确显示了前端页面的源地址，而在响应头中确实缺少 “Access-Control-Allow-Origin” 以及其他 CORS 相关字段，进一步确定了是跨域问题。同时，也排除了前端请求路径错误、后端接口未正常启动等其他可能导致请求失败的原因，将问题锁定在跨域配置上。

1.3 解决方案

1.3.1 前端代理配置

在 uniapp 中，可以通过在 manifest.json 文件中配置代理来解决跨域问题。具体步骤如下：

打开项目的 manifest.json 文件，点击 “源码视图”。在 “h5” 节点下添加如下代理配置：

"h5": {"devServer": {"disableHostCheck": true,"proxy": {"/api": {"target": "后端接口地址",// 例如："http://localhost:8080"，这里填写SpringBoot后端服务的地址"changeOrigin": true,"pathRewrite": {"^/api": ""}}}}
}

上述配置中，“/api” 是代理的路径前缀，当 uniapp 前端发起的请求路径以 “/api” 开头时，就会触发代理。“target” 指定了代理的目标地址，即后端接口的实际地址。“changeOrigin” 设置为 true，表示改变请求头中的 “Origin” 字段，使其与目标地址一致，这样可以避免一些跨域问题。“pathRewrite” 是路径重写规则，“^/api” 表示匹配以 “/api” 开头的路径，将其替换为空字符串，这样在请求后端接口时，就会去掉 “/api” 前缀，保证请求路径正确。

1.3.2 后端 CORS 配置

在 SpringBoot 中，有多种方式配置 CORS。
方式一：使用注解
在需要允许跨域的控制器类或方法上添加 @CrossOrigin 注解。例如：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/api")
public class ProductController {@CrossOrigin(origins = "http://localhost:8081")// 这里填写uniapp前端运行的地址@GetMapping("/products")public List<Product> getProducts() {// 获取商品列表逻辑}
}

优点是配置简单，针对特定的控制器或方法进行跨域设置，灵活性高。缺点是如果有多个控制器或方法需要跨域，需要逐个添加注解，比较繁琐。
方式二：配置类
通过实现 WebMvcConfigurer 接口来配置全局 CORS。创建一个配置类，如下：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:8081")// 允许跨域访问的前端地址.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")// 允许的HTTP方法.allowedHeaders("*")// 允许的请求头.allowCredentials(true); // 是否允许发送Cookie信息}
}

优点是可以全局配置，一次配置后所有请求都能生效，便于管理。缺点是不够灵活，如果某些特殊接口有不同的跨域需求，不太好单独处理。
方式三：过滤器
创建一个 CORS 过滤器类来全局处理跨域请求。代码如下：

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import org.springframework.stereotype.Component;@Component
public class SimpleCorsFilter extends HttpFilter {@Overrideprotected void doFilter(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws IOException, ServletException {response.setHeader("Access-Control-Allow-Origin", "http://localhost:8081");response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");response.setHeader("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");response.setHeader("Access-Control-Allow-Credentials", "true");chain.doFilter(request, response);}
}

优点是可以在请求到达控制器之前进行处理，对所有请求进行统一的跨域处理。缺点是配置相对复杂一些，且如果有多个过滤器，需要注意过滤器的顺序。

1.4 代码调试过程

在前端，修改请求路径，将原本直接请求后端接口的路径改为代理路径，例如将 uni.request({url: ‘http://localhost:8080/api/products’}) 修改为 uni.request({url: ‘/api/products’}) 。同时，添加一些参数，如 data: {param1: ‘value1’} ，来测试不同参数下跨域配置是否生效。

在后端，在控制器方法中添加日志输出，如使用 log.info(“接收到请求，参数为: {}”, param) 来记录接收到的请求参数和信息。通过查看日志，确认后端是否接收到前端的请求。然后在浏览器中发送请求，观察控制台的报错信息是否消失，以及后端日志是否正确记录请求信息。如果请求仍然报错，再次检查前端代理配置和后端 CORS 配置是否正确，逐步调整配置，直到跨域配置生效，前端能够成功获取后端接口数据。

二、性能瓶颈问题

2.1 问题描述

在商城系统的使用过程中，性能瓶颈问题逐渐凸显。页面加载缓慢，用户在进入商品详情页、购物车页面等时，往往需要等待较长时间，页面才会完全加载出来，这极大地影响了用户体验。同时，接口响应超时频繁出现，例如在用户提交订单、查询订单状态等操作时，后端接口有时无法在规定时间内返回数据，导致用户操作失败，甚至出现页面卡顿无响应的情况。这些问题不仅降低了用户对商城的满意度，还可能导致用户流失，对商城的运营产生不利影响。

2.2 排查思路

当出现性能瓶颈问题时，需要从多个方面进行排查。首先是服务器资源监控，利用工具如 top、nmon 等监控服务器的 CPU 使用率、内存使用率、磁盘 I/O 等情况。如果 CPU 使用率持续过高，接近 100%，可能是有大量的计算任务在执行，或者存在死循环等问题导致 CPU 资源被耗尽；内存使用率过高，接近或超过物理内存，可能会导致频繁的磁盘交换，从而降低系统性能；磁盘 I/O 频繁且读写速度慢，可能是因为大量的数据读写操作，或者磁盘本身性能不足。

其次是数据库查询分析，通过数据库自带的工具如 MySQL 的 EXPLAIN 语句来分析查询语句的执行计划，查看是否存在全表扫描、索引未使用等问题。同时，开启慢查询日志，记录执行时间较长的查询语句，对这些慢查询进行重点分析和优化。

最后是代码执行效率分析，利用性能分析工具如 JProfiler、VisualVM 等对 Java 代码进行分析，查看方法的调用次数、执行时间、内存分配等情况，找出执行效率较低的代码段，例如是否存在复杂的算法、大量的循环嵌套、不必要的数据处理等。

2.3 解决方案

2.3.1 服务器资源优化

如果服务器的内存不足，可以增加物理内存，以满足系统运行和数据处理的需求。同时，合理配置服务器的 CPU 参数，例如对于一些计算密集型任务，可以优化 CPU 的调度策略，提高 CPU 的利用率。此外，还可以对服务器的操作系统进行优化，关闭不必要的服务和进程，减少系统资源的占用。

2.3.2 数据库优化

优化数据库查询语句，例如避免使用 SELECT *，只选择需要的列，减少数据传输量。使用 JOIN 替代子查询，提高查询效率。例如，原本的子查询：

SELECT * FROM products WHERE category_id IN (SELECT id FROM categories WHERE name = '电子产品');

可以优化为 JOIN 查询：

SELECT p.* FROM products p
JOIN categories c ON p.category_id = c.id
WHERE c.name = '电子产品';

添加索引，在经常用于查询条件的列上建立索引，例如在 products 表的 category_id 列上建立索引：

CREATE INDEX idx_category_id ON products (category_id);

使用缓存，如 Redis 缓存数据库查询结果，减少数据库的直接查询次数。在 SpringBoot 中，可以使用 Spring Cache 注解来实现缓存功能。首先在 pom.xml 文件中添加 Redis 依赖：

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>

然后在配置文件 application.properties 中配置 Redis：

spring.redis.host=127.0.0.1
spring.redis.port=6379

在需要缓存的方法上添加注解，例如：

import org.springframework.cache.annotation.Cacheable;
import org.springframework.stereotype.Service;@Service
public class ProductService {@Cacheable(value = "products", key = "#categoryId")public List<Product> getProductsByCategoryId(Long categoryId) {// 从数据库查询商品列表逻辑}
}

上述代码中，@Cacheable 注解表示该方法的结果会被缓存，value 指定缓存的名称，key 指定缓存的键，这里使用 categoryId 作为键，当再次调用该方法且 categoryId 相同时，会直接从缓存中获取数据，而不是执行数据库查询。

2.3.3 代码优化

优化算法，选择更高效的算法来处理数据。例如在排序算法中，将冒泡排序改为快速排序，提高排序效率。原本的冒泡排序代码：

public static void bubbleSort(int[] arr) {int n = arr.length;for (int i = 0; i < n - 1; i++) {for (int j = 0; j < n - i - 1; j++) {if (arr[j] > arr[j + 1]) {int temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}}
}

改为快速排序代码：

public static void quickSort(int[] arr, int low, int high) {if (low < high) {int pi = partition(arr, low, high);quickSort(arr, low, pi - 1);quickSort(arr, pi + 1, high);}
}private static int partition(int[] arr, int low, int high) {int pivot = arr[high];int i = (low - 1);for (int j = low; j < high; j++) {if (arr[j] < pivot) {i++;int temp = arr[i];arr[i] = arr[j];arr[j] = temp;}}int temp = arr[i + 1];arr[i + 1] = arr[high];arr[high] = temp;return i + 1;
}

减少不必要的计算和数据传输，在代码中避免重复计算相同的结果，例如可以将一些固定的计算结果缓存起来，避免每次都重新计算。同时，优化数据传输，减少网络传输的数据量，例如对数据进行压缩后再传输。

使用异步编程，对于一些耗时较长的操作，如发送邮件通知、生成报表等，可以使用异步任务来处理，避免阻塞主线程，提高系统的响应速度。在 SpringBoot 中，可以使用 @Async 注解来实现异步方法。首先在启动类上添加 @EnableAsync 注解，开启异步功能：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.scheduling.annotation.EnableAsync;@SpringBootApplication
@EnableAsync
public class MallApplication {public static void main(String[] args) {SpringApplication.run(MallApplication.class, args);}
}

然后在需要异步执行的方法上添加 @Async 注解，例如：

import org.springframework.scheduling.annotation.Async;
import org.springframework.stereotype.Service;@Service
public class MailService {@Asyncpublic void sendMail(String to, String subject, String content) {// 发送邮件逻辑}
}

上述代码中，sendMail 方法会在一个新的线程中异步执行，不会阻塞调用它的主线程。

2.4 代码调试过程

以 JProfiler 为例，在项目启动时，将 JProfiler 与项目关联。在 JProfiler 中，可以选择监控整个项目或者特定的模块、类。启动项目后，进行一些性能瓶颈相关的操作，如多次加载商品详情页、频繁提交订单等。JProfiler 会实时收集数据，在 CPU 视图中，可以查看各个方法的 CPU 耗时，以及调用次数、平均耗时等信息。通过分析这些信息，可以找出 CPU 消耗较大的方法。在内存视图中，可以查看内存的使用情况，包括对象的创建和销毁，找出内存占用较大的对象和代码段。例如，如果发现某个方法的 CPU 耗时较长，且调用次数频繁，就可以深入分析该方法的代码逻辑，是否存在复杂的计算、不必要的循环等，然后对其进行优化，优化后再次使用 JProfiler 进行测试，查看性能是否得到提升，直到性能瓶颈问题得到解决。

三、问题解决经验总结

3.1 通用排查技巧

在解决各种技术问题时，通用的排查思路是从现象出发，逐步深入分析原因。当遇到问题时，首先要准确记录问题出现的现象，如报错信息、系统异常表现等。以跨域问题为例，通过浏览器控制台报错信息中 “No ‘Access-Control-Allow-Origin’ header is present” 这一现象，初步判断与跨域相关。接着，按照从外到内、从简单到复杂的顺序进行排查，先检查前端请求是否正确，再查看后端响应情况，通过在浏览器开发者工具中查看网络请求的请求头和响应头，进一步确认问题所在。对于性能瓶颈问题，从页面加载缓慢、接口响应超时等现象入手，通过服务器资源监控、数据库查询分析、代码执行效率分析等多方面手段，逐步定位到具体的问题点，如 CPU 使用率过高可能是代码中存在死循环，数据库查询慢可能是索引未使用等。

3.2 预防措施

在项目开发过程中，提前预防技术问题的出现至关重要。在代码编写方面，遵循代码规范，如统一的命名规则、代码结构规范等，提高代码的可读性和可维护性，减少因代码混乱导致的问题。同时，在开发过程中，定期进行代码审查，团队成员相互检查代码，及时发现潜在的问题和风险。对于性能问题，在项目开发的早期阶段，进行性能测试，模拟不同的业务场景和负载情况，提前发现性能瓶颈，并进行针对性的优化。例如，在数据库设计阶段，合理设计表结构和索引，避免后期因数据库设计不合理导致的性能问题。在前后端交互方面，明确接口规范，前后端开发人员严格按照接口规范进行开发，减少因接口不一致导致的跨域等问题。

3.3 对后续项目的启示

解决这些跨域请求和性能瓶颈问题的经验，对后续商城项目开发和维护具有重要的指导意义。在后续项目开发中，可以直接复用这些经过实践验证的解决方案和排查技巧，减少开发过程中的试错成本，提高开发效率。在处理跨域问题时，可以根据项目的实际需求，选择合适的跨域解决方案，如前端代理配置或后端 CORS 配置，避免因跨域问题影响项目进度。对于性能优化，持续关注服务器资源使用情况、数据库性能和代码执行效率，建立定期的性能监控和优化机制，确保商城系统在高并发、大数据量的情况下能够稳定、高效运行。同时，通过对这些问题的解决，也培养了团队成员的问题解决能力和技术素养，为后续项目的顺利开展提供了有力的人才支持。