2.django二手交易网站前端设计

来不及写博客，最近事情多，以下有一些是我毕业论文的内容，给几位朋友参考，未经许可请不要援引里面的文字，会影响我的查重，谢谢！

1. 概述

接上一篇文章，我的毕业设计是做一个用django开发的校园二手购物网站，主要包括主页，注册页，登录页，商品详情页，发布页，用户中心页几个页面。本篇主要讲前端设计。我的前端使用了layUI，layui的引入请百度和一个banner轮播图插件。简书上上传不了文件，css,js我会上传到GitHub，在后面会给出链接。

2.新建static文件

在django_web文件夹下新建一个static文件夹用于存放网页的css和js。



注意要在网页代码前面引用这个路径

{% load staticfiles %}

3.注册页面设计

需要实现的效果图如下


注册页面代码

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Registration Page</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="{% static "css/bootstrap/bootstrap.min.css" %}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static "css/bootstrap/font-awesome.min.css" %}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{% static "css/bootstrap/ionicons.min.css" %}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{% static "css/bootstrap/AdminLTE.css" %}">
    <!-- iCheck -->
    <link rel="stylesheet" href="{% static "css/bootstrap/blue.css" %}">
    <link rel="stylesheet" href="{% static "css/reg.css" %}">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition register-page">
<div class="register-box">
    <div class="register-logo">
        <a href="../../index2.html"><b>注册</b>页面</a>
    </div>

    <div class="register-box-body">
        <p class="login-box-msg"><div id="flag_red">{{ flag }}</div></p>

        <form action="register" method="post">
            {% csrf_token %}
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="用户名" name="username">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="email" class="form-control" placeholder="电子邮件" name="email">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="密码" name="password1">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="再次输入密码" name="password2">
                <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            <input type="checkbox"> 我已经阅读 <a href="#">条款</a>
                        </label>
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat">注册</button>
                </div>
                <!-- /.col -->
            </div>
        </form>


        <a href="login_page" class="text-center">我已经有账户 点击登录</a>
    </div>
    <!-- /.form-box -->
</div>
<!-- /.register-box -->

<!-- jQuery 3 -->
<script src="{% static "/js/jquery/jquery-3.3.1.min.js" %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static "/js/jquery/bootstrap.min.js" %}"></script>
<!-- iCheck -->
<script src="{% static "/js/jquery/icheck.min.js" %}"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' /* optional */
        });
    });
</script>
</body>
</html>

4.登录页面设计

登录页面需要实现的效果



登录页面代码

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Log in</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link type="text/css" rel="stylesheet" href="{% static "css/bootstrap/bootstrap.min.css" %}"/>
    <!-- Font Awesome -->
    <link type="text/css" rel="stylesheet" href="{% static "css/bootstrap/font-awesome.min.css" %}"/>
    <!-- Ionicons -->
    <link type="text/css" rel="stylesheet" href="{% static "css/bootstrap/ionicons.min.css" %}"/>
    <!-- Theme style -->
    <link type="text/css" rel="stylesheet" href="{% static "css/bootstrap/AdminLTE.css" %}"/>
    <!-- iCheck -->
    <link type="text/css" rel="stylesheet" href="{% static "css/bootstrap/blue.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/layui/css/layui.css" %}"/>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href="../../index2.html"><b>登录</b>页面</a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
        <p class="login-box-msg">登录你的账号</p>

        <form id="login-form" action="login" method="post">
            {% csrf_token %}
            <div class="form-group has-feedback">
                <input type="email" class="form-control" placeholder="电子邮箱" id="email" name="email">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" id="password" placeholder="密码" name="password">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            <input type="checkbox"> 记住密码
                        </label>
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    {#          <button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>#}
                    <button type="button" onclick="login()" class="btn btn-primary btn-block btn-flat">登录</button>
                </div>
                <!-- /.col -->
            </div>
        </form>

        <div class="social-auth-links text-center">
            <p>- 第三方登录 -</p>
            <a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> qq授权登录</a>
            <a href="#" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-google-plus"></i> 新浪微博账号登录</a>
        </div>
        <!-- /.social-auth-links -->

        <a href="#">忘记密码</a><br>
        <a href="register_page" class="text-center">我还没有账号 点击注册</a>

    </div>
    <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 3 -->
<script src="{% static "/js/jquery/jquery-3.3.1.min.js" %}"></script>
<script type="text/javascript" src="{% static "css/layui/layui.all.js" %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static "/js/jquery/bootstrap.min.js" %}"></script>
<!-- iCheck -->
<script src="{% static "/js/jquery/icheck.min.js" %}"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' /* optional */
        });
    });
</script>
</body>
</html>

5.主页设计

主页要实现的效果


主页代码

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>tao_school_index</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="{% static "css/index_show.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/index_head.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/banner.css" %}"/>
</head>

<body>
{#头部背景#}
<div class="head_blue">
    {#头部中部分70%#}
    <div class="head_middle">
        {#头部中间商标背景div#}
        <div class="head_brand">
            {#头部中间商标#}
            <div>
                <a class="head_brand_middle" href="#">
                </a>
            </div>
        </div>
        {#头部首页#} <a id="home_page" href="index">首页</a>
        {#头部淘宝#} <a id="home_taobao" href="https://www.tmall.com/">淘宝</a>
        {#头部拼多多#} <a id="home_pinduoduo" href="https://www.pinduoduo.com">拼多多</a>
        {#头部空白#}
        <div id="home_blank" href="/"></div>
        {% if nick_name == None %}
            {#头部用户#} <a id="home_user" href="register_page">注册</a>
            {#头部退出#} <a id="home_quit" href="login_page">登录</a>
        {% else %}
            {#头部用户#} <a id="home_user" href="user_center">{{ nick_name }}</a>
            {#头部退出#} <a id="home_quit" href="logout">退出</a>
        {% endif %}
    </div>
</div>
{#第二条白色部分#}
<div class="second_while">
    {#第二条白色部分中间#}
    <div class="second_middle">
        {#筛选按钮#}
        <div class="frist">
            <div class="frist_middle">
                <select>
                    <option value="volvo">校园优先</option>
                    <option value="saab">同城优先</option>
                    <option value="opel">邮寄优先</option>
                </select>
            </div>
        </div>

        <div class="second">
            <div class="two_middle">
                <div class="l_blank">
                    <input id="input_pass" type="text" placeholder="请输入关键词" class="keywords">
                </div>
                <div class="r_blank">
                    {#搜索#} <a id="sousuo" href="javascript:;" onclick="search_key()">搜索</a>
                </div>
            </div>
        </div>

        <div class="thrid"></div>
        <div class="four">
            <div class="four_middle">
                <a class="wenzi" href="issue_page"> 发布二手</a>
            </div>
        </div>

    </div>
</div>
{#固定悬浮窗#}
<div class="fixation_floating_bg">
    <div class="sort_bg">
        <a class="sort" href="/">手机</a>
    </div>
    <div class="sort_bg">
        <a class="sort" href="/">电脑</a>
    </div>
    <div class="sort_bg">
        <a class="sort" href="/">配件</a>
    </div>
    <div class="sort_bg">
        <a class="sort" href="/">电器</a>
    </div>
    <div class="sort_bg">
        <a class="sort" href="/">书籍</a>
    </div>
    <div class="sort_bg">
        <a class="sort" href="/">娱乐</a>
    </div>
    <div class="sort_bg">
        <a class="sort" href="/">运动</a>
    </div>
    <div class="sort_bg">
        <a class="sort" href="/">食品</a>
    </div>
</div>

{#<div class="tex"></div>#}

{#首页轮播#}
<div class="big_bg">
    <div class="Carousel_bg">
        <div class="banner" id="banner" style="width: 100%;">
            <ul>
                <li class="slider-item">
                    <a href="#">
                        <img src="{% static "img/lun1.jpg" %}" alt="" width="100%" height="300">
                    </a>
                </li>
                <li class="slider-item">
                    <a href="#">
                        <img src="{% static "img/lun2.jpg" %}" alt="" width="100%" height="300">
                    </a>
                </li>
                <li class="slider-item">
                    <a href="#"><img src="{% static "img/lun3.jpg" %}" alt="" width="100%" height="300">
                    </a>
                </li>
                <li class="slider-item">
                    <a href="#">
                        <img src="{% static "img/lun4.jpg" %}" alt="" width="100%" height="300">
                    </a>
                </li>

            </ul>
            <div class="progress"></div>
            <a href="javascript:void(0);" class="arrow-a prev">
                <img class="arrow" id="al" src="{% static "img/arrowl.png" %}" alt="prev" width="35" height="35">
            </a>
            <a href="javascript:void(0);" class="arrow-a next">
                <img class="arrow" id="ar" src={% static "img/arrowr.png" %} alt="next" width="35" height="35">
            </a>
        </div>
    </div>
</div>

{#分页#}
<div class="fenye_bg">
    {% for foo in goods_list %}
        <div class="l_1">
            <div class="l_1_70">
                <a href="good_detail_page?id={{ foo.id }}"><img class="img_70" src="{{ MEDIA_URL }}{{ foo.img }}"></a>
            </div>
            <div class="l_1_15_txt">
                <a class="list_text" href="/">{{ foo.name }}</a>
            </div>
            <div class="bg_15"><h3 class="l_1_15">￥{{ foo.price }}</h3></div>
        </div>
    {% endfor %}
</div>



{#尾部#}
<div class="div_weibu">
    <div class="div_weibu_56">
        <div class="div_weibu_56_70">
            <div class="div_weibu_56_70_1">
                <div class="tiaoweizhi">
                    <div class="div_51_51_1"></div>
                    <div class="div_130_51"><h4 class="h4_1"><font color="white">30天无忧退换货</font></h4></div>
                </div>
            </div>
            <div class="div_weibu_56_70_2">
                <div class="tiaoweizhi">
                    <div class="div_51_51_2"></div>
                    <div class="div_130_51"><h4 class="h4_1"><font color="white">30天无忧退换货</font></h4></div>
                </div>
            </div>
            <div class="div_weibu_56_70_3">
                <div class="tiaoweizhi">
                    <div class="div_51_51_3"></div>
                    <div class="div_130_51"><h4 class="h4_1"><font color="white">30天无忧退换货</font></h4></div>
                </div>
            </div>
        </div>
    </div>
    <div class="div_weibu_44">
        <div class="div_weibu_zhong">
            <font color="#999"> 关于我们&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp帮助中心&nbsp&nbsp&nbsp
                |&nbsp&nbsp&nbsp售后服务&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp配送与验收&nbsp&nbsp&nbsp|
                &nbsp&nbsp&nbsp商务合作&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp企业采购&nbsp&nbsp&nbsp
                |&nbsp&nbsp&nbsp开放平台&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp搜索推荐&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp
                友情链接</font>
        </div>
        <div class="div_weibu_zhong2">
        </div>
    </div>
</div>


<script type="text/javascript" src="{% static "js/jquery/jquery-3.3.1.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/unslider.min.js" %}"></script>
<script type="text/javascript">

  
    $(document).ready(function (e) {
        var progress = $(".progress"), li_width = $("#banner li").length;
        var unslider = $('#banner').unslider({
                dots: true,
                complete: function (index) {    //自己添加的，官方没有
                    progress.animate({"width": (100 / li_width) * (index + 1) + "%"});
                }
            }),
            data = unslider.data('unslider');
        $('.arrow-a').click(function () {
            var fn = this.className.split(' ')[1];
            data[fn]();
        });
    });


</script>

</body>
</html>

6.发布页面设计

发布页面效果图



发布页面代码

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>issue_page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="{% static "css/user_center_last.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/center_head.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/user_center.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/layui/css/layui.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/issue_page.css" %}"/>
</head>

<body style="height: 200%">
{#头部背景#}
<div class="head_blue">
    {#头部中部分70%#}
    <div class="head_middle">
        {#头部中间商标背景div#}
        <div class="head_brand">
            {#头部中间商标#}
            <div>
                <a class="head_brand_middle" href="#"></a>
            </div>
        </div>
        {#头部首页#} <a id="home_page" href="index">首页</a>
        {#头部淘宝#} <a id="home_taobao" href="https://www.tmall.com/">淘宝</a>
        {#头部拼多多#} <a id="home_pinduoduo" href="https://www.pinduoduo.com">拼多多</a>
        <div id="home_blank" href="/"></div>
        {% if nick_name == None %}
            {#头部用户#} <a id="home_user" href="register_page">注册</a>
            {#头部退出#} <a id="home_quit" href="login_page">登录</a>
        {% else %}
            {#头部用户#} <a id="home_user" href="user_center">{{ nick_name }}</a>
            {#头部退出#} <a id="home_quit" href="logout">退出</a>
        {% endif %}
    </div>
</div>
{#上部导航栏发布二手物品#}
<div class="issue_second_gooods_bg div_in_shuiping">
    <div class="issue_second_gooods div_in_chuizhi">
        <div class="bg_70 div_in_juzhong">
            <a class="issue_second_gooods_white_text">
                发布二手物品
            </a>
        </div>
    </div>
</div>
<form class="layui-form" id="goods_form" enctype="multipart/form-data">
    <div class="issue_big_bg_middle div_in_shuiping">
        <div class="issue_big_bg div_in_juzhong">
            <div class="with_90">
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input id="action_show_goods" type="file" name="file_img">
                <div class="issue_img_bg">
                    <img id="img_show" src="{% static "img/1.JPG" %}">
                </div>
                {#               商品名称那一栏#}
                <div class="layui-form-item input-line">
                    <label class="layui-form-label">商品名称</label>
                    <div class="layui-input-inline" style="width: 390px;">
                        <input id="goods_name" type="text" name="goods_name" autocomplete="off" placeholder="请输入商品名称"
                               class="layui-input goods-title">
                    </div>
                    <div class="layui-form-mid layui-word-aux">14个字以内</div>
                </div>
                {#商品详情那一栏#}
                <div class="layui-form-item layui-form-text input-line">
                    <label class="layui-form-label good-description">商品详情</label>
                    <div class="layui-input-block">
                        <textarea id="goods_detal" name="goods_detal" placeholder="请输入商品详情"
                                  class="layui-textarea goods-des"></textarea>
                    </div>
                </div>
                {#价格那一栏#}
                <div class="layui-form-item input-line" id="price">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-inline">
                        <input id="goods_price" type="text" name="goods_price" autocomplete="off" placeholder="请输入价格"
                               class="layui-input price">
                    </div>
                    <div class="layui-form-mid layui-word-aux">元　　　</div>
                </div>
                {#                分类那一栏#}
                <div class="layui-form-item input-line">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline">
                        <select name="categorys" id="categorys">
                            <option value="">请选择分类</option>
                            {#下拉选择默认属性#}
                            <option data-cid="1" value="1" >手机</option>

                            <option data-cid="2" value="2">电脑</option>

                            <option data-cid="4" value="4">配件</option>

                            <option data-cid="5" value="5">电器</option>

                            <option data-cid="6" value="6" selected="selected">书籍</option>

                            <option data-cid="7" value="7">娱乐</option>

                            <option data-cid="8" value="8">运动</option>

                            <option data-cid="9" value="9">代步</option>

                        </select>
                    </div>
                </div>

                {#                交易方式那一栏#}

                <div class="layui-form-item input-line">
                    <label class="layui-form-label">交易方式</label>
                    <div class="layui-input-block">
                        <input type="radio" class="buyMethod" name="transactionMode" value="1" title="同校交易">
                        <div class="layui-unselect layui-form-radio"><i
                                class="layui-anim layui-icon"></i><span>同校交易</span></div>
                        <input type="radio" class="buyMethod" name="transactionMode" value="2" title="同城交易">
                        <div class="layui-unselect layui-form-radio"><i
                                class="layui-anim layui-icon"></i><span>同城交易</span></div>
                        <input type="radio" class="buyMethod" name="transactionMode" value="3" title="快递交易"
                               checked="">
                        <div class="layui-unselect layui-form-radio layui-form-radioed"><i
                                class="layui-anim layui-icon"></i><span>快递交易</span></div>
                    </div>
                </div>

                {#                交易地址#}
                <div class="layui-form-item input-line" id="address">
                    <label class="layui-form-label">交易地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" autocomplete="off" placeholder="请输入交易地址"
                               class="layui-input goods-address">
                    </div>
                </div>
                {#                手机号#}
                <div class="layui-form-item input-line" id="phoneNumber">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline">
                        <input id="pho_num" type="text" name="pho_num" autocomplete="off" placeholder="请输入手机号"
                               class="layui-input phone-number">
                    </div>
                    <label class="layui-form-label">QQ号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="qq_num" autocomplete="off" placeholder="请输入QQ号"
                               class="layui-input qq-number">
                    </div>
                </div>
                <div class="layui-form-item input-line" id="phoneNumber">
                    <label class="layui-form-label">微信号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="wechat_num" autocomplete="off" placeholder="请输入微信号"
                               class="layui-input wx-number">
                    </div>
                </div>
                {#                按钮#}

                <button type="button" onclick="issue()" class="layui-btn submit" id="button_act">确认发布</button>

            </div>
        </div>
    </div>
</form>

<div class="div_weibu1">
    <div class="div_weibu_56">
        <div class="div_weibu_56_70">
            <div class="div_weibu_56_70_1">
                <div class="tiaoweizhi">
                    <div class="div_51_51_1"></div>
                    <div class="div_130_51"><h4 class="h4_1"><font color="white">30天无忧退换货</font></h4></div>
                </div>
            </div>
            <div class="div_weibu_56_70_2">
                <div class="tiaoweizhi">
                    <div class="div_51_51_2"></div>
                    <div class="div_130_51"><h4 class="h4_1"><font color="white">30天无忧退换货</font></h4></div>
                </div>
            </div>
            <div class="div_weibu_56_70_3">
                <div class="tiaoweizhi">
                    <div class="div_51_51_3"></div>
                    <div class="div_130_51"><h4 class="h4_1"><font color="white">30天无忧退换货</font></h4></div>
                </div>
            </div>
        </div>
    </div>
    <div class="div_weibu_44">
        <div class="div_weibu_zhong">
            <font color="#999"> 关于我们&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp帮助中心&nbsp&nbsp&nbsp
                |&nbsp&nbsp&nbsp售后服务&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp配送与验收&nbsp&nbsp&nbsp|
                &nbsp&nbsp&nbsp商务合作&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp企业采购&nbsp&nbsp&nbsp
                |&nbsp&nbsp&nbsp开放平台&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp搜索推荐&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp
                友情链接</font>
        </div>
        <div class="div_weibu_zhong2">
        </div>
    </div>
</div>


<script src="{% static "js/jquery/jquery-3.3.1.min.js" %}"></script>
<script src="{% static "css/layui/layui.js" %}"></script>
<script>
    {% comment %}    ;!function () {
            //无需再执行layui.use()方法加载模块，直接使用即可
            var form = layui.form
                , layer = layui.layer;

            //…
        }();{% endcomment %}


    $(function () {
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer
                , form = layui.form;
            form.render();
        });
        $("#action_show_goods").change(function () {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#img_show");
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src', dataURL);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("preview");
                // 两个坑:
                // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
                // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

            }
        });
    });
</script>
</body>
</html>

7.用户中心页面设计

用户中心页面实现效果



用户中心页面代码

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>issue_page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="{% static "css/user_center_last.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/center_head.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/user_center.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/layui/css/layui.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/issue_page.css" %}"/>
</head>

<body style="height: 100%">
{#头部背景#}
<div class="head_blue">
    {#头部中部分70%#}
    <div class="head_middle">
        {#头部中间商标背景div#}
        <div class="head_brand">
            {#头部中间商标#}
            <div>
                <a class="head_brand_middle" href="#"></a>
            </div>
        </div>
        {#头部首页#} <a id="home_page" href="index">首页</a>
        {#头部淘宝#} <a id="home_taobao" href="https://www.tmall.com/">淘宝</a>
        {#头部拼多多#} <a id="home_pinduoduo" href="https://www.pinduoduo.com">拼多多</a>
        <div id="home_blank" href="/"></div>
        {% if nick_name == None %}
            {#头部用户#} <a id="home_user" href="register_page">注册</a>
            {#头部退出#} <a id="home_quit" href="login_page">登录</a>
        {% else %}
            {#头部用户#} <a id="home_user" href="user_center">{{ nick_name }}</a>
            {#头部退出#} <a id="home_quit" href="logout">退出</a>
        {% endif %}
    </div>
</div>

<div class="user_middle_big_bg ">
    <div class="user_lift">
        <div class="user_lift_middle ">
            <div class="user_lift_middle_img">
                <img id="img_show_1" src="{% static "img/99.jpg" %}">
            </div>
            <div class="name_show div_in_juzhong">
                <a>{{ nick_name }}</a>
            </div>

            <div class="fun_act div_in_chuizhi">
                <div class="mokuai div_in_chuizhi">
                    <div class="left_img">
                        <img src="{% static "img/fabu.png" %}">
                    </div>
                    <div class="reft_text div_in_juzhong">
                        <div id="fun_1" style="cursor:pointer">我发布的</div>
                    </div>
                </div>
            </div>

            <div class="fun_act">
                <div class="mokuai div_in_chuizhi">
                    <div class="left_img">
                        <img src="{% static "img/love.png" %}">
                    </div>
                    <div class="reft_text div_in_juzhong">
                        <div id="fun_2" style="cursor:pointer">购物车</div>
                    </div>
                </div>
            </div>
            <div class="fun_act">
                <div class="mokuai div_in_chuizhi">
                    <div class="left_img">
                        <img src="{% static "img/info.png" %}">
                    </div>
                    <div class="reft_text div_in_juzhong">
                        <div id="fun_3" style="cursor:pointer">个人信息</div>
                    </div>
                </div>
            </div>
            <div class="fun_act">
                <div class="mokuai div_in_chuizhi">
                    <div class="left_img">
                        <img src="{% static "img/suggestion.png" %}">
                    </div>
                    <div class="reft_text div_in_juzhong">
                        <div id="fun_4" style="cursor:pointer">意见反馈</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="user_right">
        <div id="show_1">
            {#            我的发布#}
            {% for foo in issue_list %}
                <div class="show_1_1">
                    <div class="tou_20 div_in_chuizhi">
                        <a>{{ foo.create_time }}</a>
                    </div>
                    <div class="last_zuo div_in_juzhong">
                        <div class="last_zuo_bg">
                            <img src="{{ MEDIA_URL }}{{ foo.img }}">
                        </div>
                    </div>
                    <div class="last_middle">
                        <div class="last_middle_1">
                            <h2>{{ foo.name }}</h2>
                        </div>
                        <div class="last_middle_2">
                            <h2 style="float: left">￥</h2>
                            <div class="jiage">{{ foo.price }}</div>
                        </div>
                    </div>
                    <div class="last_you div_in_juzhong">
                        <button class="del_buttun" onclick="del_goods({{ foo.id }})" style="cursor:pointer">删除</button>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div id="show_2">
            {#            商品#}
            {% for foo in cart_list %}
                <div class="show_1_1">
                    <div class="tou_20 div_in_chuizhi">
                        <a>{{ foo.goods.create_time }}</a>
                    </div>
                    <div class="last_zuo div_in_juzhong">
                        <div class="last_zuo_bg">
                            <img src="{{ MEDIA_URL }}{{ foo.goods.img }}">
                        </div>
                    </div>
                    <div class="last_middle">
                        <div class="last_middle_1">
                            <h2>{{ foo.goods.name }}</h2>
                        </div>
                        <div class="last_middle_2">
                            <h2 style="float: left">￥</h2>
                            <div class="jiage">{{ foo.goods.price }}</div>
                        </div>
                    </div>
                    <div class="last_you div_in_juzhong">
                        <button class="del_buttun2" onclick="buy_good({{ foo.goods.id }})" style="cursor:pointer">立刻购买
                        </button>
                        <button class="del_buttun" onclick="del_cart({{ foo.goods.id }})" style="cursor:pointer">删除
                        </button>
                    </div>
                </div>
            {% endfor %}
            <button class="del_buttun3" onclick="buy_allgood({{ foo.goods.id }})" style="cursor:pointer">全部购买</button>

        </div>

        <div id="show_3" class="div_in_juzhong">
            <div class="show_3_bg">
                <div class="fir_flo">
                    <div class="touxiang_28 div_in_juzhong">
                        <a>头像</a>
                    </div>
                    <div class="touxiang_img">
                        <img id="img_show_2" src="{% static "img/working.png" %}">
                    </div>
                    <div class="chose_file div_in_chuizhi">
                        <input id="head_pic" type="file">
                    </div>
                </div>
                <div class="sec_flo">
                    <div class="nick_name div_in_juzhong">
                        <a>*昵称</a>
                    </div>
                    <div class="yonghuxinxi div_in_juzhong">
                        <input type="text" name="goods_name" autocomplete="off" placeholder="用户信息"
                               class="layui-input goods-title">
                    </div>
                    <div class="yonghu_last div_in_chuizhi">
                        <div class="layui-form-mid layui-word-aux">3-16位 汉字、数字、字母（大小写）、下划线组成</div>
                    </div>
                </div>
                <div class="thi_flo">
                    <div class="gexingqianming div_in_juzhong">
                        <a>个性签名</a>
                    </div>
                    <div class="last_90 div_in_chuizhi">
                        <input type="text" name="goods_name" autocomplete="off"
                               class="layui-input goods-title">
                    </div>
                </div>
                <div class="fou_flo">
                    <div class="gexingqianming div_in_juzhong">
                        <a>*性别</a>
                    </div>
                    <div class="last_90 div_in_chuizhi">
                        <form class="layui-form">
                            <div class="layui-input-inline sex-wrap">
                                <input type="radio" name="sex" value="男" title="男">
                                <div class="layui-unselect layui-form-radio"><i
                                        class="layui-anim layui-icon"></i><span>男</span></div>
                                <input type="radio" name="sex" value="女" title="女">
                                <div class="layui-unselect layui-form-radio"><i
                                        class="layui-anim layui-icon"></i><span>女</span></div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="wu_flo">
                <div class="gexingqianming div_in_juzhong">
                    <a>生日</a>
                </div>
                <div class="last_90 div_in_chuizhi">
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input class="layui-input birthday" type="date">
                        </div>
                    </div>
                </div>
            </div>
            <div class="six_flo">
                <div class="gexingqianming div_in_juzhong">
                    <a>所在地区</a>
                </div>
                <div class="last_901 div_in_chuizhi">
                    <input type="text" name="goods_name" autocomplete="off"
                           class="layui-input goods-title">
                </div>
            </div>
            <div class="sev_flo">
                <button class="buttun_save">保存修改</button>
            </div>
        </div>
    </div>
    <div id="show_4" class="div_in_juzhong">
        <div class="touch div_in_juzhong"><h1>有任何问题请联系开发人员：15957691113</h1></div>

    </div>
</div>

</div>



<script src="{% static "js/jquery/jquery-3.3.1.min.js" %}"></script>
<script src="{% static "css/layui/layui.js" %}"></script>
<script>
    $(document).ready(function () {
        $("#show_1").hide();
        $("#show_3").hide();
        $("#show_4").hide();
        $("#show_2").show();
        $("#fun_1").click(function () {
            $("#show_2").hide();
            $("#show_3").hide();
            $("#show_4").hide();
            $("#show_1").show();
        });
        $("#fun_2").click(function () {
            $("#show_1").hide();
            $("#show_3").hide();
            $("#show_4").hide();
            $("#show_2").show();
        });
        $("#fun_3").click(function () {
            $("#show_1").hide();
            $("#show_2").hide();
            $("#show_4").hide();
            $("#show_3").show();
        });
        $("#fun_4").click(function () {
            $("#show_1").hide();
            $("#show_3").hide();
            $("#show_2").hide();
            $("#show_4").show();
        });
    });





  
    $(function () {
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer
                , form = layui.form;
            form.render();
        });
        $("#head_pic").change(function () {
                var $file = $(this);
                var fileObj = $file[0];
                var windowURL = window.URL || window.webkitURL;
                var dataURL;
                var $img_1 = $("#img_show_1");
                var $img_2 = $("#img_show_2");
                if (fileObj && fileObj.files && fileObj.files[0]) {
                    dataURL = windowURL.createObjectURL(fileObj.files[0]);
                    $img_1.attr('src', dataURL);
                    $img_2.attr('src', dataURL);
                } else {
                    dataURL = $file.val();
                    var imgObj = document.getElementById("preview");
                    // 两个坑:
                    // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
                    // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
                    imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

                }
            }
        );
    });


</script>
</body>

</html>

8.详情页设计

详情页实现效果图



详情页代码

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>good_tetal_page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="{% static "css/user_center_last.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/center_head.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/banner.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/user_center.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/layui/css/layui.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/issue_page.css" %}"/>
</head>

<body style="height: 200%">
{#头部背景#}
<div class="head_blue">
    {#头部中部分70%#}
    <div class="head_middle">
        {#头部中间商标背景div#}
        <div class="head_brand">
            {#头部中间商标#}
            <div>
                <a class="head_brand_middle" href="#"></a>
            </div>
        </div>
        {#头部首页#} <a id="home_page" href="index">首页</a>
        {#头部淘宝#} <a id="home_taobao" href="https://www.tmall.com/">淘宝</a>
        {#头部拼多多#} <a id="home_pinduoduo" href="https://www.pinduoduo.com">拼多多</a>
        <div id="home_blank" href="/"></div>
        {% if nick_name == None %}
            {#头部用户#} <a id="home_user" href="register_page">注册</a>
            {#头部退出#} <a id="home_quit" href="login_page">登录</a>
        {% else %}
            {#头部用户#} <a id="home_user" href="user_center">{{ nick_name }}</a>
            {#头部退出#} <a id="home_quit" href="logout">退出</a>
        {% endif %}
    </div>
</div>
{#导航栏下方发布二手物品这一栏目#}
{#最大的一块的背景#}
<div class="issue_big_bg_white div_in_shuiping">
    <div class="issue_big_bg layui-form layui-form-pane div_in_juzhong">
        <div class="tiaozheng">
            <div class="shang_10 div_in_chuizhi">
                <p>发布于：{{ goods_detail.create_time }}</p>
            </div>
            <div class="zuo_40">
                <img src="{{ MEDIA_URL }}{{ goods_detail.img }}">
            </div>
            <div class="you_60">
                <div class="basic_class div_in_chuizhi">
                    <h2>{{ goods_detail.name }}</h2>
                </div>
                <div class="you_first div_in_chuizhi">
                    <p class="goods_text">价格</p>
                    <p class="price_red">￥{{ goods_detail.price }}</p>
                </div>
                <div class="you_first div_in_chuizhi">
                    <p class="goods_text">交易方式</p>
                    <p class="deal_function1">
                        {% if goods_detail.trading == 1 %}
                            校园内交易
                        {% endif %}
                        {% if goods_detail.trading == 2 %}
                            同城交易
                        {% endif %}
                        {% if goods_detail.trading == 3 %}
                            快递交易
                        {% endif %}
                    </p>
                </div>
                <div class="you_first div_in_chuizhi">
                    <p class="goods_text">卖家联系方式</p>
                    <p class="deal_function">QQ号码:</p>
                    <text>{{ goods_detail.master_qqnum }}</text>
                </div>
                <div class="you_first div_in_chuizhi">
                    <p class="wechat_num">微信号码:</p>
                    <text>{{ goods_detail.master_wechatnum }}</text>
                </div>
                <div class="you_first div_in_chuizhi">
                    <p class="wechat_num">电话号码:</p>
                    <text>{{ goods_detail.master_pho }}</text>
                </div>
                <div class="bg_sum div_in_juzhong">
                    <button class="cart_button" onclick="join_cart({{ goods_detail.id }})">加入购物车</button>
                </div>
            </div>
            <div class="erhuo_bg">
                <div class="erhuozuo div_in_juzhong">
                    <p class="erhuomiaoshu">二货描述</p>
                </div>
                <div class="detal_bg div_in_juzhong">
                    <div class="detal_bg_middle">
                        <text class="detal">{{ goods_detail.detal }}</text>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="div_weibu" style="margin-top: 0px">
    <div class="div_weibu_56">
        <div class="div_weibu_56_70">
            <div class="div_weibu_56_70_1">
                <div class="tiaoweizhi">
                    <div class="div_51_51_1"></div>
                    <div class="div_130_51"><h4 class="h4_1"><font color="white">30天无忧退换货</font></h4></div>
                </div>
            </div>
            <div class="div_weibu_56_70_2">
                <div class="tiaoweizhi">
                    <div class="div_51_51_2"></div>
                    <div class="div_130_51"><h4 class="h4_1"><font color="white">30天无忧退换货</font></h4></div>
                </div>
            </div>
            <div class="div_weibu_56_70_3">
                <div class="tiaoweizhi">
                    <div class="div_51_51_3"></div>
                    <div class="div_130_51"><h4 class="h4_1"><font color="white">30天无忧退换货</font></h4></div>
                </div>
            </div>
        </div>
    </div>
    <div class="div_weibu_44">
        <div class="div_weibu_zhong">
            <font color="#999"> 关于我们&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp帮助中心&nbsp&nbsp&nbsp
                |&nbsp&nbsp&nbsp售后服务&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp配送与验收&nbsp&nbsp&nbsp|
                &nbsp&nbsp&nbsp商务合作&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp企业采购&nbsp&nbsp&nbsp
                |&nbsp&nbsp&nbsp开放平台&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp搜索推荐&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp
                友情链接</font>
        </div>
        <div class="div_weibu_zhong2">
        </div>
    </div>
</div>
<script type="text/javascript" src="{% static "js/jquery/jquery-3.3.1.min.js" %}"></script>
<script type="text/javascript" src="{% static "css/layui/layui.all.js" %}"></script>
</body>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,902评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,037评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,978评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,867评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,763评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,104评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,565评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,236评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,379评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,034评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,637评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2赞 341

推荐阅读更多精彩内容

  • 健身房有六大类训练器械？110张Gif动作图讲给你~
    目录导读： （强迫症福利，再也不担心不会读某个字啦~） 大家看到一种健身器材，都会想，这个器材是干嘛的？能做什么动...
    健身干货分享君阅读 8,533评论 0赞 11
  • 你
    初次见面 羞红了脸 梦里梦外 全都是你 以后日子 欲言又止 细细思念
    不留心阅读 93评论 0赞 5
  • 冷风快报
    一、发源链与LAEX交易所达成战略合作，共创区块链生态。LAEX老挝数字资产交易所为老挝最大的数字资产交易所，老...
    冷风说币阅读 139评论 0赞 0
  • 我们来生还会相见吗？
    我们来生还会相见吗？ 曾经看过一篇微文，是关于“如果有来生，你还会嫁给现在的丈夫吗？”的话题，看了一些网友的留言，...
    简木易阅读 497评论 0赞 0
  • 幸福
    能让老人觉得生活无压力，能让孩子觉得成长很幸福，能让爱人觉得很安全，能让事业很顺利，能让朋友觉得很靠谱，能让合作伙...
    已经没有当年潇洒阅读 232评论 0赞 0