egg.js异步请求数据

以前已经简单的使用egg-init初始化项目，并建立控制器controller和服务service

在实际项目中，

　　service主要负责数据的请求，并处理（http请求）

　　controll主要负责获取service中获得的最终数据，并渲染给模板view

　　view主要负责模板渲染

　

在此，先尝试从远程获取http数据（非数据库获取）

 

配置新闻列表页和详情页路由

/app/router.js

1 router.get('/news', controller.news.index);
2 router.get('/news/:id', controller.news.detail);

建立控制器

/app/controller/news.js

 1 const Controller = require('egg').Controller;
 2 
 3 class NewsController extends Controller {
 4   async index() {
 5     // ES6解构赋值
 6     const { ctx, service } = this;
 7     const title = '新闻列表';
 8     const newsList = await service.news.getAll();    // 异步获取service返回的数据,必须使用await
 9     await ctx.render('news', {
10       title,
11       newsList
12     })
13   }
14 
15   async detail() {
16     const { ctx, service } = this;
17     const title = '详情';
18     const id = ctx.params.id;  // 获取路由/:id的参数
19     const newsItem = await service.news.getOne(id);  //异步获取service返回的数据,必须使用await
20     await ctx.render('detail', {
21       title,
22       newsItem
23     })
24   }
25 }
26 
27 module.exports = NewsController;

 

建立服务

/app/service/news.js

　　

 1 const Service = require('egg').Service;
 2 
 3 class NewsService extends Service {
 4   async getAll() {
 5     const { config } = this;
　　　　// config.url是接口的公共地址，推荐在app/config/config.default.js配置
 6     const re = await this.ctx.curl(`${config.url}/此处是新闻列表的api接口`)
 7     const res = JSON.parse(re.data)  // 这里根据实际返回的数据进行格式化处理，最后返回一个对象
 8     // console.log(res)
 9     return res.result;
10   }
11 
12   async getOne(id) {
13     const url = this.config.url;
14     const re = await this.ctx.curl(`${url}/此处是单条新闻的api接口&id=${id}`);
15     const res = JSON.parse(re.data).result[0];  // 获取第一条
16     console.log(res);
17     return res;
18   }
19 }
20 
21 module.exports = NewsService;

 

建立模板

列表模板， app/view/news.ejs

1 <ul class="list">
2         <% newsList.forEach(function (item, index) { %>
3            <li class="item"><a href="/news/<%= item.aid %>"><%= item.title %></a></li>
4         <% })%>
5 </ul>

详情模板，app/view/detail.ejs

1 <div class="item-wrapper">
2         <h3 class="item-title"><%= newsItem.title %></h3>
3         <p class="item-summary"><%= newsItem.summary %></p>
4         <div class="item-content">
5             <!--在ejs语法中, - 表示解析HTML数据 -->
6             <%- newsItem.content %>
7         </div>
8 </div>

在模板中引入静态资源文件如CSS， /public/是默认的路径

<link rel="stylesheet" href="/public/css/news.css">