获取表单内容

新建一个表单html在view中

View 中的html需要用到View引擎，安装egg-view-nunjucks插件

npm i egg-view-nunjucks

然后在config/plugin.js中配置插件启用状态

exports.nunjucks= {

enable: true,

package: 'egg-view-nunjucks',

};

在各个环境的配置文件中config/config.${env}.js中配置插件

//config/config.default.js

module.exports = appInfo =>{

const config = exports= {};

// use for cookie sign key, should change to your own and keep security

config.keys = appInfo.name + '_1532569715327_5704';

config.view= {

    defaultViewEngine: 'nunjucks',

};

config.nunjucks= {

    // dir: 'path/to/template/dir', // default to `{app_root}/app/view`

    cache: true, // local env is false

};

return config;

};

在controller目录下新建一个form.js,

//app/controller/form.js

// 处理表单提交后的事件，此处返回表单提交的内容

exports.post = async ctx =>{

ctx.body = `body: ${JSON.stringify(ctx.request.body)}`;

}

// 渲染静态页面，模拟提交表单

exports.render = async ctx =>{

await ctx.render('form.html');

}

在router.js中添加

// app/router.js

module.exports = app =>{

const { router, controller } = app;

// 表单提交的路径

router.post('/form', controller.form.post);

// 模拟表单路径

router.get('/login', controller.form.render);

};

运行，访问login页面

提交之后，跳转到表单处理页面

表单校验

接上文，如果要验证提交的表单数据内容，可以使用egg-validate，

安装： npm I egg-validate

然后在插件配置中启用该插件

exports.validate= {

enable: true,

package: 'egg-validate',

};

修改form.js如下

//app/controller/form.js

// 表单提交的验证规则

const loginRule= {

    username:{

      type: 'email',

    },

    password:{

      type: 'password',

    //  compare: 're-password',

    },

};

// 处理表单提交后的事件，此处返回表单提交的内容

exports.post = async ctx =>{

    // 如果校验报错，会抛出异常

    try{

      ctx.validate(loginRule);

    }catch (error) {

      console.log(error)

    }

    ctx.body = `body: ${JSON.stringify(ctx.request.body)}`;

}

// 渲染静态页面，模拟提交表单

exports.render = async ctx =>{

    await ctx.render('form.html');

}