项目二04

1.区域CRUD

1.1.修改热门：

怎么更改，值更改就行，值从哪里来，前端页面已经写好了，后端获取参数就可以了,然后实现层使用Mybatis-plus操作
后台js

$(".hotBtn").click(function () {
                var hot = $(this).data("hot");
                var id = $(this).data("id");
                $.get("/destination/changeHotValue", {hot:hot, id:id}, function (data) {
                    if(data.success){
                        window.location.reload();
                    }else{
                        $.messager.alert("温馨提示", data.msg);
                    }
                })
            })

后端服务器

@Override
    public void changeHotValue(Long id, Long hot) {
        Region region = getById(id);

        UpdateWrapper<Region> wrapper = new UpdateWrapper<>();
        wrapper.set("ishot",hot);
        wrapper.eq("id",id);

        update(region,wrapper);
    }

1.2.删除：

表现层使用Mybatis-plus操作
后台js

<a href="javascript:;" class="btn btn-danger btn-xs deleteBtn"
    data-url="/region/delete?id=${entity.id}">
    <span class="glyphicon glyphicon-trash"></span> 删除
</a>

1.3.查看：

获取区域表的目的地数组，遍历数组获取每个目的地对象
后台js

$(".destShowBtn").click(function () {
                $("#refplace").html('');
                var id = $(this).data("id");
                $.get("/region/getDestByRegionId", {rid:id}, function (data) {
                    var html = ''
                    $.each(data, function (index, value) {
                        html +='<a href="javascript:;" class="btn btn-link">' + value.name + '</a>'
                    })
                    $("#refplace").html(html);
                    $("#destModal").modal("show");
                })
            })

后台控制器

@Override
    public List<Destination> getDestByRegionId(Long rid) {
        Region region = regionSerivce.getById(rid);
        String refIds = region.getRefIds();

        //这里老师有提供其他方法，不过没用

        String[] split = refIds.split(",");
        List<String> strings = Arrays.asList(split);

        List<Destination> destinations = listByIds(strings);
        return destinations;
    }

2.目的地

2.1.列表

查询数据：根据ParentId拼接SQL显示不同结果，parentId和模糊查询的参数可以封装到查询的类中
分页和查询

@Override
    public IPage<Destination> queryPage(DestinationQuery destinationQuery) {

        IPage<Destination> page = new Page<>(destinationQuery.getCurrentPage(), destinationQuery.getPageSize());

        QueryWrapper<Destination> wrapper = new QueryWrapper<>();
        wrapper.like(StringUtils.hasText(destinationQuery.getKeyword()),"name",destinationQuery.getKeyword());
        wrapper.isNull(destinationQuery.getParentId()==null,"parent_id");
        wrapper.eq(destinationQuery.getParentId()!=null,"parent_id",destinationQuery.getParentId());

        return super.page(page,wrapper);
    }

2.2.吐司

递归效果

@Override
    public List<Destination> queryToastByParentId(Long parentId) {
        List<Destination> list = new ArrayList<>();

        list = createToastsList(list,parentId);

        //翻转效果
        Collections.reverse(list);

        //Destination destinationFa = getById(parentId);
        //list.add(destinationFa);
        //
        //if(destinationFa.getParentId()!=null){
        //    Destination destinationSon = getById(destinationFa.getParentId());
        //    list.add(destinationSon);
        //    if(destinationSon.getParentId()!=null){
        //        Destination destinationSonSon = getById(destinationSon.getParentId());
        //        list.add(destinationSonSon)
        //    }
        //}

        return list;
    }

递归方法

private List<Destination> createToastsList(List<Destination> list, Long parentId) {
        if(parentId!=null){
            Destination listAdd = getById(parentId);
            list.add(listAdd);
            createToastsList(list,listAdd.getParentId());
        }
        return list;
    }

2.3.总的

@RequestMapping("/list")
    public String list(Model model, @ModelAttribute("qo") DestinationQuery destinationQuery){
        model.addAttribute("page",destinationSerivce.queryPage(destinationQuery));
        model.addAttribute("toasts",destinationSerivce.queryToastByParentId(destinationQuery.getParentId()));
        return "destination/list";
    }

3.目的地前端

3.1.区域列表

前端接口(区域)

ajaxGet("/destinations/hot",{},function (data) {
            _this.regions = data.data;
        });
//----------------这是分割线
<a v-for="entity in regions"  href="javascript:void(0)" @mouseover="hotChange" :rid="entity.id">{{entity.name}}</a><span class="divide">|</span>

查询的构造器

@Override
    public List<Region> getHotDestination() {
        QueryWrapper<Region> wrapper = new QueryWrapper<>();
        wrapper.eq("ishot",Region.STATE_HOT);
        wrapper.orderByAsc("seq");
        return list(wrapper);
    }

3.2.区域下的热门目的地

js函数

hotChange:function (event) {
            var _this =$(event.currentTarget);
            var rid = _this.attr("rid");
            if(!rid){
                return;
            }
            $('.row-hot .r-navbar a').removeClass('on');
            _this.addClass('on');
            //非国内数据列表
            this.queryRegion(rid);
        },

        queryRegion:function (regionId) {
            ajaxGet("/destinations/search",{regionId:regionId}, function (data) {
                var list = data.data;
                vue.regionId=regionId;
                var destListLeft = [];
                var destListRight = [];
                //将list集合分成左右2边, 进行遍历显示
                for(var i = 0; i < list.length; i++){
                    if(i % 2 == 0){
                        destListLeft.push(list[i])
                    }else{
                        destListRight.push(list[i])
                    }
                }
                vue.destListLeft = destListLeft;
                vue.destListRight = destListRight;

            })
        }

接口

@GetMapping("/search")
    public JsonResult search(Long regionId){
        List<Destination> destByRegionId = destinationSerivce.getDestByRegionIdNext(regionId);
        return JsonResult.success(destByRegionId);
    }

实现

    @Override
    public List<Destination> getDestByRegionIdNext(Long regionId) {
        List<Destination> list = new ArrayList<>();

        //默认查询中国
        if(regionId!=-1){
            list =  getDestByRegionId(regionId);
        }else{
            QueryWrapper<Destination> wrapper = new QueryWrapper<>();
            wrapper.eq("parent_id",1);
            list = list(wrapper);
        }

        //右边的集合
        for (Destination destination : list) {
            QueryWrapper<Destination> wrapper = new QueryWrapper<>();
            //不是父类id
            wrapper.eq("parent_id",destination.getId());
            //这个方法不熟悉
            wrapper.last("limit 5");

            //这个是关键
            destination.setChildren(list(wrapper));
        }

        System.out.println(list);
        return list;
    }