JavaWeb総合ケースの旅行網3(完結)

22312 ワード

java ajax web

プロジェクト開発プロセス
11、観光路線名の照会

(1)クエリーパラメータの渡し

header.html

$("#search-button").click(function () {
    //    
    var rname = $("#search_input").val();

    var cid = getParameter("cid");
    //      http://localhost/travel/route_list.html?cid=5，   rname=xxx
    location.href="http://localhost/travel/route_list.html?cid="+cid+"&rname="+rname;
});

route_list.html

var cid = getParameter("cid");
 //  rname    
 var rname = getParameter("rname");
 //  rname    null  ""
 if(rname){
     //url  
     rname = window.decodeURIComponent(rname);
 }

(2)バックグラウンドコードの修正

RouteServlet

@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {

    private RouteService routeService = new RouteServiceImpl();

    /**
     *     
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.    
        String currentPageStr = request.getParameter("currentPage");
        String pageSizeStr = request.getParameter("pageSize");
        String cidStr = request.getParameter("cid");

        //  rname     
        String rname = request.getParameter("rname");
        rname = new String(rname.getBytes("iso-8859-1"),"utf-8");


        int cid = 0;//  id
        //2.    
        if(cidStr != null && cidStr.length() > 0){
            cid = Integer.parseInt(cidStr);
        }
        int currentPage = 0;//    ，     ，       
        if(currentPageStr != null && currentPageStr.length() > 0){
            currentPage = Integer.parseInt(currentPageStr);
        }else{
            currentPage = 1;
        }

        int pageSize = 0;//      ，     ，      5   
        if(pageSizeStr != null && pageSizeStr.length() > 0){
            pageSize = Integer.parseInt(pageSizeStr);
        }else{
            pageSize = 5;
        }

        //3.   service  PageBean  
        PageBean pb = routeService.pageQuery(cid, currentPage, pageSize,rname);

        //4.  pageBean      json，  
        writeValue(pb,response);

    }

}

Service

public PageBean pageQuery(int cid, int currentPage, int pageSize,String rname ) {
    //  PageBean
    PageBean pb = new PageBean();
    //      
    pb.setCurrentPage(currentPage);
    //        
    pb.setPageSize(pageSize);
    
    //      
    int totalCount = routeDao.findTotalCount(cid,rname);
    pb.setTotalCount(totalCount);
    //            
    int start = (currentPage - 1) * pageSize;//      
    List list = routeDao.findByPage(cid,start,pageSize,rname);
    pb.setList(list);

    //      =     /      
    int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize :(totalCount / pageSize) + 1 ;
    pb.setTotalPage(totalPage);


    return pb;
}

Dao

@Override
public int findTotalCount(int cid,String rname) {
    //String sql = "select count(*) from tab_route where cid = ?";
    //1.  sql  
    String sql = "select count(*) from tab_route where 1=1 ";
    StringBuilder sb = new StringBuilder(sql);

    List params = new ArrayList();//   
    //2.        
    if(cid != 0){
        sb.append( " and cid = ? ");

        params.add(cid);//  ？    
    }

    if(rname != null && rname.length() > 0){
        sb.append(" and rname like ? ");

        params.add("%"+rname+"%");
    }

    sql = sb.toString();


    return template.queryForObject(sql,Integer.class,params.toArray());
}

@Override
public List findByPage(int cid, int start, int pageSize,String rname) {
    //String sql = "select * from tab_route where cid = ? and rname like ?  limit ? , ?";
    String sql = " select * from tab_route where 1 = 1 ";
    //1.  sql  
    StringBuilder sb = new StringBuilder(sql);

    List params = new ArrayList();//   
    //2.        
    if(cid != 0){
        sb.append( " and cid = ? ");

        params.add(cid);//  ？    
    }

    if(rname != null && rname.length() > 0){
        sb.append(" and rname like ? ");

        params.add("%"+rname+"%");
    }
    sb.append(" limit ? , ? ");//    

    sql = sb.toString();

    params.add(start);
    params.add(pageSize);


    return template.query(sql,new BeanPropertyRowMapper(Route.class),params.toArray());
}

(3)フロントコードの修正

$(function () {
   /* var search = location.search;
    //alert(search);//?id=5
    //      ，      
    var cid = search.split("=")[1];*/
   //  cid    
   var cid = getParameter("cid");
    //  rname    
    var rname = getParameter("rname");
    //  rname    null  ""
    if(rname){
        //url  
        rname = window.decodeURIComponent(rname);
    }

    //        ，  load  ，  ajax      
    load(cid,null,rname);
});

function load(cid ,currentPage,rname){
    //  ajax  ，  route/pageQuery,  cid
    $.get("route/pageQuery",{cid:cid,currentPage:currentPage,rname:rname},function (pb) {
        //  pagebean  ，      

        //1.         
        //1.1           
        $("#totalPage").html(pb.totalPage);
        $("#totalCount").html(pb.totalCount);

        /*
                トップページ
                 のページ
                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                 のページ
                  のページ


         */
        var lis = "";

        var fristPage = 'トップページ';

        //        
        var beforeNum =  pb.currentPage - 1;
        if(beforeNum <= 0){
            beforeNum = 1;
        }

        var beforePage = ' のページ';

        lis += fristPage;
        lis += beforePage;
        //1.2       
        /*
            1.    10   ，     5 4   
            2.      5 ，    10 
            3.      4 ，    10 
        */

        //       begin,     end
        var begin; //     
        var end ; //      


        //1.   10   
        if(pb.totalPage < 10){
            //     10 

            begin = 1;
            end = pb.totalPage;
        }else{
            //     10 

            begin = pb.currentPage - 5 ;
            end = pb.currentPage + 4 ;

            //2.      5 ，    10 
            if(begin < 1){
                begin = 1;
                end = begin + 9;
            }

            //3.      4 ，    10 
            if(end > pb.totalPage){
                end = pb.totalPage;
                begin = end - 9 ;
            }
        }


        for (var i = begin; i <= end ; i++) {
            var li;
            //          i
            if(pb.currentPage == i){

                li = ''+i+'';

            }else{
                //     li
                li = ''+i+'';
            }
            //     
            lis += li;
        }





       /* for (var i = 1; i <= pb.totalPage ; i++) {
            var li;
            //          i
            if(pb.currentPage == i){

                li = ''+i+'';

            }else{
                //     li
                li = ''+i+'';
            }
            //     
            lis += li;
        }*/
        var lastPage = '  のページ';
        var nextPage = ' のページ';

        lis += nextPage;
        lis += lastPage;


        // lis      ul
        $("#pageNum").html(lis);



        /*
            
                
                
                    【 100     /    】            /     
                    

                    1-2   ，    ￥1099/2  ！      ，    ！
                
                
                    
                        ¥
                        299
                         
                    
                      の  
                
            

         */

        //2.      
        var route_lis = "";

        for (var i = 0; i < pb.list.length; i++) {
            //  {rid:1,rname:"xxx"}
            var route = pb.list[i];

            var li = '
' +
                '                        
' +
                '                        
' +
                '                            '+route.rname+'

' +
                '                            

' +
                '                            '+route.routeIntroduce+'

' +
                '                        

' +
                '                        
' +
                '                            
' +
                '                                ¥
' +
                '                                '+route.price+'
' +
                '                                 
' +
                '                            

' +
                '                              の  

' +
                '                        

' +
                '                    ';
            route_lis += li;
        }
        $("#route").html(route_lis);

        //       
        window.scrollTo(0,0);
    });

}

12、観光路線の詳細展示
(1)分析

(2)コード実装
バックグラウンドコード

Servlet

/**
 *   id             
 * @param request
 * @param response
 * @throws ServletException
 * @throws IOException
 */
public void findOne(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    //1.  id
    String rid = request.getParameter("rid");
    //2.  service  route  
    Route route = routeService.findOne(rid);
    //3.  json     
    writeValue(route,response);
}

Service

@Override
public Route findOne(String rid) {
    //1.  id route    route  
    Route route = routeDao.findOne(Integer.parseInt(rid));

    //2.  route id         
    List routeImgList = routeImgDao.findByRid(route.getRid());
    //2.2      route  
    route.setRouteImgList(routeImgList);
    //3.  route sid（  id）      
    Seller seller = sellerDao.findById(route.getSid());
    route.setSeller(seller);

    return route;
}

SellerDao

public class SellerDaoImpl implements SellerDao {

    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());



    @Override
    public Seller findById(int id) {

        String sql = "select * from tab_seller where sid = ? ";
        return template.queryForObject(sql,new BeanPropertyRowMapper(Seller.class),id);
    }
}

routeDao

@Override
public Route findOne(int rid) {
    String sql = "select * from tab_route where rid = ?";
    return template.queryForObject(sql,new BeanPropertyRowMapper(Route.class),rid);
}
RouteImgDao

public class RouteImgDaoImpl implements RouteImgDao {

    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());


    @Override
    public List findByRid(int rid) {
        String sql = "select * from tab_route_img where rid = ? ";
        return template.query(sql,new BeanPropertyRowMapper(RouteImg.class),rid);
    }
}

フロントコード

Route_detail.htmlにロード後

  1.	  rid
  2.	  ajax  ，  route  
  3.

//1.  rid
var rid = getParameter("rid");

//2.       route/findOne
 $.get("route/findOne",{rid:rid},function (route) {
     //3.      html
     $("#rname").html(route.rname);
     $("#routeIntroduce").html(route.routeIntroduce);
     $("#price").html("¥"+route.price);
     $("#sname").html(route.seller.sname);
     $("#consphone").html(route.seller.consphone);
     $("#address").html(route.seller.address);

     //    

     var ddstr = '';

     //  routeImgList
     for (var i = 0; i < route.routeImgList.length; i++) {
         var astr ;
         if(i >= 4){
             astr = '' +
'                         ' +
'';
         }else{
             astr = '' +
'                         ' +
'';
         }


         ddstr += astr;
     }
     ddstr+='';

     $("#dd").html(ddstr);

     //           
     goImg();
 });

13、旅行ルートのコレクション機能
(1)分析
現在のログインユーザがその回線をコレクションしているかどうかを判断する

ページのロードが完了するとajaxリクエストを送信し、ユーザがお気に入りであるか否かのタグを取得する

表記によって異なるボタンスタイルを示す

(2)コード作成
バックグラウンドコード

RouteServlet

public void isFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //1.     id
    String rid = request.getParameter("rid");

    //2.           user
    User user = (User) request.getSession().getAttribute("user");
    int uid;//  id
    if(user == null){
        //      
        uid = 0;
    }else{
        //      
        uid = user.getUid();
    }

    //3.   FavoriteService      
    boolean flag = favoriteService.isFavorite(rid, uid);

    //4.      
    writeValue(flag,response);
}

FavoriteService

@Override
public boolean isFavorite(String rid, int uid) {

    Favorite favorite = favoriteDao.findByRidAndUid(Integer.parseInt(rid), uid);

    return favorite != null;//      ，  true，  ，  false
}

FavoriteDao

@Override
public Favorite findByRidAndUid(int rid, int uid) {
    Favorite favorite = null;
    try {
        String sql = " select * from tab_favorite where rid = ? and uid = ?";
        favorite = template.queryForObject(sql, new BeanPropertyRowMapper(Favorite.class), rid, uid);
    } catch (DataAccessException e) {
        e.printStackTrace();
    }
    return favorite;
}

フロントコード

route_detail.html

$(function () {
   //     ，            
    var rid = getParameter("rid");
    $.get("route/isFavorite",{rid:rid},function (flag) {
        if(flag){
            //        
            ////お に りボタンのスタイル  
$("#favorite").addClass("already");
$("#favorite").prop("disabled",disabled);
}else{
//ユーザーが  していない
}
});

(3)コレクション回数のダイナミックな展示
フロント

//      
$("#favoriteCount").html("   "+route.count+" ");

バックグラウンド

RouteService

//4.       
int count = favoriteDao.findCountByRid(route.getRid());
route.setCount(count);

FavoriteDao

@Override
public int findCountByRid(int rid) {
    String sql = "SELECT COUNT(*) FROM tab_favorite WHERE rid = ?";

    return template.queryForObject(sql,Integer.class,rid);
}

(4)ボタンクリックコレクションライン
ぶんせき

エンコーディング

フロントコード

	$(function () {
   //     ，            
    var rid = getParameter("rid");
    $.get("route/isFavorite",{rid:rid},function (flag) {
        if(flag){
            //        
            ////お に りボタンのスタイル  
$("#favorite").addClass("already");
$("#favorite").attr("disabled","disabled");
//  ボタンのクリックイベント
$("#favorite").removeAttr("onclick");
}else{
//ユーザーが  していない
}
});
});
//お に りボタンをクリックしてトリガーする  
function addFavorite(){
var rid = getParameter("rid");
//1. ユーザーがログインしているかどうかを  
$.get("user/findOne",{},function (user) {
if(user){
//ユーザーがログインした
//    
$.get("route/addFavorite",{rid:rid},function () {
//コード  ページ
location.reload();
});
}else{
//ユーザーがログインしていない
alert(「まだログインしていません。ログインしてください」);
location.href="http://localhost/travel/login.html";
}
})
}

バックグラウンドコード

RouteServlet

public void addFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //1.     rid
    String rid = request.getParameter("rid");
    //2.          
    User user = (User) request.getSession().getAttribute("user");
    int uid;//  id
    if(user == null){
        //      
        return ;
    }else{
        //      
        uid = user.getUid();
    }
    //3.   service  
    favoriteService.add(rid,uid);
}

FavoriteService

@Override
public void add(String rid, int uid) {
    favoriteDao.add(Integer.parseInt(rid),uid);
}

FavoriteDao

@Override
public void add(int rid, int uid) {
    String sql = "insert into tab_favorite values(?,?,?)";

    template.update(sql,rid,new Date(),uid);
}

四、まとめ
改善すべき点:

ユーザーお気に入りページの実現

人気ランキングの実現

これでJavaWebも基本学習が終了し,以下ではフレームワークとマイクロサービスの学習を開始する.

備考:関連コードが必要な場合は、いつでもお邪魔します([email protected])

障害対応・サービス分割・実力が足りない人をチームに入れて開発する方法

【MarkLogic Server】Red Hat Linux7におけるOSパラメータの設定