Vue3+Spring Boot 大型电商项目实战前后端分离

在当今的软件开发领域，前后端分离架构已成为主流。这种架构将前端和后端完全解耦，使得开发团队可以独立进行开发、测试和部署，大大提高了开发效率和项目的可维护性。本文将以一个大型的电商项目为例，详细介绍如何使用 Vue 3 和 Spring Boot 实现前后端分离，并给出相关的代码示例。

一、项目概述

本项目是一个功能齐全的电商平台，包括用户注册与登录、商品展示与搜索、购物车管理、订单处理等功能模块。前端采用 Vue 3 构建，利用其响应式数据绑定和组件化开发的优势，为用户提供流畅的交互体验；后端基于 Spring Boot 框架，提供高效的接口服务和数据处理能力。

二、技术选型

（一）前端技术栈

• Vue 3：作为前端的核心框架，负责构建用户界面和实现交互逻辑。
• Vue Router：用于实现前端路由跳转，方便页面之间的切换。
• Axios：用于与后端进行 HTTP 通信，发送请求获取数据。
• Pinia：作为 Vue 的状态管理工具，替代 Vuex，用于管理全局状态。
• Vite： 前端构建工具
• Vant+Less：轻量、可靠的移动端组件库,自定义主题和样式的预处理器语言

（二）后端技术栈

• Spring Boot：简化 Spring 应用的搭建和开发过程，提供自动配置等特性。

三、项目架构设计及开发流程

（一）整体架构

项目采用前后端分离架构，前端通过 Axios 向后端发送 HTTP 请求获取数据，后端接收请求进行处理后返回相应的数据或结果。前后端通过 JSON 格式进行数据交互，确保数据传输的高效性和准确性。

（二）前端架构

• 主应用入口：main.js，引入 Vue 实例并挂载到根 DOM 元素上。
• 路由配置：使用 Vue Router 配置不同页面的路由路径，实现页面跳转。
• 组件划分：根据功能模块划分组件，如登录组件、商品列表组件、购物车组件等，提高代码的复用性和维护性。
• 状态管理：使用 Pinia 管理全局状态，如用户信息、购物车数据等。

（三）后端架构

• 控制器层：接收前端请求，调用服务层的方法处理业务逻辑，并返回响应结果。
• 服务层：处理具体的业务逻辑，如查询商品信息、处理订单等。
• 数据访问层：使用 MyBatis Plus 与数据库进行交互，执行 SQL 语句。
• 实体类：对应数据库中的表结构，用于数据的持久化和传输。

四、关键功能实现及代码示例

（一）用户登录功能（仅供参考）

1. 前端实现

• 登录页面：使用 Element Plus 的表单组件构建登录表单，包含用户名和密码输入框以及登录按钮。
• 登录逻辑：在登录按钮的点击事件中，使用 Axios 向后端发送登录请求，携带用户名和密码参数。
• 响应处理：根据后端返回的响应结果，判断登录是否成功。如果成功，则跳转到首页；如果失败，则提示用户错误信息。

<template><el-form:model="loginForm"@submit.native.prevent="handleLogin"><el-form-itemlabel="用户名"><el-inputv-model="loginForm.username">el-input>el-form-item><el-form-itemlabel="密码"><el-inputtype="password"v-model="loginForm.password">el-input>el-form-item><el-form-item><el-buttontype="primary"@click="handleLogin">登录el-button>el-form-item>el-form>template><script>importaxios from'axios';exportdefault{ data(){ return{ loginForm:{ username:'',password:''}};},methods:{ handleLogin(){ axios.post('/api/login',this.loginForm).then(response=>{ if(response.data.success){ // 登录成功，保存用户信息到 Pinia 并跳转到首页this.$store.commit('setUserInfo',response.data.userInfo);this.$router.push('/home');}else{ // 登录失败，提示用户错误信息this.$message.error(response.data.message);}}).catch(error=>{ console.error(error);});}}};script>

2. 后端实现（仅供参考）

• 登录接口：在 Spring Boot 中创建一个 LoginController，定义 /api/login接口，接收前端传递的用户名和密码参数，并进行验证。
• 业务逻辑：在服务层中编写用户认证的业务逻辑，查询数据库中的用户信息，比对用户名和密码。如果验证通过，则生成 JWT 令牌并返回给前端；如果验证失败，则返回错误信息。

@RestController@RequestMapping("/api")publicclassLoginController{ @AutowiredprivateUserServiceuserService;@PostMapping("/login")publicResponseEntity<?>login(@RequestBodyUserLoginDtouserLoginDto){ Useruser =userService.authenticate(userLoginDto.getUsername(),userLoginDto.getPassword());if(user !=null){ Stringtoken =jwtUtil.generateToken(user.getId(),user.getUsername());returnResponseEntity.ok(newLoginResponse(token,"登录成功"));}else{ returnResponseEntity.status(HttpStatus.UNAUTHORIZED).body("用户名或密码错误");}}}

（二）商品搜索功能

1. 前端实现（仅供参考）

• 搜索框：在首页或其他页面添加搜索框，用户可以输入关键词进行商品搜索。
• 搜索结果展示：当用户点击搜索按钮后，使用 Axios 向后端发送搜索请求，获取搜索结果数据，并在页面上展示商品列表。可以使用 Element Plus 的卡片组件来展示商品信息。
• 分页处理：如果搜索结果较多，需要进行分页处理，在页面底部显示分页器，用户可以点击分页按钮进行翻页。

<template><div><el-inputv-model="searchKeyword"placeholder="请输入关键词搜索商品"@keyup.enter.native="handleSearch"><template#append><el-buttonicon="el-icon-search"@click="handleSearch">el-button>template>el-input><el-row:gutter="20"><el-col:span="6"v-for="product in productList":key="product.id"><el-card:body-style="{  padding: '0px' }"><img:src="product.imageUrl"class="image"><divstyle="padding:14px;"><span>{ {  product.name }}span><divclass="bottom clearfix"><timeclass="time">{ {  currentDate }}time><el-buttontype="text"class="button"@click="goToDetail(product.id)">查看详情el-button>div>div>el-card>el-col>el-row><el-paginationbackgroundlayout="prev, pager, next":total="total"@current-change="handleCurrentChange">el-pagination>div>template><script>importaxios from'axios';exportdefault{ data(){ return{ searchKeyword:'',productList:[],total:0,currentPage:1,currentDate:newDate()};},methods:{ handleSearch(){ axios.get(`/api/products/search?keyword=${ this.searchKeyword}&page=${ this.currentPage}`).then(response=>{ this.productList =response.data.data;this.total =response.data.total;}).catch(error=>{ console.error(error);});},handleCurrentChange(page){ this.currentPage =page;this.handleSearch();},goToDetail(id){ this.$router.push(`/product/detail/${ id}`);}}};script>

2. 后端实现（仅供参考）

• 搜索接口：在 ProductController中创建 /api/products/search接口，接收前端传递的关键词和分页参数，调用服务层的方法进行搜索。
• 服务层实现：在服务层中使用 MyBatis Plus 的查询方法，结合 ES 语法进行模糊查询，获取符合条件的商品数据，并进行分页处理。将查询结果封装成统一的格式返回给前端。

@RestController@RequestMapping("/api/products")publicclassProductController{ @AutowiredprivateProductServiceproductService;@GetMapping("/search")publicResponseEntity<?>searchProducts(@RequestParamStringkeyword,@RequestParamintpage){ Page<Product>pageResult =productService.searchByKeyword(keyword,page,PageConstant.PAGE_SIZE);returnResponseEntity.ok(newPageResult<>(pageResult));}}

获取内容方式关注下方公众号发送！！！：Vue3+SpringBoot大型前后端分离项目实战