Python+Django生活用品商城网站前后端

简介: 这篇博客针对<<Python+Django生活用品商城网站前后端 >>编写代码,代码整洁,规则,易读。 学习与应用推荐首选。

程序示例精选

Python+Django生活用品商城网站前后端

如需安装运行环境或远程调试,可点击右边主头像昵称进入个人主页查看博主联系方式,由专业技术人员远程协助!

前言

这篇博客针对<<Python+Django生活用品商城网站前后端  >>编写代码,代码整洁,规则,易读。 学习与应用推荐首选。


文章目录

一、所需工具软件

二、使用步骤

       1. 样式引入

       2. 代码实现

       3. 运行结果

三、在线协助

一、所需工具软件

1. Python,Pycharm

2. Django

二、使用步骤

1.样式引入

<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<title>login</title>
<style type="text/css">
    #box4{
        background-color: #5ACCC9;
        width: 500px;
        height: 50px;
        margin:auto ;
        float: left;
        position:absolute;
        top: -290;
        left: 0;
        right: 0;
        bottom: 0;
        border-style:none;
        border-radius: 5px;
    }
    #box1{
        background-color: #8C7EF3;
        width: 500px;
        height: 300px;
        margin:auto ;
        float: inline;
        position:relative;
        top: 10px;
        left: 0;
        right: 0;
        bottom: 0;
        border-style:none;
        border-radius: 5px;
    }
    .p1{
        color: black;
        font-size: 20px;
        margin-left:20px;
        margin-top: 25px;
        font-family: microsoft yahei;
        font-weight: normal;
        text-align: left;
        line-height:23px;
        position: center;
    }
    #box2{
        background-color: #8C7EF3;
        width: 120px;
        height: 250px;
        margin-top:20px;
        margin-left:70px;
        float: left;
        text-align: center;
        position:static;
    }
    #box3{
        background-color: #8C7EF3;
        width: 230px;
        height: 250px;
        margin-top:20px;
        float: left;
        text-align: center;
        position:static;
    }
    #input0{
        width: 200px;
        height: 30px;
        margin-top:20px;
    }
    #input1{
        width: 100px;
        height: 50px;
        margin: 20px;
        font-family: microsoft yahei;
        font-weight: normal;
        font-size: 16px;
    }
    #input2{
        width: 130px;
        height: 50px;
        margin: 0px;
        font-family: microsoft yahei;
        font-weight: normal;
        font-size: 16px;
        float: left;
        border-width: 0px;
        border-radius: 3px;
    }
    #pgheader1{
        background: rgb(51,51,51);
        width: 100%;
        min-width: 960px;
        height: 35px;
        margin: 0px auto;
        width: 100%;
        position: relative;z-index:5;
        border-color: rgb(255, 255, 255);
        border-width: 0px;
        border-style: solid;
        }
    #pgheader2{
        padding-top: 10px;
        padding-right: 0px;
        display: inline-block;
        z-index: 1000;
        color: rgb(255,255,255);
        font-size:15px;
    }
</style>
</head>

image.gif

2. 代码实现

代码如下:

<body>
<div style="width: 100%; display: flex; justify-content: space-between;background-color:#3FE3E1" >
    <a style="margin-left: 20px;padding: 10px;  color: #333; text-decoration: none;">欢迎光临</a>
    <div style="float: right;display: flex;justify-content: right;">
        <a id="loginS" style="margin-right: 20px;padding: 10px;  color: #333; text-decoration: none;" href="/accounts/logout/" >当前用户名:{{user}}</a>
        <a style="margin-right: 20px;padding: 10px;  color: #333; text-decoration: none;" href="/accounts/logout/">注销</a>
        <a style="margin-right: 20px;padding: 10px;  color: #333; text-decoration: none;" href="/accounts/login/">登录</a>
    </div>
</div>
<!--<div style="width: 100%; display: flex; justify-content: center;">-->
<!--  <table style="margin: auto;">-->
<div style="display: flex;justify-content:right;width:75%;margin: 10px auto;background-color: ">
    <form style="margin-top: 0px;display: inline-block;" action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <td ><input type="text" name="searchWeb"  value=""></td>
        <td style="vertical-align: middle;" ><input type="submit" value="搜索"></td>
        <td style="vertical-align: middle;" ><input type="submit" name="displayAllWeb"  value="显示所有"></td>
        <td style="vertical-align: middle;" ><input type="submit" name="newWeb"  value="新建"></td>
    </form>
</div>
<div class="container">
    <h3>文章列表</h3>
    <table class="table table-striped">
    <thead>
      <tr >
        <th style="width: 50px">编号</th>
        <th style="width: 50px">类目</th>
        <th style="width: 100px">名称</th>
        <th style="width: 100px">价格(元)</th>
        <th style="width: 100px">浏览</th>
        <th style="width: 100px">编辑</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        {% for ii in page_object %}
            <tr>
                <form style="margin-top: 0px;display: inline-block;" action="" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <td style="vertical-align: middle;">{{ ii.id }}</td>
                    <td style="vertical-align: middle;">{{ ii.category }}</td>
                    <td style="vertical-align: middle;">{{ ii.usert }}</td>
                    <td style="vertical-align: middle;"><a href="{{ ii.id }}/">{{ ii.title }}</a></td>
                    <td style="vertical-align: middle;">{{ ii.data1 }}</td>
                    <td style="vertical-align: middle;">{{ ii.file }}</td>
                    <td style="vertical-align: middle;">{{ ii.file2 }}</td>
                    <td style="vertical-align: middle;">{{ ii.file3 }}</td>
                    <td><img src="../../media/{{ ii.img }}" width="100" height="100"></td>
                    <td style="vertical-align: middle;">{{ ii.img2 }}</td>
                    <td hidden><input type="text" name="itemWeb" hidden value="display"></td>
                    <td hidden><input type="text" name="idWeb" hidden value={{ ii.id }}></td>
                    <td style="vertical-align: middle;" ><input type="submit" value="浏览"></td>
                </form>
<!--                <form style="margin-top: 7.2px;display: inline-block;" action="" method="post" enctype="multipart/form-data">-->
<!--                    {% csrf_token %}-->
<!--                    <td><a hidden href="{{ ii.id }}/">{{ ii.title }}</a></td>-->
<!--                    <td><input type="text" name="itemWeb" hidden value="modify"></td>-->
<!--                    <td><input type="text" name="idWeb" hidden value={{ ii.id }}></td>-->
<!--                    <td><input type="submit" value="编辑"></td>-->
<!--                </form>-->
                <td style="vertical-align: middle;"><a href="{{ ii.id }}/"><input type="button" value="编辑"></a></td>
            </tr>
        {% endfor %}
      </tr>
    </tbody>
  </table>
<!--分页***************************************分页-->
    {% if is_paginated %}
            <ul class="pagination pull-right" id="myPage">
                {% endif %}
                {#上一页按钮开始#}
                {# 如果当前页有上一页#}
                {% if page_object.has_previous %}
                    {#  当前页的上一页按钮正常使用#}
                    <li class="previous"><a href="?page={{ page_object.previous_page_number }}">上一页</a></li>
                {% else %}
                    {# 当前页的不存在上一页时,上一页的按钮不可用#}
                    <li class="previous disabled"><a href="#">上一页</a></li>
                {% endif %}
                {#上一页按钮结束#}
                {% if data.first %}
                    <li class="page"><a href="?page=1">1</a></li>
                {% endif %}
                {% if data.left %}
                    {% if data.left_has_more %}
                        <li class="page"><a href="javascript:void(0)">...</a></li>
                    {% endif %}
                    {% for i in data.left %}
                        <li class="page"><a href="?page={{ i }}">{{ i }}</a></li>
                    {% endfor %}
                {% endif %}
                <li class="page active" ><a href="javascript:void(0)"> {{ page_num }}</a></li>
                {% if data.right %}
                    {% for i in data.right %}
                        <li class="page"><a href="?page={{ i }}">{{ i }}</a></li>
                    {% endfor %}
                    {% if data.right_has_more %}
                        <li class="page"><a href="javascript:void(0)">...</a></li>
                    {% endif %}
                {% endif %}
                {% if data.last %}
                    <li class="page"><a
                            href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a>
                    </li>
                {% endif %}
                {% if page_object.has_next %}
                    <li class="next"><a href="?page={{ page_object.next_page_number }}">下一页</a></li>
                {% else %}
                    <li class="next disabled"><a href="#">下一页</a></li>
                {% endif %}
                {# 下一页按钮结束#}
                <div class="btn-group">
                    <button type="button" class="btn btn-primary">原始</button>
                    <button type="button" class="btn btn-primary dropdown-toggle"
                            data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">切换下拉菜单</span>
                    </button>
                    <ul class="dropdown-menu" role="menu" style="width: 20px">
                            {% for i in paginator.page_range %}
                                <li class="page"><a href="?page={{ i }}">{{ i }}</a></li>
                            {% endfor %}
                    </ul>
                </div>
            </ul>
</div>
</body>
</html>

image.gif

3. 运行结果

image.gif编辑

image.gif编辑

image.gif


三、在线协助:

如需安装运行环境或远程调试, 可点击右边 主头像 昵称 进入个人主页查看博主联系方式 ,由专业技术人员远程协助!
1)远程安装运行环境,代码调试
2)Qt, C++, Python入门指导
3)界面美化
4)软件制作


博主推荐文章:python人脸识别统计人数qt窗体-CSDN博客

博主推荐文章:Python Yolov5火焰烟雾识别源码分享-CSDN博客

                        Python OpenCV识别行人入口进出人数统计_python识别人数-CSDN博客

个人博客主页:alicema1111的博客_CSDN博客-Python,C++,网页领域博主

博主所有文章点这里:alicema1111的博客_CSDN博客-Python,C++,网页领域博主


相关文章
|
12天前
|
数据采集 存储 数据挖掘
【优秀python数据分析案例】基于Python书旗网小说网站数据采集与分析的设计与实现
本文介绍了一个基于Python的书旗网小说网站数据采集与分析系统,通过自动化爬虫收集小说数据,利用Pandas进行数据处理,并通过Matplotlib和Seaborn等库进行数据可视化,旨在揭示用户喜好和市场趋势,为图书出版行业提供决策支持。
【优秀python数据分析案例】基于Python书旗网小说网站数据采集与分析的设计与实现
|
12天前
|
机器学习/深度学习 数据采集 数据可视化
基于爬虫和机器学习的招聘数据分析与可视化系统,python django框架,前端bootstrap,机器学习有八种带有可视化大屏和后台
本文介绍了一个基于Python Django框架和Bootstrap前端技术,集成了机器学习算法和数据可视化的招聘数据分析与可视化系统,该系统通过爬虫技术获取职位信息,并使用多种机器学习模型进行薪资预测、职位匹配和趋势分析,提供了一个直观的可视化大屏和后台管理系统,以优化招聘策略并提升决策质量。
|
12天前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
|
8天前
|
人工智能 数据可视化 程序员
精心整理自学python的宝藏网站,不看亏死
精心整理自学python的宝藏网站,不看亏死
24 4
精心整理自学python的宝藏网站,不看亏死
|
13天前
|
搜索推荐 前端开发 数据可视化
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
本文介绍了一个基于Python协同过滤算法的旅游景点推荐系统,该系统采用Django框架、MySQL数据库、Bootstrap前端和echarts数据可视化技术,旨在为用户提供个性化的旅游推荐服务,提升用户体验和旅游市场增长。
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
|
12天前
|
数据采集 自然语言处理 监控
【优秀python毕设案例】基于python django的新媒体网络舆情数据爬取与分析
本文介绍了一个基于Python Django框架开发的新媒体网络舆情数据爬取与分析系统,该系统利用Scrapy框架抓取微博热搜数据,通过SnowNLP进行情感分析,jieba库进行中文分词处理,并以图表和词云图等形式进行数据可视化展示,以实现对微博热点话题的舆情监控和分析。
【优秀python毕设案例】基于python django的新媒体网络舆情数据爬取与分析
|
12天前
|
人工智能 BI 数据处理
【优秀python django系统案例】基于python的医院挂号管理系统,角色包括医生、患者、管理员三种
本文介绍了一个基于Python开发的医院挂号管理系统,该系统包含医生、患者、管理员三种角色,旨在优化挂号流程,提高医疗服务质量和管理效率,并通过信息化手段提升患者就医体验和医院运营决策的数据支持能力。
【优秀python django系统案例】基于python的医院挂号管理系统,角色包括医生、患者、管理员三种
|
5天前
|
运维 Devops 测试技术
一个人活成一个团队:python的django项目devops实战
DevOps通过自动化的流程,使得构建、测试、发布软件能够更加地快捷、频繁和可靠。本文通过一个python的django个人博客应用进行了DevOps的实战,通过DevOps拉通开发和运维,通过应用云效的DevOps平台实现自动化“软件交付”的流程,使得构建、测试、发布软件能够更加地快捷、频繁和可靠,提交研发交付效率。作为个人项目也是可以应用devops提高效率。
18 3
|
4天前
|
SQL 前端开发 关系型数据库
Python之Web框架Django
Python之Web框架Django
8 0
|
5天前
|
设计模式 API Python
Python Web:Django、Flask和FastAPI框架对比
Python Web:Django、Flask和FastAPI框架对比
13 0