文章小程序全栈开发，从入门到上线，第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 */ {{item.title}}

/* 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}) } }) } },

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