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

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

1. 概述

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

2.新建static文件

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


2.django二手交易网站前端设计_第1张图片

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

{% load staticfiles %}

3.注册页面设计

需要实现的效果图如下


2.django二手交易网站前端设计_第2张图片

注册页面代码

{% load staticfiles %}



    
    
    AdminLTE 2 | Registration Page
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    

    
    


{{ flag }}

{% csrf_token %}
我已经有账户 点击登录

4.登录页面设计

登录页面需要实现的效果


2.django二手交易网站前端设计_第3张图片

登录页面代码

{% load staticfiles %}



    
    
    AdminLTE 2 | Log in
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    















5.主页设计

主页要实现的效果


2.django二手交易网站前端设计_第4张图片

主页代码

{% load staticfiles %}



    tao_school_index
    
    
    
    
    



{#头部背景#}
{#头部中部分70%#}
{#头部中间商标背景div#}
{#头部中间商标#}
{#头部首页#} 首页 {#头部淘宝#} 淘宝 {#头部拼多多#} 拼多多 {#头部空白#}
{% if nick_name == None %} {#头部用户#} 注册 {#头部退出#} 登录 {% else %} {#头部用户#} {{ nick_name }} {#头部退出#} 退出 {% endif %}
{#第二条白色部分#}
{#第二条白色部分中间#}
{#筛选按钮#}
{#搜索#} 搜索
{#固定悬浮窗#} {#
#} {#首页轮播#} {#分页#}
{% for foo in goods_list %}

¥{{ foo.price }}

{% endfor %}
{#尾部#}

30天无忧退换货

30天无忧退换货

30天无忧退换货

关于我们   |   帮助中心    |   售后服务   |   配送与验收   |    商务合作   |   企业采购    |   开放平台   |   搜索推荐   |    友情链接

6.发布页面设计

发布页面效果图


2.django二手交易网站前端设计_第5张图片

发布页面代码

{% load staticfiles %}



    issue_page
    
    
    
    
    
    
    



{#头部背景#}
{#头部中部分70%#}
{#头部中间商标背景div#}
{#头部中间商标#}
{#头部首页#} 首页 {#头部淘宝#} 淘宝 {#头部拼多多#} 拼多多
{% if nick_name == None %} {#头部用户#} 注册 {#头部退出#} 登录 {% else %} {#头部用户#} {{ nick_name }} {#头部退出#} 退出 {% endif %}
{#上部导航栏发布二手物品#}
         
{# 商品名称那一栏#}
14个字以内
{#商品详情那一栏#}
{#价格那一栏#}
元   
{# 分类那一栏#}
{# 交易方式那一栏#}
同校交易
同城交易
快递交易
{# 交易地址#}
{# 手机号#}
{# 按钮#}

30天无忧退换货

30天无忧退换货

30天无忧退换货

关于我们   |   帮助中心    |   售后服务   |   配送与验收   |    商务合作   |   企业采购    |   开放平台   |   搜索推荐   |    友情链接

7.用户中心页面设计

用户中心页面实现效果


2.django二手交易网站前端设计_第6张图片

用户中心页面代码

{% load staticfiles %}



    issue_page
    
    
    
    
    
    
    



{#头部背景#}
{#头部中部分70%#}
{#头部中间商标背景div#}
{#头部中间商标#}
{#头部首页#} 首页 {#头部淘宝#} 淘宝 {#头部拼多多#} 拼多多
{% if nick_name == None %} {#头部用户#} 注册 {#头部退出#} 登录 {% else %} {#头部用户#} {{ nick_name }} {#头部退出#} 退出 {% endif %}
我发布的
购物车
个人信息
意见反馈
{# 我的发布#} {% for foo in issue_list %}

{{ foo.name }}

{{ foo.price }}
{% endfor %}
{# 商品#} {% for foo in cart_list %}

{{ foo.goods.name }}

{{ foo.goods.price }}
{% endfor %}
3-16位 汉字、数字、字母(大小写)、下划线组成

有任何问题请联系开发人员:15957691113

8.详情页设计

详情页实现效果图


2.django二手交易网站前端设计_第7张图片

详情页代码

{% load staticfiles %}



    good_tetal_page
    
    
    
    
    
    
    
    



{#头部背景#}
{#头部中部分70%#}
{#头部中间商标背景div#}
{#头部中间商标#}
{#头部首页#} 首页 {#头部淘宝#} 淘宝 {#头部拼多多#} 拼多多
{% if nick_name == None %} {#头部用户#} 注册 {#头部退出#} 登录 {% else %} {#头部用户#} {{ nick_name }} {#头部退出#} 退出 {% endif %}
{#导航栏下方发布二手物品这一栏目#} {#最大的一块的背景#}

发布于:{{ goods_detail.create_time }}

{{ goods_detail.name }}

价格

¥{{ goods_detail.price }}

交易方式

{% if goods_detail.trading == 1 %} 校园内交易 {% endif %} {% if goods_detail.trading == 2 %} 同城交易 {% endif %} {% if goods_detail.trading == 3 %} 快递交易 {% endif %}

卖家联系方式

QQ号码:

{{ goods_detail.master_qqnum }}

微信号码:

{{ goods_detail.master_wechatnum }}

电话号码:

{{ goods_detail.master_pho }}

二货描述

{{ goods_detail.detal }}

30天无忧退换货

30天无忧退换货

30天无忧退换货

关于我们   |   帮助中心    |   售后服务   |   配送与验收   |    商务合作   |   企业采购    |   开放平台   |   搜索推荐   |    友情链接

你可能感兴趣的:(2.django二手交易网站前端设计)