程序示例精选

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

如需安装运行环境或远程调试，见文章底部个人QQ名片，由专业技术人员远程协助！

前言

这篇博客针对<<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>

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>