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">