天天看點

egg =>路由router與控制器controller

1.建立一個新的Controller-fruits.js

1.fruits.js檔案

egg =>路由router與控制器controller
'use strict';// 嚴格模式


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

class FruitsController extends Controller {

  async index() {
    const query = this.ctx.request.query;
    console.log(query);
    this.ctx.body = `我是一個水果清單頁面${query.index}`; // 上下文對象
  }

  async getId() {
    const id = this.ctx.params.id;
    this.ctx.body = `我的params參數id${id}`; // 上下文對象
  }
}

module.exports = FruitsController;
           

2.然後再

router.js

檔案裡面添加路由

'use strict';

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

           

3.get請求裡面擷取query裡面的參數

1.沒有參數的情況下
           
const query = this.ctx.request.query;
    console.log(query);
    this.ctx.body = `我是一個水果清單頁面${query.index}`;
           
1.1可以看到沒有參數的時候。顯示的是undefined
           
egg =>路由router與控制器controller
2.有query參數index的時候
顯示query.index在頁面上
           
egg =>路由router與控制器controller

3.在有params參數id的時候

async getId() {
    const id = this.ctx.params.id;
    this.ctx.body = `我的params參數id${id}`; // 上下文對象
  }
           
egg =>路由router與控制器controller

這樣寫多個touter很麻煩!

egg =>路由router與控制器controller

Restul風格的URL定義

egg =>路由router與控制器controller
改寫完後,就隻用寫一個router了
egg =>路由router與控制器controller

這裡我們用new和create方法重寫了新增頁面和新增操作

注意:post請求的create,重新整理頁面會重新去請求一次,也就是會請求兩次。

async index() {
    const query = this.ctx.request.query;
    console.log(query);
    // this.ctx.body = `我是一個水果清單頁面${query.index}`; // 上下文對象
    this.ctx.body = fruitList; // 替換成新建立的fruits_list
  }

  async new() {
    this.ctx.body = `
      <form action='/fruits' method='post'>
        <input name='fruitname'></input>
        <button>添加</button>
      </form> `;
  }

  async create() {
    const fruit = this.ctx.request.body;
    fruitList.push(fruit.fruitname);
    this.ctx.body = '添加資料成功';
  }
           

繼續閱讀