本次项目为期末一个星期速成之作，报告可能有诸多错漏，大佬轻喷
1 目的和背景
随着桌面端网站使用减少以及消费者对于便捷购物体验的需求日益增长。移动端因其便携性和即时访问的优势而成为了现今大多数人的首选。为了迎合这一趋势，我打造了一款专注于数码相机和镜头的移动端网购平台。
项目特点：
- 轻量快速响应：采用优化的前后端架构，确保平台在移动设备上的快速加载和流畅操作，提供无延迟的用户体验。
- 移动端UI美观：注重用户体验设计，采用现代化的UI设计理念，打造简洁、直观、美观的界面，提升用户满意度。
- 模块化封装：系统功能模块化，便于维护和扩展，支持快速切换和集成新功能，适应市场变化和业务需求。
- 简易数据库管理：使用Django REST framework（DRF）用于处理数据序列化和API视图。
项目功能：
- 快速搜索：集成高效的搜索引擎，支持模糊搜索和智能提示，帮助用户迅速定位到感兴趣的数码相机和镜头产品。
- 最新产品展示：实时更新产品数据库，展示最新上市的数码相机和镜头，确保用户能够第一时间了解到市场动态。
- 登录管理：提供安全的用户登录和身份验证机制，保护用户隐私和账户安全，同时支持第三方登录，简化注册流程。
- 用户账户管理：用户可以注册账户，管理个人信息、收货地址和支付方式，实现个性化购物体验。
- 购物车与订单管理：用户可以将感兴趣的产品加入购物车，进行批量购买，并管理自己的订单。
2 数据库设计
主要的关系模式：
User : {id (主键),password, last_login, is_superuser, username, first_name, last_name, email, is_staff,is_active, date_joined
Group: {id (主键), name}
Permission: { id (主键), name, content_type_id (外键)}
Category:{ id (主键), name, slug }
Product: { id (主键), name, slug, description, price, image, thumbnail, date_added, category_id (外键)}
E-R图如下：
主要表格如下：
3 关键系统设计与实现
3.1 Django REST framework
DRF是 Django 的一个扩展，提供了构建 Web API 的工具和库。它与 Django 的核心功能紧密集成，使得我可以利用比较熟悉的工作流程来构建 RESTful 服务。
- DRF的关键特性：
1. 序列化：DRF提供了一个优雅的、一致的、全功能的序列化方式，可以将模型实例转换为Python数据类型，进而转换为JSON、XML或任何其他内容类型
2. 视图：DRF提供了多种视图类，用于处理API请求，包括基于类的视图（如APIView）和基于函数的视图。
3. 路由：DRF使用Django的URL路由系统，提供了一套灵活的路由机制，可以轻松定义API端点。
3.2 第三方高级功能集成：
django-cors-headers：Django中间件，简化跨源资源共享（CORS）处理，突破浏览器同源限制。
Djoser：Django全功能认证包，基于令牌，涵盖用户注册、登录、密码管理等，与Django REST框架无缝集成。
Pillow：Python图像处理库，支持图像创建、编辑和转换。
Axios：Promise-based HTTP客户端，适用于浏览器和Node.js，提供简洁的API，支持请求拦截、数据转换及取消等高级功能。
3.3 购物车系统：
主要用于管理购物车数据，包括初始化购物车、添加商品到购物车，并在组件中使用购物车数据。
通过 Vuex 和本地存储的结合，实现了购物车数据的持久化，即使用户刷新页面或关闭浏览器，购物车数据也不会丢失。
- 应用启动时，从本地存储中读取购物车数据并初始化 Vuex 状态。
- 用户添加商品到购物车时，更新 Vuex 状态并同步到本地存储。
- 在组件中使用 Vuex 状态，展示购物车中的商品和总数量。
具体步骤如下：
- 创建 Store：在 Vuex 中创建一个 store 来存储购物车的状态。
- 定义 State：在 Vuex 的 state 中定义购物车中的商品列表。
- 定义 Getters：创建 getters 来获取购物车中的商品总数和总价。
- 定义 Mutations：创建 mutations 来修改购物车中的商品。
- 定义 Actions：创建 actions 处理异步操作，如从服务器获取商品信息。
- 在组件中使用：在 Vue 组件中使用 Vuex 的 state 和 actions。
initializeStore：在应用启动时，检查本地存储（localStorage）中是否存在购物车数据（cart）。如果存在，则将其解析并设置到 Vuex 的 state.cart 中；如果不存在，则将初始的空购物车数据存储到本地存储中。
addToCart：接收一个商品项（item），检查该商品是否已经存在于购物车中。如果存在，则增加该商品的数量；如果不存在，则将该商品添加到购物车中。最后，更新本地存储中的购物车数据。
4 后端亮点
1.模块化与可扩展性：
后端采用Django框架，其模块化的设计使得系统易于维护和扩展。通过合理划分应用和模块，确保了代码的清晰和复用性。
2. 安全性与认证机制：
集成Djoser包，提供全面的基于令牌的用户认证功能，包括注册、登录、密码重置等，确保用户数据的安全。同时，使用django-cors-headers中间件处理CORS问题，增强跨域请求的安全性。
3.异步通信与性能优化：
利用Axios作为HTTP客户端，实现前后端异步通信，提升用户体验。同时，后端在关键环节进行性能优化，确保在高并发场景下仍能保持稳定运行。
4. RESTful API设计：
遵循RESTful原则设计API，提供清晰、一致的接口，便于前端与后端的无缝对接。通过Django REST框架，实现了API的快速开发和灵活配置。
5. 超级管理员可以轻松实现数据库的“增”“删”“改”“查”
5. 前端亮点
1. 拥有用户认证功能：包括注册、登录等，并有成功和失败的动画提示
2. 极其安全的注册管理：密码过于简单，密码不匹配，密码与用户名高度一致均不可注册
3. 快速搜索：集成高效的搜索引擎，支持模糊搜索和智能提示，帮助用户迅速定位到感兴趣的产品
4. 支持分类：能够分类查看Camera和lens等不同大类的产品，并支持缩略图显示
5. 购物车管理：用户可以将感兴趣的产品加入购物车,并可以计算数量，金额以及任意的增加删减
6. 最新商品首页展示：实时更新产品数据库，展示最新上市的数码相机和镜头，确保用户能够第一时间了解到市场动态。
PS：其他亮点可在演示视频中查看
6. 遇到的困难及报错
1.DRF与MySQL连接故障
原因：在 settings.py 文件中不小心定义了两个 DATABASES 设置，其中一个是自己的 MySQL 设置，另外一个在文件的末尾是默认的 SQLite 设置（煞笔了忘了删），并且它覆盖了前面的 MySQL 设置，导致怎么都无法正常连接MySQL
2. 无法显示最新商品
Console显示可能是跨域问题或者是axios的问题，由于浏览器的同源策略阻止了从 http://localhost:5173 到 http://127.0.0.1:8000 的跨域请求。
但明明已经正确配置过CORS了，结果还是不行，不是很明白为啥依旧会阻止，最终只能CORS_ALLOW_ALL_ORIGINS = True来解决
3. Vuex的状态无法读取
显示报错为：Cannot read properties of undefined (reading ‘commit’)at Proxy.beforeCreate (App.vue:63:17)
排错过程：
1. 调试App.vue，在App.vue文件中，使用beforeCreate生命周期钩子增加console.log语句，输出$store对象，以便检查其是否被正确注入。
2. 检查vue和vuex的版本后发现没有兼容性问题
3. 然后检查 main.js 文件，发现我导入了 store 但是没有在 createApp 方法中使用它。
4. 改正完main.js后依旧无法解决，路径没问题，也导入store，那可能就是我的const app写法可能有问题 果然在重新修改后就能正确使用vuex store了
4. 不知道什么问题的问题：
http://127.0.0.1:8000/api/v1/products/search/ 405 (Method Not Allowed)
猜测可能存在的错误：
- 前端请求的 URL 和后端配置的 URL 不匹配。
- 后端的路由配置可能有问题，导致请求没有正确路由到视图。
逐步测试 API，也检查请求路径， web.urls 中的配置也是正确。甚至详细检查 Django 服务器的日志，问题依然存在。
详细排错一两个小时后仍然无法断定原因，十分不解为何会出错，最终无奈下重启django服务器后就奇迹般解决了，果然遇事不决就重启能解决90%的问题haha
666
thanks!