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