基于Python深度学习的车辆车牌识别系统（PyTorch2卷积神经网络CNN+OpenCV4实现）视频教程 - 集成到web系统-识别历史记录实现

大家好，我是java1234_小锋老师，最近写了一套基于Python深度学习的车辆车牌识别系统（PyTorch2卷积神经网络CNN+OpenCV4实现）视频教程，持续更新中，计划月底更新完，感谢支持。

视频在线地址：

https://www.bilibili.com/video/BV1BdUnBLE6N/

课程简介：

本课程采用主流的Python技术栈实现，分两套系统讲解，一套是专门讲PyTorch2卷积神经网络CNN训练模型，识别车牌，当然实现过程中还用到OpenCV实现图像格式转换，裁剪，大小缩放等。另外一套是基于前面Django+Vue通用权限系统基础上，加了车辆识别业务模型，Mysql8数据库，Django后端，Vue前端，后端集成训练好的模型，实现车牌识别。

基于Python深度学习的车辆车牌识别系统（PyTorch2卷积神经网络CNN+OpenCV4实现）视频教程 - 集成到web系统-识别历史记录实现

1，识别历史记录后端实现

views.py里实现ListView

复制代码

# 分页查询车辆识别记录
class ListView(View):

    def post(self, request):
        data = json.loads(request.body.decode("utf-8"))
        pageNum = data['pageNum']  # 当前页
        pageSize = data['pageSize']  # 每页大小
        print(pageSize, pageNum)
        carListPage = Paginator(Lprs.objects.all(), pageSize).page(pageNum)
        obj_roles = carListPage.object_list.values()  # 转成字典
        cars = list(obj_roles)  # 把外层的容器转为List
        total = Lprs.objects.count()
        return JsonResponse(
            {'code': 200, 'carList': cars, 'total': total})

urls.py里加下list映射：

复制代码

path('list', ListView.as_view(), name='list'),  # 分页查询车辆识别历史记录信息

2，识别历史记录前端实现

History.vue里实现下：

复制代码

<template>
  <div class="app-container">

    <el-table :data="tableData" stripe style="width: 100%" >
      <el-table-column prop="id" label="编号" width="100" align="center"/>
      <el-table-column prop="carimage" label="汽车图片" width="300" align="center">
        <template v-slot="scope">
          <img :src="getServerUrl()+'media/carImages/'+scope.row.carimage" width="200" height="200"/>
        </template>
      </el-table-column>
      <el-table-column prop="result" label="识别结果" width="200" align="center"/>
      <el-table-column prop="create_time" label="识别时间"  align="center" :formatter="formatDate"/>

    </el-table>
    <el-pagination
        v-model:current-page="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

  </div>
</template>

<script setup>
import requestUtil,{getServerUrl} from '@/utils/request'
import {ref} from "vue";


const tableData=ref([])
const total=ref(0)
const queryForm=ref({
  pageNum:1,
  pageSize:10
})

const id = ref(-1)

const formatDate=(row, column)=>{
  let date=new Date(row.create_time)
  return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getUTCHours()+":"+date.getMinutes()+":"+date.getSeconds()
}

const initCarList=async ()=>{
  const res=await requestUtil.post("lprs/list",queryForm.value)
  tableData.value=res.data.carList
  total.value=res.data.total
}

const handleSizeChange=(pageSize)=>{
  queryForm.value.pageSize=pageSize
  queryForm.value.pageNum=1
  initCarList()
}

const handleCurrentChange=(pageNum)=>{
  queryForm.value.pageNum=pageNum
  initCarList()
}

initCarList()

</script>

<style lang="scss" scoped>

.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

::v-deep th.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 13px;

}

.el-tag--small {
  margin-left: 5px;
}
</style>

3，运行测试

点击"历史记录"菜单：