前端框架设计
cloth-shop(Vue) -->服装系统
assets --->文件的静态资源
router
index.js
定义前后台页面的路由结构,包括系统首页、用户管理、商品信息等,使用懒加载提升页面加载性能,并配置根路径重定向到首页,确保用户访问时正确跳转。同时,配置了404页面用于处理访问不存在路径的情况。
utils
request.js
配置 Axios 实例,统一处理请求头、身份验证(通过 token)以及响应结果的处理,提供了请求和响应的全局拦截逻辑。
views
front
Address.vue
管理用户收货地址的功能。页面中展示了一个收货地址列表,并提供了添加、编辑和删除地址的功能。用户可以点击按钮打开弹窗,填写或编辑收货地址。保存时,地址数据会通过接口保存或更新到后端。地址列表支持分页显示,用户可以通过翻页查看不同的地址。所有操作(添加、编辑、删除、分页)都通过接口与后端交互,并且在操作成功后会刷新地址列表。
Business.vue
展示商店页面,用户可以看到商店的基本信息(如电话、邮箱、介绍)以及该商店所有的商品(包括商品图片、名称、价格等),并且能够点击商品图片进入商品详情页。页面中的数据通过请求后端接口获取。
Cart.vue
购物车页面。用户可以查看、选择商品,修改商品数量,计算总价,选择收货地址,并提交订单。页面通过 Vue.js 和 Element UI 组件来加载数据、显示商品信息、支持分页、动态计算总价,并处理用户的下单操作。
Collect.vue
用户收藏商品页面。用户可以查看所有收藏的商品,分页显示商品信息(包括图片、名称、价格等),并提供移除收藏的功能。通过与后台接口交互,支持加载收藏商品数据、删除收藏以及分页切换。
Detail.vue
商品详情页面。展示商品的基本信息、价格、销量、商家和分类,同时提供“加入购物车”和“收藏”功能。页面使用了标签页组件展示商品详情和评论,支持显示商品评论以及提交收藏和购物车操作。数据通过接口加载,用户可以通过点击商品商家或分类链接进行跳转,页面还包括商品的描述和评价展示。
Home.vue
包含商品展示、用户信息、公告、推荐商品等多个模块的页面(首页)。通过 Vue
的数据绑定和 el-carousel
等组件,动态加载和展示数据,实现了用户信息展示、公告轮播、商品推荐等功能,并通过 flex
布局确保页面结构的响应式布局
Orders.vue
我的订单页面,展示用户的所有订单,并且提供了订单的操作功能(确认收货、评价、删除)。分页功能让用户能够浏览大量订单,并且通过表单提交评价内容。
Person.vue
用户个人资料编辑页面,包含了表单校验、头像上传、修改用户信息和密码的功能。使用了双向数据绑定、局部组件化、表单验证规则、异步请求(HTTP 请求)与路由跳转等技术实现。
Search.vue
商品搜索和推荐的功能。用户可以输入关键词搜索商品,搜索结果和推荐商品会异步加载并显示。推荐商品通过后端接口提供,并展示在页面右侧,搜索结果则动态展示在左侧。
Type.vue
商品分类页面,主要功能包括展示特定类别的商品列表以及推荐商品。通过 Vue.js 的响应式数据绑定和生命周期钩子(mounted
),页面根据 URL 参数获取分类 ID,异步加载对应的商品数据和推荐商品数据。使用了 Element UI 组件库的布局(el-row
和 el-col
)和样式(如图片、文字排版、响应式设计)。页面跳转通过 location.href
实现,点击商品跳转到详情页。数据通过 Axios 请求与后端交互。
manager
404.vue
404页面
Front.vue
商城页面的头部布局,包括 logo、搜索框、用户登录状态、以及个人中心的下拉菜单功能。它使用了 Vue.js 和 Element UI 组件库,通过监听搜索框输入和用户登录状态来更新页面内容。用户可以登录、查看购物车、收藏、地址和订单,退出时会清除本地存储的用户信息。还包含一个公告滚动显示功能,从服务器获取公告并定时切换。搜索功能通过跳转到商品搜索页面来实现。
Login.vue
登录页面,包含表单验证、角色选择和基于用户角色的页面跳转,通过 HTTP 请求进行身份验证并存储用户信息,采用了响应式布局和局部样式。
Register.vue
注册页面,包含表单验证、密码确认校验、角色选择功能,并通过 HTTP 请求提交注册数据(/register
),使用响应式布局和局部样式,其中表单数据 (form
) 包含 username
、password
、confirmPass
和 role
字段。
Manager.vue
后台管理系统界面。使用路由管理、动态渲染、权限控制和本地存储管理,支持用户登录验证、页面跳转、动态菜单渲染及个人信息管理功能。
后端框架设计
cloth-shop(SpringBoot) -->服装系统
files
这里保存的是上传的资源
config
CorsConfig.java
实现跨域资源共享(CORS),允许来自任意域名的跨域请求、请求头和HTTP方法。将其应用于所有接口路径,以支持前后端分离的Web应用。
Jwtlnterceptor.java
jwt拦截器。从请求头或参数中提取token,并进行一系列验证,包括检查token的存在性、从token中解析用户角色和ID、根据角色查询相应的用户信息(如管理员、商家或普通用户)以及使用用户密码进行token的完整性验证。如果token无效或用户不存在,都会抛出自定义异常,确保只有经过认证的用户才能访问受保护的资源。(登录验证用的)
WebConfig.java
设置JWT拦截器和路径排除规则,实现了对HTTP请求的安全管理,确保系统在保护敏感数据的同时,允许特定的用户操作。(addPathPatterns("/**")拦截所有请求,下面的则是通过验证不拦截)
enums
Constants.java
定义了一个Java接口Constants,用于存放常量值。
Result.java
统一消息响应的结构,以及消息响应的简单创建(比如操作成功还是失败)。
controller
AddressController.java
地址前端操作接口,用于(增删改查)。
AdminController.java
管理员前端操作接口,用于实现管理员的操作(增删改查)。
BusinessController.java
商家前端操作接口,用于商家的操作(增删改查:商家)。
CartController.java
购物车前端操作接口,(增删改查:购物车)。
CollectController.java
收藏前端操作接口,(增删改查)。
CommentController.java
评论前端操作接口,(增删改查)。
FileController.java
文件接口,用户商品图片以及用户头像等等上传POST /files/upload接口上传文件。文件将存储在指定路径,文件名格式为时间戳-原文件名,并返回文件的访问URL;GET /files/{flag}接口下载指定的文件。根据文件标识符(flag)获取文件并将其写入HTTP响应流;DELETE /files/{flag}接口删除指定的文件;POST /files/wang/upload接口处理WangEditor编辑器的文件上传,返回特定格式的JSON响应,包含上传成功的文件URL。
GoodsController.java
分类信息表前端操作接口,(增删改查)。
NoticeController.java
公告信息表前端操作接口,(增删改查)。
OrdersController.java
购物车前端操作接口,(增删改查:购物车订单)。
TypeController.java
分类信息表前端操作接口,(增删改查)。
UserController.java
商家前端操作接口,(增删改查:用户)。
WebController.java
基础前端接口,用于用户的登录和注册。
entity
Account.java
提供用户信息的组织结构,进行身份验证、数据处理和权限控制,以及密码的修改和加密。
Address.java
存储用户保存的地址数据。
Admin.java
用于存储与管理员用户相关的信息。
Business.java
封装了与商家相关的所有信息,便于进行商家管理、身份验证和状态跟踪。
Cart.java
存储用户的购物车数据,包括商品、数量、商家等信息,支持对购物车内容的管理。
Collect.java
封装用户收藏商品的所有相关信息,给用户提供管理和查看其收藏商品的功能。
Comment.java
封装用户评论商品的所有相关信息,给用户提供进行商品评论的功能。
Goods.java
封装商品的所有相关信息,展示商品的相关信息,比如商品图片,商品描述和价格。
Notice.java
封装公告的所有相关信息,方便进行公告的展示和管理。
Orders.java
存储用户的订单详情,包括订单ID、用户信息、商品信息、价格、状态等。
RelateDTO.java
封装用户ID、商品ID和指数,方便在服务和用户端之间传递数据。
Type.java
封装商品分类的所有相关信息,例如图标和名称等等,方便展示和管理。
User.java
封装了用户的基本信息,如用户名、密码、电话、邮箱等,便于在后台中管理用户数据。
exception
定义全局异常处理器 GlobalExceptionHandler
和自定义异常类 CustomException
,实现了对系统异常和业务异常的统一捕获、记录日志,并返回标准化的 JSON 响应。
mapper
为entity所有的类进行数据的支持,连接数据库对应内容。
service
为entity所有的类进行核心业务逻辑的支持,封装了对数据库操作的具体实现,结合权限控制和异常处理机制进行与数据库操作层交互。
utils
启动类,给程序启动提供支持。
评论区