搜索，上传图片 ，分页

搜索

搜索关键字点击跳转

# 前端点击按钮代参跳转
<button @click="search">查询</button>

methods:{
        search(){
            # 点击事件跳转，并将数据传到页面路由中
            this.$router.push('/search/?word='+this.word)
        }
    },
    
# 跳转页面
<div>
      <h1>======== 查询展示 ========</h1>
    	# 将获取到数据渲染到页面
      <p v-for="(item,i) in search_li" :key="i">
          {{item.id}} ---- {{item.name}} ---- {{item.site}}
          <br>
      </p>
</div>
data(){
        return{
            # 获取页面路由中的数据
            word:this.$route.query.word,
            search_li:[],
        }
    },
    created(){
        axios({
            # 路由
            url:'http://127.0.0.1:8000/app01/search/								word='+this.word,
            # 请求方式
            method:'get'
        }).then(res=>{
            console.log(res.data)
            # 获取后端传递数据，存放到search_li
            this.search_li = res.data
        })
    }

class SearchView(APIView):
    def get(self,request):
        word = request.GET.get('word')
        search_li = Brand.objects.filter(name__contains=word).values()
        print(search_li)
        return Response(search_li)

上传图片

• ​ 使用图片字段

  img = models.ImageField(upload_to='static')
  

• ​ 再上传图片之前需要安装

  pip install pillow
  

• ​ 在创建一个 static 文件夹用来存放图片

• ​ 创建完后再配置环境，步骤如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HkLXxao6-1612189809405)(D:\作业\python\P4\笔记\image\day09\图片文件配置.jpg)]

分页

前端分页之前需要在 VUE 中的 main.js 中引入组件[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vCCNB7Xg-1612189809407)(D:\作业\python\P4\笔记\image\day09\分页引入组件.jpg)]

使用分页标签

# 注意：属性只能放在标签中写
<el-pagination
     :total='total'	   # total：后端传过来的数据的数量
     :page-size='每一页的数量'	  
     @current-change='fanye'    # fanye：函数名，这里的函数类似于点击数件
>
</el-pagination>

methods:{		# fanye放到方法里写
    fanye(参数名){   # 注意：这里必须要有参数
        axios({
            url:'路径/?page=' + 参数名	# page：第几页
        	method:'请求方式'
        }).then(res=>{
            console.log(res.data)
        })
    }
}

后端代码

# 获取 page 参数  1：没有page参数，则默认返回第1页数据
# 需要转为整型，否则可能会报错
page = int(request.GET.get('page',1))
# 每页放几条数据
变量名 = 数量

# 计算起始点和结束点  固定算法
起始点 = (page -1)*size
结束点 = page*size

# 通过起始点和结束点 查询当前页面数据
当前页面数据 = 表名.objects.all()[起始点：结束点].values()
# 获取表中所有数据的数量
总数据 = 表名.objects.all().count()

return Response({'变量名':当前页面数据,'变量名':总数据})

案例：创建商品模型实现图片上传，和分页

​ 创建一个商品模型

# 1. 商品模型
class Goods(models.Model):

    # 商品名称
    name = models.CharField(max_length=20)
    # 商品价格
    price = models.DecimalField(max_digits=10, decimal_places=2)
    # 图片
    img = models.ImageField(upload_to='static')

​ 前端实现商品添加数据

<div>
        <h1>========== 添加汽车信息 ==========</h1>
		
      # 页面添加数据
        汽车名字：<input type="text" v-model="name">
        <br><br>
        汽车价格：<input type="text" v-model="price">
        <br><br>
        
      # 图片的类型为文件类型 ，绑定id，后面通过id获取图片
        汽车图片：<input type="file" id='img'>
        <br><br>
        <button @click="add">添加</button>
        <br><br>
        
      # 超链接跳转到汽车展示页面
        <a href="/#/get_goods">汽车信息展示</a>
</div>
  
# axios导包
import axios from 'axios'
export default {
    data(){
        return{
        # 页面双向绑定数据，商品名称
            name:'',
        # 价格，初始值为0，表示为整型
            price:0,
        }
    },
    methods:{
        add(){
        # 图片是一个文件，要放到表单中，才能发送到后端
            let fdata = new FormData()
         # 注意：'name''price''img' 这里的键值必须要和模型中的字段保持一致
            fdata.append('name',this.name)
            fdata.append('price',this.price) 
         fdata.append('img',document.getElementById('img').files[0])
        # 图片通过id获取
              
            axios({
              # 路由
                url:'http://127.0.0.1:8000/app01/goods/',
              # 请求方式
                method:'post',
               # 将表单中的数据传输到后端
                data:fdata
            }).then(res=>{
                console.log(res.data)
            })
        }
    }
}  

分页展示数据

前端

<template>
  <div>
      <h1>========== 展示汽车信息 ==========</h1>
      <p v-for="(item,i) in goods_li" :key="i">
          {{item.id}} ===== {{item.name}} ==== {{item.price}}元
          <br><br>
          <!-- 通过后端路由接口将获取到的图片路径拼起来作为图片路径 -->
          <img :src=" 'http://localhost:8000/' + item.img" width="100" >         
      </p>

      <el-pagination
       	 # 获取到的数据总量
            :total='total'
         # 每页有几条数据
            :page-size="2"
         # 事件，类似于点击事件
            @current-change="fanye"
      ></el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
           # 存放所有数据
            goods_li:[],
           # 存放数据总量
            total:0,
        }
    },
    methods:{
        fanye(page){
            axios({
              # 路径将页数(第几页)传到后端
                url:'http://127.0.0.1:8000/app01/goods/?page='+page,
              # 请求方式
                method:'get',
            }).then(res=>{
              # 获取分完页后的数据，并赋值
                this.goods_li = res.data.goods_li
            })
        }
    },
    created(){
        axios({
          # 路径
            url:'http://127.0.0.1:8000/app01/goods/',
          # 请求方式
            method:'get',
        }).then(res=>{
          # 获取所有数据和数据总量，并赋值
            this.goods_li = res.data.goods_li
            this.total = res.data.total
        })
    }
}
</script>

<style>

</style>

1:8000/app01/goods/’,
# 请求方式
method:‘get’,
}).then(res=>{
# 获取所有数据和数据总量，并赋值
this.goods_li = res.data.goods_li
this.total = res.data.total
})
}
}