旅游系统（SSM框架+MySQL+Redis+VUE）前端页面代码

文章目录

  • 旅游系统（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="data:images/banner_1.jpg" alt=""></div><div class="item"><img src="data:images/banner_2.jpg" alt=""></div><div class="item"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/icon_6.jpg" alt=""><span>国内游</span></div></div><div class="heima_gn"><div class="guonei_l"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/icon_7.jpg" alt=""><span>境外游</span></div></div><div class="heima_gn"><div class="guonei_l"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/icon_1.jpg" alt=""></dt><dd><h1>产品齐全</h1><h2>产品全自主选，随心买</h2></dd></dl><dl><dt class="fl"><img src="data:images/icon_2.jpg" alt=""></dt><dd><h1>便利快捷</h1><h2>24小时不打烊，随时买</h2></dd></dl><dl><dt class="fl"><img src="data:images/icon_3.jpg" alt=""></dt><dd><h1>安全支付</h1><h2>知名支付工具，放心买</h2></dd></dl><dl><dt class="fl"><img src="data: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="data:images/jiangxuan_4.jpg" alt=""></a><h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4><p><b class="price">&yen;<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="data:images/jiangxuan_4.jpg" alt=""></a><h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4><p><b class="price">&yen;<span>899</span>起</b><span class="shouchang">已收藏450次</span></p></li><li><span class="num">3</span><a href="route_detail.html"><img src="data:images/jiangxuan_4.jpg" alt=""></a><h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4><p><b class="price">&yen;<span>899</span>起</b><span class="shouchang">已收藏450次</span></p></li><li><span class="num">4</span><a href="route_detail.html"><img src="data:images/jiangxuan_4.jpg" alt=""></a><h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4><p><b class="price">&yen;<span>899</span>起</b><span class="shouchang">已收藏450次</span></p></li><li><span class="num">5</span><a href="route_detail.html"><img src="data:images/jiangxuan_4.jpg" alt=""></a><h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4><p><b class="price">&yen;<span>899</span>起</b><span class="shouchang">已收藏450次</span></p></li><li><span class="num">6</span><a href="route_detail.html"><img src="data:images/jiangxuan_4.jpg" alt=""></a><h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4><p><b class="price">&yen;<span>899</span>起</b><span class="shouchang">已收藏450次</span></p></li><li><span class="num">7</span><a href="route_detail.html"><img src="data:images/jiangxuan_4.jpg" alt=""></a><h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4><p><b class="price">&yen;<span>899</span>起</b><span class="shouchang">已收藏450次</span></p></li><li><span class="num">8</span><a href="route_detail.html"><img src="data:images/jiangxuan_4.jpg" alt=""></a><h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4><p><b class="price">&yen;<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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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>&yen;</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="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p  @click="jump_page(5,1)">网付价<span>&yen;<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>&yen;</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>&yen;</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>&yen;</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> &gt;</span><a href="#" @click="list_x()">国内游</a><span> &gt;</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()"><iclass="glyphicon glyphicon-heart-empty"></i>点击收藏</a><aclass="btn already" id="btn_shou" @click="delete_fav()" disabled="disabled"><iclass="glyphicon glyphicon-heart-empty"></i>取消收藏</a><!--   <a class="btn already" id="btn_shou" @click="delete_fav()" disabled="disabled"><iclass="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>

旅游系统（SSM框架+MySQL+Redis+VUE）前端页面代码相关推荐

  1. 旅游系统（SSM框架+MySQL+Redis+VUE）后端代码

    旅游系统(SSM框架+MySQL+Redis+VUE)后端代码 文章目录 旅游系统(SSM框架+MySQL+Redis+VUE)后端代码 Controller 登录 注册 路线 邮件 退出 头部信息 ...

  2. SSM通用活动报名系统（会员、管理员）+SSM框架+mysql+tomcat+Maven项目（毕设学习）可以用于学习SSM、maven项目入门

    SSM通用活动报名系统(会员.管理员)+SSM框架+mysql+tomcat+Maven项目(毕设学习)可以用于学习SSM.maven项目入门 可以用于课程设计.毕业设计的知识点入门学习 提示:此资源 ...

  3. 基于javaweb的网上图书商城系统(java+ssm+jsp+mysql+redis+jwt+shiro+rabbitmq+easyui)

    基于javaweb的网上图书商城系统(java+ssm+jsp+mysql+redis+jwt+shiro+rabbitmq+easyui) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥ ...

  4. 毕业设计——音乐播放系统 可以自己上传歌曲 SSM框架 MYSQL数据库 功能齐全

    音乐播放系统 可以自己上传歌曲 SSM框架 MYSQL数据库 功能齐全 可以注册账号 登录 在线上传歌曲 发表评论 在线听音乐 登录 注册 首页 播放音乐以及在线评论 个人后台页面 查看我发布的以及上 ...

  5. （精品）ssm Java mysql maven vue健康医疗预约系统(源码+系统+mysql数据库+lw文档)

    下载地址:https://download.csdn.net/download/m0_71595576/85519044 项目介绍: (精品)ssm Java mysql maven vue健康医疗预 ...

  6. Java项目:网上图书商城系统(java+SSM+Jsp+MySQL+Redis+JWT+Shiro+RabbitMQ+EasyUI)

    源码获取:博客首页 "资源" 里下载! 这个项目涉及到Shiro整合JWT.秒杀功能所具备的基本要求(限流.乐观锁.接口隐藏.JMeter高并发测试等等).消息中间件RabbitM ...

  7. Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码前后端交互+SSM框架 管理员登录 游客登录 普通用户登录 人员的增删改查 信息更新 图片上传 分页查询）

    Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码(前后端交互+SSM框架 管理员登录 游客登录 普通用户登录 人员的增删改查 信息更新 图片上传 分页查询 修改密 ...

  8. 教育培训课程报名管理系统（学生、教师、管理员）+SSM框架+mysql+tomcat+Maven项目（毕设学习）

    教育培训课程报名管理系统(学生.教师.管理员)+SSM框架+mysql+tomcat+Maven项目(毕设学习)可以用于学习SSM.maven项目入门 可以用于课程设计.毕业设计的知识点入门学习 提示 ...

  9. ssm基于微信小程序的食堂线上预约点餐系统--(ssm+uinapp+Mysql)

    ssm基于微信小程序的食堂线上预约点餐系统–(ssm+uinapp+Mysql) 在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括食堂线上预约点餐系统的网络应用,在外 ...

最新文章

  1. 【HDU】1005 Number Sequence （有点可爱）
  2. python出现Unknown label type: ‘continuous‘
  3. 当DRM出错时的解决办法
  4. 我所遭遇过的游戏中间件---HumanIK
  5. Bash脚本教程之目录堆栈
  6. linux kvm dhcp配置,《转》QEMU-KVM创建虚拟机自动指定IP的配置
  7. SendMessage
  8. 致 Python 初学者
  9. C语言简易贪吃蛇（附完整代码）
  10. indoe智能客户端ios_inode客户端证书导入
  11. JavaScript世界各地时间转换为北京时间
  12. 摄氏度和华氏度的相互转换
  13. [放遗忘]PR进行视频剪辑的两种办法
  14. 电脑主机 外置usb蓝牙适配器 连接后声音断断续续
  15. 洛谷——P1560 [USACO5.2]蜗牛的旅行Snail Trails
  16. 玩转Ubuntu（Linux原生游戏 超级企鹅（SuperTux））
  17. 获取域名服务器信息吗,获取域名的WHOIS信息
  18. 【高数】变上限积分的等价无穷小替换
  19. java xmemcached incr_XMemcached的基本使用
  20. html 组合快捷键,ctrl常用组合键有哪些

热门文章

  1. s21.云原生发展经历的阶段与未来发展趋势
  2. Not Found - GET https://registry.npmmirror.com/4.5.17 - [NOT_FOUND] 4.5.17 not found
  3. 好辛苦找到的折纸大全(图解)
  4. go语言字符串换行_Go语言字符串高效拼接（一）
  5. 《动手学深度学习》笔记——深度学习简介
  6. 如何安装联想计算机系统,如何一键安装联想电脑系统
  7. MATLAB中hasFrame和readFrame
  8. html密码框怎么添加小图标,JS Input里添加小图标的两种方法
  9. 怎么将CAD转换为JPG格式？CAD格式转换轻松教你搞定！
  10. 家人们，我用ChatGPT来做减肥指引，分享下心得