标签：index 控制器 get app controller fruits router 路由

MVC概述

Egg中的控制器controller

fruits.js

const Controller = require("egg").Controller;//引入Controller类

class FruitsController extends Controller {

    async index(){//index方法
        this.ctx.body = "我是一个水果列表页面" //上下文对象ctx，.body是其响应的内容
    }
}

module.exports = FruitsController;

设置路由
router.js

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
//router描述了路由与控制器的对应关系
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);//'/'是首页，对应controller目录下的home.js的index方法
  router.get('/fruits',controller.fruits.index);
};

访问

egg中的路由

app/router.js

'use strict';//严格模式

/**
 * @param {Egg.Application} app - egg application
 */
//router描述了路由与控制器的对应关系
module.exports = app => { //暴露一个函数，该函数有个形参app，app也是整个Egg应用的实例
  const { router, controller } = app;//通过解构赋值拿到app下面的router的对象和controller的对象
  router.get('/', controller.home.index);//'/'是首页，对应controller目录下的home.js的index方法
  router.get('/fruits',controller.fruits.index);
};

路由传递参数

获取query参数

获取get请求参数，与koa类似

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

class FruitsController extends Controller {

    async index(){
        let query = this.ctx.request.query;
        //this.ctx.request是请求的对象，它的query对象能拿到url的参数
        console.log(query);//如{index:100}
        this.ctx.body = `传递的index值是${query.index}`//query对象的index属性
    }
}

module.exports = FruitsController;

?index=100是发送一个get请求

cmd中

获取params参数

即/:id
fruits.js

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

class FruitsController extends Controller {

    async index(){
        let query = this.ctx.request.query;
        //this.ctx.request是请求的对象，它的query对象能拿到url的参数
        console.log(query);//如{index:100}
        this.ctx.body = `传递的index值是${query.index}`//query对象的index属性
    }

    async getId(){
        let id = this.ctx.params.id;//获取地址后面的id，如127.0.0.1/7001/fruits/1
        this.ctx.body = `传递的id是：${id}`;
    }
}

module.exports = FruitsController;

router.js

'use strict';//严格模式

/**
 * @param {Egg.Application} app - egg application
 */
//router描述了路由与控制器的对应关系
module.exports = app => { //暴露一个函数，该函数有个形参app，app也是整个Egg应用的实例
  const { router, controller } = app;//通过解构赋值拿到app下面的router的对象和controller的对象
  router.get('/', controller.home.index);//'/'是首页，对应controller目录下的home.js的index方法
  router.get('/fruits',controller.fruits.index);
  router.get('/fruits/:id',controller.fruits.getId);
};

获取post请求

fruits.js

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

let fruitList = ["苹果","香蕉","鸭梨"];
class FruitsController extends Controller {

    async index(){
        this.ctx.body = fruitList;
    }

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

    async createFruit(){
        let fruit = this.ctx.request.body;//获取post请求对象
        fruitList.push(fruit.fruitname);//fruit对象的fruitname属性才是字符串
        this.ctx.body = "添加成功"
    }
}

module.exports = FruitsController;

router.js

'use strict';//严格模式

/**
 * @param {Egg.Application} app - egg application
 */
//router描述了路由与控制器的对应关系
module.exports = app => { //暴露一个函数，该函数有个形参app，app也是整个Egg应用的实例
  const { router, controller } = app;//通过解构赋值拿到app下面的router的对象和controller的对象
  router.get('/', controller.home.index);//'/'是首页，对应controller目录下的home.js的index方法
  router.get('/fruits',controller.fruits.index);
  // router.get('/fruits/:id',controller.fruits.getId);
  router.get('/createfruit',controller.fruits.createPage);
  router.post('/createfruit',controller.fruits.createFruit);
};

点击添加后

egg默认拦截post请求，要修改配置
到config.default.js
在return上面添加以下代码

config.security = {
    csrf: {
      enable:false,
    },
  };

现在就能进行post请求了

回到fruits页

restful风格的url定义

上面的写法有些繁琐，egg提供了简写的方式

fruits.js

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

let fruitList = ["苹果","香蕉","鸭梨"];
class FruitsController extends Controller {

    async index(){
        this.ctx.body = fruitList;
    }

    async new(){
        this.ctx.body = `
            <form method='post' action='/fruits'>
                <input name='fruitname'>
                <button>添加</button>
            </form>
        `;
        //action那改成/fruits是因为确保表单提交到create方法的相同路径
    }

    async create(){
        let fruit = this.ctx.request.body;
        fruitList.push(fruit.fruitname);
        this.ctx.redirect("/fruits")//回到fruits页
    }

    async update(){}//改

    async destroy(){}//删
}

module.exports = FruitsController;

router.js

'use strict';//严格模式

/**
 * @param {Egg.Application} app - egg application
 */
//router描述了路由与控制器的对应关系
module.exports = app => { //暴露一个函数，该函数有个形参app，app也是整个Egg应用的实例
  const { router, controller } = app;//通过解构赋值拿到app下面的router的对象和controller的对象
  router.get('/', controller.home.index);//'/'是首页，对应controller目录下的home.js的index方法
  // router.get('/fruits',controller.fruits.index);
  // // router.get('/fruits/:id',controller.fruits.getId);
  // router.get('/createfruit',controller.fruits.createPage);
  // router.post('/createfruit',controller.fruits.createFruit);
  //通过一行设置实现多个请求
  router.resources('fruits','/fruits',controller.fruits)
  /*'fruits'是接口即controller里的js文件，'/fruits'是路径即图中的/posts的指代，
  增删改查的操作路径都在此基础上，controller.fruits是控制器fruits
  这个方法即写好控制器的对应方法访问对应的path以实现对应的请求
  */
};

注意一点，同一个地址get请求和post请求也是两个页面
将create方法改下，注释掉重定向以保留post页面

初始列表

添加一次西瓜

此时虽然url里变成了/fruits但还是post页，如果按下回车才是get请求到/fruits页
按回车

回到new，试下再刷新，会再post请求一次
添加芒果

刷新

按确定，然后回到fruits页

发现有两个芒果，说明post请求了2次