数据工厂系列（18）项目管理模块-前端联调上篇回顾在之前的篇章中，除了同步项目逻辑还没开发完毕，其余都开发好了，打开接

大家好~我是小方，欢迎大家关注笋货测试笔记体完记得俾个like呀

回顾

在之前的篇章中，除了同步项目逻辑还没开发完毕，其余都开发好了，打开接口文档可以看到接口还是蛮多的，而我们的前端只是到了用户模块，所以接下来的几个篇章中，都会进行前后端的联调

项目列表页面联调

首先我们先在src/api新建project.js，把我们之前的api都填进去

import request from '@/utils/request'

export function getProjectList(params) {
  return request({
    url: '/project/list',
    method: 'get',
    params
  })
}

export function deleteProject(id) {
  return request({
    url: '/project/delete',
    method: 'get',
    params: { id }
  })
}

export function initProject(id) {
  return request({
    url: '/project/init',
    method: 'get',
    params: { id }
  })
}

export function syncProject(id) {
  return request({
    url: '/project/sync',
    method: 'get',
    params: { id }
  })
}

export function insertProject(data) {
  return request({
    url: '/project/insert',
    method: 'post',
    data
  })
}

export function updateProject(data) {
  return request({
    url: '/project/update',
    method: 'post',
    data
  })
}

export function readProject(id) {
  return request({
    url: '/project/read',
    method: 'get',
    params: { id }
  })
}

export function operationProject(id) {
  return request({
    url: '/project/operation',
    method: 'get',
    params: { id }
  })
}

export function getRoleList(params) {
  return request({
    url: '/project/role/list',
    method: 'get',
    params
  })
}

export function insertProjectRole(data) {
  return request({
    url: '/project/role/insert',
    method: 'post',
    data
  })
}

export function updateProjectRole(data) {
  return request({
    url: '/project/role/update',
    method: 'post',
    data
  })
}

export function deleteProjectRole(id) {
  return request({
    url: '/project/role/delete',
    method: 'get',
    params: { id }
  })
}

那我们的项目列表页面要怎么设计呢？这里参考了pity里面的项目列表设计，先来看看pity的项目列表页面，其实就是很多个小卡片组合起来！按钮通过鼠标移到三个点就闪现出来

那我们着手试试吧，卡片的话，直接用element的card，新建src/views/project/index.vue文件，记得project目录要先建起来

先把相关的api和分页组件引入

import { getProjectList } from '@/api/project'
import Pagination from '@/components/Pagination'

定义相关的字段，这里可直接参考用户列表那边的设计新增获取项目列表数据方法

async getProject() {
      this.listLoading = true
      try {
        const { data } = await getProjectList(this.listQuery)
        this.lists = data.lists
        this.total = data.total
        this.listLoading = false
      } catch (err) {
        this.listLoading = false
        console.log(err)
      }
    }