javascript 呈现表单然后处理表单数据的控制器函数

ej83mcc0  于 2023-09-29  发布在  Java
关注(0)|答案(1)|浏览(82)

在一个Web.js Web应用程序中,我通常会使用一个控制器函数来呈现一个视图,该视图为客户端提供了一个要填充的表单,然后使用另一个控制器函数来执行给定表单数据的操作。例如,要从客户端导入汽车数据,我可能有以下内容。
简而言之:

  • 当服务器接收到HTTPGET请求时,它将使用包含表单的HTML内容进行响应。
  • 用户单击表单中的提交按钮,发送HTTPPOST请求。
  • 当服务器接收到HTTP POST请求时,它根据表单数据执行操作,然后用操作的结果进行响应。

HTTP GET和HTTP POST请求的URL可以相同:/car/import
但是,控制器功能必须以不同的方式命名。除了添加_get和_post之外,还有更优雅或更令人期待的命名方案吗?
myapp/routes/Router.js

const Express = require( 'express' );
const CarController = require( '../controllers/CarController' );

const router = module.exports = Express.Router();

router.get( '/car/import', CarController.import_get );

router.post( '/car/import', CarController.import_post );

myapp/controllers/CarController.js

/**
 * @summary Render a view to import car data and trigger the import.
 */
exports.import_get = function ( request, response, next )
{
  var data = { ... anything the view might need to initialize ... };

  // Magically fetch a views/car_import_page.ejs file.
  response.render( 'car_import_page', data );
};

/**
 * @summary Import car data.
 */
exports.import_post = async function ( request, response, next )
{
  // Form data is in request.body.

  ... perform the import ...

  // Respond with status.
  var data = 
  {
    message: 'Imported the cars successfully',
  };

  response.status( HTTP_RESPONSE_STATUS.OK ).json( data );
}
toiithl6

toiithl61#

通常,控制器的函数名可以包含相关的HTTP动词(正如您已经在做的那样)。另外,另一个常见的约定是使用小写或大写驼峰格式。
在你的情况下,你可以考虑:

GetCarImport
PostCarImport

反正就是约定俗成,没有严格的规定。

更多信息(与您的问题没有直接关系)

我将强调的是渲染函数和“REST”API在相同服务下的使用,更重要的是,在相同的URL路径命名下。
这不是标准。如果你不能为你的项目考虑客户端渲染,我建议至少把你所有的JSON API放在某个路径下,这样:

GET /car/import // reply with html content
GET /api/v1/car // reply with json content
POST /api/v1/car // reply with json content

阅读更多here

相关问题