封装notebooks api

  1. import request from '@/helpers/request';
  3. const URL = {
  4.   GET: '/notebooks',
  5.   ADD: '/notebooks',
  6.   UPDATE: '/notebooks/:id',
  7.   DELETE: '/notebooks/:id'
  8. }
  10. export default {
  11.   getAll() {
  12.     return request(URL.GET, 'GET')
  13.   },
  14.   addNotebook({title=''} = {title: ''}){
  15.     return request(URL.ADD, 'POST', {title})
  16.   },
  17.   updateNotebook(id: number, {title=''} = {title: ''}){
  18.     return request(URL.UPDATE.replace(':id', id.toString()), 'PATCH', {title} )
  19.   },
  20.   delete(id: number){
  21.     return request(URL.DELETE.replace(':id', id.toString()), 'DELETE')
  22.   }
  23. }

  • 函数参数{title='a'} = {title: 'b'} 表示如果函数没有传参数，则默认参数为{title: 'b'}, 如果传的参数对象里没有title属性，则title属性默认值为a

    从外部文件引入scss

    1. <style lang="scss" scoped>
    2. @import '~@/assets/css/notebook-list.scss';
    3. </style>

    实现笔记本的创建修改删除

    1. onCreate() {
    2.   const title = window.prompt('创建笔记本')
    3.   if(title !== null && title.trim() === ''){
    4.     window.alert('笔记本名不可为空')
    5.   }
    6.   if(title !== null && title.trim() !== ''){
    7.     Notebooks.addNotebook({title}).then((res: any) => {
    8.       window.alert(res.msg)
    9.       this.notebooks.unshift(res.data)
    10.     }).catch(err => window.alert(err.msg))
    11.   }
    12. }
    14. onEdit(notebook: Notebook) {
    15.   const title = window.prompt('修改笔记本', notebook.title)
    16.   if(title !== null && title.trim() === ''){
    17.     window.alert('笔记本名不可为空')
    18.   }
    19.   if(title !== null && title.trim() !== ''){
    20.     Notebooks.updateNotebook(notebook.id,{title}).then((res: any) => {
    21.       window.alert(res.msg)
    22.       notebook.title = title
    23.     }).catch(err => window.alert(err.msg))
    24.   }
    25. }
    27. onDelete(notebook: Notebook) {
    28.   const isConfirm = window.confirm('确定要删除吗？')
    29.   if(isConfirm){
    30.     Notebooks.delete(notebook.id)
    31.     .then((res: any) =>{
    32.       window.alert(res.msg)
    33.       this.notebooks.splice(this.notebooks.indexOf(notebook), 1)
    34.     }
    35.     ).catch(err => window.alert(err.msg))
    36.   }
    37. }

    时间格式转化

    ```typescript const friendlyDate = (date: Date) => { const dateObj = typeof date === ‘object’ ? date : new Date(date) const time = dateObj.getTime() const now = Date.now() const space = now - time let str

    switch(true) { case space< 60000:

    1. str = '刚刚'
    2. break

    case space < 1000*3600:

    1. str = Math.floor(space / 60000) + '分钟前'
    2. break

    case space < 1000360024:

    1. str = Math.floor(space/(1000*3600)) + '小时前'
    2. break

    default:

    1. str = Math.floor(space/(1000*3600*24)) + '天前'

    } return str }

export {friendlyDate}

  1. 使用时间转化函数
  2. ```typescript
  3. getAll() {
  4.   return new Promise((resolve, reject)=> {
  5.     request(URL.GET, 'GET').then((res:any) => {
  6.       res.data = res.data.sort((a: Notebook,b: Notebook) => {
  7.         if(a.createdAt === b.createdAt) return 0
  8.         if(a.createdAt > b.createdAt) return -1
  9.         if(a.createdAt < b.createdAt) return 1
  10.       })
  11.       res.data.forEach((notebook:Notebook) => notebook.friendlyCreatedAt = friendlyDate(notebook.createdAt))
  12.       resolve(res)
  13.     }).catch(res => reject(res))
  14.   })
  15. },