旅游系统（SSM框架+MySQL+Redis+VUE）前端页面代码
主页
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>西开旅游网</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.3.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- banner start-->
<section id="banner">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- 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">
<img src="images/banner_1.jpg" alt="">
</div>
<div class="item">
<img src="images/banner_2.jpg" alt="">
</div>
<div class="item">
<img src="images/banner_3.jpg" alt="">
</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>
</section>
<!-- banner end-->
<!-- 旅游 start-->
<section id="content">
<!-- 西开精选start-->
<section class="hemai_jx">
<div class="jx_top">
<div class="jx_tit">
<img src="images/icon_5.jpg" alt="">
<span>西开精选</span>
</div>
<!-- Nav tabs -->
<ul class="jx_tabs" role="tablist">
<li role="presentation" class="active">
<span></span>
<a href="#popularity" aria-controls="popularity" role="tab" data-toggle="tab">人气旅游</a>
</li>
<li role="presentation">
<span></span>
<a href="#newest" aria-controls="newest" role="tab" data-toggle="tab">最新旅游</a>
</li>
<li role="presentation">
<span></span>
<a href="#theme" aria-controls="theme" role="tab" data-toggle="tab">主题旅游</a>
</li>
</ul>
</div>
<div class="jx_content">
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="popularity">
<div class="row">
<div class="col-md-3">
<a href="javascript:;">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:;">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:;">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:;">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="newest">
<div class="row">
<div class="col-md-3">
<a href="javascript:;">
<img src="images/jiangxuan_1.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:;">
<img src="images/jiangxuan_1.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:;">
<img src="images/jiangxuan_1.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:;">
<img src="images/jiangxuan_1.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="theme">
<div class="row">
<div class="col-md-3">
<a href="javascript:;">
<img src="images/jiangxuan_2.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:;">
<img src="images/jiangxuan_2.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:;">
<img src="images/jiangxuan_2.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:;">
<img src="images/jiangxuan_2.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 西开精选end-->
<!-- 国内游 start-->
<section class="hemai_jx">
<div class="jx_top">
<div class="jx_tit">
<img src="images/icon_6.jpg" alt="">
<span>国内游</span>
</div>
</div>
<div class="heima_gn">
<div class="guonei_l">
<img src="images/guonei_1.jpg" alt="">
</div>
<div class="guone_r">
<div class="row">
<div class="col-md-4">
<a href="route_detail.html">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="route_detail.html">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="route_detail.html">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="route_detail.html">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="route_detail.html">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="route_detail.html">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 国内游 end-->
<!-- 境外游 start-->
<section class="hemai_jx">
<div class="jx_top">
<div class="jx_tit">
<img src="images/icon_7.jpg" alt="">
<span>境外游</span>
</div>
</div>
<div class="heima_gn">
<div class="guonei_l">
<img src="images/jiangwai_1.jpg" alt="">
</div>
<div class="guone_r">
<div class="row">
<div class="col-md-4">
<a href="route_detail.html">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="route_detail.html">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="route_detail.html">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="route_detail.html">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="route_detail.html">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="route_detail.html">
<img src="images/jiangxuan_4.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 境外游 end-->
</section>
<!-- 旅游 end-->
<!--导入底部-->
<div id="footer"></div>
</body>
</html>
登录页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>旅游网-登录</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--导入angularJS文件-->
<!-- <script src="js/angular.min.js"></script>-->
<!--导入jquery-->
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="login_frame"> <!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<section id="login_wrap">
<div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;">
</div>
<div class="login-box">
<div class="title" align="center">
<span>欢迎登录旅游账户</span>
</div>
<div class="login_inner">
<!--登录错误提示消息-->
<div id="errorMsg" class="alert alert-danger"></div>
<form id="loginForm" action="" method="post" accept-charset="utf-8">
<input type="hidden" name="action" value="login"/>
<label>
<input name="username" type="text" v-model="username"
placeholder="请输入账号"
autocomplete="off">
</label>
<label>
<input name="password" type="text" v-model="password"
placeholder="请输入密码"
autocomplete="off">
</label>
<div class="verify">
<input name="check" type="text" v-model="check" placeholder="请输入验证码" autocomplete="off">
<span><img src="checkCode" id="check_code" alt="" @click="changeCheckCode()"></span>
<!-- <script type="text/javascript">
//图片点击事件
function changeCheckCode(img) {
img.src = "checkCode?" + new Date().getTime();
}
</script>-->
</div>
<div class="submit_btn">
<input type="button" @click="login()"
style="width: 120px;height: 36px;line-height: 36px;background-color: #ffc900;font-size: 14px;"
value="登录">
<!--<button type="button" @click="login()">登录</button>-->
<div class="auto_login">
<input type="checkbox" name="" class="checkbox">
<span>自动登录</span>
</div>
</div>
</form>
<div class="reg">没有账户？
<a href="http://localhost:8080/travel/register.html">立即注册</a>
</div>
</div>
</div>
</section>
<!--引入尾部-->
<div id="footer"></div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#login_frame",
data: {
username: '',
password: '',
check: ''
},
methods: {
changeCheckCode() {
document.getElementById("check_code").src = "checkCode?" + new Date().getTime();
// img.src = "checkCode?" + new Date().getTime();
},
login() {
let param = new URLSearchParams();
param.append('username', this.username);
param.append('password', this.password);
let para = new URLSearchParams();
para.append('check', this.check);
if (this.username === "") {
$('#errorMsg').text("请输入用户名");
} else {
if ((this.password === "")) {
$('#errorMsg').text("请输入密码");
} else {
axios.post('http://localhost:8080/travel/login/check', para)
.then(function (response) {
if (response.data.flag) {
axios.post('http://localhost:8080/travel/login/check_login', param)
.then(function (response) {
if (response.data.flag) {
alert("登录成功！")
window.location = "http://localhost:8080/travel/index.html";
} else if (response.data.errorMsg === "1") {
$('#errorMsg').text("用户名不存在");
document.getElementById("check_code").src = "checkCode?" + new Date().getTime();
} else if (response.data.errorMsg === "2") {
$('#errorMsg').text("该账户尚未激活");
document.getElementById("check_code").src = "checkCode?" + new Date().getTime();
} else if (response.data.errorMsg === "3") {
$('#errorMsg').text("密码错误");
document.getElementById("check_code").src = "checkCode?" + new Date().getTime();
}
})
.catch(function (error) {
console.log(error);
});
} else {
$('#errorMsg').text("验证码错误");
document.getElementById("check_code").src = "checkCode?" + new Date().getTime();
}
})
.catch(function (error) {
console.log(error);
});
}
}
}
}
});
</script>
注册页
<html lang="en">
<head>
<meta charset="utf-8">
<title>注册</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/register.css">
<!--导入jquery-->
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="register_frame">
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout">
<div class="rg_form clearfix">
<div class="rg_form_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_form_center">
<div id="msgInfo" style="color:red;text-align: center"></div>
<!--注册表单-->
<form id="registerForm">
<!--提交处理请求的标识符-->
<input type="hidden" name="action" value="register">
<table style="margin-top: 25px;">
<tr>
<td class="td_left">
<label for="username">用户名</label>
</td>
<td class="td_right">
<input type="text" v-model="username" id="username" @blur="check_username()" name="username" placeholder="请输入账号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="password">密码</label>
</td>
<td class="td_right">
<input type="text" v-model="password" id="password" @blur="check_password()" name="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td class="td_left">
<label for="email">Email</label>
</td>
<td class="td_right">
<input type="text" v-model="email" id="email" @blur="check_email()" name="email" placeholder="请输入Email">
</td>
</tr>
<tr>
<td class="td_left">
<label for="name">姓名</label>
</td>
<td class="td_right">
<input type="text" v-model="name" id="name" @blur="check_name()" name="name" placeholder="请输入真实姓名">
</td>
</tr>
<tr>
<td class="td_left">
<label for="telephone">手机号</label>
</td>
<td class="td_right">
<input type="text" v-model="telephone" @blur="check_telephone()" id="telephone" name="telephone" placeholder="请输入您的手机号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="sex">性别</label>
</td>
<td class="td_right gender" >
<input type="radio" v-model="sex" id="sex" name="sex" value="男" checked="checked"> 男
<input type="radio" v-model="sex" name="sex" value="女"> 女
</td>
</tr>
<tr>
<td class="td_left">
<label for="birthday">出生日期</label>
</td>
<td class="td_right">
<input type="date" v-model="birthday" id="birthday" name="birthday" checked="checked" placeholder="年/月/日">
</td>
</tr>
<tr>
<td class="td_left">
<label for="check">验证码</label>
</td>
<td class="td_right check">
<input type="text" v-model="check" id="check" name="check" class="check">
<img src="checkCode" height="32px" id="check_code" alt="" @click="changeCheckCode()">
</td>
</tr>
<tr>
<td class="td_left">
</td>
<td class="td_right check">
<input type="button" @click="register()" style="width: 120px;height: 36px;line-height: 36px;background-color: #ffc900;font-size: 14px;" value="注册">
</td>
</tr>
</table>
</form>
</div>
<div class="rg_form_right">
<p>
已有账号？
<a href="#">立即登录</a>
</p>
</div>
</div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#register_frame",
data: {
username: '',
password: '',
name:'',
birthday: '',
sex: '',
telephone: '',
email: '',
check: ''
},
methods: {
check_username(){
const regx_u = /^\w{8,20}$/;
let flag_u = regx_u.test(this.username);
if (flag_u){
//正确把边框颜色还原
$('#username').css("border", "");
}else {
//规则错误，把边框变红
$('#username').css("border","2px red solid")
}
return flag_u;
},check_password(){
const regx_p = /^\w{8,20}$/;
let flag_p = regx_p.test(this.password);
if (flag_p){
//正确把边框颜色还原
$('#password').css("border", "");
}else {
//规则错误，把边框变红
$('#password').css("border","2px red solid")
}
return flag_p;
},check_name(){
const regx_r = /^[\u4e00-\u9fa5]{2,4}$/;
let flag_r = regx_r.test(this.name);
if (flag_r){
//正确把边框颜色还原
$('#name').css("border", "");
}else {
//规则错误，把边框变红
$('#name').css("border","2px red solid")
}
return flag_r;
},check_birthday(){
let flag_b =false;
if (this.birthday!==""){
//正确把边框颜色还原
flag_b =true;
}else {
//规则错误，把边框变红
alert("请选择生日")
}
return flag_b;
},check_telephone(){
const regx_t = /^1[3456789]\d{9}$/;
let flag_t = regx_t.test(this.telephone);
if (flag_t){
//正确把边框颜色还原
$('#telephone').css("border", "");
}else {
//规则错误，把边框变红
$('#telephone').css("border","2px red solid")
}
return flag_t;
},check_email(){
const regx_e = /^\w{6,20}@\w{2,20}\.(com|cn|net|org)$/;
let flag_e = regx_e.test(this.email);
if (flag_e){
//正确把边框颜色还原
$('#email').css("border", "");
}else {
//规则错误，把边框变红
$('#email').css("border","2px red solid")
}
return flag_e;
}, changeCheckCode() {
document.getElementById("check_code").src = "checkCode?" + new Date().getTime();
},register() {
let param = new URLSearchParams();
param.append('username', this.username);
param.append('password', this.password);
param.append('name', this.name);
param.append('birthday', this.birthday);
param.append('sex', this.sex);
param.append('telephone', this.telephone);
param.append('email', this.email);
let para = new URLSearchParams();
para.append('check', this.check);
let par = new URLSearchParams();
par.append('email', this.email);
if (this.check_username()&&this.check_password()&&this.check_email()&&this.check_name()&&this.check_telephone()&&this.check_birthday()){
axios.post('http://localhost:8080/travel/register/check', para)
.then(function (response) {
if (response.data.flag) {
axios.post('http://localhost:8080/travel/register/add_user', param)
.then(function (response) {
if (response.data.flag) {
alert("注册成功！")
axios.post('http://localhost:8080/travel/email/send_email', par)
.then(function (response) {
if (response.data.flag) {
alert("邮件已发送");
window.location="http://localhost:8080/travel/register_ok.html";
}
})
.catch(function (error) {
console.log(error);
});
} else{
alert("注册失败！")
document.getElementById("check_code").src = "checkCode?" + new Date().getTime();
}
})
.catch(function (error) {
console.log(error);
});
}else{
$('#msgInfo').text("验证码错误");
document.getElementById("check_code").src = "checkCode?" + new Date().getTime();
}
})
.catch(function (error) {
console.log(error);
});
}
}
}
})
</script>
注册成功
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/register.css">
<!--导入jquery-->
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div style="text-align:center;red:yellow;font-weight:bold;height:150px;padding-top:100px;font-size:30px;">
<h4>恭喜，注册成功！请登录您的注册邮箱进行激活您的账号，激活后才能登录。</h4>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>
头部
<!-- 头部 start -->
<header id="header"> <script src="js/getUrlParam.js"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<div id="header_frame">
<div class="top_banner">
<img src="images/top_banner.jpg" alt="">
</div>
<div class="shortcut">
<!-- 未登录状态 -->
<div class="login_out">
<a href="login.html">登录</a>
<a href="register.html">注册</a>
</div>
<!-- 登录状态 -->
<div class="login">
<span id="u_name">欢迎您，admin</span>
<a href="myfavorite.html" class="collection">我的收藏</a>
<a href="http://localhost:8080/travel/exit/exit">退出</a>
</div>
</div>
<div class="header_wrap">
<div class="topbar">
<div class="logo">
<a href="#"><img src="images/logo.jpg" alt=""></a>
</div>
<div class="search">
<input id="search_in" v-model="lu_xian" name="" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">
<a href="#" class="search-button" @click="jum()">搜索</a>
</div>
<div class="hottel">
<div class="hot_pic">
<img src="images/hot_tel.jpg" alt="">
</div>
<div class="hot_tel">
<p class="hot_time">客服热线(9:00-6:00)</p>
<p class="hot_num">888-888-8080</p>
</div>
</div>
</div>
</div>
</div>
<!-- 头部 end -->
<!-- 首页导航 -->
<div class="navitem">
<ul class="nav" id="category_ul">
</ul>
</div>
<script type="text/javascript">
new Vue({
el: "#header_frame",
data:{
lu_xian:''
},
mounted: function () {
this.getPath()
this.list_x()
},
methods: {
getPath() {
let param = new URLSearchParams();
param.append('path', this.path);
axios.post('http://localhost:8080/travel/header/find_name', param)
.then(function (response) {
$('#u_name').text(response.data.name);
})
.catch(function (error) {
console.log(error);
});
},
list_x() {
let param = new URLSearchParams();
param.append('path', this.path);
axios.post('http://localhost:8080/travel/header/find_list', param)
.then(function (response) {
let listStr = '<li class="nav-active"><a href="index.html">首页 </a></li>';
response.data.forEach(function (ele) {
listStr += '<li><a href="route_list.html?cid='+ele.cid+'">' + ele.cname + '</a> </li>'
});
listStr += '<li><a href="favoriterank.html">收藏排行榜</a></li>';
$('#category_ul').html(listStr);
}).catch(function (error) {
console.log(error);
});
}, jum(){
const rname = this.lu_xian;
const cid = 5;
location.href = '/travel/route_list.html?cid=' + cid + '&rname='+rname;
}
}
});
</script>
</header>
尾部
<!-- 尾部 start-->
<footer id="footer">
<div class="why_select">
<dl>
<dt class="fl">
<img src="images/icon_1.jpg" alt="">
</dt>
<dd>
<h1>产品齐全</h1>
<h2>产品全自主选，随心买</h2>
</dd>
</dl>
<dl>
<dt class="fl">
<img src="images/icon_2.jpg" alt="">
</dt>
<dd>
<h1>便利快捷</h1>
<h2>24小时不打烊，随时买</h2>
</dd>
</dl>
<dl>
<dt class="fl">
<img src="images/icon_3.jpg" alt="">
</dt>
<dd>
<h1>安全支付</h1>
<h2>知名支付工具，放心买</h2>
</dd>
</dl>
<dl>
<dt class="fl">
<img src="images/icon_4.jpg" alt="">
</dt>
<dd style="margin-right:0px;">
<h1>贴心服务</h1>
<h2>客服全年无休，安心买</h2>
</dd>
</dl>
</div>
<div class="company">
<p>西部开源科技股份有限公司 版权所有Copyright 2006-2100</p>
</div>
</footer>
收藏
<html lang="en">
<head>
<meta charset="utf-8">
<title>收藏排行榜</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/ranking-list.css">
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<div class="contant">
<div class="shaixuan">
<span>线路名称</span>
<input type="text">
<span>金额</span>
<input type="text">~<input type="text">
<button>搜索</button>
</div>
<div class="list clearfix">
<ul>
<li>
<span class="num one">1</span>
<a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
<h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
<p>
<b class="price">¥<span>899</span>起</b>
<span class="shouchang">已收藏450次</span>
</p>
</li>
<li>
<span class="num two">2</span>
<a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
<h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
<p>
<b class="price">¥<span>899</span>起</b>
<span class="shouchang">已收藏450次</span>
</p>
</li>
<li>
<span class="num">3</span>
<a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
<h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
<p>
<b class="price">¥<span>899</span>起</b>
<span class="shouchang">已收藏450次</span>
</p>
</li>
<li>
<span class="num">4</span>
<a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
<h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
<p>
<b class="price">¥<span>899</span>起</b>
<span class="shouchang">已收藏450次</span>
</p>
</li>
<li>
<span class="num">5</span>
<a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
<h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
<p>
<b class="price">¥<span>899</span>起</b>
<span class="shouchang">已收藏450次</span>
</p>
</li>
<li>
<span class="num">6</span>
<a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
<h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
<p>
<b class="price">¥<span>899</span>起</b>
<span class="shouchang">已收藏450次</span>
</p>
</li>
<li>
<span class="num">7</span>
<a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
<h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
<p>
<b class="price">¥<span>899</span>起</b>
<span class="shouchang">已收藏450次</span>
</p>
</li>
<li>
<span class="num">8</span>
<a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
<h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
<p>
<b class="price">¥<span>899</span>起</b>
<span class="shouchang">已收藏450次</span>
</p>
</li>
</ul>
</div>
<div class="pageNum">
<ul>
<li><a href="">首页</a></li>
<li class="threeword"><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="threeword"><a href="javascript:;">下一页</a></li>
<li class="threeword"><a href="javascript:;">末页</a></li>
</ul>
</div>
</div>
<!--导入底部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>
我的收藏’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>西开旅游网-我的收藏</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<style>
.tab-content .row>div {
margin-top: 16px;
}
.tab-content {
margin-bottom: 36px;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 排行榜 start-->
<section id="content">
<section class="hemai_jx">
<div class="jx_top">
<div class="jx_tit">
<img src="images/icon_5.jpg" alt="">
<span>我的收藏</span>
</div>
</div>
<div class="jx_content">
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="row">
<div class="col-md-3">
<a href="route_detail.html">
<img src="images/collection_pic.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="route_detail.html">
<img src="images/collection_pic.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="route_detail.html">
<img src="images/collection_pic.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="route_detail.html">
<img src="images/collection_pic.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="route_detail.html">
<img src="images/collection_pic.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="route_detail.html">
<img src="images/collection_pic.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="route_detail.html">
<img src="images/collection_pic.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="route_detail.html">
<img src="images/collection_pic.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="route_detail.html">
<img src="images/collection_pic.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="route_detail.html">
<img src="images/collection_pic.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="route_detail.html">
<img src="images/collection_pic.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="jroute_detail.html">
<img src="images/collection_pic.jpg" alt="">
<div class="has_border">
<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="pageNum">
<ul>
<li><a href="">首页</a></li>
<li class="threeword"><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="threeword"><a href="javascript:;">下一页</a></li>
<li class="threeword"><a href="javascript:;">末页</a></li>
</ul>
</div>
</section>
</section>
<!-- 排行榜 end-->
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>
路线列表
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>西开旅游-搜索</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/getUrlParam.js"></script>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/search.css">
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="route_frame">
<div id="header"></div>
<div class="page_one">
<div class="contant">
<div class="crumbs">
<img src="images/search.png" alt="">
<p>西开旅行><span>搜索结果</span></p>
</div>
<div class="xinxi clearfix">
<div class="left">
<div class="header">
<span>商品信息</span>
<span class="jg">价格</span>
</div>
<ul id="route_ul">
<!-- <li>
<div class="img"><img src="images/04-search_03.jpg" alt=""></div>
<div class="text1">
<p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
<br/>
<p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
</div>
<div class="price">
<p class="price_num">
<span>¥</span>
<span>299</span>
<span>起</span>
</p>
<p><a href="route_detail.html">查看详情</a></p>
</div>
</li>-->
</ul>
<div class="page_num_inf">
<i></i> 共
<span id="pages">0</span>页<span id="total">0</span>条
</div>
<div class="pageNum">
<ul id="ul_limit_bar">
<!-- <li><a href="">首页</a></li>
<li class="threeword"><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="threeword"><a href="javascript:;">下一页</a></li>
<li class="threeword"><a href="javascript:;">末页</a></li>-->
</ul>
</div>
</div>
<div class="right">
<div class="top">
<div class="hot">HOT</div>
<span>热门推荐</span>
</div>
<ul>
<li>
<div class="left"><img src="images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
<li>
<div class="left"><img src="images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
<li>
<div class="left"><img src="images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
<li>
<div class="left"><img src="images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p>网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
<li>
<div class="left"><img src="images/04-search_09.jpg" alt=""></div>
<div class="right">
<p>清远新银盏温泉度假村酒店/自由行套...</p>
<p @click="jump_page(5,1)">网付价<span>¥<span>899</span>起</span>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--引入头部-->
<div id="footer"></div>
<script type="text/javascript" src="js/include.js"></script>
</div>
</body>
</html>
<script type="text/javascript">
const cid = UrlParam.param("cid");
const rname = UrlParam.param("rname");
new Vue({
el: "#route_frame",
mounted: function () {
this.list_x()
this.l_x()
},
methods: {
list_x() {
let li = '';
let routeli = '';
let param = new URLSearchParams();
param.append('cid', cid);
if (rname==null) {
axios.post('http://localhost:8080/travel/route/find_route', param)
.then(function (response) {
console.log(response);
$('#pages').text(response.data.pages);
$('#total').text(response.data.total);
li += `<li><a href="#" @click="jump_page(cid, 1)">首页</a></li>`;
li += `<li class="threeword" @click="jump_page(cid, ${response.data.pageNumber-1})"><a href="#">上一页</a> </li>`;
response.data.navigatePageNumbers.forEach(function (ele) {
if (response.data.pageNumber === ele) {
li += `<li class="curPage" @click="jump_page(cid, ${ele})"><a href="#">${ele}</a></li>`;
} else {
li += `<li><a href="#" @click="jump_page(cid, ${ele})">${ele}</a></li>`;
}
});
li += `<li class="threeword" @click="jump_page(cid, ${response.data.pageNumber+1})"><a href="#">下一页</a> </li>`;
li += `<li><a href="#" @click="jump_page(cid, ${response.data.pages})">末页</a></li>`;
$('#ul_limit_bar').html(li);
response.data.list.forEach(function (ele) {
routeli += `<li><div class="img"><img src="${ele.rimage}" style="width: 299px"></div><div class="text1"> <p>${ele.rname}</p><br /><p>${ele.routeIntroduce}</p></div><div class="price"><p class="price_num"><span>¥</span><span>${ele.price} </span><span>起</span></p><p><a href="http://localhost:8080/travel//route_detail.html?rid=${ele.rid}">查看详情</a></p> </div></li>`;
});
$('#route_ul').html(routeli);
})
.catch(function (error) {
console.log(error);
});}
}, l_x() {
let li = '';
let routeli = '';
if (rname != null) {
let param = new URLSearchParams();
param.append('cid', cid);
param.append('rname', rname);
axios.post('http://localhost:8080/travel/route/find_find', param)
.then(function (response) {
console.log(response);
$('#pages').text(response.data.pages);
$('#total').text(response.data.total);
li += `<li><a href="#" @click="jump_page(cid, 1)">首页</a></li>`;
li += `<li class="threeword" @click="jump_page(cid, ${response.data.pageNumber-1})"><a href="#">上一页</a> </li>`;
response.data.navigatePageNumbers.forEach(function (ele) {
if (response.data.pageNumber === ele) {
li += `<li class="curPage" @click="jump_page(cid, ${ele})"><a href="#">${ele}</a></li>`;
} else {
li += `<li><a href="#" @click="jump_page(cid, ${ele})">${ele}</a></li>`;
}
});
li += `<li class="threeword" @click="jump_page(cid, ${response.data.pageNumber+1})"><a href="#">下一页</a> </li>`;
li += `<li><a href="#" @click="jump_page(cid, ${response.data.pages})">末页</a></li>`;
$('#ul_limit_bar').html(li);
response.data.list.forEach(function (ele) {
routeli += `<li><div class="img"><img src="${ele.rimage}" style="width: 299px"></div><div class="text1"> <p>${ele.rname}</p><br /><p>${ele.routeIntroduce}</p></div><div class="price"><p class="price_num"><span>¥</span><span>${ele.price} </span><span>起</span></p><p><a href="http://localhost:8080/travel//route_detail.html?rid=${ele.rid}">查看详情</a></p> </div></li>`;
});
$('#route_ul').html(routeli);
})
.catch(function (error) {
console.log(error);
});
}
}, jump_page(cid, pageNumber) {
alert(123456)
let li = '';
let routeli = '';
let param = new URLSearchParams();
param.append('cid', cid);
param.append('currentPage', pageNumber);
axios.post('http://localhost:8080/travel/route/find_route', param)
.then(function (response) {
console.log(response);
$('#pages').text(response.data.pages);
$('#total').text(response.data.total);
li += `<li><a href="#" @click="jump_page(cid, 1)">首页</a></li>`;
li += `<li class="threeword" @click="jump_page(cid, ${response.data.pageNumber-1})"><a href="#">上一页</a> </li>`;
response.data.navigatePageNumbers.forEach(function (ele) {
if (response.data.pageNumber === ele) {
li += `<li class="curPage" @click="jump_page(cid, ${ele})"><a href="#">${ele}</a></li>`;
} else {
li += `<li><a href="#" @click="jump_page(cid, ${ele})">${ele}</a></li>`;
}
});
li += `<li class="threeword" @click="jump_page(cid, ${response.data.pageNumber+1})"><a href="#">下一页</a> </li>`;
li += `<li><a href="#" @click="jump_page(cid, ${response.data.pages})">末页</a></li>`;
$('#ul_limit_bar').html(li);
response.data.list.forEach(function (ele) {
routeli += `<li><div class="img"><img src="${ele.rimage}" style="width: 299px"></div><div class="text1"> <p>${ele.rname}</p><br /><p>${ele.routeIntroduce}</p></div><div class="price"><p class="price_num"><span>¥</span><span>${ele.price} </span><span>起</span></p><p><a href="http://localhost:8080/travel//route_detail.html?rid=${ele.rid}">查看详情</a></p> </div></li>`;
});
$('#route_ul').html(routeli);
})
.catch(function (error) {
console.log(error);
});
}
}
});
</script>
路线详情
<html lang="en">
<head>
<meta charset="utf-8">
<title>路线详情</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/getUrlParam.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/route-detail.css">
</head>
<body>
<div id="route_detail">
<!--引入头部-->
<div id="header"></div>
<!-- 详情 start -->
<div class="wrap">
<div class="bread_box">
<a href="#">首页</a>
<span> ></span>
<a href="#" @click="list_x()">国内游</a><span> ></span>
<a href="#" id="x1"></a>
</div>
<div class="prosum_box">
<dl class="prosum_left">
<dt id="bigpi">
</dt>
<dd id="pict">
</dd>
</dl>
<div class="prosum_right">
<p class="pros_title" id="x2"></p>
<p class="hot" id="x3"></p>
<div class="pros_other">
<p id="x4">经营商家 ：人间黑店</p>
<p id="x5">咨询电话 : 110 </p>
<p id="x6">地址 ：狐狸河监狱</p>
</div>
<div class="pros_price">
<p class="price"><strong id="x7">¥2699.00</strong><span>起</span></p>
<p class="collect">
<a class="btn" id="btn_shoucang" @click="add_fav()"><i
class="glyphicon glyphicon-heart-empty"></i>点击收藏</a><a
class="btn already" id="btn_shou" @click="delete_fav()" disabled="disabled"><i
class="glyphicon glyphicon-heart-empty"></i>取消收藏</a>
<!-- <a class="btn already" id="btn_shou" @click="delete_fav()" disabled="disabled"><i
class="glyphicon glyphicon-heart-empty"></i>取消收藏</a>-->
<span id="many">已收藏100次</span>
</p>
</div>
</div>
</div>
<div class="you_need_konw">
<span>旅游须知</span>
<div class="notice">
<p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br>
<p>
2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p>
<p>
3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p>
<p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p>
<p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p>
<p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br>
<p>
2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p>
<p>
3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p>
<p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p>
<p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p>
</div>
</div>
</div>
<!-- 详情 end -->
<!--引入头部-->
<div id="footer"></div>
<script src="js/jquery-3.3.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<script>
$(document).ready(function () {
//焦点图效果
//点击图片切换图片
$('.little_img').on('mousemove', function () {
$('.little_img').removeClass('cur_img');
var big_pic = $(this).data('bigpic');
$('.big_img').attr('src', big_pic);
$(this).addClass('cur_img');
});
//上下切换
var picindex = 0;
var nextindex = 4;
$('.down_img').on('click', function () {
var num = $('.little_img').length;
if ((nextindex + 1) <= num) {
$('.little_img:eq(' + picindex + ')').hide();
$('.little_img:eq(' + nextindex + ')').show();
picindex = picindex + 1;
nextindex = nextindex + 1;
}
});
$('.up_img').on('click', function () {
var num = $('.little_img').length;
if (picindex > 0) {
$('.little_img:eq(' + (nextindex - 1) + ')').hide();
$('.little_img:eq(' + (picindex - 1) + ')').show();
picindex = picindex - 1;
nextindex = nextindex - 1;
}
});
//自动播放
// var timer = setInterval("auto_play()", 5000);
});
//自动轮播方法
function auto_play() {
var cur_index = $('.prosum_left dd').find('a.cur_img').index();
cur_index = cur_index - 1;
var num = $('.little_img').length;
var max_index = 3;
if ((num - 1) < 3) {
max_index = num - 1;
}
if (cur_index < max_index) {
var next_index = cur_index + 1;
var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
$('.little_img').removeClass('cur_img');
$('.little_img:eq(' + next_index + ')').addClass('cur_img');
$('.big_img').attr('src', big_pic);
} else {
var big_pic = $('.little_img:eq(0)').data('bigpic');
$('.little_img').removeClass('cur_img');
$('.little_img:eq(0)').addClass('cur_img');
$('.big_img').attr('src', big_pic);
}
}
</script>
</div>
</body>
</html>
<script type="text/javascript">
const rid = UrlParam.param("rid");
new Vue({
el: "#route_detail",
mounted: function () {
this.list_x()
this.chec()
},
methods: {
list_x() {
let li = '';
let lii = '';
let param = new URLSearchParams();
param.append('rid', rid);
axios.post('http://localhost:8080/travel/shop/find_shop', param)
.then(function (response) {
console.log(response);
$('#x1').text(response.data.rname);
$('#x2').text(response.data.rname);
$('#x3').text(response.data.routeIntroduce);
$('#x4').text("经营商家：" + response.data.seller.sname);
$('#x5').text("咨询电话：" + response.data.seller.consphone);
$('#x6').text("地址：" + response.data.seller.address);
$('#x7').text(response.data.price);
$('#many').text("已收藏" + response.data.count + "次");
lii += ` <img id="i1" alt="" class="big_img"
src="${response.data.rimage}">`;
$('#bigpi').html(lii);
response.data.routeImgList.forEach(function (ele) {
li += `<a title="" class="little_img"
data-bigpic="${ele.bigPic}">
<img id="i32" src="${ele.smallPic}" alt="">
</a>`;
});
li += `<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>`;
$('#pict').html(li);
})
.catch(function (error) {
console.log(error);
});
}, chec() {
let param = new URLSearchParams();
param.append('rid', rid);
axios.post('http://localhost:8080/travel/fav/check', param)
.then(function (response) {
console.log(response);
if (response.data) {
$('#btn_shoucang').addClass("btn already").attr("disabled", "disabled")
$('#btn_shoucang').off();
$('#btn_shou').addClass("btn").removeAttr("disabled", "disabled")
$('#btn_shou').off();
} else {
}
})
.catch(function (error) {
console.log(error);
});
}, add_fav() {
let param = new URLSearchParams();
param.append('rid', rid);
axios.post('http://localhost:8080/travel/frr/chec', param)
.then(function (response) {
console.log(response);
if (response.data) {
axios.post('http://localhost:8080/travel/fav/add_fav', param)
.then(function (response) {
location.reload();
})
.catch(function (error) {
console.log(error);
});
} else {
alert("你尚未登录，请登录")
location.href = "/travel/login.html";
}
})
.catch(function (error) {
console.log(error);
});
}, delete_fav() {
let param = new URLSearchParams();
param.append('rid', rid);
axios.post('http://localhost:8080/travel/frr/chec', param)
.then(function (response) {
console.log(response);
if (response.data) {
axios.post('http://localhost:8080/travel/fav/delete_fav', param)
.then(function (response) {
location.reload();
})
.catch(function (error) {
console.log(error);
});
} else {
alert("你尚未登录，请登录")
location.href = "/travel/login.html";
}
})
.catch(function (error) {
console.log(error);
});
}
}
});
</script>
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
