基于后台接口的图书管理案例-（一）-功能解读版

基于后台接口的图书管理案例-（一）-功能解读版

数据文件列表

界面文件列表

图书列表数据加载

• 调用后台接口获取数据，更新state中的数据

loadData = async () => {
  // axios.get('books')
  //   .then(res => {
  //     // 更新状态数据
  //     this.setState({
  //       list: res.data
  //     })
  //   })
  let res = await axios.get('books')
  this.setState({
    list: res.data
  })
}

显示

添加图书

• 调用后台接口添加图书信息，添加成功之后，刷新页面

addBook = async () => {
  /*
    添加图书：
    1、获取表单数据
    2、调用后台接口进行添加
    3、重新刷新最新类别
    4、清空表单
  */
  // 表单验证：1、非空验证；2、重复性验证
  if (!this.state.bookName) {
    // 提示输入，终止后续代码执行
    alert('请输入图书名称')
    return
  }
  // 非空验证 数组方法some(判断数组中是否有符合条件的数据，主要有一个符合就返回true)
  let res = await axios.post('books', {
    name: this.state.bookName
  })
  if (res.status === 200) {
    // 添加成功，刷新列表
    this.loadData()
    this.setState({
      bookName: ''
    })
  }
}

预检请求1

预检请求2

删除图书

• 更加图书的ID删除数据，调用后台接口

handleDelete = async (id) => {
  /*
    删除图书
    1、获取要删除的图书ID
    2、调用接口删除图书
    3、刷新列表
  */
  let res = await axios.delete('books/' + id)
  if (res.status === 200) {
    // 删除成功，刷新列表
    this.loadData()
  }
}

编辑图书-更加ID查询图书

• 更加图书的id查询去图书的详细信息，填充表单

toEdit = async (id) => {
  /*
    编辑的第一步
    1、获取要编辑的图书id
    2、根据id调用接口获取编辑的图书信息
    3、填充表单
  */
  let res = await axios.get('books/' + id)
  this.setState({
    bookId: res.data.id,
    bookName: res.data.name,
    flag: true
  })
}

编辑图书-编辑提交

• 编辑表单内容之后，再次提交调用接口，成功之后刷新页面，修改添加或者编辑的状态位

editBook = async () => {
  /*
    编辑图书
    1、获取表单最新数据
    2、调用接口提交数据
    3、刷新列表并清空表单
  */
  let res = await axios.put('books/' + this.state.bookId, {
    name: this.state.bookName
  })
  if (res.data.status === 200) {
    // 编辑成功,刷新列表,清空表单
    this.loadData()
    this.setState({
      bookId: '',
      bookName: '',
      flag: true
    })
  }
}

图书名称重复验证

• 先验证图书名称是否重复，然后在进行实际操作

// 非空验证 数组方法some(判断数组中是否有符合条件的数据，主要有一个符合就返回true)
let existFlag = await axios.get('books/book/' + this.state.bookName)
if (existFlag.data.status === 1) {
  // 名称重复，终止后续代码，并给一个提示
  alert('图书名称重复了')
  return 
}

图书名称重复性验证

项目代码优化

// axios响应拦截器处理服务器返回的数据
axios.interceptors.response.use(function(res) {
  return res.data
})

目的：接口定义结果，只用res