构建智能导购商城：Spring Boot + Vue 3 + AI 导购实战 构建智能导购商城Spring Boot Vue 3 AI 导购实战项目简介Smart Shop 是一个基于 Spring Boot 3.2 Vue 3 构建的智能导购商城系统集成了 AI 大语言模型提供智能商品推荐服务。项目采用前后端分离架构具备完整的商品管理、用户认证、购物车、订单等核心电商功能。技术栈概览后端技术技术版本用途Java21编程语言Spring Boot3.2.0应用框架MyBatis3.0.3ORM 框架H22.x内存数据库开发环境MySQL8.0关系型数据库生产环境Ollama1.x本地大模型运行时前端技术技术版本用途Vue3.4前端框架Vue Router4.3路由管理Element Plus2.6UI 组件库Axios1.6HTTP 请求核心功能模块1. 商品管理商品模块提供完整的 CRUD 操作支持按分类浏览和关键词搜索// ProductController.java - 商品搜索接口GetMapping(/search)publicResponseEntityListProductsearchProducts(RequestParamStringkeyword){returnResponseEntity.ok(productService.searchProducts(keyword));}2. 用户认证实现了用户注册和登录功能使用 Spring Boot 标准的 RESTful 接口设计// UserController.javaPostMapping(/login)publicResponseEntityMapString,Objectlogin(RequestBodyUseruser){UserfounduserService.login(user.getUsername(),user.getPassword());// ... 登录逻辑}3. 购物车管理购物车支持添加商品、修改数量、删除商品等操作数据持久化到数据库// CartController.javaPostMappingpublicResponseEntityVoidaddToCart(RequestBodyMapString,Objectrequest){LonguserId((Number)request.get(userId)).longValue();LongproductId((Number)request.get(productId)).longValue();Integerquantity(Integer)request.getOrDefault(quantity,1);cartService.addToCart(userId,productId,quantity);returnResponseEntity.ok().build();}4. 订单管理订单模块实现了从创建订单到订单状态跟踪的完整流程// OrderController.javaPostMappingpublicResponseEntityOrdercreateOrder(RequestBodyMapString,Objectrequest){LonguserId((Number)request.get(userId)).longValue();ListLongcartIds((List?)request.get(cartIds)).stream().map(o-((Number)o).longValue()).toList();StringshippingAddress(String)request.get(shippingAddress);OrderorderorderService.createOrder(userId,cartIds,shippingAddress);returnResponseEntity.ok(order);}5. AI 智能导购核心亮点项目最具特色的功能是集成了本地大语言模型提供智能导购服务。通过 SSEServer-Sent Events实现流式响应提供流畅的对话体验。后端实现// ChatService.java - 流式聊天核心逻辑publicvoidchatStream(StringuserMessage,OutputStreamoutputStream){// 1. 获取商品目录ListProductproductsproductService.getAllProducts();StringBuildercatalognewStringBuilder();catalog.append(你是一个智能导购助手帮助用户了解商城中的商品并给出推荐。\n);for(Productp:products){catalog.append(- [).append(p.getId()).append(] ).append(p.getName()).append( | ¥).append(p.getPrice()).append( | 分类:).append(p.getCategory()).append(\n);}// 2. 构建请求体MapString,ObjectrequestBodyMap.of(model,deepseek-r1:7b,stream,true,messages,List.of(Map.of(role,system,content,catalog.toString()),Map.of(role,user,content,userMessage)));// 3. 发送请求并处理流式响应// ... HTTP 请求和流式解析逻辑}SSE 控制器设计// ChatController.javaPostMappingpublicDeferredResultVoidchatStream(RequestBodyMapString,Stringrequest,HttpServletResponseresponse){response.setContentType(text/event-stream);response.setCharacterEncoding(UTF-8);response.setHeader(Cache-Control,no-cache);response.setHeader(Connection,keep-alive);DeferredResultVoidresultnewDeferredResult(600000L);executor.execute(()-{try{OutputStreamosresponse.getOutputStream();chatService.chatStream(message,os);}catch(Exceptione){e.printStackTrace();}finally{result.setResult(null);}});returnresult;}数据库设计项目使用关系型数据库包含以下核心表-- 用户表CREATETABLEusers(idBIGINTAUTO_INCREMENTPRIMARYKEY,usernameVARCHAR(50)NOTNULLUNIQUE,passwordVARCHAR(100)NOTNULL,emailVARCHAR(100)NOTNULLUNIQUE,-- ...);-- 商品表CREATETABLEproducts(idBIGINTAUTO_INCREMENTPRIMARYKEY,nameVARCHAR(200)NOTNULL,descriptionTEXT,priceDECIMAL(10,2)NOTNULL,stockINTNOTNULLDEFAULT0,categoryVARCHAR(50),sales_countINTDEFAULT0,-- ...);-- 购物车表CREATETABLEcart(idBIGINTAUTO_INCREMENTPRIMARYKEY,user_idBIGINTNOTNULL,product_idBIGINTNOTNULL,quantityINTNOTNULLDEFAULT1,FOREIGNKEY(user_id)REFERENCESusers(id),FOREIGNKEY(product_id)REFERENCESproducts(id));-- 订单表CREATETABLEorders(idBIGINTAUTO_INCREMENTPRIMARYKEY,user_idBIGINTNOTNULL,order_noVARCHAR(50)NOTNULLUNIQUE,total_amountDECIMAL(10,2)NOTNULL,statusVARCHAR(20)DEFAULTPENDING,-- ...);-- 订单项表CREATETABLEorder_items(idBIGINTAUTO_INCREMENTPRIMARYKEY,order_idBIGINTNOTNULL,product_idBIGINTNOTNULL,product_nameVARCHAR(200)NOTNULL,priceDECIMAL(10,2)NOTNULL,quantityINTNOTNULLDEFAULT1,FOREIGNKEY(order_id)REFERENCESorders(id));前端架构API 封装// api/index.jsimportaxiosfromaxiosconstAPI_BASE_URL/apiconstapiaxios.create({baseURL:API_BASE_URL,headers:{Content-Type:application/json}})exportconstproductAPI{getAll:()api.get(/products),getById:(id)api.get(/products/${id}),getByCategory:(category)api.get(/products/category/${category}),search:(keyword)api.get(/products/search?keyword${keyword}),getTopSellers:()api.get(/products/top-sellers)}exportconstcartAPI{getByUserId:(userId)api.get(/cart/${userId}),add:(data)api.post(/cart,data),update:(cartId,quantity)api.put(/cart/${cartId},{quantity}),remove:(cartId)api.delete(/cart/${cartId})}页面组件页面组件路径功能首页views/Home.vue商品展示、热销推荐商品列表views/ProductList.vue分类筛选、搜索商品详情views/ProductDetail.vue商品详情、加入购物车购物车views/Cart.vue购物车管理、结算订单views/Orders.vue订单列表、订单详情登录/注册views/Login.vue / Register.vue用户认证智能导购views/Chat.vueAI 聊天界面快速开始1. 启动后端服务cdbackend mvnw.cmd clean spring-boot:run后端服务将在http://localhost:8080启动H2 内存数据库会自动创建并初始化数据。2. 启动前端服务cdfrontendnpminstallnpmrun dev前端服务将在http://localhost:8081启动。3. 启动 AI 导购服务可选ollama run deepseek-r1:7b启动 Ollama 并运行 deepseek-r1:7b 模型即可使用智能导购功能。测试账户用户名: admin 密码: admin123 用户名: user1 密码: user123 用户名: user2 密码: user456架构设计亮点1. 前后端分离采用标准的 RESTful API 设计前后端完全解耦便于团队协作和独立部署。2. 流式 AI 响应使用 SSEServer-Sent Events实现 AI 对话的流式响应相比传统的轮询方式大幅提升了用户体验。3. 本地大模型集成通过 Ollama 集成本地大语言模型数据不出本地保证了隐私安全同时降低了 API 调用成本。4. 多数据库支持默认使用 H2 内存数据库方便开发测试生产环境可无缝切换到 MySQL。5. MyBatis 持久层使用 MyBatis 作为 ORM 框架提供了灵活的 SQL 编写能力同时支持 XML 映射和接口注解两种方式。项目结构Shop_test/ ├── backend/ # Spring Boot 后端 │ ├── src/main/java/com/example/smartshop/ │ │ ├── controller/ # REST API 控制器 │ │ ├── service/ # 业务逻辑层 │ │ ├── mapper/ # MyBatis 映射接口 │ │ ├── entity/ # 实体类 │ │ ├── config/ # 配置类 │ │ └── SmartShopApplication.java │ └── src/main/resources/ │ ├── mapper/ # MyBatis XML 映射文件 │ ├── application.yml # 应用配置 │ ├── schema.sql # 数据库建表脚本 │ └── data.sql # 初始数据 └── frontend/ # Vue 前端 ├── src/ │ ├── views/ # 页面组件 │ ├── components/ # 公共组件 │ ├── router/ # 路由配置 │ ├── api/ # API 封装 │ ├── App.vue │ └── main.js └── package.json总结Smart Shop 智能导购商城项目展示了现代 Web 开发的最佳实践技术选型合理Spring Boot 3.2 Vue 3 是当前最主流的前后端技术组合功能完整涵盖电商系统的核心功能模块AI 赋能集成本地大模型提供智能导购服务是项目的核心亮点易于上手配置简单启动快捷适合学习和二次开发如果你正在学习 Spring Boot 或 Vue 3这个项目是一个很好的实践案例。你可以从项目中学习到前后端分离架构、RESTful API 设计、数据库操作、AI 集成等多个方面的知识。