[英]Add script action for buttons in html with Vapor
我正在使用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>
可以像在HTML中一樣將腳本添加到.leaf
文件中,只需添加腳本標記:
<script src="js/index.js"></script>
從查看代碼,您想要的是一個將數據發布到服務器的form
。 您應該使用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>
然后你應該能夠使用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
}
我不確定這是否有用,我沒有測試過,但我認為你明白了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.