web开发实现表格分页及查询功能 后端python+flask+mongodb 前端vue+elementUI

前言

我也是第一次接触vue+element框架，对一些样式的理解可能还不是很深入，如果有什么错误的地方，还请指出

目标：

①实现python+flask+mongodb从数据库中读取数据

②后端使用vue+element将数据转换为json格式并传给前端

③前端将数据以表格的形式展示出来，并且可以分页，带查询功能

话不多说，先上成果，下附完整代码

 

这算是一个比较简单的项目了。各个部分的安装流程已经有很多现成的例子了，就不再絮叨了

mongodb数据库

_id是mongodb自己生成的，主要有time,imsi,phone_number,function四个字段

后端

采用python+flask+mongodb开发，主要实现的功能也很简单，就是根据前端路由从数据库中读取不同的数据库信息并把数据转换为json格式传给前端

#连接数据库地址
myclient = pymongo.MongoClient("mongodb://localhost:27017/")
#连接数据库testjt
mydb = myclient["testjt"]
#连接数据库表1:sites
mycol = mydb["sites"]
#连接数据库表2:sites2
mycol2 = mydb["sites2"]

bp = Blueprint('forensic', __name__,url_prefix='/forensic')


#路由
@bp.route('/phone-number-details')
def forensic():
    print('this is forensic ,waiting a moment')
    #数据库信息
    listx = []
    #查询数据库
    for x in mycol.find({},{"_id":0}):
        print(x)
        listx.append(x)
    print(listx)
    #将数据库信息转换为Json格式传给前端
    return jsonify(listx)

 

前端

采用vue+elementUI来搭建，主要任务也不复杂，就是接收后端的数据并将其用表格展示出来，实现分页功能，还有一个查询功能，可以根据某个字段进行模糊查询（做的时候倒不是功能实现卡住了，就是像一些element的table组件的表头格式一直找不到怎么设置，耗费的时间比较多）

希望大家可以直接参考element官方教学element官网来看

<template xmlns:height="http://www.w3.org/1999/xhtml">
  <div>
    <div class="header">
      <el-input v-model="tableDataName" placeholder="请输入手机号" style="width:500px" />
      <el-button type="primary" @click="doFilter">搜索</el-button>
      <el-button type="primary" @click="openData">显示全部</el-button>
    </div>
    <div align="center">
      <el-table
        :data="tempList"
        :header-cell-style="{background:'#F3F4F7',color:'#000000',font: '20px Extra large'}"
        :cell-style="{font: '16px Medium'}"
        stripe
        border
        style="margin-bottom:14px;"
        :empty-text="emptyText"
        :default-sort="{prop:'time',order:'descending'}"
        :highlight-current-row="true"
      >
        <el-table-column type="index" :index="indexMethod" label=" " />
        <el-table-column property="time" label="时间" sortable width="365" align="center" />
        <el-table-column property="imsi" label="imsi" sortable width="366" align="center"/>
        <el-table-column property="phone_number" label="手机号" sortable width="366" align="center" />
        <el-table-column property="function" label="方式" sortable width="228" align="center" />
      </el-table>
      <el-pagination
        :current-page="currentPage1"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total1"
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
      />
    </div>
    <div class="footer" />
  </div>
</template>

<script>
// eslint-disable-next-line no-undef,no-unused-vars
import axios from 'axios'

export default {
  name: 'PhoneNumberDetails',
  data() {
    return {
      total1: 10,
      currentPage1: 1,
      pageSize: 10,
      bondsAllList: '',
      tableDataName: '',
      tableDataEnd: '',
      filterTableDataEnd: '',
      flag: 0
    }
  },
  created() {
    this.getMessage()
  },
  methods: {
    getMessage() {
      const path = 'http://localhost:5000/forensic/phone-number-details'
      axios.get(path)
        .then((res) => {
          this.bondsAllList = res.data
          this.getCreateTable()
        })
        .catch((error) => {
          alert(error)
        })
    },
    handleSizeChange1: function(pageSize) { // 每页条数切换
      // eslint-disable-next-line eqeqeq
      if (this.flag == 1) {
        return
      }
      this.pageSize = pageSize
      this.handleCurrentChange1(this.currentPage1)
    },
    handleCurrentChange1: function(currentPage) { // 页码切换
      this.currentPage1 = currentPage
      // eslint-disable-next-line eqeqeq
      if (this.flag == 0) {
        this.currentChangePage(this.bondsAllList, currentPage)
      } else {
        this.currentChangePage(this.filterTableDataEnd, currentPage)
      }
    },
    // 分页方法（重点）
    currentChangePage(list, currentPage) {
      let from = (currentPage - 1) * this.pageSize
      this.tempList = []
      const to = currentPage * this.pageSize
      for (; from < to; from++) {
        if (list[from]) {
          this.tempList.push(list[from])
        }
      }
    },
    getCreateTable() {
      this.total1 = this.bondsAllList.length
      this.flag = 0
      this.handleCurrentChange1(this.currentPage1)
    },
    doFilter() {
      // eslint-disable-next-line eqeqeq
      if (this.tableDataName == '') {
        this.$message.warning('查询条件不能为空！')
        return
      }
      this.tableDataEnd = []
      this.filterTableDataEnd = []
      this.bondsAllList.forEach((value, index) => {
        if (value.phone_number) {
          if (value.phone_number.indexOf(this.tableDataName) >= 0) {
            this.filterTableDataEnd.push(value)
          }
        }
      })
      this.currentPage1 = 1
      this.total1 = this.filterTableDataEnd.length
      this.currentChangePage(this.filterTableDataEnd, this.currentPage1)
      this.flag = 1
    },
    openData() {
      this.tableDataName = []
      this.getCreateTable()
    }
  }
}
</script>

<style type="text/css">
  .header {
    padding: 30px;
    text-align: center;
  }
  .footer {
    padding: 20px;
    text-align: center;
    margin-top: 20px;
  }

</style>