html 没有任何错误记录后文件没有出现
html file does not appear after logging without any error
我是服务器端编程的新手。
我正在尝试在身份验证后提供 HTML 文件 (mapview.html),但是 它 没有出现 没有任何错误。
认证过程没有问题。我希望当我点击登录按钮时,代码会检查请求数据
验证后,mapview.html 弹出 但什么也没有发生。
res.sendFile() 导致 jquery 部分,console.log(res),获取 chrome.
控制台行中的所有 html 代码
文件目录:
src
index.js
db
public
index.html
mapview.html
middleware
auth.js
routers
user
task
model
user
task
index.html
$('div[name="logIn"]').click( () => { // select a div element that its name is logIn
console.log('LOG-IN:')
$.ajax({
url: '/login',
data: $('#loginForm').serialize(), // Get email and pass from login form
type: 'POST',
success: function (res) {
console.log(res)
}
})
})
user.js
router.post('/login', async (req, res) => {
try {
const user = await User.findByCredentials(req.body.email, req.body.password)
const token = await user.generateAuthToken()
const publicDir = path.join(__dirname, '../public')
res.sendFile(path.join(publicDir + '/mapview.html'));
} catch (e) {
res.status(400).send(e)
}
})
index.js
const express = require('express');
require('./db/mongoose');
const bodyParser = require('body-parser');
const userRouter = require('./routers/user');
const taskRouter = require('./routers/task');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.json()); // Parse recieved json body data from Postman
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(express.static(__dirname + '/public'));
app.use(userRouter);
app.use(taskRouter);
app.listen(port, () => {
console.log('server is run on port:' + port)
});
当您使用 ajax 从 index.html 发出 HTTP post 请求以验证用户身份验证详细信息时,身份验证成功后,您将发送一个静态 html 文件,其中只是一个文本响应,不会呈现为网页(如您所期望的那样)。
为了解决这个问题,
- 为访问 mapview.html
创建一个单独的路由
app.get('/map', (req, res) => {
res.sendFile(__dirname + '/public' + '/mapview.html');
});
- 在您的 ajax 响应中,只需重定向到地图路线
$.ajax({
url: '/login',
data: $('#loginForm').serialize(), // Get email and pass from login form
type: 'POST',
success: function (res) {
console.log(res);
window.location.href = '/map'; // redirect to map route
}
});
我更新了代码,看起来像下面的代码。
正如我在过去的评论中提到的,我需要在通过 .href = '/map' 和 反射之前进行身份验证,我不知道如何将令牌附加到 .href='/map。
我们通常将令牌作为 header 和 ajax 发送,如下所示:
headers:{"Authorization": localStorage.getItem('token')}
如果我将它添加到 .href 中,像这样 window.location.href = '/map + "?token=MY_TOKEN" ,我怎样才能在 auth 方法中得到它?
user.js
router.post('/login', async (req, res) => {
try {
const user = await User.findByCredentials(req.body.email,
req.body.password)
const token = await user.generateAuthToken()
res.send({user, token})
} catch (e) {
res.send(e)
res.status(400).send(e)
}
})
router.get('/map', auth, (req, res) => {
const publicDir = path.join(__dirname, '../public')
res.sendFile(path.join(publicDir + '/mapview.html'));
});
index.html
$('div[name="logIn"]').click( () => {
$.ajax({
url: '/login',
data: $('#loginForm').serialize(),
type: 'POST',
success: function (res) {
localStorage.setItem('token', res.token);
window.location.href = '/map';
}
})
})
我是服务器端编程的新手。 我正在尝试在身份验证后提供 HTML 文件 (mapview.html),但是 它 没有出现 没有任何错误。 认证过程没有问题。我希望当我点击登录按钮时,代码会检查请求数据 验证后,mapview.html 弹出 但什么也没有发生。 res.sendFile() 导致 jquery 部分,console.log(res),获取 chrome.
控制台行中的所有 html 代码文件目录:
src
index.js
db
public
index.html
mapview.html
middleware
auth.js
routers
user
task
model
user
task
index.html
$('div[name="logIn"]').click( () => { // select a div element that its name is logIn
console.log('LOG-IN:')
$.ajax({
url: '/login',
data: $('#loginForm').serialize(), // Get email and pass from login form
type: 'POST',
success: function (res) {
console.log(res)
}
})
})
user.js
router.post('/login', async (req, res) => {
try {
const user = await User.findByCredentials(req.body.email, req.body.password)
const token = await user.generateAuthToken()
const publicDir = path.join(__dirname, '../public')
res.sendFile(path.join(publicDir + '/mapview.html'));
} catch (e) {
res.status(400).send(e)
}
})
index.js
const express = require('express');
require('./db/mongoose');
const bodyParser = require('body-parser');
const userRouter = require('./routers/user');
const taskRouter = require('./routers/task');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.json()); // Parse recieved json body data from Postman
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(express.static(__dirname + '/public'));
app.use(userRouter);
app.use(taskRouter);
app.listen(port, () => {
console.log('server is run on port:' + port)
});
当您使用 ajax 从 index.html 发出 HTTP post 请求以验证用户身份验证详细信息时,身份验证成功后,您将发送一个静态 html 文件,其中只是一个文本响应,不会呈现为网页(如您所期望的那样)。
为了解决这个问题,
- 为访问 mapview.html 创建一个单独的路由
app.get('/map', (req, res) => {
res.sendFile(__dirname + '/public' + '/mapview.html');
});
- 在您的 ajax 响应中,只需重定向到地图路线
$.ajax({
url: '/login',
data: $('#loginForm').serialize(), // Get email and pass from login form
type: 'POST',
success: function (res) {
console.log(res);
window.location.href = '/map'; // redirect to map route
}
});
我更新了代码,看起来像下面的代码。 正如我在过去的评论中提到的,我需要在通过 .href = '/map' 和 反射之前进行身份验证,我不知道如何将令牌附加到 .href='/map。 我们通常将令牌作为 header 和 ajax 发送,如下所示: headers:{"Authorization": localStorage.getItem('token')}
如果我将它添加到 .href 中,像这样 window.location.href = '/map + "?token=MY_TOKEN" ,我怎样才能在 auth 方法中得到它?
user.js
router.post('/login', async (req, res) => {
try {
const user = await User.findByCredentials(req.body.email,
req.body.password)
const token = await user.generateAuthToken()
res.send({user, token})
} catch (e) {
res.send(e)
res.status(400).send(e)
}
})
router.get('/map', auth, (req, res) => {
const publicDir = path.join(__dirname, '../public')
res.sendFile(path.join(publicDir + '/mapview.html'));
});
index.html
$('div[name="logIn"]').click( () => {
$.ajax({
url: '/login',
data: $('#loginForm').serialize(),
type: 'POST',
success: function (res) {
localStorage.setItem('token', res.token);
window.location.href = '/map';
}
})
})