Django母婴商城(完整版)

最新推荐文章于 2024-05-29 14:16:59 发布

梦初始

最新推荐文章于 2024-05-29 14:16:59 发布

阅读量1.4k

点赞数 3

文章标签： django python 后端

本文链接：https://blog.csdn.net/m0_52158413/article/details/122106823

版权

文章目录

(使用工具pycharm,navicat(操作看上一章))

项目需求分析

1、网站提供搜索功能
2、搜索结果按销量，价格，上架时间，收藏数量排序
3、商品详情页有尺寸，原价，活动价，图片展示，收藏功能和购买功能
4、用户购买后可以看到订单信息
5、商品购买支持在线支付，我做的是支付宝支付
6、用户登录注册功能

一、母婴商城的路由设置

在babys、commodity、index、shopper(即你所创建的应用(看上章))的urls.py(没有就创建)中编写
babys:
在这里插入图片描述
commodity:

index:

shopper:

至此所有应用的路由(即urls.py)配置完毕

二、母婴商城的数据模型

数据模型就是应用的models.py文件，我这里连接的是mysql，使用navicat操作，在commodity,shopper中的models.py配置好，在pycharm的Terminal分别输入python manage.py makemigrations、、、python manage.py migrate将models.py中的模型创建到navicat
commodity:
在这里插入图片描述

shopper:
在这里插入图片描述

三、配置母婴商城的视图函数

每个应用的路由(urls.py)对应应用的视图函数(即views.py),编写好路由后，需要到视图中进行配置,写上对应的函数功能.
我们在commodity,index,shopper的views.py中分别写上以下代码
commodity:
在这里插入图片描述

index:
在这里插入图片描述

shopper:
在这里插入图片描述

四、母婴商城的数据渲染与展示

在视图中我们用到了一些html文件，现在创建并编辑好它们------包括基础的模板，商城首页，商品页面，商品详情，购物车，登录等方面，是在templates文件夹下面
商城基础模板—base.html:

<!DOCTYPE html>
<html lang="en">
<head>
	{% load static %}
	<title>{
  {title}}</title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'layui/css/layui.css' %}">
	<script type="text/javascript" src="{% static 'layui/layui.js' %}"></script>
    {% block myCss %}{% endblock myCss %}
</head>
<body>
  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="{% url 'index:index' %}" title="母婴商城">
            <img src="{% static 'img/logo.png' %}">
          </a>
        </h1>
        <div class="mallSearch">
          <form action="{% url 'commodity:commodity' %}" method="get" class="layui-form" novalidate>
            <input type="text" name="n" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
                <i class="layui-icon layui-icon-search"></i>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="content content-nav-base {
    {classContent}}">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="{% url 'index:index' %}" {% if classContent == ''%}class="active"{% endif %}>首页</a>
			<a href="{% url 'commodity:commodity' %}" {% if classContent == 'commoditys'%}class="active"{% endif %}>所有商品</a>
			<a href="{% url 'shopper:shopcart' %}" {% if classContent == 'shopcarts'%}class="active"{% endif %}>购物车</a>
            <a href="{% url 'shopper:shopper' %}" {% if classContent == 'informations'%}class="active"{% endif %}>个人中心</a>
          </div>
        </div>
      </div>
    </div>
	{% block content %}{% endblock content %}
  </div>

{% block footer %}{% endblock footer %}
<script type="text/javascript">{
     % block script %}{
     % endblock script %}</script>
</body>
</html>

商城首页模板设计-----index.html:

{% extends 'base.html' %}
{% load static %}
{% block content %}
    <div class="category-con">
        <div class="category-banner">
            <div class="w1200">
                <div class="layui-carousel" id="test2">
                    <div carousel-item>
                        <div><img src="{% static 'img/banner1.jpg' %}"></div>
                        <div><img src="{% static 'img/banner1.jpg' %}"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="floors">
        <div class="sk">
            <div class="sk_inner w1200">
                <div class="sk_hd">
                    <a href="javascript:;">
                        <img src="{% static 'img/s_img1.jpg' %}">
                    </a>
                </div>
                <div class="sk_bd">
                    <div class="layui-carousel" id="test1">
                        <div carousel-item>
                            <div class="item-box">
                                {% for c in commodityInfos %}
                                    {% if forloop.counter < 5 %}
                                        <div class="item">
                                            <a href="{% url 'commodity:detail' c.id %}">
                                                <img src="{
    { c.img.url }}"></a>
                                            <div class="title">{
  { c.name }}</div>
                                            <div class="price">
                                                <span>￥{
  { c.discount|floatformat:'2' }}</span>
                                                <del>￥{
  { c.price|floatformat:'2' }}</del>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>

                            <div class="item-box">
                                {% for c in commodityInfos %}
                                    {% if forloop.counter > 4 %}
                                        <div class="item">
                                            <a href="{% url 'commodity:detail' c.id %}">
                                                <img src="{
    { c.img.url }}"></a>
                                            <div class="title">{
  { c.name }}</div>
                                            <div class="price">
                                                <span>￥{
  { c.discount|floatformat:'2' }}</span>
                                                <del>￥{
  { c.price|floatformat:'2' }}</del>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="product-cont w1200" id="product-cont">
        <div class="product-item product-item1 layui-clear">
            <div class="left-title">
                <h4><i>1F</i></h4>
                <img src="{% static 'img/icon_gou.png' %}">
                <h5>宝宝服饰</h5>
            </div>
            <div class="right-cont">
                <a href="javascript:;" class="top-img"><img src="{% static 'img/img12.jpg' %}" alt=""></a>
                <div class="img-box">
                    {% for c in clothes %}
                        <a href="{% url 'commodity:detail' c.id %}"><img src="{
    { c.img.url }}"></a>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="product-item product-item2 layui-clear">
            <div class="left-title">
                <h4><i>2F</i></h4>
                <img src="{% static 'img/icon_gou.png' %}">
                <h5>奶粉辅食</h5>
            </div>
            <div class="right-cont">
                <a href="javascript:;" class="top-img"><img src="{% static 'img/img12.jpg' %}" alt=""></a>
                <div class="img-box">
                    {% for f in food %}
                        <a href="{% url 'commodity:detail' f.id %}"><img src=