egg.js异步请求数据

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

在实际项目中，

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

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

　　view主要负责模板渲染

　

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

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

/app/router.js

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

创建控制器

/app/controller/news.js

 const Controller = require('egg').Controller;

 class NewsController extends Controller {
   async index() {
     // ES6解构赋值
     const { ctx, service } = this;
     const title = '新闻列表';
     const newsList = await service.news.getAll();    // 异步获取service返回的数据,必须使用await
     await ctx.render('news', {
       title,
       newsList
     })
   }

   async detail() {
     const { ctx, service } = this;
     const title = '详情';
     const id = ctx.params.id;  // 获取路由/:id的参数
     const newsItem = await service.news.getOne(id);  //异步获取service返回的数据,必须使用await
     await ctx.render('detail', {
       title,
       newsItem
     })
   }
 }

 module.exports = NewsController;

创建服务

/app/service/news.js

　　

 const Service = require('egg').Service;

 class NewsService extends Service {
   async getAll() {
     const { config } = this;
　　　　// config.url是接口的公共地址，推荐在app/config/config.default.js配置
     const re = await this.ctx.curl(`${config.url}/此处是新闻列表的api接口`)
     const res = JSON.parse(re.data)  // 这里根据实际返回的数据进行格式化处理，最后返回一个对象
     // console.log(res)
     return res.result;
   }

   async getOne(id) {
     const url = this.config.url;
     const re = await this.ctx.curl(`${url}/此处是单条新闻的api接口&id=${id}`);
     const res = JSON.parse(re.data).result[0];  // 获取第一条
     console.log(res);
     return res;
   }
 }

 module.exports = NewsService;

创建模板

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

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

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

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

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

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