gpt4 book ai didi

html - 使用 bootstrap、express 和 node.js 登录表单

转载 作者:太空宇宙 更新时间:2023-11-03 23:33:47 25 4
gpt4 key购买 nike

我对 Node.js 和 Express 还很陌生,所以我仍在尝试找出基本功能。我有一个简单的歌唱形式。我希望一旦我点击登录按钮,就会加载另一个 html 页面并调用一个 node.js 函数。最好的方法是什么?

这是我的表单代码。

  <form action="/create_dialog" method="post" class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="username" class="sr-only">Username</label>
<input type="username" id="username" class="form-control" placeholder="Username" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<input class="btn btn-lg btn-primary btn-block" type="submit">Sign in</input>
</form>

使用此代码,单击“登录”按钮后,我成功导航到 chat.html 页面。但我想做的是,当发生这种情况时,还调用一个 node.js 函数在服务器上创建一个文件,然后将输入的用户名变量发送到 chat.html 页面以显示名称。这是我的 app.js 代码。

var express = require('express');
var path = require('path');
var http = require('http');
var bodyParser = require('body-parser');

var app = express();

// all environments
app.set('port', process.env.PORT || 8080);
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true }));
app.use(require('stylus').middleware(path.join(__dirname, 'css')));
app.use(express.static(path.join(__dirname, 'public')));

app.post('/create_dialog', function(req, res) {
//res.send('You sent the name "' + req.body.username + '".');
console.log('You sent the name "' + req.body.username + '".');
console.log(req.body);
res.redirect('chat.html');
});

// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

我在某处读到,使用这个 body-parser 模块可以帮助我处理表单数据,但我有点迷失了如何将它用于 node.js 函数,然后将其发送到 chat.html 页面。

编辑1:更新了app.js代码以添加路由功能。由于 req.body 为空,仍然无法访问变量。

编辑2:还更新了表单代码。

最佳答案

您可以使用类型为 submit 的输入,而不是使用链接,如下所示:

<form action="/create_dialog" method="post" class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" name="username" class="form-control" placeholder="Username" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input name="remember-me" type="checkbox"> Remember me
</label>
</div>
<input class="btn btn-lg btn-primary btn-block" type="submit">
</form>

然后获取 POST request body 的内容在 express 中,您需要这样的路线:

app.js

app.post('/create_dialog', function(req, res){
var username = req.body.username
var password = req.body.password
var remember = req.body.remember-me // 'on' (checked) or undefined (off)

// With a veiw-engine - render the 'chat' view, with the username
res.render('chat', {username: username})

})

views/chat.hbs(假设您使用 Handlebars )

<html>
<head>
...
</head>
<body>
<p>Your username is: {{username}}</p>
</body>
</html>

使用 res.render你需要使用一个 View 引擎,比如 jade、handlebars 或 hogan。如果您不确定如何设置类似的内容,您应该查看使用express-generator的样板应用程序(命令行:express --hbs chat-app)。

关于html - 使用 bootstrap、express 和 node.js 登录表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35103860/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com