1.抓取的接口
/** * 抓取的接口 * 新闻列表接口:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1 * 新闻详情接口:http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=123 */
2.配置公共的api
config/config.default.js
// 配置公共的api config.api = 'http://www.phonegap100.com/';
3.创建 news service
app/service/news.js
/** * 抓取的接口 * 新闻列表接口:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1 * 新闻详情接口:http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=123 */ 'use strict'; const Service = require('egg').Service; class NewsService extends Service { async getNewsList() { /** * 通过抓取接口返回数据 * curl的方法可以获取远程的数据 */ let api = this.config.api + 'appapi.php?a=getPortalList&catid=20&page=1'; let response = await this.ctx.curl(api); // console.log(response.data); // 返回的是Buffer let data = JSON.parse(response.data); // 把Buffer类型转换成对象 // console.log(data); return data.result; } // 获取新闻详情 async getNewsContent(aid) { let api = this.config.api + 'appapi.php?a=getPortalArticle&aid=' + aid; let response = await this.ctx.curl(api); let data = JSON.parse(response.data); return data.result; } } module.exports = NewsService;
4.创建 news view
app/view/news.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新闻列表页</title> </head> <body> <h2>新闻列表数据</h2> <ul> <%for(var i=0;i<list.length;i++){%> <li> <a href="/newscontent?aid=<%=list[i].aid%>"><%=list[i].title%></a> </li> <%}%> </ul> </body> </html>
app/view/newscontent.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新闻详情页</title> <!-- 引入静态资源 --> <link rel="stylesheet" href="/public/css/basic.css" /> </head> <body> <!-- <h2>新闻详情数据</h2> --> <div class="content"> <h2><%=list.title%></h2> <div> <%-list.content%> </div> </div> </body> </html>
5.创建 news controller
'use strict'; const Controller = require('egg').Controller; class NewsController extends Controller { // 新闻列表页 async index() { // 获取数据显示到新闻页面 let list = await this.service.news.getNewsList(); // this.ctx.body = list; await this.ctx.render('news', { list }) } // 新闻详情页 async content() { // 获取get传值 let aid = this.ctx.query.aid; // console.log('---aid---',aid); let list = await this.service.news.getNewsContent(aid); // console.log('---list---',list); await this.ctx.render('newscontent', { list: list[0] }); } } module.exports = NewsController;
6.效果图
http://127.0.0.1:7001/newscontent?aid=491