egg.js + koa项目搭建和接口请求实例分析

1. 环境配置

(1) 安装nodejs运行环境(nodejs版本必须≥8.0)
(2)创建egg的环境

npm i egg-init -g  / cnpm i egg-init -g

2. 创建项目

(1)快速搭建请参考官网（https://eggjs.org）
(2)逐步搭建

$ mkdir egg-project
$ cd egg-project
$ npm init（创建项目名称、版本、描述、作者等等）
$ npm i egg --save / $ cnpm i egg --save
$ npm i egg-bin --save-dev

(3) 添加 npm scripts 到 package.json
egg-bin
(4)编写Controller

// app/controller/home.js
const Controller = require('egg').Controller;
class HomeController extends Controller {
  async index() {
    this.ctx.body = 'Hello world';
  }
}
module.exports = HomeController;

(5)路由配置

// app/router.js
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
};

(6)配置文件

// config/config.default.js
exports.keys = 'my-cookie-egg'; // 此处改为你自己的 Cookie 安全字符串

此时项目目录（见下图）
project-menu

3. 启动项目

$ npm run dev
$ open http://localhost:7001 // 一般默认是7001端口

4.静态资源

Egg 内置了 static 插件，static 插件默认映射 /public/* -> app/public/* 目录，我们把静态资源都放到 app/public 目录即可。
static

5. 模板渲染

(1) 使用 Nunjucks 来渲染，先安装插件 egg-view-nunjucks

$ npm i egg-view-nunjucks --save
或者
$ cnpm i egg-view-nunjucks --save

(2) 开启插件

// config/plugin.js
exports.nunjucks = {
  enable: true,
  package: 'egg-view-nunjucks'
};

(3) 添加 view 配置

// config/config.default.js
exports.view = {
  defaultViewEngine: 'nunjucks',
  mapping: {
    '.tpl': 'nunjucks',
  },
};

(4) 模板编写
一般放置在 app/view 目录下

扫描二维码关注公众号，回复： 8586903 查看本文章

<!-- app/view/news/list.tpl -->
<html>
  <head>
    <title>Hacker News</title>
    <link rel="stylesheet" href="/public/css/news.css" />
  </head>
  <body>
    <ul class="news-view view">
      {% for item in list %}
        <li class="item">
          <a href="{{ item.url }}">{{ item.title }}</a>
        </li>
      {% endfor %}
    </ul>
  </body>
</html>

(5) 添加 Controller

// app/controller/news.js
const Controller = require('egg').Controller
class NewsController extends Controller {
  async list() {
    const dataList = {
      list: [
        { id: 1, title: 'this is news 1', url: 'www.baidu.com' },
        { id: 2, title: 'this is news 2', url: 'https://typescript.bootcss.com' }
      ]
    }
    await this.ctx.render('news/list.tpl', dataList)
  }
}
module.exports = NewsController

(6) 添加 Router

// app/router.js
module.exports = app => {
  const { router, controller } = app
  router.get('/', controller.home.index)
  router.get('/news', controller.news.list)
}

5. 编写service

实际应用中，Controller 一般不会自己产出数据，也不会包含复杂的逻辑，复杂的过程应抽象为业务逻辑层 Service
(1) service 编写

// app/service/news.js
const Service = require('egg').Service
class NewsService extends Service {
  async list(page = 1) {
    // read config配置接口
    const { serverUrl, pageSize } = this.config.news
    const { data: idList} = await this.ctx.curl(`${serverUrl}`, {
      data: {
        orderBy: '"$key"',
        startAt: `"${pageSize * (page - 1)}"`,
        endAt: `"${pageSize * page - 1}"`,
      },
      dataType: 'json',
    });
    const newsList = await Promise.all(
      idList.result.map(item => {
        return item
      })
    )
    return newsList.map(res => res.data)
  }
}
module.exports = NewsService

(2)然后稍微修改下之前的 Controller

// app/controller/news.js
const Controller = require('egg').Controller;
class NewsController extends Controller {
  async list() {
    const ctx = this.ctx;
    const page = ctx.query.page || 1;
    const newsList = await ctx.service.news.list(page);
    await ctx.render('news/list.tpl', { list: newsList });
  }
}
module.exports = NewsController;

(3) 最后增加 app/service/news.js 中读取到的配置：

// config/config.default.js
// 添加 news 的配置项
exports.news = {
  pageSize: 5,
  serverUrl: 'https://api.apiopen.top/searchMusic?name=不要说话'
}

至此在浏览器地址栏输入http://127.0.0.1:7001/news
页面呈现效果如下图：
result
文章参考官方教程，有什么不对之处还望指正！！！

gaodda

发布了22 篇原创文章 · 获赞 2 · 访问量 2864

私信关注