获取文章列表接口
在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})
}
})
}
},
最后,文章详情就成功返回了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。