Gist网站实现(4)-我的代码页面输入合法性检测

添加表单提供提交代码片段功能

设计表单

form(action="/gists/save", method="post")
        div
            input(name="name")
            select(name="type")
                option(value="C") C
                option(value="C++") C++
                option(value="C#") C#
                option(value="Java") Java
                option(value="JavaScript") JavaScript
                option(value="php") PHP
                option(value="Python") Python
        div
            textarea(name="code",cols="30",row="10")
        div
            button(type="submit") 保存

保存代码逻辑

检查输入数据合法性

若输入内容不符合要求，则无法保存，提示错误并重新输入

使用错误处理中间件处理报错， 使用req.body取得 post 传入的数据

router.post("/save", (req, res, next) => {
  if (!req.body.name) return next(new Error("Gist Name不能为空!"));
});

添加错误页并修改样式

//错误页
extends layout

block content
    h1=message
    h2=error.status

    div
        a(href="javascript:history.back(1)") 点此返回

    pre.gray #{error.stack}

//样式
.gray {
  color: gray;
}

修改错误逻辑为自动捕获

上述错误逻辑为主动传入 next，并不灵活，使用 express-async-errors 处理异步操作时主动抛出异常

安装导入 express-async-errors 模块

//输入命令安装模块
$ yarn add express-async-errors

//导入模块
require('express-async-errors');

修改错误逻辑为主动 throw

if (!req.body.name)
  throw(new Error("Gist Name不能为空!"));

//测试异步时错误处理
router.post("/save", async(req, res, next) => {
  //if (!req.body.name) throw new Error("Gist Name不能为空!");
  const content = await fs.Promises.readFile( "index.php" );
});