您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

【Java45】旅游案例:数据回显,注销/退出,首页类别显示,精选

文章目录

  • 1.登陆数据回显
    • 1.1 前端
  • 2.登陆案例_注销/退出
  • 3.首页类别显示
    • 3.1 web
    • 3.2 service
    • 3.3 dao
  • 4.精选
    • 4.1 web
    • 4.2 service
    • 4.3 dao
    • 4.4 前端


1.登陆数据回显

在这里插入图片描述
如上前端写在header.html中。
在这里插入图片描述

1.1 前端

//header.html
<!-- 头部 start -->
    <header id="header2">
        <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="name">欢迎回来,admin</span>
                <a href="myfavorite.html" class="collection">我的收藏</a>
                <a href="javascript:;" onclick="method02()">注销</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 name="" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">
                    <a href="javascript:;" class="search-button" id="search">搜索</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">400-618-9090</p>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 头部 end -->
     <!-- 首页导航 -->
    <div class="navitem">
        <ul class="nav">
            <!--TODO : 类别-->
           <!-- <li class="nav-active"><a href="index.html">首页</a></li>
            <li><a href="route_list.html">门票</a></li>
            <li><a href="route_list.html">酒店</a></li>
            <li><a href="route_list.html">香港车票</a></li>
            <li><a href="route_list.html">出境游</a></li>
            <li><a href="route_list.html">国内游</a></li>
            <li><a href="route_list.html">港澳游</a></li>
            <li><a href="route_list.html">抱团定制</a></li>
            <li><a href="route_list.html">全球自由行</a></li>
            <li><a href="favoriterank.html">收藏排行榜</a></li>-->
        </ul>
    </div>

<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
    $(function () {
        $.get("/UserServlet?method=isLogin","",function (result) {
            // debugger;
            if(result.flag){
                $(".login_out").hide()  //相应模块隐藏掉,其他模块正常显示
                $("#name").html("欢迎回来" + result.username)
            } else {
                $(".login").hide()
            }
        },"json")
    })
</script>

<script>
    function method02() {
        $.get("/UserServlet?method=logout","",function (result) {
            if(result.flag){
                location.href = "/login.html"
            }
        },"json")
    }
</script>

<script>
    $(function () {
        $.get("/CategoryServlet?method=queryAllCategory","",function (result) {
            //TODO: 响应回来的数据填充到页面
            // console.log(result)
            /*
            *   字符串拼接 : 阅读性很差 (现在ES5)
            *   ES6 : EcmaScrpit:Settings - 搜索language - JavaScript - EcmaScrpit6
            * */

          /* var content = "<li class=\"nav-active\"><a href=\"index.html\">首页</a></li>"
            $(result).each(function (index,element) {
                content += "<li><a href=\"route_list.html\">"+element.cname+"</a></li>"
            })
            content += "<li><a href=\"favoriterank.html\">收藏排行榜</a></li>"*/


            //如下es6语法:双引号不需要转移,拼接用${}替换"+ +"
            var content = `<li class="nav-active"><a href="index.html">首页</a></li>`
            $(result).each(function (index,element) {
                content += `<li><a href="/route_list.html?cid=${element.cid}">${element.cname}</a></li>`
            })
            content += `<li><a href="favoriterank.html">收藏排行榜</a></li>`

            $(".nav").html(content)
        },"json")
    })
</script>

<script src="js/getParameter.js"></script>
<script>
    //TODO:
        $("#search").click(function () {
            //搜索按钮被点击的时候,获取输入框中的关键字
            var keyword = $(".search_input").val()
            var cid = getParameter("cid");
            if(cid != null && cid != "null"){
                location.href = `/route_list.html?cid=${cid}&keyword=${keyword}`
            }else{
                location.href = "/route_list.html?keyword=" + keyword
            }
        })
</script>

在这里插入图片描述
在这里插入图片描述

2.登陆案例_注销/退出

用户注册:将用户信息保存在session里。页面数据回显:从服务器里session获取数据判断。
在这里插入图片描述

3.首页类别显示

如下首页和收藏排行榜都是固定的,中间和tab_category表字段一一对应,代码重构后只剩BaseServlet和UserServlet,但类别显示业务不和UserServlet用同一张表,所以不能写在UserServlet里。
在这里插入图片描述
在这里插入图片描述

3.1 web

package com.heima.travel.web;
import com.heima.travel.bean.Category;
import com.heima.travel.service.CategoryService;
import com.heima.travel.service.impl.CategoryServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(urlPatterns = "/CategoryServlet")
public class CategoryServlet extends BaseServlet {
    // 查询所有的商品类别
    protected void queryAllCategory(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        CategoryService service = new CategoryServiceImpl();
        String json = service.findAll();
        response.getWriter().print(json);
    }
}

3.2 service

package com.heima.travel.service;

public interface CategoryService {    
    String findAll(); //查询所有的类别
}
package com.heima.travel.service.impl;
import com.alibaba.fastjson.JSON;
import com.heima.travel.bean.Category;
import com.heima.travel.dao.CategoryDao;
import com.heima.travel.dao.impl.CategoryDaoImpl;
import com.heima.travel.service.CategoryService;
import com.heima.travel.utils.JedisUtils;
import redis.clients.jedis.Jedis;
import java.util.List;

public class CategoryServiceImpl implements CategoryService {
    public static final String CATEGORY_LIST_CACHE = "category_list_cache";
    @Override
    public String findAll() {        
        //先从redis中取()   //redis服务端需要手动开, mysql服务端自动开
        Jedis jedis = JedisUtils.getJedis();
        String json = jedis.get(CATEGORY_LIST_CACHE);
        
        if(json == null){                
            CategoryDao dao  =  new CategoryDaoImpl(); //再从mysql数据库中取
            List<Category> list = dao.findAll();
            json = JSON.toJSONString(list);
                
            jedis.set(CATEGORY_LIST_CACHE,json); //记得往redis中存一份
            System.out.println("从mysql中");
        }else{
            System.out.println("从缓存中");
        }        
        jedis.close(); //千万要还jedis连接
        return json;
    }
}

3.3 dao

package com.heima.travel.dao;
import com.heima.travel.bean.Category;
import java.util.List;

public interface CategoryDao {
    List<Category> findAll();
}
package com.heima.travel.dao.impl;
import com.heima.travel.bean.Category;
import com.heima.travel.dao.CategoryDao;
import com.heima.travel.utils.C3p0Utils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import java.util.List;

public class CategoryDaoImpl implements CategoryDao {
    @Override
    public List<Category> findAll() {
        String sql = "select * from tab_category";
        JdbcTemplate template = C3p0Utils.getTemplate();
        List<Category> list = template.query(sql, new BeanPropertyRowMapper<>(Category.class));
        return list;
    }
}

4.精选

tab_category表是一方,tab_route是多方。

public class Route implements Serializable { //旅游线路商品实体类
    private int rid;//线路id,必输
    private String rname;//线路名称,必输
    private double price;//价格,必输
    private String routeIntroduce;//线路介绍
    private String rflag;   //是否上架,必输,0代表没有上架,1代表是上架
    private String rdate;   //上架时间
    private String isThemeTour;//是否主题旅游,必输,0代表不是,1代表是
    private int count;//收藏数量
    private int cid;//所属分类,必输
    private String rimage;//缩略图
    private int sid;//所属商家
    private String sourceId;//抓取数据的来源id

    private Category category;//所属分类
    private Seller seller;//所属商家
    private List<RouteImg> routeImgList;//商品详情图片列表

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.1 web

package com.heima.travel.web;
import com.heima.travel.service.RouteService;
import com.heima.travel.service.impl.RouteServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(urlPatterns = "/RouteServlet")
public class RouteServlet extends BaseServlet{
    RouteService service = new RouteServiceImpl();
    //精选线路查询
    protected void routeSelection(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String json = service.findRouteSelection();
        response.getWriter().print(json);
    }

    //TODO: 旅游线路列表分页查询
    protected void routePageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String pageStr = request.getParameter("page");
        String countStr = request.getParameter("count");
        String cidStr = request.getParameter("cid");
        String keyword = request.getParameter("keyword");

        String json = service.findRouteByPage(pageStr,countStr,cidStr,keyword);
        response.getWriter().print(json);
    }

    //查看线路详情
    protected void queryRouteDetail(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String rid = request.getParameter("rid");
        String json = service.findRouteDetail(rid);
        response.getWriter().print(json);
    }

    //查看收藏线路排行榜
    protected void getRank(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String pageStr = request.getParameter("page");
        String countStr = request.getParameter("count");
        String kd = request.getParameter("kd");
        String lowPrice = request.getParameter("lowPrice");
        String highPrice = request.getParameter("highPrice");

        String json = service.findRouteRank(pageStr,countStr,kd,lowPrice,highPrice);
        response.getWriter().print(json);
    }
}

4.2 service

package com.heima.travel.service;

public interface RouteService {
    //精选线路
    String findRouteSelection();
    //线路分页
    String findRouteByPage(String pageStr, String countStr, String cidStr, String keyword);
    //线路详情
    String findRouteDetail(String rid);
    //线路收藏排行
    String findRouteRank(String pageStr, String countStr, String kd, String lowPrice, String highPrice);
}
package com.heima.travel.service.impl;
import com.alibaba.fastjson.JSON;
import com.heima.travel.bean.Route;
import com.heima.travel.bean.RouteImg;
import com.heima.travel.dao.RouteDao;
import com.heima.travel.dao.impl.RouteDaoImpl;
import com.heima.travel.service.RouteService;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class RouteServiceImpl implements RouteService {
    RouteDao dao = new RouteDaoImpl();
    @Override
    public String findRouteSelection() {
        HashMap<String, Object> map = new HashMap<>();
        List<Route> popularList = dao.findRouteByCount();
        List<Route> newestList = dao.findRouteByRdate();
        List<Route> themeList = dao.findRouteByTheme();

        map.put("popular",popularList);
        map.put("newest",newestList);
        map.put("theme",themeList);
        
        return JSON.toJSONString(map);
    }

    @Override
    public String findRouteByPage(String pageStr, String countStr, String cidStr, String keyword)  
    {
        int page = Integer.parseInt(pageStr);
        int count = Integer.parseInt(countStr);

        int offset = (page-1) * count;

        HashMap<String, Object> map = new HashMap<>();
            //分页数据
        List<Route> list = dao.findRouteByPage(offset,count,cidStr,keyword);
            //总记录数  TODO:
        int sum = dao.findRouteCount(cidStr,keyword);
            //总页数
        int pageCount = sum%count==0?sum/count : sum/count+1;

        map.put("list",list);
        map.put("sum",sum);
        map.put("pageCount",pageCount);

        return JSON.toJSONString(map);
    }

    @Override
    public String findRouteDetail(String rid) {
        Map<String,Object> map = dao.findRouteDetailByRid(rid);

        List<RouteImg> list = dao.findRouteImgByRid(rid);
        map.put("list",list);

        return JSON.toJSONString(map);
    }

    @Override
    public String findRouteRank(String pageStr, String countStr, String kd, String lowPrice, String highPrice) {
        HashMap<String, Object> map = new HashMap<>();

        int page = Integer.parseInt(pageStr);
        int count = Integer.parseInt(countStr);
        int offset = (page-1)*count;

        List<Route> list = dao.findRouteOrderByCount(offset,count,kd,lowPrice,highPrice);
        //查询总数: 不传cid,keyword TODO:
        int sum = dao.findRouteCount(kd,lowPrice,highPrice);
//        int pageCount = sum%count==0? sum/count : sum/count+1;
        int pageCount = (int) Math.ceil(sum*1.0/count);
        map.put("list",list);
        map.put("pageCount",pageCount);

        return JSON.toJSONString(map);
    }
}

4.3 dao

package com.heima.travel.dao;
import com.heima.travel.bean.Route;
import com.heima.travel.bean.RouteImg;
import java.util.List;
import java.util.Map;

public interface RouteDao {
    List<Route> findRouteByCount();

    List<Route> findRouteByRdate();

    List<Route> findRouteByTheme();

    List<Route> findRouteByPage(int offset, int count, String cidStr, String keyword);

    int findRouteCount(String cidStr, String keyword);

    Map<String,Object> findRouteDetailByRid(String rid);

    List<RouteImg> findRouteImgByRid(String rid);

    List<Route> findRouteOrderByCount(int offset, int count, String kd, String lowPrice, String highPrice);

    int findRouteCount(String kd, String lowPrice, String highPrice);
}
package com.heima.travel.dao.impl;
import com.heima.travel.bean.Route;
import com.heima.travel.bean.RouteImg;
import com.heima.travel.dao.RouteDao;
import com.heima.travel.utils.C3p0Utils;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

public class RouteDaoImpl implements RouteDao {
    @Override
    public List<RouteImg> findRouteImgByRid(String rid) {
        String sql = "select * from tab_route_img where rid = ?";
        List<RouteImg> list = template.query(sql, new BeanPropertyRowMapper<>(RouteImg.class), rid);
        return list;
    }

    @Override
    public List<Route> findRouteOrderByCount(int offset, int count, String kd, String lowPrice, String highPrice) {
//        String sql = "select * from tab_route order by count desc limit ?,?";
        StringBuilder sb = new StringBuilder();
        sb.append("select * from tab_route where rflag = 1");

        ArrayList<Object> param = new ArrayList<>();
        if(kd != null && !kd.equals("")){
            sb.append(" and rname like ?");
            param.add("%" + kd + "%");
        }
        if(lowPrice != null && !lowPrice.equals("")){
            sb.append(" and price >= ?");
            param.add(lowPrice);
        }
        if(highPrice != null && !highPrice.equals("")){
            sb.append(" and price <= ?");
            param.add(highPrice);
        }
        sb.append(" order by count desc limit ?,?");
        param.add(offset);
        param.add(count);

        List<Route> list = template.query(sb.toString(), new BeanPropertyRowMapper<>(Route.class), param.toArray());
        return list;
    }

    @Override
    public int findRouteCount(String kd, String lowPrice, String highPrice) {
        StringBuilder sb = new StringBuilder();
        sb.append("select count(*) from tab_route where rflag = 1");

        ArrayList<Object> param = new ArrayList<>();
        if(kd != null && !kd.equals("")){
            sb.append(" and rname like ?");
            param.add("%" + kd + "%");
        }
        if(lowPrice != null && !lowPrice.equals("")){
            sb.append(" and price >= ?");
            param.add(lowPrice);
        }
        if(highPrice != null && !highPrice.equals("")){
            sb.append(" and price <= ?");
            param.add(highPrice);
        }

        int count = 0;
        try {
            count = template.queryForObject(sb.toString(), Integer.class, param.toArray());
        } catch (DataAccessException e) {

        }
        return count;
    }

//111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    JdbcTemplate template = C3p0Utils.getTemplate();
    @Override
    public List<Route> findRouteByCount() {
        String sql = "select * from tab_route where rflag = 1 order by count desc limit 4";
        List<Route> list = template.query(sql, new BeanPropertyRowMapper<>(Route.class));
        return list;
    }

    @Override
    public List<Route> findRouteByRdate() {
        String sql = "select * from tab_route where rflag = 1 order by rdate desc limit 4";
        List<Route> list = template.query(sql, new BeanPropertyRowMapper<>(Route.class));
        return list;
    }

    @Override
    public List<Route> findRouteByTheme() {
        String sql = "select * from tab_route where rflag = 1 and isThemeTour = 1 limit 4";
        List<Route> list = template.query(sql, new BeanPropertyRowMapper<>(Route.class));
        return list;
    }

//111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    @Override
    public List<Route> findRouteByPage(int offset, int count, String cidStr, String keyword) {
//        String sql = "select * from tab_route where rflag = 1 limit ?,?";
//        String sql = "select * from tab_route where rflag = 1 and cid = ? limit ?,?";

        ArrayList<Object> param = new ArrayList<>();

        StringBuilder sb = new StringBuilder();
        sb.append("select * from tab_route where rflag = 1");
        if(cidStr != null && !cidStr.equals("")){
            sb.append(" and cid = ?");
            param.add(cidStr);
        }
        if(keyword != null && !keyword.equals("")){
            sb.append(" and rname like ?");
            param.add("%" + keyword + "%"); // notice
        }
        sb.append(" limit ?,?");//注意空格
        param.add(offset);
        param.add(count);

        String sql = sb.toString();
        System.out.println("dao:" + sql);
        List<Route> list = template.query(sql, new BeanPropertyRowMapper<>(Route.class),param.toArray());
        return list;
    }

    @Override
    public int findRouteCount(String cidStr, String keyword) {
      // String sql = "select count(*) from tab_route where rflag = 1 and cid = ?";

        ArrayList<Object> param = new ArrayList<>();

        StringBuilder sb = new StringBuilder();
        sb.append("select count(*) from tab_route where rflag = 1");
        if(cidStr != null && !cidStr.equals("")){
            sb.append(" and cid = ?");
            param.add(cidStr);
        }
        if(keyword != null && !keyword.equals("")){
            sb.append(" and rname like ?");
            param.add("%" + keyword + "%"); // notice
        }
        String sql = sb.toString();

        int count = 0;
        try {
            count = template.queryForObject(sql, Integer.class,param.toArray());
        } catch (DataAccessException e) {

        }
        return count;
    }

    @Override
    public Map<String, Object> findRouteDetailByRid(String rid) {
        String sql = "SELECT * FROM tab_route tbr " +
                "INNER JOIN tab_category tbc ON tbr.cid=tbc.cid " +
                "INNER JOIN tab_seller tbs ON tbr.sid=tbs.sid " +
                "WHERE tbr.rid=?";
        Map<String, Object> map = template.queryForMap(sql, rid);
        return map;
    }
}

4.4 前端

//index.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>
    <!-- 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">
    <!-- 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>

//1111111111111111111111111111111111111111111111111111111111111111111111111111111
<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">
                            <!--TODO: -->
                           <!-- <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_4.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>上海直飞三亚54晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</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>
    <!-- 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>
</body>
</html>

//111111111111111111111111111111111111111111111111111111111111111111111111
<script>
    $(function () {
        $.get("/RouteServlet?method=routeSelection","",function (result) {
            // console.log(result)
            var popularList = result.popular
            var themeList = result.theme
            var newestList = result.newest

            var content = ""
            $(popularList).each(function (index,element) {
                content += `<div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="${element.rimage}" alt="">
                                    <div class="has_border">
                                        <h3>${element.rname}</h3>
                                        <div class="price">网付价<em></em><strong>${element.price}</strong><em></em></div>
                                    </div>
                                </a>
                            </div>`
            })

            $("#popularity .row").html(content)
        },"json")
    })
</script>

在这里插入图片描述
在这里插入图片描述


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进