DJANGO+VUE.JS商城项目实战

前言
随着技术的不断发展，Python越来越受开发者的喜爱和追捧，很多企业开始使用Python作为网站服务器的开发语言。Python功能强大，适应性强，能够与当前流行的各类开发工具无缝结合，而且容易上手，即使是没有任何编程语言基础的读者，通过自学也能轻松上手，这也是Python越来越受欢迎的原因之一。
Python的Django框架是其进行Web开发的利器，目前大量网站使用Python进行开发，和Django框架的流行是分不开发，如果你是新手，想从事Web开发，学习Django可以说是不二之选。Django从2008年推出发展到现在，已有成熟的体系和社区，目前已成为Python Web开发的首选框架。
本书基于当前最新的Django 4.x和Vue 3.x版本，以一个商城网站项目的开发贯穿全书，从实战中讲述各个知识要点，理论与实践相结合。值得注意的是，本书的项目使用了两种架构模式，一种是纯后端架构，另一种是前后端分离架构，因此，通过本书的学习，读者不仅可以掌握当前两大热点流行工具Django和Vue.js在实际开发中的应用，还能够了解一个项目的架构演进，有助于读者在实际项目开发中做出正确的选择。
 本书结构
本书共16章，各章内容概述如下：
第1章为网站开发基础，主要讲述Django与WSGI、搭建Django与PyCharm开发环境、项目创建与调试等。
第2章为项目需求与设计，讲述商城网站的项目需求，根据开发需求设计网站架构，创建Django项目，并进行项目的功能配置等。
第3章为路由规划与设计，讲述路由变量的设置、设置正则表达式、命名空间与路由命名、路由的反向解析和重定向等。
第4章为数据模型的搭建与使用，讲述Django如何设计数据模型，通过模型创建数据表，操作模型对象实现数据表的读写。
第5章为数据业务视图，讲述Django如何编写数据业务逻辑，包括HTTP请求对象、响应内容和视图类的定义过程，分别使用视图函数和视图类编写网站首页的业务逻辑。
第6章为数据渲染与展示，讲述Django如何实现模板的数据渲染，包括模板上下文、模板标签及其自定义、模板继承和过滤器及其自定义，并设计电子商务网站的基础模板和实现首页模板的数据渲染。
第7章为商品信息模块，包含商品列表页和商品详细页的业务逻辑和数据渲染，讲述如何使用Django的分页功能、会话Session和Ajax调用API接口。
第8章为用户信息模块，包含用户注册、登录以及个人中心页的业务逻辑和数据渲染，讲述如何使用Django的CSRF防护机制、内置Auth认证系统、内置表单类Form和ModelForm。
第9章为购物车与支付功能，包含购物车功能页面和在线支付的业务逻辑，讲述如何使用Ajax调用API接口删除购物车的商品信息，以及添加支付宝在线支付接口功能。
第10章为后台管理系统，分别对网站的数据模型实现可视化的数据管理操作，如增、删、改、查操作，并深入讲述后台系统的二次开发过程。
第11章为前后端分离架构，分别阐述前后端分离的优缺点、接口规范与设计、项目接口设计方案以及如何搭建Mock Server。
第12章为接口开发，深入讲述如何使用Django原生语法和DRF框架实现接口开发。
第13章为使用DRF开发商城接口，功能包括模型数据读写操作、在线支付、用户认证等。
第14章为前端开发，内容包括Windows搭建Vue开发环境、使用 Vue脚手架创建项目、项目目录功能配置与启动，并通过示例实现简单的用户登录和产品查询页面。
第15章为Vue开发商城项目，包括HTTP请求配置、状态管理配置、路由定义、组件应用与设计，分别实现商城首页、商品列表页、商品详细页、用户注册与登录、购物车、个人中心页、网站异常页等功能。
第16章为项目上线与部署，分别讲述商城项目在Windows、Linux和Docker环境的部署过程。Windows采用IIS服务器 wfastcgi Django实现部署过程，Linux采用Nginx uWSGI Django实现部署过程，Docker采用Docker Compose Dockerfile实现部署过程。
 本书特色
使用两种架构模式开发：全书以一个商城网站项目的开发流程为主线，使用两种架构模式讲解，即纯后端架构和前后端分离架构，有助于读者深入理解架构原理并在实际项目开发中做出正确选择。
方便项目再现：全书从项目设计入手，涉及商城网站的所有重要模块及代码实现、接口开发、项目上线部署等，并提供完整源码，读者对照本书，完全可以再现本书的项目。
原理与实践并重：本书虽然是从项目入手，但有关网站开发的基本概念、原理也一并穿插进行了介绍，因此，对于有一定编程语言（例如Python、HTML、CSS、JavaScript）基础，但是初次接触商城网站项目开发的读者，本书很适合。
一线开发经验总结：本书编者拥有近十年Web开发经验，并长期使用Python进行后端开发，同时，对于各类流行框架及工具也拥有丰富经验，阅读本书可以让读者快速提升整合运用工具开发的实战技能 ，用最少的时间掌握正确的开发姿势，解决开发中遇到的各类疑惑，不走弯路，行稳致远。
  源代码下载
本书提供了源码和PPT课件。
其中，所有程序代码均在Django 4下调试通过，源代码GitHub下载地址：
https://github.com/xyjw/diango-vue
源码和PPT也可扫描以下二维码获取：

如果你在下载过程中遇到问题，可发送邮件至booksaga@126.com获得帮助，邮件标题为“Django Vue商城项目实战”。
 读者对象
本书主要适合以下读者阅读：
缺少项目经验的Django新手及网站开发初学者
从事Python网站开发的技术人员
培训机构及大专院校的在校学生
虽然编者力求本书更臻完美，但由于水平所限，难免会出现疏漏之处，特别是Django版本更新可能导致源代码在运行过程中出现问题，欢迎广大读者和专家给予指正。

编    者
2023年5月20日

《Django Vue.js商城项目实战》基于Django 4.x和Vue 3.x版本，以一个完整商城网站的开发流程为主线，介绍分别使用纯后端架构和前后端分离架构实现项目的全部技术细节。纯后端开发架构主要讲解Django的知识要点及每个功能模块的要点和实现方式，内容包括Django网站开发基础、项目需求与设计、路由规划与设计、商城数据模型的搭建与使用、数据业务视图、数据渲染与展示、商品信息模块、用户信息模块、购物车与支付功能、后台管理系统等。前后端分离架构是在纯后端开发架构基础上演变而来的，内容包括接口开发、使用DRF开发商城接口、Vue前端开发、使用Vue开发商城项目、项目上线与部署等。 《Django Vue.js商城项目实战》凝聚了编者近十年一线开发经验，提供了完整的项目源码，对于缺少项目经验和想要深入理解架构演进的各层次读者，本书极具参考价值，本书也很适合作为培训机构、企业内训和大中专院校的实践课教材。

黄永祥，架构师，资深软件工程师，十余年一线大型网站系统研发经验，尤其擅长Go和Python语言，对相关技术架构及工具、框架如Gin、Flask、Django等驾轻就熟 ，拥有丰富的实战经验。出版著作：实战Python网络爬虫、精通Python自动化编程、Django 3 Web应用开发实战等。

目    录
第1章  网站开发基础1
1.1  网站的定义与组成1
1.2  网站的分类2
1.3  网站运行原理及开发流程4
1.3.1  常用术语4
1.3.2  网站的运行原理4
1.3.3  网站的开发流程5
1.3.4  任务划分5
1.4  Django简史6
1.5  Django与WSGI6
1.6  HTML、CSS和JavaScript8
1.6.1  HTML8
1.6.2  CSS10
1.6.3  JavaScript13
1.7  搭建开发环境15
1.7.1  安装Django15
1.7.2  安装PyCharm16
1.8  创建Django项目17
1.8.1  使用内置指令创建项目17
1.8.2  使用PyCharm创建项目19
1.9  程序调试技巧20
1.9.1  PyCharm的Debug模式20
1.9.2  根据异常提示进行调试22
1.10  本章小结24
1.11  动手练习26
第2章  项目需求与设计27
2.1  需求分析27
2.2  设计说明28
2.3  搭建项目开发环境33
2.4  项目的功能配置35
2.4.1  添加项目应用39
2.4.2  设置模板信息39
2.4.3  添加中间件40
2.4.4  配置数据库41
2.4.5  配置静态资源44
2.4.6  配置媒体资源45
2.5  内置指令46
2.6  本章小结47
2.7  动手练习49
第3章  路由规划与设计50
3.1  设置路由分发规则50
3.2  路由分发详解52
3.3  设置商城的路由地址53
3.4  路由的定义规则55
3.5  路由变量与正则表达式56
3.6  本章小结58
3.7  动手练习59
第4章  商城数据模型的搭建与使用60
4.1  定义商城的数据模型60
4.2  数据迁移创建数据表64
4.3  数据的导入与导出67
4.4  使用QuerySet操作数据69
4.4.1  新增数据69
4.4.2  更新数据71
4.4.3  删除数据72
4.4.4  查询单表数据73
4.4.5  查询多表数据77
4.5  执行原生SQL语句81
4.6  本章小结82
4.7  动手练习83
第5章  数据业务视图84
5.1  首页的视图函数84
5.2  视图的请求对象87
5.3  视图的响应方式89
5.4  认识视图类91
5.5  使用视图类实现商城首页92
5.6  本章小结96
5.7  动手练习97
第6章  数据渲染与展示98
6.1  基础模板设计98
6.2  首页模板设计101
6.3  模板上下文107
6.4  内置标签及自定义108
6.5  模板文件的继承关系112
6.6  内置过滤器及自定义113
6.7  自定义异常页面117
6.8  本章小结120
6.9  动手练习120
第7章  商品信息模块121
7.1  商品列表页的业务逻辑121
7.2  分页功能的机制和原理124
7.3  商品列表页的数据渲染127
7.4  商品详细页的业务逻辑130
7.5  商品详细页的数据渲染132
7.6  Ajax实现商品收藏136
7.7  Session的配置与操作137
7.8  JavaScript的Ajax请求140
7.9  jQuery的Ajax请求142
7.10  本章小结144
7.11  动手练习145
第8章  用户信息模块146
8.1  内置User实现注册登录146
8.2  CSRF防护151
8.3  使用Form实现注册登录153
8.4  分析Form的机制和原理158
8.5  使用ModelForm实现注册和登录162
8.6  分析ModelForm的机制和原理165
8.7  个人中心页面167
8.8  本章小结173
8.9  动手练习173
第9章  购物车与支付功能174
9.1  购物车功能174
9.2  Ajax删除购物车的商品180
9.3  支付宝的支付配置186
9.4  alipay-sdk-python的安装与使用190
9.5  python-alipay-sdk的安装与使用195
9.6  商城的在线支付功能197
9.7  本章小结201
9.8  动手练习202
第10章  后台管理系统203
10.1  Admin基本配置203
10.2  配置项目应用与模型205
10.3  分析ModelAdmin的底层原理208
10.4  自定义ModelAdmin的函数方法212
10.4.1  数据只读函数get_readonly_fields()213
10.4.2  设置字段样式214
10.4.3  数据查询函数get_queryset()216
10.4.4  下拉框设置函数formfield_for_choice_field()217
10.4.5  保存函数save_model()218
10.4.6  数据批量处理219
10.5  本章小结220
10.6  动手练习222
第11章  前后端分离架构223
11.1  为什么要前后端分离223
11.2  API规范与设计224
11.2.1  规范请求方式225
11.2.2  规范URL命名226
11.2.3  规范响应结果226
11.3  商城API设计方案228
11.4  搭建Mock Server235
11.5  本章小结237
11.6  动手练习237
第12章  接口开发238
12.1  Django原生语法开发接口238
12.1.1  模型转字典格式238
12.1.2  使用JsonResponse返回响应结果239
12.1.3  封装数据分页功能240
12.1.4  开发商品列表接口241
12.2  使用DRF构建接口244
12.2.1  DRF的安装与配置244
12.2.2  序列化类Serializer245
12.2.3  模型序列化类ModelSerializer249
12.2.4  序列化的嵌套使用252
12.2.5  基于类的视图255
12.2.6  视图集257
12.2.7  用户认证和权限验证260
12.3  本章小结264
12.4  动手练习266
第13章  使用DRF开发商城接口267
13.1  项目配置与调整267
13.2  定义序列化对象269
13.3  开发首页与异常接口270
13.4  开发商品信息接口273
13.5  开发购物车与订单接口277
13.6  本章小结282
13.7  动手练习283
第14章  Vue前端开发284
14.1  前端框架概述284
14.2  在Windows安装Node.js285
14.3  npm的配置与使用287
14.4  Vue脚手架搭建与运行项目289
14.5  PyCharm配置Vue编码环境290
14.6  Vue目录结构与依赖安装292
14.7  设置项目公共资源293
14.8  功能配置与应用挂载294
14.9  用户登录组件297
14.10  产品查询组件300
14.11  网站运行效果303
14.12  本章小结304
14.13  动手练习304
第15章  Vue开发商城项目305
15.1  项目的创建与配置305
15.2  配置Axios与Vuex307
15.3  Vue Router定义路由309
15.4  组件应用与设计310
15.5  实例化Vue对象314
15.6  商城首页316
15.7  商品列表页319
15.8  商品详细页324
15.9  用户注册与登录328
15.10  购物车功能330
15.11  个人中心页面335
15.12  网站异常页339
15.13  本章小结340
15.14  动手练习341
第16章  项目上线与部署342
16.1  项目上线部署配置342
16.2  基于Windows部署项目344
16.2.1  安装IIS服务器344
16.2.2  IIS服务器部署项目345
16.2.3  部署静态资源347
16.3  基于Linux部署项目348
16.3.1  安装Linux虚拟机348
16.3.2  安装Python 3352
16.3.3  部署uWSGI服务器353
16.3.4  安装Nginx并部署项目354
16.4  基于Docker部署项目356
16.4.1  安装Docker356
16.4.2  Docker常用指令358
16.4.3  安装MySQL361
16.4.4  Docker部署Vue364
16.4.5  Docker部署Django367
16.5  本章小结375
16.6  动手练习376

《Django Vue.js商城项目实战》基于Django 4.x和Vue 3.x版本，以一个完整商城网站的开发流程为主线，介绍分别使用纯后端架构和前后端分离架构实现项目的全部技术细节。纯后端开发架构主要讲解Django的知识要点及每个功能模块的要点和实现方式，内容包括Django网站开发基础、项目需求与设计、路由规划与设计、商城数据模型的搭建与使用、数据业务视图、数据渲染与展示、商品信息模块、用户信息模块、购物车与支付功能、后台管理系统等。前后端分离架构是在纯后端开发架构基础上演变而来的，内容包括接口开发、使用DRF开发商城接口、Vue前端开发、使用Vue开发商城项目、项目上线与部署等。 《Django Vue.js商城项目实战》凝聚了编者近十年一线开发经验，提供了完整的项目源码，对于缺少项目经验和想要深入理解架构演进的各层次读者，本书极具参考价值，本书也很适合作为培训机构、企业内训和大中专院校的实践课教材。

黄永祥，架构师，资深软件工程师，十余年一线大型网站系统研发经验，尤其擅长Go和Python语言，对相关技术架构及工具、框架如Gin、Flask、Django等驾轻就熟 ，拥有丰富的实战经验。出版著作：实战Python网络爬虫、精通Python自动化编程、Django 3 Web应用开发实战等。