PC端天天生鲜页面实现

最新推荐文章于 2023-05-08 16:38:40 发布
最新推荐文章于 2023-05-08 16:38:40 发布
阅读量665 收藏 9
点赞数
分类专栏： 前端 文章标签： html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43844838/article/details/107449851
版权
该项目展示了PC端天天生鲜页面的实现过程，包括效果图、项目目录结构、准备工作、详细代码（css、js、html）、json数据以及使用js搭建的服务器。在实施中需要注意js和css的引入顺序，以及需在服务器环境下运行，通过node server.js启动服务器。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目的效果图

在这里插入图片描述

项目目录

│  index.html
│  server.js
│
├─css
│      main.css
│      reset.css
│
├─images
│  │  adv01.jpg
│  │  adv02.jpg
│  │  banner01.jpg
│  │  banner02.jpg
│  │  banner03.jpg
│  │  banner04.jpg
│  │  banner05.jpg
│  │  banner06.jpg
│  │  icons.png
│  │  logo.png
│  │  slide.jpg
│  │  slide02.jpg
│  │  slide03.jpg
│  │  slide04.jpg
│  │
│  └─goods
│          goods001.jpg
│          goods002.jpg
│          goods003.jpg
│          goods004.jpg
│          goods005.jpg
│          goods006.jpg
│          goods007.jpg
│          goods008.jpg
│          goods009.jpg
│          goods010.jpg
│          goods011.jpg
│          goods012.jpg
│          goods013.jpg
│          goods014.jpg
│          goods015.jpg
│          goods016.jpg
│          goods017.jpg
│          goods018.jpg
│          goods019.jpg
│          goods020.jpg
│          goods021.jpg
│
└─js
        date.js
        date.json
        jquery-1.12.4.js
        jquery-1.12.4.min.js
        slide.js

项目的准备

  1. 要有服务器的环境来做ajax
  2. slide.js:做幻灯片用的

项目代码

css

  1. main.css

    body{
	font-family: "Microsoft Yahei"
	font-size:14px;
}


/* 页面顶部的样式 */
.header_con{
	/*块标签默认为父级的宽度*/
	height:29px;
	background-color: #f7f7f7;
	border-bottom: 1px solid #ddd;
}


/* 内容*/
.header{
	width:1200px;
	height: 29px;
	margin:0px auto;
	/*background-color: gold;*/
	/*margin:0px auto;*/
}


.welcome{
	font-size:12px;
	color:#666;
	line-height: 29px;
}


.user_con{
	/*background-color: gold;*/
}


/*默认将欢迎信息隐藏*/
.user_info{
	display: none;
	font-size:12px;
	line-height:29px;
	color: #666;
}


.user_info em{
	color:#f80;
}


.login_btns li, .user_btns li{
	float:left;
	height: 29px;
}


.login_btns li a, .login_btns span, .user_btns a, .user_btns span{
	display: block;
	line-height:29px;
	font-size:12px;
	color:#666;
}


.login_btns span, .user_btns span{
	color:#cecece;
	margin:0px 10px;
}


/*响应事件*/
.login_btns a:hover, .user_btns a:hover{
	color:#ff8800;
}





/* 
	logo 搜索框  购物车 样式
*/
.center_con{
	width:1200px;
	height:115px;
	margin:0px auto;
	/*background-color: gold;*/
}


/* logo */
.logo{
	margin:29px 0px 0px 17px;
}


/*搜索框*/
.search_con{
	width:616px;
	height:38px;
	/*background-color: gold;*/
	margin:34px 0px 0px 124px;
	border:1px solid #37ab40;
	background: url(../images/icons.png) 10px 6px no-repeat;
}


/*input输入框*/
.search_con .input_txt{
	margin-left: 36px;
	width:480px;
	height: 38px;
	border:0px;
	/* 
		去掉input获取焦点时的框线
	*/
	outline: none;
}


/*搜索文字*/
.search_con .input_sub{
	width:100px;
	height:38px;
	background-color:#37ab40;
	border:0px;  /*不要input的边框*/
	font-size:14px;
	color:#fff;
	cursor:pointer;  /*设置鼠标形状*/
	outline: none;
}

.search_con .input_sub:hover{
	color:#000;
}


/*购物车*/
.chart_con{
	width:200px;
	height:40px;
	/*background-color: green;*/
	margin-top:34px;
}


.chart_link{
	width:158px;
	height:38px;
	border:1px solid #ddd;
	background:url(../images/icons.png) 15px -42px #f7f7f7 no-repeat;
	line-height: 38px;
	text-indent: 48px;
	color:#37ab40;

}


.chart_num{
	width:40px;
	height: 40px;
	background-color: #f80;
	text-align: center;
	line-height: 40px;
	color:#fff;
	font:bold 18px/40px "Microsoft Yahei";
}





/*主菜单*/
.main_menu_con{
	height:40px;
	border-bottom: 2px solid #39a93e;
}


/*菜单*/
.center_con02{
	width:1200px;
	height: 40px;
	/*background-color: gold;*/
	margin:0px auto;
	/*font-size:12px;*/
}


.center_con02 ul{
	/*帮助去掉首页左边的线*/
	float: left;  
	overflow: hidden;
}


/*商品分类*/
.center_con02 h2{
	float:left;
	width:200px;
	height: 40px;
	background-color: #39a93e;
	text-align: center;
	font:normal 14px/40px "Microsoft Yahei";
	color:#fff;
}


/*首页 手机生鲜 抽奖*/
.center_con02 li{
	height: 40px;
	float: left;
}


/*字*/
.center_con02 li a{
	display: block;  /*支持宽高*/
	height:14px;
	line-height: 14px;
	padding: 0px 20px;
	border-left: 1px solid #666;
	margin-top:13px;
	color:#666;
	margin-left: -1px; /*去掉首页左边的线*/
}

/* 字的响应事件*/
.center_con02 li a:hover{
	color: #f80;
}





/*主菜单下面的幻灯片和二级菜单和广告*/
.center_con03{
	width:1200px;
	height:270px;
	/*background-color: gold;*/
	margin:0px auto;
}


/*菜单ul*/
.sub_menu_con{
	width:200px;
	height:270px;
	/*background-color: green;*/
}

/*菜单列表*/
.sub_menu_con li{
	width:198px;
	height:44px;
	border:1px solid #eeeeee;
	border-top:0px;
	background:url(../images/icons.png) 175px -385px no-repeat ;
}


.sub_menu_con li a{
	display: block;
	height:44px;
	line-height: 44px;
	text-indent: 71px;
	/*font-size: 14px;  可以省略*/
	color:#333;
	background:url(../images/icons.png) 35px -90px no-repeat ;
}

.sub_menu_con li .icon02{
	background-position:35px -136px;

}

.sub_menu_con li .icon03{
	background-position:35px -186px;

}

.sub_menu_con li .icon04{
	background-position:35px -239px;

}

.sub_menu_con li .icon05{
	background-position:35px -288px;

}

.sub_menu_con li .icon06{
	background-position:35px -335px;

}

.sub_menu_con li a:hover{
	color:#f80;
}


.slide_con{
	width:760px;
	height:270px;
	/*background-color: pink;*/
	position: relative;   /* 相对定位*/
	overflow: hidden;  /*裁切超出的部分*/
}

.slide_con .slide_list{
	position: absolute;  /*绝对定位*/
	width:4560px;
	height:270px;
	left:0;    /*动起来的效果是用程序控制这里的left的值*/
	top:0;
}

.slide_con .slide_list li{
	position: absolute;
	float:left;
}

/*箭头*/
.prev, .next{
	position: absolute;  /*绝对定位*/
	width: 15px;
	height: 24px;
	background:url(../images/icons.png) left -450px no-repeat;
	left:0;
	top:123px;

	cursor:pointer;  /*设置鼠标形状 变成手*/
}

.prev{
	left:11px;
}

.next{
	left:736px;
	background-position: left -500px;
}

/*点*/
.points{
	/*定位后就没有width=100%的属性了*/
	position: absolute;
	width: 100%;
	/*background-color: green;*/
	height:11px;
	left:0;
	bottom:9px;
	font-size:0;
	text-align: center;
}

.points li{
	/*行内块有间隙  要用父级font-size来改*/
	display: inline-block;
	width:11px;
	height:11px;
	background-color: #9f9f9f;
	margin:0 5px;
	border-radius: 50%;   /*变圆*/
	cursor:pointer;
}

.points .active{
	background-color: #cecece;
}


.advs{
	width:240px;
	height:270px;
	background-color: lightgreen;
}

/*
	有的浏览器中图片会出现3px间隔的bug  
	解决方法: 将img转成block
*/
.advs img{
	display: block;
}





/*食品展示区*/
/*水果*/
.common_model{
	width:1200px;
	height:337px;
	margin:20px auto 0;
	/*background-color: gold;*/
}


.common_title_con{
	height: 35px;
	border-bottom: 2px solid #42ad46;
	/*background-color: green;*/
}

.common_title_con h3{
	float: left;
	font:bold 16px/35px "Microsoft Yahei";
	color:#37ab40;

}

.common_title_con ul{
	float:left;
	height:12px;
	border-left:1px solid #666;
	margin:12px 0 0 20px;
}

.common_title_con li{
	float:left;
	line-height: 12px;
	margin-left: 15px;
}

.common_title_con li a{
	font-size:12px;
	line-height: 12px;
	color:#666;
}

.common_title_con li a:hover{
	color:#f80;
}

.common_title_con .more{
	float: right;
	/*line-height: 35px;*/
	font:normal 12px/35px "Microsoft Yahei";
	color:#666;
}

.common_title_con .more:hover{
	color:#f80;
}


/*banner*/
.goods_banner{
	width:200px;
	height:300px;
}

.goods_list{
	width:1000px;
	height: 300px;
}

.goods_list li{
	width:249px;
	height: 299px;
	border-right: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	float:left;
}

.goods_list li h4{
	line-height: 50px;
	text-align: center;
	font:normal 14px/50px "Microsoft Yahei";
	color:#666;
}

.goods_list li a{
	display: block;
	width:180px;
	height: 180px;
	margin:0 auto 0;
}

.goods_list li .price{
	font:bold 20px/50px "Microsoft Yahei";
	color:#c40000;
	text-align: center;
	/*height: 50px;*/
	margin-top:20px;
}





/*版权信息*/
.footer{
	border-top:2px solid #4ab14e;
	margin: 30px 0 40px;
	text-align: center;
}

.footer ul li{
	display: inline;
}

.footer_link{
	margin-top: 38px;
}

.footer_link a{
	color:#4e4e4e;
	font-size:12px;
}

.footer_link span{
	color:#4e4e4e;
	font-size:12px;
	padding:0 10px;
}

.footer_link a:hover{
	color:#f80;
}

.footer p{
	margin-top:14px;
	font-size: 12px;
}

  2. reset.css

    /* 将有格式的标签清除格式 */

/* 将标签默认的间距设为0 */
body, p, h1, h2, h3, h4, h5, h6, ul, dl, dt,form, input{
	margin: 0px;
	padding: 0px;
}


/* 
	清除ul的小圆点  ol也有，如果用就加 
*/
ul{
	list-style: none;
}


/* 去掉默认的下划线 */
a{
	text-decoration: none;
}


/* 去掉倾斜 */
em{
	font-style: normal;
}


/* 
	在ie中图片做链接会有一个默认的边框  去掉它
*/
img{
	border:0px;
}


/* 
	去掉默认的大小  -- 让h标签继承body的font-size的设置 
*/
h1, h2, h3, h4, h5, h6{
	font-size:100%;
}


/* 
	清除浮动、解决margin-top的塌陷 
*/
.clearfix:before, .clearfix:after{
	content: "";
	display: table;
}

.clearfix:after{
	clear:both;
}

.clearfix{
	/* ie的bug*/
	zoom:1;
}


/* 左浮动 */
.fl{
	float:left;
}
/* 右浮动 */
.fr{
	float: right;
}

js

  1. 幻灯片代码slide.js

    $(function(){

	// 获取每个幻灯片的li
	var $li = $('.slide_list li');

	// 幻灯片的个数
	var $len = $li.length;
	// alert($len)

	// 小圆点列表
	var $points_con = $('.points');

	// 上一个幻灯片的索引值  -- 要离开
	var $prevli = 0;
	// 这个幻灯片的索引值  -- 要显示
	var $nowli = 0;
	// 向前的按钮
	var $prev = $('.prev');
	// 向后的按钮
	var $next = $('.next');
	// 定时器
	var timer = null;
	// 幻灯片整体 + 箭头
	var $slide = $(".slide_con");
	// 防止用户暴力操作
	var ismove = false;
 

	// 将小圆点放进去
	for (var i=0;i<$len;i++){
		var $newli = $('<li>');
	
		if (i==0){
			$newli.addClass('active');
		}
		$newli.appendTo($points_con);
	}
		
	

	// 除了第一个其他的都移动到右边
	$li.not(':first').css({"left":760});

	// 获取每一个小圆点
	var $points = $('.points li');

	$points.click(function(){
		// 幻灯片的值等于点那个点的值
		$nowli = $(this).index();

		if ($nowli==$prevli){
			// 解决点同一个小圆点的问题
			return;
		}
		// 小圆点改变
		$(this).addClass("active").siblings().removeClass("active");
		// 做动画的函数
		move();
	});

	// 点击向前
	$prev.click(function(){
		// 阻止暴力操作
		if (ismove){
			return;
		}
		ismove = true;

		$nowli -- ;
		move();
		// 改变小圆点
		$points.eq($nowli).addClass("active").siblings().removeClass("active");
	});

	// 点击向后
	$next.click(function(){
		// alert(ismove)
		// 阻止暴力操作
		if (ismove){
			return;
		}
		ismove = true;
		autoplay();
	});

	// 幻灯片自动播放
	timer = setInterval(function(){
		autoplay();
	},2000);

	// 当鼠标放上去的时候停下来
	$slide.mouseenter(function(){
		clearInterval(timer);
	});
	// 鼠标移开
	$slide.mouseleave(function(){
		timer = setInterval(autoplay,2000);
	});

	function autoplay(){
		$nowli++;
		move();
		// 改变小圆点
		$points.eq($nowli).addClass("active").siblings().removeClass("active");

	};


	function move(){
		// console.log($nowli);
		// 第一章幻灯片往前的时候
		if ($nowli<0){
			// 当要过来的那个的索引值小于0的时候,要过来的那个索引值改为最大的索引值
			$nowli = $len-1;
			$prevli = 0;

			// 将要过来的放到左边去然后再从左边变成0
			$li.eq($nowli).css({"left":-760});
			$li.eq($nowli).animate({"left":0});
			// 要走的那个往后走
			$li.eq($prevli).animate({"left":760},function(){
				ismove = false;
			});
			$prevli=$nowli;
			return;
		}

		// 最后一张幻灯片往后的时候
		if ($nowli>$len-1){
			$nowli = 0;
			$prevli = $len-1;
			// 将要过来的放右边去然后再从右边变成0
			$li.eq($nowli).css({"left":760});
			$li.eq($nowli).animate({"left":0});
			// 要走的那个往前走
			$li.eq($prevli).animate({"left":-760},function(){
				ismove = false;
			});
			$prevli=$nowli;
			return;
		}

		if ($nowli>$prevli){
			// 从小到大点
			// 先把这个li 放到右边
			$li.eq($nowli).css({"left":760});
			// 将要走的那张移动到左边
			$li.eq($prevli).animate({"left":-760});
			// alert($prevli);
			// 替换走的那张li
			$prevli=$nowli;
		}else{
			// 点的点小于的时候  从左边过来 先要放到左边去
			$li.eq($nowli).css({"left":-760});
			$li.eq($prevli).animate({"left":760});
			
		}
		// 显示的li从 760位置一定到 0 
		$li.eq($nowli).animate({"left":0},function(){
			ismove = false;
		});
		$prevli=$nowli;

	}
});

html

  1. index.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-首页</title>
	<!-- 先引入重置的 再引入main -->
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/slide.js"></script>
	<script type="text/javascript">
		$(function(){
			$.ajax({
				url:"js/date.json",
				type:"get",
				dataType:"json"
			}).done(function(dat){
				// 获取成功
				// alert(dat.name);
				$('.login_btns').hide();  //  登录藏起来
				$('.user_info em').html(dat.name);
				$('.user_info').show();  // 登录信息显示
			}).fail(function(){
				// 获取失败
				alert("服务器超时");
			});
		});
	</script>
</head>
<body>
	<!-- 页面顶部 -->
	<div class="header_con">
		<div class="header">

			<!-- 左边标题 -->
			<div class="welcome fl">欢迎你来到天天生鲜!</div>

			<!-- 登录状态 -->
			<div class="user_con fr">
				<!--  
					ul 没有这个为登录之前的style="display: none"
					后面用程序来控制
				 -->
				<ul class="login_btns fl">
					<li><a href="#">登录</a></li>
					<li><span>|</span></li>
					<li><a href="#">注册</a></li>
				</ul>
				<!-- 
					div 没有这个为登录之前的style="display: block"
				-->
				<div class="user_info fl ">
					欢迎您：<em>Sugar</em>
				</div>

				<ul class="user_btns fl">
					<li><span>|</span></li>
					<li><a href="#">我的购物车</a></li>
					<li><span>|</span></li>
					<li><a href="#">我的订单</a></li>
				</ul>
			</div>

		</div>

	</div>
	


	<!-- logo 搜索框 购物车 -->
	<div class="center_con">
		<!-- logo -->
		<a href="index.html" class="logo fl">
			<img src="images/logo.png" alt="天天生鲜网站logo">
		</a>

		<!-- 输入框 -->
		<div class="search_con fl">
			<form>
				<input type="text" name="" class="input_txt fl" placeholder="搜索">
				<input type="submit" name="" class="input_sub fl" value="搜索">
			</form>
		</div>

		<!-- 购物车 -->
		<div class="chart_con fr">
			<a href="#" class="chart_link fl">我的购物车</a>
			<div class="chart_num fl">5</div>
		</div>

	</div>

	
	<!-- 主菜单 -->
	<div class="main_menu_con">
		<div class="center_con02">
			<h2>全部商品分类</h2>

			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">手机生鲜</a></li>
				<li><a href="#">抽奖</a></li>
			</ul>

		</div>
	</div>


	<!-- 主菜单下面的幻灯片和二级菜单和广告 -->
	<div class="center_con03">
		<!-- 二级菜单 -->
		<ul class="sub_menu_con fl">
			<li><a href="#">新鲜水果</a></li>
			<li><a href="#" class="icon02">海鲜水产</a></li>
			<li><a href="#" class="icon03">猪牛羊肉</a></li>
			<li><a href="#" class="icon04">禽类蛋品</a></li>
			<li><a href="#" class="icon05">新鲜蔬菜</a></li>
			<li><a href="#" class="icon06">速冻食品</a></li>
		</ul>

		<!-- 幻灯片 用定位做
			  动起来的效果是用程序控制定位中left的值
		-->
		<div class="slide_con fl">
			<!-- 图片 -->
			<ul class="slide_list">
				<li><a href="#"><img src="images/slide.jpg" alt="幻灯片" /></a></li>
				<li><a href="#"><img src="images/slide02.jpg" alt="幻灯片" /></a></li>
				<li><a href="#"><img src="images/slide03.jpg" alt="幻灯片" /></a></li>
				<li><a href="#"><img src="images/slide04.jpg" alt="幻灯片" /></a></li>
			</ul>

			<!-- 图片箭头 -->
			<div class="prev"></div>
			<div class="next"></div>

			<!-- 点 宽度等于父级，然后整体居中-->
			<ul class="points">
			<!-- 	<li class="active"></li>
				<li></li>
				<li></li>
				<li></li> -->
			</ul>

		</div>

		<!-- 广告 -->
		<!-- 有的浏览器中图片会出现3px间隔的bug  
			 解决方法: 将img转成block
		-->
		<div class="advs fl">
			<a href="#"><img src="images/adv01.jpg" alt="广告图片"></a>
			<a href="#"><img src="images/adv02.jpg" alt="广告图片"></a>
		</div>
	</div>

	<!-- 食品展示区 -->
	<!-- 水果 -->
	<div class="common_model">
		<!-- 食品标题 -->
		<div class="common_title_con">
			<h3>新鲜水果</h3>
			<ul>
				<li><a href="#">鲜芒</a></li>
				<li><a href="#">加州提子</a></li>
				<li><a href="#">亚马逊牛油果</a></li>
			</ul>
			<a href="#"  class="more">查看更多&gt;</a>
		</div>
		
		<!-- 食品图片 -->
		<div class="goods_banner fl">
			<a href="#"><img src="images/banner01.jpg" alt="banner"></a>
		</div>
		<!-- 商品列表 -->
		<ul class="goods_list fl">
			<li>
				<h4>草莓</h4>
				<a href="#"><img src="images/goods/goods003.jpg" alt="草莓"></a>
				<div class="price">￥ 38.00</div>
			</li>
			<li>
				<h4>葡萄</h4>
				<a href="#"><img src="images/goods/goods002.jpg" alt="葡萄"></a>
				<div class="price">￥ 5.50</div>
			</li>
			<li>
				<h4>柠檬</h4>
				<a href="#"><img src="images/goods/goods001.jpg" alt="柠檬"></a>
				<div class="price">￥ 3.90</div>
			</li>
			<li>
				<h4>奇异果</h4>
				<a href="#"><img src="images/goods/goods012.jpg" alt="奇异果"></a>
				<div class="price">￥ 28.5</div>
			</li>
		</ul>

	</div>



	<!-- 食品展示区 -->
	<!-- 海鲜 -->
	<div class="common_model">
		<!-- 食品标题 -->
		<div class="common_title_con">
			<h3>海鲜水产</h3>
			<ul>
				<li><a href="#">河虾</a></li>
				<li><a href="#">扇贝</a></li>
			</ul>
			<a href="#"  class="more">查看更多&gt;</a>
		</div>
		
		<!-- 食品图片 -->
		<div class="goods_banner fl">
			<a href="#"><img src="images/banner02.jpg" alt="banner"></a>
		</div>
		<!-- 商品列表 -->
		<ul class="goods_list fl">
			<li>
				<h4>青岛生海捕大青虾</h4>
				<a href="#"><img src="images/goods/goods018.jpg" alt="青岛生海捕大青虾"></a>
				<div class="price">￥ 48.00</div>
			</li>
			<li>
				<h4>扇贝</h4>
				<a href="#"><img src="images/goods/goods019.jpg" alt="扇贝"></a>
				<div class="price">￥ 46.00</div>
			</li>
			<li>
				<h4>冷冻秋刀鱼</h4>
				<a href="#"><img src="images/goods/goods020.jpg" alt="冷冻秋刀鱼"></a>
				<div class="price">￥ 19.00</div>
			</li>
			<li>
				<h4>基围虾</h4>
				<a href="#"><img src="images/goods/goods021.jpg" alt="基围虾"></a>
				<div class="price">￥ 25.00</div>
			</li>
		</ul>

	</div>





	<!-- 版权信息 -->
	<div class="footer">
		<ul class="footer_link">
			<li><a href="#">关于我们</a></li>
			<li><span>|</span></li>
			<li><a href="#">联系我们</a></li>
			<li><span>|</span></li>
			<li><a href="#">招聘人才</a></li>
			<li><span>|</span></li>
			<li><a href="#">友情链接</a></li>
		</ul>

		<p>CopyRight@ 2020 石家庄天天生鲜信息技术优先公司 All Rights Reserverd</p>
		<p>电话： 0311-*****666 冀ICP备********6号</p>
	</div>




</body>
</html>

json数据

  1. data.json
    {
	"name":"sugar",
	"age":16
}

js 服务器

  1. server.js
    // 引入相应模块
var http = require('http'),
	 url = require('url'),
	path = require('path'),
	  fs = require('fs');
	  
var port = process.argv[2] || 8888;

var types = {
	'mp3': 'audio/mpeg',
	'html': 'text/html',
	'css': 'text/css',
	'js': 'application/javascript'
},
site = 'http://localhost:' + port;

http.createServer(function (request, response) {
    var uri = url.parse(request.url).pathname,
    filename = path.join(__dirname, decodeURI(uri));
    
    fs.exists(filename, function (exists) {
       if (!exists) {
           response.writeHead(404, {'Content-Type': 'text/plain', 'X-my-param':'zcyue'});
           response.write('404 Not Found\n');
           response.end();
           return;
       }

       if(!fs.lstatSync(filename).isDirectory()) {
           var type = filename.split('.');
           type = type[type.length - 1];
           response.writeHead(200, { 'Content-Type': types[type] + '; charset=utf-8' });
           fs.createReadStream(filename).pipe(response);
        } else {
           response.writeHead(301, {'Location': site + '/index.html' });
           response.end();
        }
    });
}).listen(parseInt(port, 10));

console.log('Static file server running at\n => ' + site + '/\nCTRL + C to shutdown');

注意事项

  1. js和css的引入顺序是有区别的
  2. 要在服务器启动后运行
  3. node server.js 启动服务器
【学习目录】天天生鲜项目页面设计
Cherry的博客
05-20 3246
天天生鲜项目网站首页 商品列表页 商品详情页 我的购物车 我的购物车 提交订单页 登陆页面 注册页面 用户信息页 用户订单页 用户收货地址页
天天生鲜(Django4.0版本) + 开发遇到的问题及解决
weixin_46739549的博客
06-09 9737
天天生鲜（Django4.0版本）
天天生鲜水果蔬菜商城网站静态模板.zip
07-27
用于学习展示的电商网站模板，通过此静态模块可应用在多个框架中实现
天天生鲜前端页面
02-26
天天生鲜前端页面，提供给广大有需求的用户使用。如有问题，不关我事。
天天生鲜html_images.zip
09-05
天天生鲜的htm_image,用于个人图片存储，https://blog.youkuaiyun.com/Zph1234/article/details/82423633
天天生鲜项目源码
04-08
天天生鲜项目完整源码，用django框架进行编写的，适合新手用来研究
基于Django框架开发的B2C生鲜类产品的PC端网页.zip
09-29
【标题】基于Django框架开发的B2C生鲜类产品的PC端网页 【描述】本项目是一个使用Python的Django框架构建的B2C（Business-to-Consumer）电商平台，专门针对生鲜产品，旨在为用户提供方便快捷的在线购买生鲜食品的...
HTML+CSS+JS 生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品_期末大作业
qq_524614081的博客
01-08 1932
HTML5期末大作业：生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 作品介
HTML5期末大作业：生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) html网页设计期末大作业_网页设计平时作业
12-02 892
HTML5期末大作业：生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更
商品详情页html,天天生鲜商品详情页HTML+css
weixin_39657094的博客
06-08 895
body{font-family: 'Microsoft YaHei';color:#666;font-size:12px;}/*顶部条状态*/.header_con{height:29px;background-color: #f7f7f7;border-bottom:1px solid #ddd;}.header{width:1200px;height:29px;margin:0 auto;1...
天天生鲜商城项目
04-10
这是一个垂直电商，只针对生鲜水果的一个电商平台 下发页面 实现功能：首页、列表页、展示页、购物车、订单、用户登录注册、用户中心
天天生鲜项目源代码_ttsx.zip
最新发布
09-09
天天生鲜项目源代码_ttsx
天天生鲜（Python）版前端页面
07-08
页面说明： 1、index.html 网站首页，顶部“注册|登录”和用户信息是切换显示的，商品分类菜单点击直接链接滚动到本页面商品模块。首页已加入幻灯片效果。此效果在课程中已讲述如何制作。 2、list.html 商品列表页，商品分类菜单鼠标悬停时切换显示和隐藏，点击菜单后链接到对应商品的列表页。 3、detail.html 商品详情页，某一件商品的详细信息。 4、cart.html 我的购物车页，列出已放入购物车上的商品 5、place_order.html 提交订单页 6、login.html 登录页面 7、register.html 注册页面，已加入了初步的表单验证效果，此效果在课程中已讲述如何制作。 8、user_center_info.html 用户中心-用户信息页 用户中心功能一，查看用户的基本信息 9、user_center_order.html 用户中心-用户订单页 用户中心功能二，查看用户的全部订单 10、user_center_site.html 用户中心-用户收货地址页 用户中心功能三，查看和设置用户的收货地址
生鲜超市前端页面
08-25
打造生鲜超市学习前端项目全代码全html页面全代码！
天天生鲜后端代码.zip
03-08
天天生鲜后端代码.zip
HTML5期末大作业：网站设计——天天生鲜水果蔬菜商城网站静态模板 (10个页面) HTML+CSS+JavaScript
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
09-07 7487
HTML5期末大作业：网站设计——天天生鲜水果蔬菜商城网站静态模板 (10个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 天天生鲜商城网站htm
天天生鲜购物商城系统
qq_49523975的博客
05-08 1003
若不存在用户则进行先注册用户，向数据库中添加用户数据。主要技术：java，spring，mybatis，mysql，jquery，html，layui框架。展示部分种类的商品，并且可以点击查看商品详情，进行购买或者加入购物车。3，用户中心（用户信息查看，最近浏览，订单查看与删除）用户信息中心，查看信息，订单，购物车等列表页面。4，我的购物车功能，可以进行购物车结算页面。JDK版本：java JDK1.8。数据可视化工具：navicat。开发系统：Windows。数据库版本：mysql8。
天天生鲜(Python)Django项目学习资料(视频、源码)
码城的博客
07-15 2608
天天生鲜(Python)Django项目学习资料(视频、源码)
天天生鲜前端页面优化与管理后台实现
总结以上所述，“天天生鲜前端页面”的开发涉及到HTML的基本结构和内容组织、页面元素的使用、CSS样式的应用、前端交互的实现，以及前端开发工具和最佳实践的运用。这些知识点共同构成了一个高质量、用户体验良好的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值