Home
avatar

.lcz

不曾与你分享

Django母婴商城项目从0到1

Django母婴商城项目从0到1

母婴商城

主页

后端数据库查询

image-20240513160110219

locals():将定义的所有变量传到模板文件index.html 列表生成式:查出一级分类下的二级分类 types__in = cl:此类型包含于cl列表

前端

静态文件和媒体文件

静态文件:{% load static %} --> {% static '' %} 媒体文件:{{ clothe.img.url }}: clothe:数据库的一条记录,循环出来的对象 img:字段,值为url,media下的地址,不加media url:django语法,会将其渲染为访问媒体资源的url

模板文件

image-20240513162210015

image-20240513162258991

image-20240513163012047

pic1:循环展示数据,根据forloop.counter(循环次数)决定展示前4条数据 pic2:循环展示数据,根据forloop.counter(循环次数)决定展示后4条数据 pic3:layui一个前端框架(已不更新),实现轮播图的使用方法

导航栏是否选中样式

image-20240513164138528

根据后台传入的classContent的值来决定是否有class="active"属性

商品页

后端数据库查询

image-20240513170424454

image-20240513170043957

image-20240513170242580

image-20240513170257689

# 根据模型Types生成商品分类列表:用于前端循环渲染 Types.objects.values("firsts").distinct():根据firsts去重,选每个firsts的第一个作为QuerySet的元素 # 获取请求参数: t:商品分类 s:排序类型 p:当前页数 n:模糊查询 # 根据请求参数查询商品信息 # 分页功能: 固定语法,django自带功能,需要导入最上面的3个包 含义: 将查到的所有商品信息(QuerySet)进行分页,每页6条数据 try:第p页的数据 except PageNotAnInteger:显示第一页的数据 except EmptyPage:显示最后一页数据

前端

js实现相关页面样式

image-20240513175809401

休整一下,js加引号

image-20240513171501401

image-20240513171519193

layui一个前端框架,使用得引入layui那个文件夹,好像还用到了一个mm.js文件 如: 生成分页条代码:在id=demo0的div里生成,生成完,f12复制粘贴到id=demo0的div里,再注释即可 一级二级分类样式

导航分类

image-20240513173213076

image-20240513182517928

将超链接地址进行修正

商品列表

image-20240513173810538

commodityInfos|length:过滤器,这个QuerySet的长度 p.price|floatformat:'2':过滤器,保留两位小数 {% url 'commodity:detail' p.id %}:链接到主路由commodity下的子路由detail,并传参p.id pages.object_list:page对象的全部数据

分页

image-20240513181740629

image-20240513191801148

排序

image-20240513183451275

image-20240513183522123

修改超链接地址,地址的请求参数不同获得的商品数据不同 根据class修改选中样式

搜索

image-20240513184252479

1. 修改超链接地址 2. input标签 name="n" 3. button带一个submit属性,让其将input标签相关数据提交到action属性中

shopper子路由

image-20240520164541549

分别实现: 登录注册逻辑 个人中心 购物车 退出 支付

登录注册逻辑

cookie和session
cookie存放sessionID和不私密信息,存放于用户端 与sessionID对应的session存私密信息,存放于服务器端 注册:输入用户名、密码、手机号、验证码,生成session存放于服务器端 登录:输入用户名、密码,若用户名、密码正确,生成cookie,其中sessionID与之前注册生成的session相对应
登录注册逻辑需引入的包

image-20240520163733415

支付相关方法需要引入相关包,否则报错 支付相关方法上面的包是django自带的
后端loginView

image-20240520163701829

image-20240520175941256

LoginModelForm(data=request.POSST):传入data属性 form.py中利用data属性编写 数据清洗的方法 authenticate函数是Django中用于验证用户身份的函数之一。它的作用是根据提供的用户名和密码,在认证后端中查找相应的用户,并验证密码是否匹配。 具体来说,authenticate函数会遍历所有已配置的认证后端(例如数据库后端、LDAP后端等),尝试使用提供的用户名和密码进行认证。如果找到了匹配的用户,并且该用户的密码也与提供的密码匹配,则authenticate函数会返回对应的用户对象;否则,返回None。 authenticate函数的常见用法是在用户登录时使用,通过验证用户名和密码来判断用户身份是否合法。如果验证成功,则可以调用login函数将用户标记为已登录状态。 authenticate函数向数据库中的用户表去查找用户。在Django中,默认情况下,用户表名为auth_user,对应的模型是django.contrib.auth.models.User。这个表存储了用户的基本信息,包括用户名、密码(经过哈希处理)、邮箱等。 当你调用authenticate函数时,它会在auth_user表中查找与提供的用户名匹配的用户记录,并验证密码是否正确。这是Django默认的认证后端行为,你也可以通过配置来修改默认的认证后端,使用自定义的用户模型或认证后端。 login方法,将user的id写入服务器端session中,后续可通过request.user.id获取用户id,如获取相关信息进行支付功能,花的就是这个用户的钱
form.py用于实现登录页面 输入框

image-20240520163112139

前端页面使用
自动生成对应的input标签

image-20240520163503044

前端表单提交: 用的是一个layui开源前端框架的表单,用的是他的提交方法 使用时查看其官方文档

image-20240520172020453

image-20240520172235160

image-20240520172322861

解决跨域请求问题, 增加csrf参数

image-20240520172807698

添加一个p标签,用于显示提示信息 并在ajax请求的回调函数里将提示信息放到p标签中

image-20240520175843049

退出

清楚session并退出,如果没有退出,一直待机,那么session也应该有一个默认的有效期,到期后就需要重新登录。 还可以登录时设置7天免登录,将session的有效期设置为7天 reverse将'shopper:login'转换为url格式 redirect页面重定向(页面跳转)

image-20240520182438376

image-20240520181204472

个人中心

模型层

购物车表

image-20240520180643544

订单表

image-20240520180658031

Meta相关信息:用于后台设置,如后台显示表名为verbose_name的值 choices=STATE:一个关系映射,数据库中存储更少的数据来映射到相应的数据

控制层

ShopperView:个人中心

image-20240520182438376

image-20240520182130878

image-20240520182215557

视图层

自己团一下就好 目前前端框架:layui 和 vue 本质一样,都有现成的组件(html+css),也提供了自己写js该怎么写

购物车

模型层

购物车表

image-20240520180643544

控制层

image-20240520190456688

image-20240520190558384

视图层

通过商品id 对字典进行查询 获取到商品对应的数量 也就是说:根据一个变量查询到字典对应key的值 要用自定义过滤器(get_item)

image-20240520190953807

自定义模板过滤器,模板文件可以使用其对数据进行处理

image-20240520191151024

js实现: 单个商品总价格 随改商品数量加减进行求和, 总价格也随之变化

image-20240520191448458

image-20240520191620692

image-20240520191650609

支付

控制层

image-20240520191929903

the_time:当前时间 payInfo:订单信息 结算的话 就将当前时间和订单信息存入session中用于生成订单 return_url:支付成功后跳转的页面 url就是支付成功后跳转的页面,也就是return_url

image-20240520192938767

个人中心中,根据支付成功传过来的参数进行订单的生成

get_pay方法

  1. 安装对应的aliyun支付相关包:pip安装会失败,因为其中一个依赖包(pycrypto

    )不兼容win10,所以采取以下步骤进行安装

  2. image-20240520193957734

    下载.gz包,进行解压

  3. image-20240520194119802

    解压之后,将setup.py中第47行中的pycrypto改为crypto

  4. image-20240520194242303

    输入python .\setup.py install进行安装

django自带后台系统

Django 网站开发

喜欢这篇文章嘛,觉得文章不错的话,奖励奖励我!

支付宝打赏支付宝微信打赏 微信
Nickname
Email
Website
0/500
0 comments