Django 07购物商城项目（数据表axf_foodtype、axf_goods、商城页面搭建、商城页面点击事件）

最新推荐文章于 2024-01-09 09:20:46 发布
最新推荐文章于 2024-01-09 09:20:46 发布
阅读量524 收藏 1
点赞数 1
分类专栏： python系列
@BeanInJ
本文链接：https://blog.csdn.net/a__int__/article/details/103485328
版权

自此home.html首页内容基本结束，market商城页面开始编写

1、新建数据表axf_foodtype

App/models.py

class FoodType(models.Model):
    typeid = models.IntegerField(default=1)
    typenames = models.CharField(max_length=32)
    childtypenames = models.CharField(max_length=255)
    typesort =models.IntegerField(default=1)
    class meta:
        db_table = 'axf_foodtype'

迁移：

#生成迁移文件：
python manage.py makemigrations
#执行迁移文件：
python manage.py migrate

插入数据：
在这里插入图片描述

INSERT INTO `axf`.`app_foodtype`(`id`, `typeid`, `typenames`, `childtypenames`, `typesort`) VALUES (1, 1001, '热销榜', '全部分类：0', 1);
INSERT INTO `axf`.`app_foodtype`(`id`, `typeid`, `typenames`, `childtypenames`, `typesort`) VALUES (2, 1002, '新品尝鲜', '全部分类：0', 2);
INSERT INTO `axf`.`app_foodtype`(`id`, `typeid`, `typenames`, `childtypenames`, `typesort`) VALUES (3, 1003, '优选水果', '全部分类：0#进口水果：1004#国产水果：1005', 3);
INSERT INTO `axf`.`app_foodtype`(`id`, `typeid`, `typenames`, `childtypenames`, `typesort`) VALUES (4, 1006, '卤味熟食', '全部分类：0', 4);
INSERT INTO `axf`.`app_foodtype`(`id`, `typeid`, `typenames`, `childtypenames`, `typesort`) VALUES (5, 1007, '水', '全部分类：0#饮料：1008#冷热饮：1009', 5);
INSERT INTO `axf`.`app_foodtype`(`id`, `typeid`, `typenames`, `childtypenames`, `typesort`) VALUES (6, 1010, '鲜花', '全部分类：0', 6);

2、新建数据表axf_goods

App/models.py

class Goods(models.Model):
    productid = models.IntegerField(default=1)
    productimg = models.CharField(max_length=255)
    productname = models.CharField(max_length=128)
    productlongname = models.CharField(max_length=255)
    isxf = models.BooleanField(default=False)
    esc =models.BooleanField(default=False)
    isc=models.CharField(max_length=64)
    price =models.FloatField(default=0)
    marketprice =models.FloatField(default=1)
    categoryid = models.IntegerField(default=1)
    childcid =models.IntegerField(default=1)
    childcidname =models.CharField(max_length=128)
    dealerid = models.IntegerField(default=1)
    storenums =models.IntegerField(default=1)
    productnum =models.IntegerField(default=1)

    class meta:
        db_table = 'axf_goods'

迁移：

python manage.py makemigrations
python manage.py migrate

插入数据：
在这里插入图片描述

INSERT INTO `axf`.`app_goods`(`id`, `productid`, `productimg`, `productname`, `productlongname`, `isxf`, `esc`, `isc`, `price`, `marketprice`, `categoryid`, `childcid`, `childcidname`, `dealerid`, `storenums`, `productnum`) VALUES (1, 2001, '/static/axf/img/market/冰棍.png', '冰棍，老冰棍', '好吃的冰棍', 0, 0, '20g', 1.5, 2, 2001, 2001, '饮料', 4858, 200, 4);
INSERT INTO `axf`.`app_goods`(`id`, `productid`, `productimg`, `productname`, `productlongname`, `isxf`, `esc`, `isc`, `price`, `marketprice`, `categoryid`, `childcid`, `childcidname`, `dealerid`, `storenums`, `productnum`) VALUES (2, 3001, '/static/axf/img/market/卤味猪心.png', '卤味猪心', '当天的卤味猪心', 0, 0, '1kg', 35, 38, 3001, 3001, '卤味熟食', 4858, 300, 4);
INSERT INTO `axf`.`app_goods`(`id`, `productid`, `productimg`, `productname`, `productlongname`, `isxf`, `esc`, `isc`, `price`, `marketprice`, `categoryid`, `childcid`, `childcidname`, `dealerid`, `storenums`, `productnum`) VALUES (3, 3002, '/static/axf/img/market/卤味鸡腿.png', '卤味鸡腿', '手拿着就可以吃', 0, 0, '0.5kg', 10, 15, 4001, 4001, '卤味熟食', 4858, 300, 4);

3、商城页面搭建

路由：
在这里插入图片描述
视图：



def market(request):
   return redirect(reverse('axf:market_with_paprams',kwargs={
       "typeid": 1001
   }))

def market_with_paprams(request,typeid):

    foodtypes =FoodType.objects.all()
    goods_list=Goods.objects.filter(categoryid=typeid)
    data = {
        "title": "商城",
        "foodtypes":foodtypes,
        "goods_list":goods_list,
        "typeid":int(typeid),

    }
    return render(request, 'main/market.html', context=data)

market.html

{% extends 'base_main.html' %}
{% load static %}

{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'axf/main/css/market.css' %}">
{% endblock %}

{% block content %}
    <div id="market">
        {#左边的导航#}
        <aside>
            <ul>
                {% for foodtype in foodtypes %}
                    <li>
                        <a href="{% url 'axf:market_with_paprams' typeid=foodtype.typeid %}">{{ foodtype.typenames }}</a>
                        {% ifequal foodtype.typeid typeid %}
                            <span class="yellowSlide"></span>
                        {% endifequal %}
                    </li>

                {% endfor %}

            </ul>
        </aside>

        <section>
            <nav>
                <ul>
                    <li>
                        <div></div>
                        <span>全部分类<span class="glyphicon glyphicon-chevron-down"></span></span></li>
                    <li>
                        <div></div>
                        <span>综合排序<span class="glyphicon glyphicon-chevron-down"></span></span></li>
                </ul>
            </nav>
            <menu>
                <ul>
                    {% for goods in goods_list %}
                        <li><a href="#">
                            <img src="{{ goods.productimg }}" alt="{{ goods.productlongname }}">
                            <div class="shoppingInfo">
                                <h6>{{ goods.productlongname }}</h6>
                                <p class="detailTag"><span>精选</span><span></span></p>
                                <p class="unit">{{ goods.isc }}</p>
                                <p class="price"><span>{{ goods.price }}</span><s>{{ goods.marketprice }}</s></p>
                            </div>
                        </a></li>
                    {% endfor %}

                </ul>
            </menu>
        </section>

    </div>
{% endblock %}

market.css

/*底部图标和文字控制*/
footer .market span {
    background: url(/static/img/market_selected.png) no-repeat;
    background-size: 0.513889rem;
}

footer .market dd {
    color: orange;
}

/*商城页面的数据容器*/
#market {
    padding: 1.5rem 0;
    overflow: auto;
    height: 100%;
    width: 100%;
    position: fixed;
}

/*左边的导航*/
aside {
    width: 2.5rem;
    float: left;
    position: relative;
    background: #fafafa;
    overflow: auto;
    height: 100%;
}

aside ul {
    background: #fafafa;

}

aside ul li {
    list-style: none;
    text-align: center;
    border-bottom: 0.04rem solid #e0e0e0;
    line-height: 1.35rem;
    width: 2.25rem;
    position: relative;
    z-index: +1;

}

aside ul li a {
    display: block;
    font-size: 0.35rem;
    color: grey;
    z-index: +1;
}

.yellowSlide {
    background: yellow;
    width: 0.1rem;
    height: 0.7rem;
    position: absolute;
    left: 0;
    top: 0.3rem;
    display: block;
}

/*右侧商品数据内容*/

div > section {
    background-color: #fafafa;
    width: 7.5rem;
    float: right;
    position: relative;
    height: 100%;
    overflow: auto;
    padding: 1rem 0 0;
    clear: none;
}

/*右侧顶部导航*/
nav {
    top: 1.58rem;
    right: 0;
    position: fixed;
    z-index: +1;
    background: white;
    border-bottom: 0.04rem solid #e0e0e0;
}

nav ul {
    display: flex;
    background: white;
    height: 0.7rem;

}

/*.asss {*/
/*    display: table-cell;*/
/*    vertical-align: middle;*/
/*     width: 100%;*/
/*}*/

nav ul li {

    text-align: center;
    width: 3.75rem;
    line-height: 0.475em;
    font-size: 0.35rem;
    border-right: 0.04rem solid #e0e0e0;
    height: 0.5rem;

}

nav ul li:last-child {
    border: none;
}

nav ul li div {
    height: 0.1rem;
}

/*分类按钮 全部分类 综合安排*/
nav ul li > span {
    width: 100%;
    height: 1rem;
    display: block;
    text-align: center;

}

/*商品数据*/
section menu {
    height: 100%;
    position: relative;
    overflow: auto;
}

section menu ul {
    position: relative;
}

section menu ul li {
    background: white;
    border-bottom: 0.04rem solid #e0e0e0;
    position: relative;
}

section menu ul li a {
    display: block;
    height: 3rem;

}

section menu ul li a img {
    display: block;
    width: 2.8rem;
    float: left;

}

/*商品详细信息*/

.shoppingInfo {
    width: 4.6rem;
    float: right;
    font-size: 0.35rem;

}

.shoppingInfo h6 {
    margin: 0.1rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 0.5rem;
    white-space: normal;
    font-weight: 500;
    font-size: 0.38rem;
    line-height: normal;
    color: black;
}

.detailTag {
    margin: 0.2rem 0;

}

.detailTag span {
    border: 0.05rem solid red;
    border-radius: 0.15rem;
    padding: 0 0.1rem;
    color: white;
    background: red;
    margin-right: 0.3rem;

}

.detailTag span:first-child {
    color: red;
    background: white;

}

.unit {
    color: grey;
    position: absolute;
    bottom: 1rem;

}

.price {
    position: absolute;
    bottom: 0.15rem;
    font-weight: 200;
    margin: 0.2rem 0;
}

.price > span {
    padding: 0 0.35rem 0 0;
    color: red;
}

.price > span:before {
    content: "￥";
    color: red;
}

.price > s {
    color: grey;

}

.price > s:before {
    content: "￥";
    color: grey;
}

li > section {
    position: absolute;
    right: 0.4rem;
}

访问：
在这里插入图片描述

4、“全部分类、综合排序”的点击事件

在这里插入图片描述
market.html添加内容
在这里插入图片描述

                <div id="all_cer">
                    <div>
                        <a href="#">
                            <button class="btn btn-success">全部分类</button>
                        </a>
                        <a href="#">
                            <button class="btn btn-default">优选水果</button>
                        </a>
                    </div>
                </div>
                <div id="sort_cer">
                    <div>
                        <a href="#">
                            <button class="btn btn-success">综合排序</button>
                        </a>
                        <a href="#">
                            <button class="btn btn-default">价格降序</button>
                        </a>
                    </div>
                </div>

market.css添加内容
在这里插入图片描述


/*添加到购物车*/
li > section {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    height: 0.75rem;
    border-radius: 1rem;
}

section > button {
    background: white;
    border: 1px solid orange;
    border-radius: 1111px;
    color: red;
    display: inline-block;
    text-align: center;
    line-height: 0.5rem;
    font-weight: 900;
    width: 0.5rem;
    height: 0.5rem;

}

li > section > span {
    display: inline-block;
    width: 0.4rem;
    text-align: center;
    line-height: 0.4rem;

}

.subShopping {
    font-size: 0.8rem;
    font-weight: 100;
}

section menu > div {
    position: fixed;
    top: 2.3rem;
    left: 2.55rem;
    width: 7.45rem;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: grey;
    display: none;
}

section menu > div > div {
    background: white;
    padding-bottom: 0.3rem;
}

section menu > div > div > a > button {
    border: 0.04rem solid #e0e0e0;
    padding: 0.1rem 0.2rem;
    margin-left: 0.3rem;
    border-radius: 0.2rem;
    font-size: 0.375rem;
    display: inline-block;
    margin-top: 0.3rem;
}

maiket.js
在这里插入图片描述

// 点击事件的绑定
$(function () {
    $("#all_types").click(function () {

        // “所有类型” 点击事件
        var $all_cer = $("#all_cer");
        $all_cer.show();

    })

    $("#sort_rule").click(function () {

        // “综合排序” 点击事件
        var $sort_cer = $("#sort_cer");
        $sort_cer.slideDown(0);

    })
})

访问：
在这里插入图片描述

BeanInJ
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axf:django项目——爱鲜蜂
05-18
axf django项目——爱鲜蜂
Django 06购物商城项目（建立数据表axf_shop、axf_mainshow、商店栏、优选商品栏）
这里的分享，都是干货
12-11 888
1、数据表axf_shop 模板： 迁移： #生成迁移文件： python manage.py makemigrations #执行迁移文件： python manage.py migrate 插入数据： 2、 商店栏 视图： #这里提示一个快捷键：Ctrl + Shift + Alt + j pycharm一键选择、修改多个相同变量、符号、值 home.html home.css ...
学习django部分笔记之AXF项目
入木三分的博客
04-10 190
AXF 开发流程 产品经理产出需求文档 产品根据需求需求文档做出原型图 原型图交给设计对页面交互，细节进行设计 之后会交到开发手中 分析需求，设计数据模型 从数据开始开发 封装数据操作 做数据展示 需求分析 用户系统 商品系统 首页展示 购物车 订单系统 地址系统 优惠券 积分系统，等级系统 搭建项目 导入静态资源 适配 前端学过的单位 px em 相对单位 相对于父级元素，默认 16px rem 相对单位，和em很像 相对于root 根级元素 将屏幕宽度分为十份 添加到购物车
AXF项目
我是张先生
03-11 3464
前端 后端
Error【1146】：Table 'xxx.xxx' doesn't exist问题原因及解决方法
热门推荐
漠效的博客
08-21 29万+
前言
Web开发丨基于django+html+css的在线购物商城
兔子王
01-09 3万+
本期内容：基于Django+HTML+CSS+的在线购物商城。
goods.zip_goods_图书商城_图书商城项目_网上图书商城
07-14
【标题】"goods.zip_goods_图书商城_图书商城项目_网上图书商城" 指的是一款基于互联网技术的在线图书销售平台的项目源代码。这个项目涵盖了用户选购、下单到支付等一系列在线购书流程的核心功能，旨在为用户提供...
python课程设计基于Django的购物商城系统源码+数据库（96分以上项目）
05-29
python大作业课程设计基于Django的购物商城系统源码+数据库（96分以上项目）代码数据库完整下载即用，无需修改确保可以运行，高分手打项目。 python大作业课程设计基于Django的购物商城系统源码+数据库（96分以上...
基于Django框架的完整商城项目源码
03-25
项目简介：这是一款基于Python的Django框架开发的完整商城项目，采用前后端不分离的模式。项目包含212个文件，涉及的主要编程语言为Python，同时整合了HTML、JavaScript和CSS。文件类型包括57个已编译的pyc文件，50...
基于Django+python开发的美多商城项目源码.zip
08-26
基于Django+python开发的美多商城项目源码.zip基于Django+python开发的美多商城项目源码.zip基于Django+python开发的美多商城项目源码.zip基于Django+python开发的美多商城项目源码.zip基于Django+python开发的美多...
基于Python Django框架的Smart Mall在线商城开源项目
03-25
项目名称：Smart Mall - 基于Python Django的在线商城开源项目...简述：本项目是基于Django框架开发的一款功能全面的在线商城，旨在为用户提供便捷、流畅的购物体验，同时作为开源项目，也欢迎开发者们共同参与和完善。
数据库表与表中的字段添加约束
热爱生活 热爱编码
07-13 3776
菜类别表：表名：foodType字段：id                 --主键字段：typeName   --类别名称菜品种表：表名：food字段：id                    --主键字段：foodName     --菜名字段：foodType_id   --所属菜类别举例子：菜类别有川菜，湘菜，东北菜菜名有 ：鱼香肉丝   小鸡炖蘑菇         小鸡炖蘑菇属于东北菜...
Django项目
查理曹的博客
05-31 2292
关于django的项目，选择了实现购物商城的手机app，主要实现功能为：1. 实现商城主页，登录，注册和登出功能2. 增加cookie功能，设置cookie期间，页面 ‘首页’，‘闪购’， ‘我的’切换，如果用户登录则显示用户名和头像，待付款，待收货。 如果没有登录，则显示登录和注册。用户点击退出，则删除cookie。3. 购物车模型(购物车页面展示，购物车信息展示)购物车逻辑分析，模型和订单模型...
Django实战项目--爱鲜蜂day1
瞿凯Kai的博客
05-13 3941
实战第一天 创建虚拟环境 使用cmd进入到储存项目文件 virtualenv --no-site-packages testenv # 创建文件testenv 在虚拟环境中安装pymysql和django cd testenv cd Scripts activate # 进入虚拟环境 pip install pymysql # 安装pymysql pip install d...
基于Django的购物车管理-添加商品到购物车
Ezra1991的博客
03-15 1436
(1) 添加到购物车 前端： html <a @click="add_carts" class="add_cart" id="add_cart">加入购物车</a> js // 加入购物车 add_carts(){ let url = '/carts/'; axios.post(u...
安全技术交底记录.docx
07-13
安全技术交底记录.docx
质量隐患整改通知单.docx
07-13
质量隐患整改通知单.docx
android studio项目实例
最新发布
07-13
创建一个简单的Android Studio项目实例可以帮助你理解Android应用开发的基础。以下是使用Android Studio创建一个基本的"Hello World" Android应用的步骤： ### 1. 环境准备 确保你已经安装了最新版本的Android Studio。可以在[Android Studio官网](https://developer.android.com/studio)下载。 ### 2. 创建新项目 - 打开Android Studio，点击“Start a new Android Studio project”。 - 选择一个项目模板，对于初学者来说，选择“Empty Activity”即可。 - 填写应用的名称、包名和保存位置，选择保存语言（Java或Kotlin），然后点击“Finish”。 ### 3. 理解项目结构 项目创建完成后，你将看到以下主要组成部分： - `app`：包含所有应用特定的代码。 - `src/main`：包含源代码和资源。 - `java/<package-name>`：源代码目录。 - `res`：资源目录，
红色商务风2024一起向未来年终总结PPT模板
07-13
【作品名称】：红色商务风2024一起向未来年终总结PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
django+bootstrap_Python+Django+Mysql实现购物商城推荐系统
05-15
要实现购物商城推荐系统，需要使用以下技术： 1. Django：用于构建 Web 应用程序和管理后端。 2. MySQL：用于存储和管理商品和用户数据。 3. Bootstrap：用于创建响应式和美观的用户界面。 4. Python：用于编写推荐...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值