【前端页面】二手书籍交易平台-源代码及说明文档

  • Post author:
  • Post category:其他


提示:一个完整的纯前端的二手交易平台代码(粗略版本)

代码在个人博客里面免费下,也通过了csdn的下载链接。




前言

《二手书籍交易平台》设计文档

主题:二手书籍交易平台




一、整个项目的说明



1、网站主题说明:

主题:二手书籍交易平台,汇集了包括各种类别的二手书籍;

导航栏目为以下模块:

首页,商品展示页,商品评价页,购物车,登录,注册,我的信息

各个模块介绍:

首页:商城的首页,主要展示热卖产品及分类;

商品展示页:展示商城的某个种类的所有书籍,如编程语言-Java开发、前端等;

商品评价页:有商品的明细及加入购物车,和商品评价详情;

购物车:显示我的购物车界面,能够进行结算、删除等操作;

登录:二手商城登录界面;

注册:二手商城注册界面;

我的信息:显示目前登录账户的个人信息;



2、站点结构说明:

主要站点结构如下

在这里插入图片描述

主要页面如下:

在这里插入图片描述

index.html:商城首页

gwc.html: 购物车页面;

list.html:商品详情页;

logo.html: 登录页面;

my.html: 个人信息页面;

pj.html:商品评价页面;

register.html:注册页面;

css结构如下:

在这里插入图片描述

base.css:项目基础样式

common.css:公共样式;

gwc.css:购物车页面样式;

index.css:首页页面样式;

list.css: 商品展示页面样式;

my.css: 个人信息页面样式;

pj.css:商品评价页面样式;

register.css:登录注册页面样式;



3、HTML结构分析

本项目的7个页面均遵循,各个模块的合理分布,通过注释等清晰辨别,提高了维护性,其次命名合理;具体如下图:

为首页的页面布局情况(部分)

在这里插入图片描述



4、页面效果图:

图4.1 首页效果图

在这里插入图片描述

图4.2 商品展示页效果图

在这里插入图片描述

图4.3 商品评价页效果图

在这里插入图片描述

图4.4 我的购物车页效果图

在这里插入图片描述

图4.5登录页面效果图 、注册页面效果图

在这里插入图片描述

4.7 个人信息页效果图

在这里插入图片描述



5、作品创新点:

商城总体很完整,页面设计清晰简约,也写了右侧导航条,引用于各个页面;项目我个人觉得的亮点是购物车页面,实现了结算和删除操作,均是通过js完成的。



二、代码下载及效果网页

实现网页:

点这里

后续完善后端

个人博客:

酒客小屋


csdn下载链接:

点这里



三、总结

前端课程的作业,后续完成的后端吧。菜鸡的作业,勿喷。



版权声明:本文为qq2423139092原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。