分类数据展示功能_实现_后台代码与分类数据展示功能_实现_前台代码

分类数据展示功能_实现_后台代码

　　　　　　1.后台代码:

　　　　　　　　

package cn.itcast.travel.dao.impl;

import cn.itcast.travel.dao.CategoryDao;

import cn.itcast.travel.domain.Category;
import cn.itcast.travel.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;

import java.util.List;

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

 

　　

package cn.itcast.travel.dao;

import cn.itcast.travel.domain.Category;

import java.util.List;

public interface CategoryDao {

    /**
     * 查询所有
     * @return
     */
    public List<Category> findAll();
}

 

package cn.itcast.travel.service.impl;

import cn.itcast.travel.dao.CategoryDao;
import cn.itcast.travel.dao.impl.CategoryDaoimpl;
import cn.itcast.travel.domain.Category;
import cn.itcast.travel.service.CategoryService;

import java.util.List;

public class CategoryServiceimpl implements CategoryService {
    private CategoryDao categoryDao = new CategoryDaoimpl();
    @Override
    public List<Category> findAll() {
        return categoryDao.findAll();
    }
}

 

package cn.itcast.travel.service;

import cn.itcast.travel.domain.Category;

import java.util.List;

public interface CategoryService {
    public List<Category> findAll();
}

 

package cn.itcast.travel.web.servlet;

import cn.itcast.travel.domain.Category;
import cn.itcast.travel.service.CategoryService;
import cn.itcast.travel.service.impl.CategoryServiceimpl;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;

@WebServlet("/category/*")
public class CategoryServlet extends BaseServlet {

    private CategoryService service =new CategoryServiceimpl();
    /**
     * 查询所有
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void findAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           //1.调用service查询所有
        List<Category> cs = service.findAll();
           //2.序列化json返回
      /*  ObjectMapper mapper = new ObjectMapper();
        response.setContentType("application/json;charse=utf-8");
        mapper.writeValue(response.getOutputStream(),cs);*/
        writeValue(cs,response);

    }



}

 

    /**
     * 直接将传入的对象序列化为json，并且写回客户端
     * @param obj
     */
    public void writeValue(Object obj,HttpServletResponse response) throws IOException {
        ObjectMapper mapper = new ObjectMapper();
        response.setContentType("application/json;charse=utf-8");
        mapper.writeValue(response.getOutputStream(),obj);
    }

    /**
     * 将传入的对象序列化为json.返回
     *
     * @param obj
     */
    public String  writeValueAsString(Object obj) throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        return mapper.writeValueAsString(obj);
    }
}

 

　　　　　　　　

分类数据展示功能_实现_前台代码

　　　　　　　　前台代码：　　　　　　　　

　　　　　　　　　　hader.html加载后，发送ajax请求，请求category/findAll

　　

    //查询分类数据
        $.get("category/findAll",{},function (data) {
            //[{cid:1,cname:国内游},{},{}]
            var lis = '<li class="nav-active"><a href="index.html">首页</a></li>';
            //遍历数组,拼接字符串(<li>)
            for (var i = 0; i < data.length; i++) {
                var li = '<li><a href="route_list.html?cid='+data[i].cid+'">'+data[i].cname+'</a></li>';

                lis += li;

            }


            //拼接收藏排行榜的li,<li><a href="favoriterank.html">收藏排行榜</a></li>

            lis+= '<li><a href="favoriterank.html">收藏排行榜</a></li>';

            //将lis字符串，设置到ul的html内容中
            $("#category").html(lis);
        });


        //给搜索按钮绑定单击事件，获取搜索输入框的内容
        $("#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;
        });
    });