web项⽬：智能出⾏规划⽹站——爬⾍+flask+echarts+基础前端（html、cs。。
。
⽬录
项⽬简介
⼀、项⽬名称：
智能出⾏规划⽹站
⼆、项⽬背景：
每当计划外出旅游时，我们最关⼼的应该就是⽬的地天⽓情况和两地间的交通情况。但遗憾的是，天⽓平台往往不提供交通信息，⽽出⾏平台往往⼜不提供天⽓信息，这样对于选择合适的出⾏⽬的地是很不⽅便的。
三、项⽬核⼼：
后台定时爬取所有城市的天⽓数据并保存在数据库中，当⽤户在地图上点击对应城市名后，能在图表内
动态更新城市天⽓信息；并根据⽤户提交的起⽌地区，即时爬取航班信息后展⽰在表格中。
四、项⽬要求：
1）展⽰当前所选城市的⼀周天⽓信息（⽇期、温度、天⽓状况、风级）；
2）展⽰当前所选城市从当前时间开始，24⼩时内⽓象数据（温度变化、相对湿度变化、风⼒等级变化）；
3）在给出起点城市和终点城市后，爬取并展⽰两城市（必须有机场）间的航班信息（航班号、起点机场与时间、飞⾏时长、终点机场与时间、餐⾷供应情况、票价）。
技术说明
1）爬⾍（lxml、selenium）：由于天⽓⽹公开天⽓数据，所以可以直接使⽤xpath直接获取其响应中携带的数据；⽽航班信息⽹站反爬措施较多，需要使⽤selenium模拟浏览器操作来获取信息；
2）flask：搭建后端服务器，⽤于连接python代码与前端代码；
3）echarts：⽤于⽣成图表，实现数据的直观展⽰与中国地图（地理图表）的显⽰；
4）前端代码：⽹站的外观渲染与事件绑定；
代码展⽰
⼀、前端部分：
⽹站只包含⼀个主页⾯，内容通过ajax动态更新，html⽂件如下：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<!--viewport就是设备的屏幕上能⽤来显⽰我们的⽹页的那⼀块区域；
viewport标记，⽤于指定⽤户是否可以缩放Web页⾯，并对相关的选项进⾏设定；
如设置了固定的显⽰区域宽度，那么移动设备端就会出现横向拖动条；
下述content设定⽅式是为了配合flexible.js使⽤：
width=device-width是使页⾯适配设备显⽰宽度，禁⽌⽤户⾃⾏缩放；
initial-scale=1.0设置初始缩放值为1，即不缩放-->
<meta name="viewport"content="width=device-width, initial-scale=1.0"/>
<title>智能出⾏规划</title>
<link rel="stylesheet"href="{{ url_for('static',filename='css/index.css') }}"/>
</head>
<body>
<!-- 页⾯顶端部分 -->
<!-- 页⾯顶端部分 -->
<header>
<h1>智能出⾏规划平台</h1>
<div class="showtime"></div>
<script>
var div = document.querySelector('.showtime');
getDate();
setInterval(getDate,1000);
function getDate(){
var date =new Date();
var year = FullYear();
var month = Month()+1;
month = month <10?'0'+ month : month;
var dates = Date();
dates = dates <10?'0'+ dates : dates;
var arr =['星期⽇','星期⼀','星期⼆','星期三','星期四','星期五','星期六'];
var day = Day();
var hour = Hours();
var half = hour >=12?'下午':'上午';
hour = hour <=12? hour :(hour -12);
hour = hour <10?'0'+ hour : hour;
var min = Minutes();
min = min <10?'0'+ min : min;
var sed = Seconds();
sed = sed <10?'0'+ sed : sed;
div.innerHTML =(year +'年'+ month +'⽉'+ dates +'⽇ '+ arr[day]+' '+ half + hour +'点'+ min +'分'+ sed +'秒');
}
</script>
</header>
<!-- 页⾯主体部分 -->
<section class="mainbox">
<!-- 左侧 -->
<div class="column">
<!-- 定义搭载图表的盒⼦，必须设置⼤⼩ -->
<div class="panel info">
<h2>⼀周内天⽓预览</h2>
<div class="box">
<table>
<tr>
<td>18⽇<br>（今天）</td>
<td>19⽇<br>（明天）</td>
<td>20⽇<br>（后天）</td>
<td>21⽇<br>（周⽇）</td>
<td>22⽇<br>（周⼀）</td>
<td>23⽇<br>（周⼆）</td>
<td>24⽇<br>（周三）</td>
</tr>
<tr>
<td>多云</td>
<td>多云</td>
<td>多云转晴</td>
<td>晴</td>
<td>晴</td>
<td>晴</td>
<td>晴</td>
</tr>
<tr>
<td>?/2℃</td>
<td>9℃/2℃</td>
<td>10℃/1℃</td>
<td>8℃/-1℃</td>
<td>4℃/-4℃</td>
<td>6℃/-4℃</td>
<td>7℃/-3℃</td>
</tr>
<tr>
<td>3-4级</td>
<td><3级</td>
<td><3级</td>
<td><3级</td>
<td>4-5级</td>
<td>4-5级<br>转<3级</td>
<td><3级</td>
<td><3级</td>
</tr>
</table>
</div>
<div class="panel-footer"id="aii"></div>
</div>
<div class="panel bar">
<h2>24⼩时⽓候变化</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
</div>
<!-- 中间 -->
<div class="column">
<!-- 数字部分 -->
<div class="ar">
<div class="ar-hd">
<form action=""method="post"target="son-window">
<input id="from_city"name="from_city"type="text"placeholder='----'onclick="input_click(this)">
<input id="to_city"name="to_city"type="text"placeholder='----'onclick="input_click(this)">
<input id="submit">
<button type="button"onclick="postData()"></button>
</form>
</div>
<div class="ar-bd">
<ul>
<li>始发地区</li>
<li>终点地区</li>
</ul>
</div>
</div>
<!-- 地图部分 -->
<div class="map">absolute relative
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
<div class="chart">地图模块</div>
</div>
</div>
<!-- 右侧 -->
<div class="column">
<div class="window">
<h2>航班信息显⽰</h2>
<div class="flight">
<table id="flight-data">
<tr>
<th>公司-航班</th>
<th>起飞机场/时间</th>
<th>飞⾏时长</th>
<th>终点机场/时间</th>
<th>早餐供应</th>
<th>票价</th>
</tr>
</table>
</div>
<div class="panel-footer"></div>
</div>
</div>
</section>
<!-- javascript部分 -->
<!-- javascript部分 -->
<!-- flexible.js默认会将屏幕宽度⼗等分，然后将⼗等分后的⼀份宽度设为1rem，再通过将rem作为单位来指定某⼀元素⼤⼩，从⽽相当于设置元素的屏幕占⽐ -->
<!-- 这⾥1984px⼗等分后的198.4px太⼤，我们将其改为24等分后，1rem = 1984px/24，其值保存在html标签下的font-size样式中 -->
<script src="{{ url_for('static',filename='js/flexible.js') }}"></script>
<!-- 导⼊echarts的js⽂件 -->
<script src="{{ url_for('static',filename='js/echarts.min.js') }}"></script>
<!-- 导⼊jquery的js⽂件 -->
<script src="{{ url_for('static',filename='js/jquery.js') }}"></script>
<!-- 导⼊中国地图的js⽂件 -->
<script src="{{ url_for('static',filename='js/china.js') }}"></script>
<!-- 导⼊⾃定义的js⽂件 -->
<script>
<!--定义变量装载后端数据-->
var html_data ={{ flask_data }};
<!--创建元素节点，⽤于导⼊js⽂件-->
var newScript = ateElement('script');
newScript.src ="{{url_for('static',filename='js/index.js')}}";
<!--appendChild()⽅法可向节点（body）的⼦节点列表（script）的末尾添加新的⼦节点-->
<!--插⼊哪个列表取决于⼦节点的tag，注意getElementsByTagName返回的是列表-->
</script>
</body>
</html>
我们在index.css中设置，为了便于编辑我们使⽤less语⾔编写后再⽤编译器转换为css⽂件：
// 注意，使⽤lessc转化less⽂件为css时，less⽂件路径不可有中⽂
// css初始化
*{
margin: 0;
padding: 0;
// border-box固定了我们设定的元素宽与⾼，内容⼤⼩只能⼩于等于元素⼤⼩；
// 通过从已设定的宽度和⾼度分别减去边框和内边距才能得到内容的宽度和⾼度；
box-sizing: border-box;
}
li{
// 去除列表前标
list-style: none;
}
// 指明我们⾃定义的字体名对应的字体⽂件路径
@font-face{
font-family: electronicFont;
src:url(../font/DS-DIGIT.TTF);
}
body{
background:url("../images/bg.png") // 这⼀步设置不平铺，靠上居中；
no-repeat top center;
background-size: cover;
line-height: 1.15;
}
// 页⾯头部盒⼦
header{
position: relative;
height: 1.25rem;
background:url("../images/head_bg.png") no-repeat;
background-size: 100% 100%;
h1{
font-size: 0.475rem;
color: #ffffff;
text-align: center;
line-height: 1rem;
line-height: 1rem;
}
.showtime{
position: absolute;
right: 0.375rem;
top: 0;
line-height: 0.9rem;
color:rgba(126, 126, 126, 1);
font-size: 0.25rem;
}
}
// 页⾯主体盒⼦
.mainbox{
display: flex;
// ⾯向pc端设置的最⼩宽度
min-width: 1024px;
// 适配的最⼤页⾯⼤⼩
max-width: 2400px;
margin: 0 auto;
padding: 0.125rem 0.125rem 0;
// 直接指定flex将等分所有column
.column{
flex: 3;
}
// 单独为第⼆列指定占⽐为5，此时盒内⽐为3:5:3
.column:nth-child(2){
flex: 5;
margin: 0 0.125rem 0.1875rem;
overflow: hidden;
}
.panel{
position: relative;
height: 3.875rem;
border: 1px solid rgba(255, 255, 255, 0.2);
background:url("../images/line.png")rgba(255, 255, 255, 0.1); padding: 0 0.1875rem 0.5rem;
margin-bottom: 0.1875rem;
// 通过伪元素，设置上⽅边框⾓
&::before{
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-left: 2px solid dimgray;
border-top: 2px solid dimgray;
content:"";
}
&::after{
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
border-right: 2px solid dimgray;
border-top: 2px solid dimgray;
content:"";
}
// 定义底部区域，通过伪元素，设置下⽅边框⾓
.panel-footer{
position: absolute;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论