7週目の学習

springboot + VUEは、前端と後端を分離しました

フロントアクセスVUEスプリングブートバックAPIを使用して、クロスドメインアクセス、別個の前端と後端。

JSONは、バックグラウンドデータを提供します

 

輸入com.ftest.springboot.entity.Area;
輸入com.ftest.springboot.repository.CgRepository。
輸入org.springframework.beans.factory.annotation.Autowired;
輸入org.springframework.data.domain.Page;
輸入org.springframework.data.domain.PageRequest;
輸入org.springframework.web.bind.annotation.GetMapping。
輸入org.springframework.web.bind.annotation.PathVariable;
輸入org.springframework.web.bind.annotation.RequestMapping。
輸入org.springframework.web.bind.annotation.RestController; 

輸入はjava.util.List; 

@RestController 
@RequestMapping（ "/ CG"）
 パブリック クラスAreaController { 
    @Autowired 
    プライベートCgRepository cgRepository。

    （@GetMapping "/のfindAll" ）
     公衆リスト<地域> のfindAll（）{
         リターンcgRepository.findAll（）。
    } 

    @GetMapping（ "/のfindAll / {ページ} / {サイズ}" ）
     公共ページ<地域> findAll1（@PathVariable INTのページ、@PathVariable int型のサイズ）{ 

        PageRequest要求 = PageRequest.of（ページサイズ）。
        リターンcgRepository.findAll（リクエスト）。
    } 
}

 

 フロントエンド受信機

データ（）{ 
    リターン{ 
        ページサイズ： ''、//分页页码
        合計： ''、//总数
        たtableData：[] //数据
    } 
}、
作成（）{ 
    CONST _this =この; 
    axios.get（ 'のhttp：// localhostを：8888 / CG /のfindAll /' + '0' + '/ 10'）.then（関数（RESP）{ 
        _this.tableData = resp.data.content 
        _this.total = RESP .data.totalElements 
        _this.pagesize = resp.data.size 
        //はconsole.log（RESP）
    }）
}