Dashboard 数据绑定

Question

本套课程没有
Dashboard 数据绑定吗？哪套课程才讲到？

看到你们
项目体验链接（支持外网访问）
http://www.youbaobao.xyz/admin
Dashboard 数据有绑定效果

Answer 1

扬_灵 2023-06-04 20:40:27

同学你好，你说的数据绑定指的是Dashboard正的图表展示的数据吗？这个事vue-ememet-admin源码中的配置，你可以下载完整版项目进行学习。

• 提问者 Wuhk #1

  参考完整代码，已经图表展示绑定OK
  但后台数据新增时，前端图表没变态更新，要手动刷新页面才会更新新数据？

• 扬_灵 回复 提问者 Wuhk #2

  同学你好，方便提供一下数据绑定的逻辑吗。

• 提问者 Wuhk 回复 扬_灵 #3

  1、在services/book.js中，定义home函数
  async function home() {
    const userSql = 'select count(*) as count from user'
    const bookSql = 'select count(*) as count from book'
    const shelfSql = 'select count(*) as count from shelf'
    const rankSql = 'select count(*) as count from `rank`'
    const results = await Promise.all([
      db.querySql(userSql),
      db.querySql(bookSql),
      db.querySql(shelfSql),
      db.querySql(rankSql)
    ])
    const user = results[0][0].count
    const book = results[1][0].count
    const shelf = results[2][0].count
    const rank = results[3][0].count
    return { user, book, shelf, rank }
  }
  
  2、设置后端路由，调用Service/book.js里的home()函数，将数据返回前端
  router.get('/home', function(req, res, next) {
    bookService.home().then(result => {
      new Result(result, '操作成功').success(res)
    }).catch(err => {
      next(boom.badImplementation(err))
    })
  })
  
  3、api/book.js 添加接口
  export function bookHome() {
    return request({
      url: '/book/home',
      method: 'get'
    })
  }

点开查看后面2条评论