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

Question

I am developing a web app with Swift 4 and Vapor 2.0. 我正在使用Swift 4和Vapor 2.0开发一个Web应用程序。 I have a method for a POST request which creates a new user: 我有一个POST请求的方法，它创建一个新用户：

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

But I don't know how to add action for button in the .leaf file to call the createUser method. 但我不知道如何在.leaf文件中添加按钮动作来调用createUser方法。 It easy to add a JavaScript action in a .html file, like that <script src="js/index.js"></script> . 可以很容易地在.html文件中添加JavaScript操作，例如<script src="js/index.js"></script> 。 But with Vapor, I didn't see any mention about that in the Vapor 2.0 docs 但是对于Vapor，我在Vapor 2.0文档中没有看到任何提及

Update: 更新：

With help from @Caleb Kleveter, now it worked. 在@Caleb Kleveter的帮助下，现在它起作用了。 I updated html page(it's just for test, so that it's not a nice page) with hope: it'll help for newcomer whom face with the same problem when use vapor . 我更新了html页面（它仅用于测试，因此它不是一个不错的页面）带来了希望：它对于在使用vapor时面临同样问题的新手有帮助。

Here is my HTML contents: 这是我的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>

Answer 1

Scripts can be added to a .leaf file the same way as you would in HTML, just add a script tag: 可以像在HTML中一样将脚本添加到.leaf文件中，只需添加脚本标记：

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

From viewing your code, what you want is a form to post the data to the server. 从查看代码，您想要的是一个将数据发布到服务器的form 。 You should replace your .login-form div with a form element: 您应该使用form元素替换.login-form div ：

<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>

Here is the documentation for HTML forms. 这是 HTML表单的文档。

Then you should be able to access the form data in you route method with request.body : 然后你应该能够使用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
}

I am not sure if this will work, I haven't tested it, but I think you get the idea. 我不确定这是否有用，我没有测试过，但我认为你明白了。

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-09-28 11:24:40

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-09-28 11:24:40

解决方案1
3 已采纳 2017-09-28 11:24:40