logo标签列表

使用Vapor为html按钮添加脚本操作

htmlswiftvaporleaf
4

我正在使用Swift 4和Vapor 2.0开发一个Web应用程序。我有一个用于POST请求的方法，用于创建新用户：

builder.post("user", "createUser") { (request) -> ResponseRepresentable in

但我不知道如何在.leaf文件中为按钮添加操作以调用createUser方法。在.html文件中添加JavaScript操作非常容易，就像这样<script src="js/index.js"></script>。但是，在Vapor中，在Vapor 2.0文档中没有提到任何相关内容。
更新：
在@Caleb Kleveter的帮助下，现在它已经可以工作了。我更新了html页面（这只是为了测试，所以它不是一个好看的页面），希望它能帮助那些使用vapor时遇到相同问题的新手。
以下是我的HTML内容：
    <!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
            <title>Responsive Login Form</title>


            <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>

                <link rel="stylesheet" href="styles/app.css">


                </head>

                <body>
                <link href='https://fonts.googleapis.com/css?family=Ubuntu:500' rel='stylesheet' type='text/css'>
                <h3>
                <form action="/user/createUser" method="POST" class="login-form">
                <label for="username">Username:</label>
                <input type="text" placeholder="Username" name="username"/>
                <label for="password">Password:</label>
                <input type="password" placeholder="Password" name="password"/>
                <input type="submit" value="Login" class="login-button"/>
                <form>
                </h3>
                <a class="sign-up">Sign Up!</a>
                <br>
                <h6 class="no-access">Can't access your account?</h6>
                </div>
                </div>
                <!-- <div class="error-page">
                    <div class="try-again">Error: Try again?</div>
                </div> -->
                <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
                    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

                    <script  src="js/index.js"></script>

            </body>
</html>
1个回答
3

可以像在HTML中一样添加脚本到.leaf文件中，只需添加一个脚本标签：

<script src="js/index.js"></script>

从您的代码来看，您需要一个 form 将数据提交到服务器。您应该将您的 .login-form div 替换为一个 form 元素：

<form action="/create-user" method="POST" class="login-form">
    <label for="username">Username:</label>
    <input type="text" placeholder="Username" name="username"/>
    <label for="password">Password:</label>
    <input type="password" placeholder="Password" name="password"/>
    <input type="submit" value="Login" class="login-button"/>
<form>
<a class="sign-up">Sign Up!</a>
<h6 class="no-access">Can't access your account?</h6>

这里是HTML表单的文档。

然后，您应该能够使用request.body在路由方法中访问表单数据：

func createUser(req: Request) throws -> ResponseRepresentable {
    guard let password = req.body["password"]?.string,
          let username = req.body["username"]?.string else {
             throw Abort.badRequest
    }

    // The rest of your code goes here
}

我不确定这是否有效，我还没有测试过，但我认为你可以理解这个想法。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接