P15:前中台结合2-文章详细页面接口制作展示
首页的接口和展示已经差不多了,现在可以制作详细页的接口和内容。这节课主要目的是制作文章详细页面的接口,通过一个ID查找出详细的信息。
编写中台详细页面接口
先打开/service/app/controller/default/home.js
文件,编写接口,代码如下。需要注意的是整个接口是需要接收文章ID,然后根据文章ID查出内容的。
home.js文件
async getArticleById() { // 先配置路由的动态传值,然后再接收值 const id = this.ctx.params.id; const sql = 'SELECT article.id as id,' + 'article.title as title,' + 'article.introduce as introduce,' + 'article.article_content as article_content,' + "FROM_UNIXTIME(article.addTime,'%Y-%m-%d %H:%i:%s' ) as addTime," + 'article.view_count as view_count ,' + 'type.typeName as typeName ,' + 'type.id as typeId ' + 'FROM article LEFT JOIN type ON article.type_id = type.Id ' + 'WHERE article.id=' + id; const result = await this.app.mysql.query(sql); this.ctx.body = { data: result }; }
编写完成后,这个接口就可以使用了,但是不要忘记,开启MySql服务和中台接口服务。
编写前台链接导航
有了接口,先不着急编写详细页面,先把首页到详细页的链接做好。这个直接使用Next.js中的<Link>
标签就可以了。找到首页中循环时文章的标题,在外边包括<Link>
标签就可以了。
需要注意的是,这里
此段代码在/blog/pages/index.js
<div className="list-title"> <Link href={{pathname:'/detailed',query:{id:item.id}}}> <a>{item.title}</a> </Link> </div>
详细页从接口获取数据
当我们能通过链接跳转到详细页面之后,就可以编写detailed.js
,通过getInitialProps
来访问中台接口,并从中台接口获得数据。
先配置一下router路由,打开service/app/router/default.js
router.get('/default/getArticleById/:id', controller.default.home.getArticleById);
pages/detailed.js
文件中的代码
Detailed.getInitialProps = async(context) => { let id = context.query.id; const promise = new Promise((resolve)=>{ axios('http://127.0.0.1:7001/default/getArticleById/' + id).then((res) => { resolve(res.data.data[0]) }) }) return await promise }
写完之后我们访问一下代码,看看是不是可以拿到后台的数据(后台数据你可以尽量多准备一些)。如果预览可以拿到数据,证明我们的编写是没有问题的。但是当你点击标题访问文章详情页时控制台会报如下错误,即跨域问题。
本文就到这里,下节我们将解决egg.js的跨域问题
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P15:前中台结合2-文章详细页面接口制作展示
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P15:前中台结合2-文章详细页面接口制作展示