网上书城项目分析及前端页面

  • 项目分析
    • 背景/价值
    • 需求/功能
      • 需求
      • 功能划分
  • 前端页面实现
    • 登录and注册
      • 效果
      • 代码
    • 主页面
      • 效果
      • 代码
    • 搜索页面
      • 效果
      • 代码
    • 购物车页面
      • 效果
      • 代码
  • 思维导图总结

项目分析

背景/价值

背景
个人书店的业务管理使用
价值
方便个人书店的推广
角色
老板
消费者
思维导图

需求/功能

需求

门户

包括前端首页
（书籍分类，菜单（根据登录的用户id判断权限显示），书籍搜索）
登录
注册
购物车

后台
老板（权限）

上架新书跟上时代
下架旧书违禁，淘汰及特殊情况的书
对客户下单的信息管理发货

消费者（权限）

         查看订单的状态实时跟进货物的状态撤销订单

功能划分

后台
老板（权限）

  • 书籍管理
    增加
    未上架书籍
    （查询，上架，修改，图片上传）
    已上架
    （书籍列表，下架）
    下架列表
  • 订单管理
    未发货
    （订单查询，发货）
    已发货
    （订单查询）
    已签收
    （订单查询）
    订单项
    （订单查询，搜索订单（订单号））

消费者（权限）

  • 订单管理
    未发货
    （订单查询，退款（取消订单））
    已发货
    （订单查询，确认收货）
    已签收
    （订单查询）

门户

  • 登录
  • 注册
  • 书籍搜索
  • 书籍分类
  • 新书上架
  • 热销书籍
  • 购物车
    （加入购物车，查看购物车，编辑，删除，清空，结算）

前端页面实现

这里的前端页面是用的bootstrap写的
所以为了节省做项目的时间，我们可以直接在它的官网找实例，然后做出改动。

登录and注册

登录和注册比较简单，而且只需要稍作改动，所以放在一起讲了。

效果

首先看一下最后的效果

代码

我是参照的bootstrap官网的模板，然后调整宽度，外边距，布局调成自己想要的页面
导css文件和js文件，这里记得检查一下路径

<link rel="stylesheet" href="css/bootstrap.min.css" >
<script src="js/bootstrap.min.js" ></script>

样式

<style>.form-signin{width: 300px;position: relative;top:100px;left: 50%;margin-left: -200px;}</style>

主体
主要是使用的bootstrap的form组件
注册是在这基础上稍作修改，我就不再将修改的代码放上来了

<form class="form-signin" action="" method="post"><h1 class="h3 mb-3 font-weight-normal text-center">登录</h1><br/><input type="text" id="uname" name="uname" class="form-control" placeholder="用户名" required autofocus><br/><input type="password" id="pwd" name="pwd" class="form-control" placeholder="密码" required><input type="checkbox" value="remember-me"> Remember me<br/><br/><button class="btn btn-lg btn-info btn-block" type="submit">登录</button><p class="mt-5 mb-3 text-muted">&copy; 2017-2020</p>
</form>

主页面

效果

代码

主要用到栅格布局的容器，偏移
列表组（左侧菜单）：jquery的选择器
调整宽高度，和定位，上下层（搜索框）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>首页</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="css/sy.css" /><script src="js/jquery-3.3.1.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript">$(function() {$(".c-category li").eq(0).addClass('bg-color1');$(".c-category li:gt(0)").addClass('bg-color2');$(".c-category li:gt(0)").hover(function() {$(this).addClass('bg-opacity');}, function() {$(this).removeClass('bg-opacity');});})</script></head><body><div class="container"><!-- 横幅 --><div class="row"><div class="col-sm-4">您好，欢迎来到网上书城！</div><div class="col-sm-4 col-sm-offset-4"><a href="#">登录</a> | <a href="#">注册</a> | <a href="#">我的购物车</b> | <a href="#">网站首页</a></div></div><!-- 搜索栏 --><div class="row"><div class="col-sm-12 search-parent"><!-- 本来这里应该放一张背景图的 --><div class="search"></div><input type="text" id="book_name" name="name" value="" /><button type="button" class="btn btn-danger">搜索</button></div></div><!-- 主内容区 --><div class="row content"><div class="col-sm-3 l-content"><ul class="list-group c-category "><li class="list-group-item" style="color: white;">书籍分类</li><li class="list-group-item">现代言情</li><li class="list-group-item">古代言情</li><li class="list-group-item">快穿</li><li class="list-group-item">玄幻</li><li class="list-group-item">重生</li><li class="list-group-item">惊悚</li><li class="list-group-item">其他</li><li class="list-group-item">快穿</li><li class="list-group-item">玄幻</li><li class="list-group-item">重生</li><li class="list-group-item">惊悚</li><li class="list-group-item">其他</li></ul></div><div class="col-sm-9 r-content"><!-- 广告 --><div class="guangao"><img src="./img/banner.png" class="img-thumbnail" alt="..."></div><!-- 新书上架 --><div class="news container"><div class="tip row"><img src="img/title_bj.png" /><h5 style="color: white;">新书上架</h5></div><div class="row book"><div class="col-sm-2"><img src="img/1.png" /><p>艾丁湖</p><b style="color: red;">￥12</b></div><div class="col-sm-2"><img src="img/1.png" /><p>艾丁湖</p><b style="color: red;">￥12</b></div><div class="col-sm-2"><img src="img/1.png" /><p>艾丁湖</p><b style="color: red;">￥12</b></div><div class="col-sm-2"><img src="img/1.png" /><p>艾丁湖</p><b style="color: red;">￥12</b></div><div class="col-sm-2"><img src="img/1.png" /><p>艾丁湖</p><b style="color: red;">￥12</b></div><div class="col-sm-2"><img src="img/1.png" /><p>艾丁湖</p><b style="color: red;">￥12</b></div></div></div><!-- 热销 --><div class="hots container"><div class="tip row"><img src="img/title_bj.png" /><h5 style="color: white;">热销图书</h5></div><div class="row book"><div class="col-sm-2"><img src="img/1.png" /><p>艾丁湖</p><b style="color: red;">￥12</b></div><div class="col-sm-2"><img src="img/1.png" /><p>艾丁湖</p><b style="color: red;">￥12</b></div><div class="col-sm-2"><img src="img/1.png" /><p>艾丁湖</p><b style="color: red;">￥12</b></div><div class="col-sm-2"><img src="img/1.png" /><p>艾丁湖</p><b style="color: red;">￥12</b></div><div class="col-sm-2"><img src="img/1.png" /><p>艾丁湖</p><b style="color: red;">￥12</b></div><div class="col-sm-2"><img src="img/1.png" /><p>艾丁湖</p><b style="color: red;">￥12</b></div></div></div></div></div><!-- 底部版权 --><div class="row"><div class="col-sm-12 text-center">Copyright 2020 西米露，版权所有</div></div></div></body>
</html>

自定义css文件

*{margin: 0;padding: 0;
}
/* 搜索栏 start */
.search-parent{position: relative;height: 100px;}
.search{position: absolute;background-color: #DCA7A7;width: 1140px;height: 90px;
}
.search-parent input{position: absolute;top: 30px;left: 400px;z-index: 2;
}
.search-parent button{position: absolute;top: 27px;left: 575px;z-index: 2;
}
/* 搜索栏 end *//* 主内容区 start*/.bg-color1{background-color: #DCA7A7 ;
}
.bg-color2{background-color: #F7E4E4 ;
}
.bg-opacity{opacity: 0.3;
}
.c-category li{cursor: pointer;text-align: center;
}.guangao>img{width: 850px;
}
.l-content{padding-right: 0;
}
.r-content{padding: 0;
}.tip{position: relative;height: 40px;width: 725px;background-color: #F7F6F6;
}
.tip>img{position: absolute;
}
.tip>h5{position: absolute;left: 20px;
}.book img{width: 80px;height: 110px;
}
.book p{margin-bottom: 0;
}
.book>div{padding: 0;
}.shop-table-tab{margin: 0 110px;
}
/* 主内容区 end*/

搜索页面

效果

代码

跟主页面差不多，就是将中间部分改动一点
栅格布局

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>首页</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="css/sy.css" /></head><body><div class="container"><!-- 横幅 --><div class="row"><div class="col-sm-4">您好，欢迎来到网上书城！</div><div class="col-sm-4 col-sm-offset-4"><a href="#">登录</a> | <a href="#">注册</a> | <a href="#">我的购物车</b> | <a href="#">网站首页</a></div></div><!-- 搜索栏 --><div class="row"><div class="col-sm-12 search-parent"><!-- 本来这里应该放一张背景图的 --><div class="search"></div><input type="text" id="book_name" name="name" value="" /><button type="button" class="btn btn-danger">搜索</button></div></div><!-- 主内容区 --><div class="row content"><div class="col-sm-3 l-content"><ul class="list-group c-category "><li class="list-group-item" style="color: white;">书籍分类</li><li class="list-group-item">现代言情</li><li class="list-group-item">古代言情</li><li class="list-group-item">快穿</li><li class="list-group-item">玄幻</li><li class="list-group-item">重生</li><li class="list-group-item">惊悚</li><li class="list-group-item">其他</li><li class="list-group-item">快穿</li><li class="list-group-item">玄幻</li><li class="list-group-item">重生</li><li class="list-group-item">惊悚</li><li class="list-group-item">其他</li></ul></div><div class="col-sm-9"><div class="media"><img src="img/2.png" class="align-self-center mr-3" alt="..."><div class="media-body"><p>暗时计</p><p>作者：</p><p>价格：￥12</p><p>出版社：期望文学</p><p>简介：qqq</p><p><button class="btn btn-danger" style="width: 150px;">加入购物车</button><button class="btn btn-danger" style="width: 150px;">去结算</button></p></div>                         </div><div class="media"><img src="img/2.png" class="align-self-center mr-3" alt="..."><div class="media-body"><p>暗时计</p><p>作者：</p><p>价格：￥12</p><p>出版社：期望文学</p><p>简介：qqq</p><p><button class="btn btn-danger" style="width: 150px;">加入购物车</button><button class="btn btn-danger" style="width: 150px;">去结算</button></p></div>                       </div></div></div><!-- 底部版权 --><div class="row"><div class="col-sm-12 text-center">Copyright 2020 西米露，版权所有</div></div></div><script src="js/jquery-3.3.1.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript">$(function() {$(".c-category li").eq(0).addClass('bg-color1');$(".c-category li:gt(0)").addClass('bg-color2');$(".c-category li:gt(0)").hover(function() {$(this).addClass('bg-opacity');}, function() {$(this).removeClass('bg-opacity');});})</script></body>
</html>

购物车页面

效果

代码

依旧跟主页的分布差不多，主内容部分使用bootstrap的表格组件实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>首页</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="css/sy.css" /></head><body><div class="container"><!-- 横幅 --><div class="row"><div class="col-sm-4">您好，欢迎来到网上书城！</div><div class="col-sm-4 col-sm-offset-4"><a href="#">登录</a> | <a href="#">注册</a> | <a href="#">我的购物车</b> | <a href="#">网站首页</a></div></div><!-- 搜索栏 --><div class="row"><div class="col-sm-12 search-parent"><!-- 本来这里应该放一张背景图的 --><div class="search"></div><input type="text" id="book_name" name="name" value="" /><button type="button" class="btn btn-danger">搜索</button></div></div><!-- 主内容区 --><div class="row content"><div class="col-sm-3 l-content"><ul class="list-group c-category "><li class="list-group-item" style="color: white;">书籍分类</li><li class="list-group-item">现代言情</li><li class="list-group-item">古代言情</li><li class="list-group-item">快穿</li><li class="list-group-item">玄幻</li><li class="list-group-item">重生</li><li class="list-group-item">惊悚</li><li class="list-group-item">其他</li><li class="list-group-item">快穿</li><li class="list-group-item">玄幻</li><li class="list-group-item">重生</li><li class="list-group-item">惊悚</li><li class="list-group-item">其他</li></ul></div><div class="col-sm-9"><table class="table"><thead class="thead-dark"><tr style="background-color: papayawhip;"><th scope="col">书名</th><th scope="col">单价</th><th scope="col">数量</th><th scope="col">小计</th><th scope="col">操作</th></tr></thead><tbody><tr><td>solar</td><td>12.0</td><td>1</td><td>12.0</td><td><a href="#">删除</a>&nbsp;&nbsp;<a href="#">更新</a></td></tr><tr><td>solar</td><td>12.0</td><td>1</td><td>12.0</td><td><a href="#">删除</a>&nbsp;&nbsp;<a href="#">更新</a></td></tr><tr><td colspan="5"><div class="btn btn-danger" style="width: 200px;">清空购物车</div><div class="btn btn-danger shop-table-tab" style="width: 200px;">继续购物</div><div class="btn btn-danger" style="width: 200px;">去结算</div></td>  </tr></tbody></table></div></div><!-- 底部版权 --><div class="row"><div class="col-sm-12 text-center">Copyright 2020 西米露，版权所有</div></div></div><script src="js/jquery-3.3.1.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript">$(function() {$(".c-category li").eq(0).addClass('bg-color1');$(".c-category li:gt(0)").addClass('bg-color2');$(".c-category li:gt(0)").hover(function() {$(this).addClass('bg-opacity');}, function() {$(this).removeClass('bg-opacity');});})</script></body>
</html>

思维导图总结

网上书城项目分析及前端页面相关推荐

  1. 基于javaweb网上书城系统（前端+后端）

    一.系统简介 本项目采用eclipse工具开发,bootstrap+jsp+servlet+jquery技术编写,数据库采用的是mysql,navicat开发工具. 系统一共分为2个角色分别是:管理员 ...

  2. java前端项目经验_web前端页面项目经验总结

    项目时间:2016年4月5日--4月9日 项目名称:阿七果子园web前端页面 项目内容: 1.HTML5+CSS+JavaScript(banner+timer)+JQuery(small_banne ...

  3. 网上书城项目的需求分析、数据库表设计及前端界面的编写（项目进度一）

    转载请标明出处:https://blog.csdn.net/men_ma/article/details/106847165. 本文出自 不怕报错 就怕不报错的小猿猿 的博客 网上书城项目的需求分析. ...

  4. 如何把网上下载的前端页面在Spring Boot中跑起来（CSS，JavaScript，程序运行等路径设置）

    这个功能非常有用,估计99.99%的java web开发者都干过,本人是初学者,特写这个博客记录下! 方便本人以后查阅,方便以后进行投机取巧 这里使用thymeleaf模板引擎! 在网上下载了一个Bo ...

  5. 网上书城java负责_网上书城项目总结(servlet_jsp+javaBean)

    网上书城项目总结 1 项目大纲设计: 需求分析 系统设计 详细设计 权限设计 2 技术选型: Servlet+jsp+javaBean Listener+Filter+jstl+fileupload+ ...

  6. SSM+网上书城系统 毕业设计-附源码180919

    目  录 摘要 1 绪论 1.1 研究意义 1.2开发背景 1.3论文结构与章节安排 2网上书城系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2. ...

  7. 网上书城 springboot vue前后端分离

    网上书城 springboot vue前后端分离 文章目录 网上书城 springboot vue前后端分离 前言 一.运行截图 二.pom文件 1.引入库 总结 前言 基于springboot vu ...

  8. 网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能（项目进度四）

    网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能(项目进度四) 前言 需实现的目标(效果图) 书籍分类展示 新书上架展示 热销书籍展示 1.书籍分类展示(实现动态加载数据) 1.1 加载 ...

  9. 尚硅谷2022 javaweb网上书城

    想培训和学习的多多关注尚硅谷 尚硅谷官网 尚硅谷2022 javaweb网上书城视频 文档连接 代码地址-请看book-dev分支 环境准备 安装jdk1.8 安装idea 下载tomcat 登陆设置 ...

最新文章

  1. 《effective java》类和对象
  2. 使用css3实现瀑布流布局效果
  3. 算法(3)--leetcode-explore-learn-数据结构-数组1
  4. 实现option上下移动_Django实战2-自动化运维之配置管理-05：字典管理功能实现
  5. android h5选择图片上传,js-微信H5选择多张图片预览并上传（兼容ios，安卓，已测试）...
  6. Python字符串格式化--formate()的应用
  7. Android studio SweetAlert for Android
  8. 桌面虚拟化之应用程序的整合
  9. sharepoint 2007 无法自动跳转到default.aspx
  10. Android系统上使用ANMPP搭建Nginx+PHP+MySQL+FTP服务（以天猫魔盒TMB100A为例）搭建网站
  11. 基于单片机的智能饮水机控制系统设计（毕业设计资料）
  12. 用H5STEAM实现大华摄像头的WEB开发
  13. 中国社会为何多犬儒？
  14. html实体注册商标,html 注册商标，html 注册商标代码
  15. 杀毒软件需要开源吗？
  16. 读《霍乱时期的爱情》第一章有感
  17. Linux下同型号USB相机端口绑定
  18. mysql笔记（一）：Navicat for MySQL远程连接mysql服务报错的解决方法（1130、2509）
  19. 阿里云神龙团队拿下 TPCx-BB 排名第一的背后技术
  20. 学计算机专业的人,如何让别人明白“学习或从事计算机专业的人不一定会修电脑”，只是会秃头！...

热门文章

  1. CAD怎么去掉右上角的搜索及用户信息工具条
  2. 证件照怎么自己P图？证件照拍照攻略 记得收藏
  3. Ubuntu20.04 VSCode 配置C++环境及GTK+配置【纯个人总结用】
  4. xbox和微软是一个服务器吗,一个账号搞定：港服Xbox和Win10商店正式支持支付宝...
  5. html视频不播放视频教程,html无法播放视频怎么办
  6. RuntimeError: CUDA out of memory
  7. 函数周期表丨值丨数学函数系列
  8. 1.6 极限存在准则 两个重要极限
  9. 现在又出来一个数字经济的概念，听说下半年要火起来
  10. 什么是过拟合？出现原因？怎么解决？