如何使用 POST/form 叶模板传递数据?

Posted

技术标签:

【中文标题】如何使用 POST/form 叶模板传递数据?【英文标题】:How to pass data from using POST/form leaf template? 【发布时间】:2018-04-01 01:34:13 【问题描述】:

我对 vapor/leaf/html 的理解存在一些重大差距。我正在使用蒸汽的 beta 分支创建的“待办事项”示例。

首先,我制作了自己的流利模型(据我所知没有问题):

import FluentSQLite
import Vapor
final class affordatmodel: SQLiteModel 
    var id: Int?
    var propertyCost: String
    var targetEquity: String
    var interestRate: String
    var amortization: String
    var sponsor1: String
    var sponsor2: String
    var rent: String
    var rentInflation: String
    var propertyTaxes: String
    var propertyTaxesInflation: String
    var strataFees: String
    var strataFeesInflation: String
    init(propertyCost: String, targetEquity: String, interestRate: String, amortization: String, sponsor1: String, sponsor2: String, rent: String, rentInflation: String, propertyTaxes: String, propertyTaxesInflation: String, strataFees: String, strataFeesInflation: String) 
        self.propertyCost = propertyCost
        self.targetEquity = targetEquity
        self.interestRate = interestRate
        self.amortization = amortization
        self.sponsor1 = sponsor1
        self.sponsor2 = sponsor2
        self.rent = rent
        self.rentInflation = rentInflation
        self.propertyTaxes = propertyTaxes
        self.propertyTaxesInflation = propertyTaxesInflation
        self.strataFees = strataFees
        self.strataFeesInflation = strataFeesInflation
    

/// Allows to be used as a dynamic migration.
extension affordatmodel: Migration  
/// Allows to be encoded to and decoded from HTTP messages.
extension affordatmodel: Content  
/// Allows to be used as a dynamic parameter in route definitions.
extension affordatmodel: Parameter  

然后我创建一个实例并将其发送到叶子模板:

let defaultData = affordatmodel(propertyCost: "700000", targetEquity: "300000", interestRate: "1", amortization: "20", sponsor1: "500000", sponsor2: "200000", rent: "1200", rentInflation: "1", propertyTaxes: "8000", propertyTaxesInflation: "1", strataFees: "0", strataFeesInflation: "0")
return leaf.render("welcome", ["affordat": defaultData])

我的 Leaf 模板成功地用默认数据填充了 html(正文显示在这里):

<body class="container">
    <h1>Payment and Principal Calculations</h1>

    <form action="/affordat" method="POST">
        <div class="form-group">
            <label for="propertyCost">Property Cost</label>
            <input type="number" class="form-control" name="propertyCost" placeholder="#(affordat.propertyCost)">
                </div>
        <div class="form-group">
            <label for="targetEquity">Target Equity</label>
            <input type="number" class="form-control" name="targetEquity" placeholder="#(affordat.targetEquity)">
                </div>
        <div class="form-group">
            <label for="interestRate">Interest Rate</label>
            <input type="number" class="form-control" name="interestRate" placeholder="#(affordat.interestRate)">
                </div>
        <div class="form-group">
            <label for="amortization">Amortization (years)</label>
            <input type="number" class="form-control" name="amortization" placeholder="#(affordat.amortization)">
                </div>
        <div class="form-group">
            <label for="sponsor1">Sponsor 1 Funds</label>
            <input type="number" class="form-control" name="sponsor1" placeholder="#(affordat.sponsor1)">
                </div>
        <div class="form-group">
            <label for="sponsor2">Sponsor 2 Funds</label>
            <input type="number" class="form-control" name="sponsor2" placeholder="#(affordat.sponsor2)">
                </div>
        <div class="form-group">
            <label for="rent">Rent</label>
            <input type="number" class="form-control" name="rent" placeholder="#(affordat.rent)">
                </div>
        <div class="form-group">
            <label for="rentInflation">Rent Inflation (will be used exactly)</label>
            <input type="number" class="form-control" name="rentInflation" placeholder="#(affordat.rentInflation)">
                </div>
        <div class="form-group">
            <label for="propertyTaxes">Property Taxes (first year est.)</label>
            <input type="number" class="form-control" name="propertyTaxes" placeholder="#(affordat.propertyTaxes)">
                </div>
        <div class="form-group">
            <label for="propertyTaxesInflation">Property Taxes Inflation (est.)</label>
            <input type="number" class="form-control" name="propertyTaxesInflation" placeholder="#(affordat.propertyTaxesInflation)">
                </div>
        <div class="form-group">
            <label for="strataFees">Strata Fees (first year est.)</label>
            <input type="number" class="form-control" name="strataFees" placeholder="#(affordat.strataFees)">
                </div>
        <div class="form-group">
            <label for="strataFeesInflation">Strata Fees Inflation (est.)</label>
            <input type="number" class="form-control" name="strataFeesInflation" placeholder="#(affordat.strataFeesInflation)">
                </div>

        <input type="hidden" name="_csrf" value="csrfToken">
            <button type="submit" class="btn btn-primary">Refresh Calculations</button>
            </form>

</body>

太好了,所以我知道如何将流畅的数据转换为 HTML。我的问题是我不知道如何找回它。当“发布”发生时,数据似乎没有传递给控制器​​。我的路线是:

router.post("affordat", use: affordatController.create)

我的控制器的相关部分如下所示:

import Vapor
final class AffordatController 
    func create(_ req: Request) throws -> Future<affordatmodel> 
        return try req.content.decode(affordatmodel.self).flatMap(to: affordatmodel.self)  affordatmodel1 in
            return affordatmodel1.save(on: req)
        
    

这显示了我的一个模型,带有 ID #,但没有数据。而且我有点理解为什么,因为我似乎并没有真正将发布数据发送到控制器。 我应该如何将 POST 数据发送到控制器?问题出在我的叶子模板、路由还是控制器上?

【问题讨论】:

嗨。发送 POST 数据的方法有很多种。首先,确定您使用的方法。表单数据/x-www-form-urlencoded/原始/json?我建议下载 Postman(免费且非常有用的应用程序),您将能够确定请求,甚至可以进行一些单元测试。那么如何发送数据呢? 嗨,马丁。我从上面显示的 Leaf 模板发送它,它调用路由“affordat”,该路由使用以下路由定向到控制器:router.post("affordat", use:affordatController.create) 但我没有证据数据到达那里因为控制器返回 "id":1,"sponsor2":"","interestRate":"","strataFees":"","propertyTaxesInflation":"","targetEquity":"","re​​nt": "","propertyTaxes":"","re​​ntInflation":"","amortization":"","strataFeesInflation":"","sponsor1":"","propertyCost":""(即它保存了一个空白模型) 【参考方案1】:

看起来应该可以了。您可以在浏览器的网络检查器中检查发送到服务器的数据。确保保留日志,您将能够看到 POST 请求和发送到服务器的数据。

如果你在请求中的每个点都设置断点,你可以看到数据是什么。

顺便说一句,看起来您提交的是一个空表单,所以它只是将所有内容都填写为空白字符串。您的意思是在表单输入中使用value 而不是placeholder?值将为用户预填充数据,占位符将向用户显示值作为建议,但不会在表单提交中发送数据。

【讨论】:

以上是关于如何使用 POST/form 叶模板传递数据?的主要内容,如果未能解决你的问题,请参考以下文章

如何在蒸汽叶中分配变量?

傅里叶变换如何应用于实际的物理信号?

如何将数据传递到 GAE 基本模板?

如何在模板中将数据从 Flask 传递到 JavaScript?

如何在 axios 中为 POST - multipart/form-data 设置 MIME 类型?

如何使用 EJS 模板引擎将变量传递给内联 javascript?