文章小程序全栈开发，从入门到上线，第5节——获取文章列表和详情

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《文章小程序全栈开发，从入门到上线，第5节——获取文章列表和详情》，文章讲解的知识点主要包括MySQL、前端、mongodb、Node.js、javascript，如果你对数据库方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

获取文章列表接口

在

/* articles.js */

const {mysql, mongodb} = require('access-db')

...
articlesRouter.get('/list', async (req, res, next) => {
  let list = (await mysql.find('articles')).data.objects
  res.json(list)
})
...

小程序查寻

然后在小程序的

/* home.js */

...
  onLoad: function (options) {
    wx.request({
      url: app.config.api + '/articles/list',
      success: ({data}) => {
        console.log('list:::', data)
        this.setData({list: data})
      }
    })
  },
...

最后就成功的显示出来了

文章详情接口

一般我们会通过文章的唯一id，进行详情查寻，所以，详情接口如下：

/* articles.js */

// 详情
articlesRouter.get('/detail/:aid', async (req, res, next) => {
  const {aid} = req.params
  let info = (await mongodb.get('articles', {article_sql_id: parseInt(aid)})).data
  res.json(info)
})

小程序详情页面

1.

/* home.wxml */

 <block wx:for="{{list}}" wx:key="index"><view class="" bindtap="navToDetail" data-aid="{{item.id}}"><image src="%7B%7Bbasefile%20+%20item.cover_url%7D%7D" class="img_size" mode="aspectFill"></image><text>{{item.title}}</text></view></block>

/* home.js */

  navToDetail(e){
    wx.navigateTo({
      url: '/pages/home/detail/detail?aid=' + e.currentTarget.dataset.aid,
    })
  },

通过添加点击事件

/* detail.js */

  onLoad: function (options) {
    if(options.aid){
      wx.request({
        url: app.config.api + '/articles/detail/' + options.aid,
        success: ({data}) => {
          console.log('详情：', data)
          this.setData({info: data})
        }
      })
    }
  },

最后，文章详情就成功返回了

demo地址

文中关于mysql的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《文章小程序全栈开发，从入门到上线，第5节——获取文章列表和详情》文章吧，也可关注golang学习网公众号了解相关技术文章。