egg.js教程從入門到放棄(app目錄規范解讀,按需ejs)

'use strict'; /** * @param {Egg.Application} app - egg application */ module.exports = app => { const { router, controller } = app; router.get('/', controller.home.index); };

1.app/router.js

　　打開app/router.js，會看到當訪問http://127.0.0.1:7001 (即http://127.0.0.1:7001/)時，走的是controller.admin.index

 

2.app/controller/home.js

　　打開app/controller/home.js，會看到ctx.body="hi,ComedyEgg"上面還有const{ctx}=this，這便是egg.js跟koa的微妙區別，koa是直接ctx.body=""給用戶響應信息，而egg是對koa進行了再封裝，egg把ctx.body這個對象放到了this身上，即this.ctx.body="響應內容";

'use strict'; const Controller = require('egg').Controller; class HomeController extends Controller { async index() { const { ctx } = this; ctx.body = 'hi, ComedyEgg'; } } module.exports = HomeController;

 

3.新增controller.admin.index

　　(1)在app/controller目錄下新建admin.js

　　(2)模板書寫(如果vsCode下載了egg擴展的話直接鍵入egg，然后選擇egg controller)

　　(3)新增 async index()方法

'use strict'; module.exports = app => { class AdminController extends app.Controller { async index(){ console.log(this); //egg給用戶響應信息 koa ctx.body="ComedyAdmin"
        this.ctx.body="ComedyAdmin"; } } return AdminController; };

　　(4)將admin添加到路由

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);

  router.get('/admin',controller.admin.index);
  
};

　　(5)瀏覽器url鍵入http://127.0.0.1:7001/admin

 

4.app/public

　　app/public目錄是靜態資源目錄，存放css,js,images

 

5.新增app/view目錄並使用ejs后端渲染

　　該目錄用於存放前端模板文件。比如在koa里面我經常用的是ejs，那么可以在view/comedy.ejs，然后配置好，在對應方法里面await this.ctx.render('')

即可實現用戶->router->controller->view

　　(1).安裝ejs ：npm i egg-view-ejs -d

　　(2).修改配置文件

　　　　(2)_01：config/plugin.js

'use strict';

/** @type Egg.EggPlugin */
// module.exports = {
//   // had enabled by egg
//   // static: {
//   //   enable: true,
//   // }
// };

exports.ejs = {
  enable:true,
  package:'egg-view-ejs'
}

　　　　(2)_02：config/config.default.js

/* eslint valid-jsdoc: "off" */

'use strict';

/**
 * @param {Egg.EggAppInfo} appInfo app info
 */
module.exports = appInfo => {
  /**
   * built-in config
   * @type {Egg.EggAppConfig}
   **/
  const config = exports = {};

  // use for cookie sign key, should change to your own and keep security
  config.keys = appInfo.name + '_1602733885132_3361';

  //EJS——20201015 comedy add
  config.view = { mapping:{ '.html':'ejs', }, }; 

  // add your middleware config here
  config.middleware = [];

  // add your user config here
  const userConfig = {
    // myAppName: 'egg',
  };

  return {
    ...config,
    ...userConfig,
  };
};

　　(3).從(2)可以看出擴展名ejs被改成了.html，那么新建的前端模板文件依然叫做comedy.html，而不是comedy.ejs。

 　　(4).配置路由，當用戶訪問那個url時給他展示comedy.html，我這里寫的是當用戶訪問coemdy時執行admin控制器的comedy方法。

　　(5).在admin控制器新增comedy方法以及render文件comedy.html，並提供數據供渲染

async comedy(){
　　await this.ctx.render('../view/comedy.html',{
   　　 data:"comedyEjsData"
　　})
}

 　　(6).運行效果

 

 

6.app/service  (model)

　　egg是一個MVC框架，app/view是視圖(頁面的展示)，app/controller是控制器(業務邏輯處理)，app/service是模型(請求數據)。

　　egg規定必須使用service而不能model，如果非要model的話也得是service/model

 

7.app/middleware

　　中間件