文档章节

接口化页面

chanchan_
 chanchan_
发布于 2017/03/12 22:04
字数 1270
阅读 7
收藏 0

根据上次页面Bootstrap自适应页面进行加工,将静态页面数据除掉,进行接口化开发

代码如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> hello主页</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/Font-Awesome-3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="css/zy.media.min.css">
<link rel="stylesheet" href="css/index.css">
<style type="text/css">

</style>
</head>
<body>

<!--置顶模块-->
<div class="header">
	<div class="main">
		<div class="nav logo">
			<!--导航栏-->
			<nav class="navbar navbar-dark " role="navigation">
			    <div class="container-fluid">
			    <div class="navbar-header">
			        <button type="button" class="navbar-toggle" data-toggle="collapse"
			                data-target="#example-navbar-collapse">
			            <span class="sr-only">切换导航</span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			        </button>
			        <a class="navbar-brand" href="#">HELLO</a>
			    </div>
			    <div class="collapse navbar-collapse navbar-left" id="example-navbar-collapse">
			        <ul class="nav navbar-nav">
			            <li class="active"><a href="#">H</a></li>
			            <li><a href="#">E</a></li>
			            <li class="dropdown">
			                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
			                    L <b class="caret"></b>
			                </a>
			                <ul class="dropdown-menu">
			                    <li><a href="#">O</a></li>
			                    <li><a href="#">...</a></li>
			                </ul>
			            </li>
			        </ul>
			    </div>

			    <!--用户登-->
			         <ul class="nav navbar-nav navbar-right" id="hidden"> 
			            <li><a href="#"><i class="icon-user"></i> 注册</a></li> 
			            <li><a href="#"><i class="icon-signin"></i> 登录</a></li> 
			        </ul> 

			         <!--搜索-->
			        <form class="navbar-form navbar-right" id="hidden" role="search">
			            <div class="form-group">
			                <input type="text" class="form-control" placeholder="Search">
			            </div>
			            <button type="submit" class="btn btn-success">搜索</button>
			        </form>

			    </div>
			</nav>


		</div>
		
	</div>
</div>

<div class="container">

<div id="main">

	<div id="content">
		<!-- 轮播 -->
		<div id="myCarousel" class="carousel slide" data-ride="carousel">
		    <!-- 轮播(Carousel)指标 -->
		    <ol class="carousel-indicators" style="margin-bottom: 20px;">
		       
		    </ol>   
		    <!-- 轮播(Carousel)项目 -->
		    <div class="carousel-inner">
		        
		    </div>
		    <!-- 轮播(Carousel)导航 -->
		    <a class="carousel-control left" href="#myCarousel" 
		        data-slide="prev">&lsaquo;</a>
		    <a class="carousel-control right" href="#myCarousel" 
		        data-slide="next">&rsaquo;</a>
		</div> 
		<!-- 轮播  end-->

		<!-- 精彩导读 -->
		<h4>精彩导读</h4>
		<ul class="list-inline" id="introduction">
			
		</ul>
		<!-- 精彩导读  end-->

			
			<h4>热门推荐</h4>

			<div>
				<ul id="hot">
					
				</ul>
			</div>
	

	</div><!-- .content -->

	

</div><!-- #main -->


<div class="edge">
<!-- 热门推荐 -->
	<h4 class="page-title">热门推荐</h4>
<ol class="list-group" id="rightHot">
  
</ol>
<!-- 热门推荐  end -->
<!-- 推荐作者 -->
<h4 class="page-title">推荐作者</h4>
	<ul class="list-inline" id="author">
		
	</ul>
	<!-- 推荐作者 end -->
	<!-- 今日头条 -->
	<h4 class="page-title">今日头条</h4>
	<ul id="headlines">
		
	</ul>
	<!-- 今日头条  end-->
	<!-- 时代焦点 -->	
	<h4 class="page-title">时代焦点</h4>
	<ol class="list-group" id="focus">
	 
	</ol>
	<!-- 时代焦点 end-->

	<!-- 热门话题 -->
	<h4 class="page-title">热门话题</h4>
	<ul id="topic" class="list-inline">
		<!-- <li>
			<a class="label label-success"> {{item.environstatus}}</a>
		</li> -->
		
	</ul>
	<div class="text-right">更多>></div>
	
	<!-- 热门话题 end -->

	<h4 class="page-title">热门音频</h4>
	<div class="zy_media">
		<!-- <video src="audio/bigbox.mp3" controls="controls"></video> -->
		<audio data-config="" src="audio/bigbox.mp3">
			
		</audio>
	</div>
		
	<h4 class="page-title">热门视频</h4>
	<div class="zy_media">
		<video poster="photos/1.jpg" data-config='{"mediaTitle": "《疯狂动物城》--腾讯视频"}'>
			 <source src="video/test.mp4" type="video/mp4">
			  您的浏览器不支持HTML5视频
		</video>
	</div>
	
</div>

</div><!-- .container -->

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- 视频、音频播放 js-->
<script src="js/zy.media.min.js"></script>
<!-- 接口url -->
<script src="js/url.js"></script>
<!-- ajax获取数据 js-->
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">

	

</script>
</body>
</html>

js代码

/*预加载*/
	 $(function(){
	 	//轮播
	 	function carousel(){
		 		$.ajax({
		 		 url: url+carouselUrl,
				 dataType: "json",
				 contentType: 'text/plain',
				 // async: true,
				 type: 'GET',
				 // cache: false,
				 success: function(data) {
						$.each(data, function(i, item){
							
							if(i==0){
						        $(".carousel-indicators").append("<li data-target='#myCarousel' data-slide-to='" + i + "' class='active'></li>");    
								$(".carousel-inner").append("<div class='item active'><img class='img-responsive' src='" + item.photos + "' alt='First slide'> <div class='text'><a>" + item.title + "</a></div></div>");
							}else{
								$(".carousel-indicators").append("<li data-target='#myCarousel' data-slide-to='" + i + "'></li>");
								$(".carousel-inner").append("<div class='item'><img class='img-responsive' src='" + item.photos + "' alt='First slide'> <div class='text'><a>" + item.title + "</a></div></div>");
							}
							
					 	});
				 	//alert(data);
				 }
		 	});
	 	}
	 	//精彩导读
	 	function introduction(){
		 		$.ajax({
		 		 url: url+introductionUrl,
				 dataType: "json",
				 contentType: 'text/plain',
				 // async: true,
				 type: 'GET',
				 // cache: false,
				 success: function(data) {
						$.each(data, function(i, item){
							
					        $("#introduction").append("<li class='col-md-6'><div class='media'><a class='pull-left' href='#'><img class='media-object' src='" +
					        		item.photos + "' style='height: 100px;width: 100px;'  alt='媒体对象'></a><div class='media-body'><h4 class='media-heading'><a>" +
					        		item.title + "</a></h4><p style='color: #999999;'>"+
					        		item.context + "</p></div></div></li>");    
						
							
					 	});
				 	//alert(data);
				 }
		 	});
	 	}
	 	
	 	//热门推荐
	 	function hot(){
		 		$.ajax({
		 		 url: url+hotUrl,
				 dataType: "json",
				 contentType: 'text/plain',
				 // async: true,
				 type: 'GET',
				 // cache: false,
				 success: function(data) {
						$.each(data, function(i, item){
							
							
					        $("#hot").append("<li><div class='media' style='padding-top: 10px;'><a class='pull-left' href='#'><img class='media-object' src='" +
					        		item.photos + "' style='height: 100px;width: 100px;'  alt='媒体对象'></a><div class='media-body'><h4 class='media-heading'><a>" +
					        		item.title + "</a></h4><div style='color: #999999;'><p>"+
					        		item.context + "</p><span>作者:"+
					        		item.author + "</span><span>日期:"+
					        		item.creatime + "</span><span>分类:"+
					        		item.type + "</span></div></div></div></li>");    
						
							
					 	});
				 	//alert(data);
				 }
		 	});
	 	}
	 	
	 	//右侧-热门推荐
	 	function rightHot(){
		 		$.ajax({
		 		 url: url+rightHotUrl,
				 dataType: "json",
				 contentType: 'text/plain',
				 // async: true,
				 type: 'GET',
				 // cache: false,
				 success: function(data) {
						$.each(data, function(i, item){
							
							
					        $("#rightHot").append("<li><a>" +item.title + " </a></li>");    
					 	});
				 	//alert(data);
				 }
		 	});
	 	}
	 	
	 	//推荐作者
	 	function author(){
		 		$.ajax({
		 		 url: url+authorUrl,
				 dataType: "json",
				 contentType: 'text/plain',
				 // async: true,
				 type: 'GET',
				 // cache: false,
				 success: function(data) {
						$.each(data, function(i, item){
							
							$("#author").append("<li><a href=''><img src='" + item.photos + "' height='80px' width='72px' class='img-circle'><i style='display: block;text-align: center;'>" + item.userName + "</i></a></li>");    
					 	});
				 	//alert(data);
				 }
		 	});
	 	}
	 	
	 	//今日头条
	 	function headlines(){
		 		$.ajax({
		 		 url: url+headlinesUrl,
				 dataType: "json",
				 contentType: 'text/plain',
				 // async: true,
				 type: 'GET',
				 // cache: false,
				 success: function(data) {
						$.each(data, function(i, item){
							
							 $("#headlines").append("<li><div class='media' style='padding-top: 10px;'><h4 class='media-heading'><a>" +
						        		item.title + "</a></h4><a class='pull-left' href='#'><img class='media-object' src='" +
						        		item.photos + "' style='height: 100px;width: 100px;'  alt='媒体对象'></a><div class='media-body' style='color: #999999;'>"+
						        		item.context + "</div></div></li>");     
					 	});
				 	//alert(data);
				 }
		 	});
	 	}
	 	
	 	//时代焦点
	 	function focus(){
		 		$.ajax({
		 		 url: url+focusUrl,
				 dataType: "json",
				 contentType: 'text/plain',
				 // async: true,
				 type: 'GET',
				 // cache: false,
				 success: function(data) {
						$.each(data, function(i, item){
							
							$("#focus").append("<li><a>" +item.title + " </a></li>");   
					 	});
				 	//alert(data);
				 }
		 	});
	 	}
	 	
	 	//热门话题
	 	function topic(){
		 		$.ajax({
		 		 url: url+topicUrl,
				 dataType: "json",
				 contentType: 'text/plain',
				 // async: true,
				 type: 'GET',
				 // cache: false,
				 success: function(data) {
						$.each(data, function(i, item){
					 		$("#topic").append("<li  value=" + item.environstatus + "><a class='label label-success'>" + item.title + "</a></li>");
					 	});
				 	//alert(data);
				 }
		 	});
	 	}
	 	
	 	carousel();
	 	introduction();
	 	hot();
	 	rightHot();
	 	author();
	 	headlines();
	 	focus();
	 	topic();
	 });
	 
	 // 停止轮播
	$(".pause-slide").click(function(){
	    $("#myCarousel").carousel('pause');
	});

	/*加载视频、音频*/
	 zymedia('video');
	 zymedia('audio');

css,js迁移到相应的位置。让代码更加清新明了! 输入图片说明

接下去数据都迁移出来了,开始要写后台开发接口了?

© 著作权归作者所有

共有 人打赏支持
chanchan_
粉丝 0
博文 3
码字总数 4563
作品 0
武汉
私信 提问
何为前后端分离?

前后端分离的意思是,前后端只通过 JSON 来交流,组件化、工程化不需要依赖后端去实现。 目前见过比较好的两种方式: 1. 后端数据服务化,走统一的接口规范输出,甚至是统一走一层后端的服务...

dfatxm
2016/12/13
68
0
网站页面优化(排版布局、间距、交互类)

我们有一个网站采用vue+elementui开发构建,开发模式前后端分离,已经初步完成页面开发、前后端接口及数据交互,现在需要对页面进行精细化(依据ui)的调整。主要包括页面的排版布局、间距、...

network2019
2017/09/14
4
4
Servlet - Listener、Filter、Decorator

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hanqing280441589/article/details/51344746 标签 : Java与Web Listener-监听器 Listener为在Java Web中进行...

菜鸟-翡青
2016/05/08
0
0
selenium webdriver (4) -- page object

page object 是一种分层的思想,用户并不关心是如何找到元素的,用户只是进行输入,提交这些操作而已,如何让代码进行合理的分层,使得更加接近用户的行为,而隐藏掉一些定位的细节,更参数化...

terry_hding
2016/07/21
238
0
PC网站页面开发(前后端联调、页面重构优化)

【业务需求】 1、对现有网站已有页面进行前后端接口联调,接口数大致:70左右; 2、对现有网站已有页面进行优化调整(以UI稿未准,主要进行细节上的调整); 3、对现有网站总体前端结构进行优...

network2019
2017/08/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jenkins安装

https://my.oschina.net/u/593517/blog/1797968 jenkins 安装 https://my.oschina.net/u/593517/blog/3028175 GIT 安装 https://my.oschina.net/u/593517/blog/3028179 maven 安装 插件安装 ......

Gm_ning
7分钟前
1
0
小言服务端解决方案-监控

框架保证方向,整体包容细节 为保证服务端运行平稳正常,owner应使得系统应保有相应的监控:系统监控,业务监控。而服务运行的平稳高效是否有保障跟监控粒度又成直接的正比关系。本文仅针对开...

重城重楼
19分钟前
0
0
搜索引擎(Elasticsearch搜索详解)

学完本课题,你应达成如下目标: 掌握ES搜索API的规则、用法。 掌握各种查询用法 搜索API 搜索API 端点地址 GET /twitter/_search?q=user:kimchy GET /twitter/tweet,user/_search?q=user:...

这很耳东先生
43分钟前
6
0
浅谈如何减少GC的次数

GC会stop the world。会暂停程序的执行,带来延迟的代价。所以在开发中,我们不希望GC的次数过多。 本文将讨论如何在开发中改善各种细节,从而减少GC的次数。 (1)对象不用时最好显式置为 Nu...

浮躁的码农
44分钟前
1
0
jpa 自定义返回对象

任何ORM框架都少不了开放自定义sql的问题。jpa自然也不例外,很多场景需要写复杂sql的。 首先定义一个方法签名,然后打上@Query注解。像下面这样,需要注意nativeQuery,这个表示query中的字...

朝如青丝暮成雪
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部