练手网页
技术
1.利用了bootstrap，jquary框架。
2.涉及到ajax异步。
3.利用了python爬虫以及python数据处理来进行数据的获取和处理。
4.后台用的是java，mysq，redisl处理。
部分代码
主页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/bootstrap/js/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
<title>welcome to gaoxiaoziyuanwang</title>
<script type="text/javascript">
$(function () {
$("#caidan").toggle(function () {
$("#a1").html("");
$("#a2").html("");
$("#a3").html("");
$("#a4").html("");
$("#a1").append("<a href='http://www.baidu.com'>用户名</a>");
$("#a2").append("ddd");
$("#a3").append("ddd");
$("#a4").append("ddd");
},function () {
$("#a1").html("");
$("#a2").html("");
$("#a3").html("");
$("#a4").html("");
});
});
</script>
<script type="text/javascript">
</script>
</head>
<body background="img\bg.png"
style=" background-repeat:no-repeat ;
background-size:110% 110%;
background-attachment: fixed;">
<canvas id="canvas" style="position: fixed; "></canvas>
<div>
<div class="row">
<div class="col-xs-3"><img alt="" id="a" src="img/icon.png" width="300px"></div>
<div class="col-xs-5"></div>
<div class="col-xs-4"style="padding-top: 120px; ">
<nav class="navbar navbar-default" style="background:rgba(0, 0, 0, 0);margin: 0px;border:none; ">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a class="active" href="http://localhost:8080/gaoxiao/home-page.html">首页</a></li>
<li ><a href="http://localhost:8080/gaoxiao/dow.html">下载</a></li>
<li ><a href="http://localhost:8080/gaoxiao/sucai.html">素材</a></li>
<li ><a href="http://localhost:8080/gaoxiao/web.html">前端</a></li>
<li ><a href="#">证书</a></li>
<li ><a href="http://localhost:8080/gaoxiao/home-page-logon.html">登录</a></li>
<li ><a href="#">退出</a></li>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div></div>
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-6">
<div class="input-group" style="font-size: 40px;padding: 100px;">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-success" type="button">搜索</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row"style="font-size: 50px" align="right";>
<div class="col-lg-2"> </div>
<div class="col-lg-8">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" >
<div class="item active">
<span style="width: 50% ; margin-right:400px; ">狗哥爱宠</span>
<img src="weibo/img-f59637f606d3234a578536347ea69e4e.jpg" alt="..." style="width: 50%; margin-top: 50px; margin-right: 250px ">
<div class="carousel-caption">
...
</div>
</div>
<div class="item" >
<span style="width: 50% ; margin-right:400px; ">爱五回归</span>
<img src="weibo/img-f273dde7118d433252de1be1d17be485.jpg" alt="..." style="width: 50% ; margin-top: 50px; margin-right: 250px ;">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7" ></div>
<div class="col-lg-1" id="a1"></div>
<div class="col-lg-1" id="a2"></div>
<div class="col-lg-1" id="a3"></div>
<div class="col-lg-1" id="a4"></div>
<div class="col-lg-1" id="caidan" style="font-size: 50px" align="right";><img src="img/tou.png" alt="/img/tou.png" class="img-circle"></span></div>
</div>
</body>
</html>
</div>
<script src="js/index.js"></script>
</body>
</html>
注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/bootstrap/js/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
<title>welcome to register</title>
<script type="text/javascript">
$(function () {
$("#chilk").click(function () {
alert("fdfd");
});
$("#aa").blur(function () {
var url="/gaoxiao/demo01";
var user=$("#aa").val()
$.post(url,{user:user},function(data){
$("#sp1").remove();
$("#aa").after("<span id='sp1'>"+data+"</span>");
},"html");
});
$("#sjh").blur(function () {
var url="/gaoxiao/demo01";
var sjh=$("#sjh").val()
$.post(url,{sjh:sjh},function(data){
$("#sp2").remove();
$("#sjh").after("<span id='sp2'>"+data+"</span>");
},"html");
});
$("#cc").blur(function () {
var url="/gaoxiao/demo01";
var yzm1=$("#cc").val()
$.get(url,{yzm1:yzm1},function(data){
$("#sp3").remove();
alert(data);
$("#cc").after("<span id='sp3'>"+data+"</span>");
},"html");
});
});
</script>
</head>
<body background="img\bg.png"
style=" background-repeat:no-repeat ;
background-size:1100% 1100%;
background-attachment: fixed;">
<div class="row">
<div class="col-xs-3"><img alt="" id="a" src="img/icon.png" width="300px"></div>
<div class="col-xs-5"></div>
<div class="col-xs-4"style="padding-top: 120px; ">
<nav class="navbar navbar-default" style="background:rgba(0, 0, 0, 0);margin: 0px;border:none; ">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ><a class="active" href="http://localhost:8080/gaoxiao/home-page.html">首页</a></li>
<li ><a href="http://localhost:8080/gaoxiao/dow.html">下载</a></li>
<li ><a href="http://localhost:8080/gaoxiao/sucai.html">素材</a></li>
<li ><a href="http://localhost:8080/gaoxiao/web.html">前端</a></li>
<li ><a href="#">证书</a></li>
<li class="active"><a href="http://localhost:8080/gaoxiao/home-page-logon.html">登录</a></li>
<li ><a href="#">退出</a></li>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-4">
<form action="/gaoxiao/demo01" method="get" id='from' >
<div class="input-group" style="width: 300px; margin-top: 50px;margin-left:0px ;margin-right:200px ;"align="center">
<span class="input-group-addon" id="basic-addon1">账号</span>
<input type="text" class="form-control" id="aa" name="username" placeholder="请输入账号" aria-describedby="basic-addon1 name='zh'">
</div>
<p></p>
<div class="input-group"style="width: 300px;margin-left:0px ;margin-right:200px ;">
<span class="input-group-addon">密码</span>
<input type="text" class="form-control" id="bb" name="passwork" placeholder="请输入密码" aria-label="Amount (to the nearest dollar)">
</div>
<p></p>
<div class="input-group"style="width: 300px;margin-left:0px ;margin-right:200px ;">
<span class="input-group-addon">验证码</span>
<input type="text" class="form-control" id="cc" name="yzm" placeholder="验证码" aria-label="Amount (to the nearest dollar)"><img id="img1" src="/gaoxiao/YZM" /><a href="#" onclick="changeImg()">看不清，换一张</a>
</div>
<p></p>
<div class="input-group"style="width: 300px;margin-left:0px ;margin-right:200px ;">
<span class="input-group-addon">手机号</span>
<input type="text" class="form-control" id="sjh" name="sj" placeholder="请输入手机号" aria-label="Amount (to the nearest dollar)">
<input type="button" value="点击获取验证码" id="chilk">
</div>
<p></p>
<div class="input-group"style="width: 300px;margin-left:0px ;margin-right:200px ;">
<span class="input-group-addon">手机验证码</span>
<input type="text" class="form-control" id="bb" name="sjyzm" placeholder="请输入手机验证码" aria-label="Amount (to the nearest dollar)">
</div>
<p></p>
<div class="input-group"style="width: 300px;margin-left:0px ;">
<input type="checkbox" name="remember" value="true" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">记住用户名!</span>
</div>
<p></p>
<input type="submit"class="btn btn-success" id="submit" value ='注册' style="margin-left: 100px;" />
<a href="http://localhost:8080/gaoxiao/home-page-logon.html">登录</a> <a href="http://localhost:8080/gaoxiao/register.html">注册</a>
</form></div></div>
<c:set value="13686775582" var="name" scope="request" ></c:set>
<script type="text/javascript">
function changeImg() {
document.getElementById("img1").src="/gaoxiao/YZM?？time"+new Date().getTime();
}
</script>
</body>
</html>
}
</script>
</body>
</html>
文件
