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

获取文章列表接口

在 server/routes/articles.js 里，新增一个获取列表的接口，如下

/* 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 页面里，进行获取

/* 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页面，跳转详情页面

/* home.wxml */

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

/* home.js */

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

通过增加点击事件 navToDetail，并绑定以后点击的文章 id，即data-aid。而后在navToDetail(e) 函数里，取到以后文章的 id，即e.currentTarget.dataset.aid。

2. 在小程序端，新增一个详情页面 detail，同时在onLoad 中，查寻文章详情

/* 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 地址