Django+Vue开发生鲜电商平台之1.项目介绍

简介: 文章目录一、项目概览二、项目技术要点三、项目预览

一、项目概览

在项目中需要使用和掌握的主要技术如下:

  • Vue+Django+REST Framework前后端分离技术
  • restful api开发
  • Django REST Framework的功能实现和核心源码分析
  • Sentry完成线上系统的错误日志的监控和告警
  • 第三方登录和支付宝支付的集成
  • 本地调试远程服务器代码技巧

项目的实现分为三部分:

  • vue前端项目
  • django rest framework系统实现前台功能
  • xadmin后台管理系统

二、项目技术要点

项目的技术重点是Django REST Framework,这是一个专注于Restful API开发的框架,最终熟悉Restful API开发流程,主要技术要点为:

  • 通用view实现rest api接口
  • ApiView方式实现api
  • GenericView方式实现api接口
  • Viewset和router方式实现api接口和url配置
  • django_filter、SearchFilter、OrderFilter、分页
  • 通用mixins
  • 权限和认证
  • Authentication用户认证设置
  • 动态设置permission、Authentication
  • Validators实现字段验证
  • 序列化和表单验证
  • Serializer
  • ModelSerializer
  • 动态设置serializer
  • 支付、登录和注册
  • json web token实现登录
  • 手机注册
  • 支付宝支付
  • 第三方登录
  • 进阶开发
  • djang rest framework部分核心源码解读
  • 文档自动化管理
  • django rest framework的缓存
  • Throttling对用户和ip进行限速

Vue的主要技术点包括API接口、Vue组件和Vue的项目组织结构分析,还涉及到以下知识点:

  1. Vue技术选型分析
  2. API后端接口数据填充到Vue组件模板
  3. Vue代码结构分析

对于Django,会提供进阶知识点,包括如下:

  • Django migrations原理
  • Django信号量
  • Django从请求到响应的完整过程
  • 独立使用Django的Model

除了这些技术点外,还会涉及到API开发过程中很多常见的问题,如:

  • 本地系统不能重现线上系统的bug
  • API接口出错不能及时发现或难找到错误栈
  • API文档管理问题
  • 大量的url配置造成url配置越来越多难以维护
  • 接口不及时去更新文档对方不知道如何去测试接口,但写文档会花费大量的时间去维护
  • 某些页面将数据放入缓存,加速某些api的访问速度

会针对这些问题给出以下解决方案:

  1. 通过介绍pycharm的远程服务器代码调试技巧让大家不仅可以调试支付、第三方登录还可以调试远程服务器的代码来重现服务器上的bug;
  2. 通过docker搭建sentry来体验错误日志监控系统,让我们不仅可以得到线上的错误栈还能及时在发生系统错误时收到邮件通知;
  3. django rest framework的文档自动化管理以及url的注册管理功能会让我们省去写文档的时间;
  4. django rest framework的文档管理功能不仅可以让我们省去写文档的时间还能直接在文档里面测试接口、自动生成的js接口代码、shell测试代码和python测试代码;
  5. django rest framework提供的throttle来对api进行访问频率限制;
  6. 引入第三方框架来设置某些api的缓存。

本项目的技术前提是Python基础、Django基础、Vue基础和简单MySQL知识,如果未掌握基础的这些小伙伴需要提前预习哦。


三、项目预览

这里先给出一些项目的效果图,让大家先睹为快。

首页效果:


商品信息:


登录页:



注册页:


导航栏:


商品详情页:


结算页面:



订单详情页面:


接口文档页面:


相关文章
|
6月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
292 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
3月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
129 0
|
5月前
|
前端开发 JavaScript 关系型数据库
基于python的租房网站-房屋出租租赁系统(python+django+vue)源码+运行
该项目是基于python/django/vue开发的房屋租赁系统/租房平台,作为本学期的课程作业作品。欢迎大家提出宝贵建议。
165 6
|
7月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
230 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
7月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
332 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
7月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
287 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
7月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
299 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
6月前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
494 4
|
7月前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
421 12
|
10月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。