图书分页

• 前端

  <template>
      <div>
          <table>
              <tr>
                  <td>id</td>
                  <td>名称</td>
                  <td>操作</td>
              </tr>
              <tr v-for="good in goods">
                  <td></td>
                  <td></td>
                  <td>
                      <input type="button" value="展开" @click="book_more(good.id)">
                  </td>
              </tr>
          </table>
  
          <div>
              <button v-for="i in page_list" @click="getpage($event)" :value="i"></button>
          </div>
  
      </div>
  </template>
  <script>
  import {drf_book_typeshow} from '../../axios_send/api'
  export default {
      name:"book_typeshow",
      data() {
          return {
              goods:[],
              page_list:[],
              page:"1"
          }
      },
      methods: {
          get_type(){
              var params = {"page_id":this.page}
              drf_book_typeshow(params)
              .then(res=>{
                  this.goods= res.data,
                  this.page_list = res.page_list
              })
          },
          getpage(event){
             this.page = event.target.value
             this.get_type()
          },
          book_more(id){
              localStorage.setItem("type_id",id)
              this.$router.push({path:"/book/bookshow"})
          },
      },
      created(){
          this.get_type()
      },
  }
  </script>
  

• 后端

  class BookTypes(APIView):
      def get(self,request):
          data = request.query_params
          id = data["page_id"]
          try:
              types = BookType.objects.all()
              page_info = Paginator(types,3)
              page_list = [i for i in page_info.page_range]
              current_info = page_info.page(id)
              serializer = BookTypeSerializer(current_info,many=True)
              data = serializer.data
              res_data={
                  "code":200,
                  "msg":"success",
                  "data":data,
                  "page_list":page_list
              }
              return Response(data=res_data,status=200)
          except:
              res_data = {
                  "code": 500,
                  "msg": "fail",
  
              }
              return Response(data=res_data,status=200)