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++,网页领域博主


相关文章
|
23天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
124 45
|
24天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
35 2
|
27天前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
Python Web框架比较:Django vs Flask vs Pyramid
37 1
|
1月前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
Python Web框架比较:Django vs Flask vs Pyramid
30 4
|
1月前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
【10月更文挑战第10天】本文比较了Python中三个最受欢迎的Web框架:Django、Flask和Pyramid。Django以功能全面、文档完善著称,适合快速开发;Flask轻量灵活,易于上手;Pyramid介于两者之间,兼顾灵活性和安全性。选择框架时需考虑项目需求和个人偏好。
36 1
|
1月前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
【10月更文挑战第6天】本文比较了Python中三个最受欢迎的Web框架:Django、Flask和Pyramid。Django功能全面,适合快速开发;Flask灵活轻量,易于上手;Pyramid介于两者之间,兼顾灵活性和可扩展性。文章分析了各框架的优缺点,帮助开发者根据项目需求和个人偏好做出合适的选择。
35 4
|
1月前
|
存储 数据库 Python
Python编程--Django入门:用户账户(一)
Python编程--Django入门:用户账户(一)
|
1月前
|
Python
基于python-django的matlab护照识别网站系统
基于python-django的matlab护照识别网站系统
16 0
|
1月前
|
安全 Java Python
基于python-django的Java网站全站漏洞检测系统
基于python-django的Java网站全站漏洞检测系统
34 0
|
3月前
|
机器学习/深度学习 数据采集 数据可视化
基于爬虫和机器学习的招聘数据分析与可视化系统,python django框架,前端bootstrap,机器学习有八种带有可视化大屏和后台
本文介绍了一个基于Python Django框架和Bootstrap前端技术,集成了机器学习算法和数据可视化的招聘数据分析与可视化系统,该系统通过爬虫技术获取职位信息,并使用多种机器学习模型进行薪资预测、职位匹配和趋势分析,提供了一个直观的可视化大屏和后台管理系统,以优化招聘策略并提升决策质量。
188 4
下一篇
无影云桌面