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

最新推荐文章于 2023-06-09 14:00:00 发布

VIP文章西米露U

最新推荐文章于 2023-06-09 14:00:00 发布

阅读量5.4k

点赞数 9

分类专栏： easyui 文章标签： html bootstrap css

本文链接：https://blog.csdn.net/m0_46699799/article/details/107065169

版权

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

项目分析
前端页面实现
- 登录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=

最低0.47元/天解锁文章

西米露U

关注

9
点赞
踩
85

收藏

觉得还不错? 一键收藏
5
评论
网上书城项目分析及前端页面

网上书城项目分析及前端页面项目分析背景/价值需求/功能需求功能划分前端页面实现登录and注册效果代码主页面效果代码搜索页面效果代码购物车页面效果代码思维导图总结项目分析背景/价值背景个人书店的业务管理使用价值方便个人书店的推广角色老板消费者思维导图需求/功能需求门户包括前端首页（书籍分类，菜单（根据登录的用户id判断权限显示），书籍搜索）登录注册购物车后台老板（权限）上架新书跟上时代下架旧书违禁，淘汰及特殊情况的书对客户下单的信息管理发货
复制链接

扫一扫