有没有办法访问 DOM 服务器端?
Is there a way to access DOM serverside?
我正在努力摆脱教程地狱并创造一些东西让我的生活更轻松(具有讽刺意味),这是一个小时计算器。
我不会过多地介绍该功能,但基本上它只是一个应用程序,可以存储我所有的月份小时数,我可以通过单击按钮在月底计算这些小时数。
但是我被卡住了,我对此(尤其是后端)还很陌生,我找不到访问 DOM 的方法,据我所知,这是正常的,因为它是服务器端代码。
但是我只需要知道如果后端不存在此功能,您如何获取 DOM 元素并将它们分配给变量?
有没有替代品...
document.querySelector('...')
?
我确实安装了 JSDOM,但是据我了解,您只能传入部分代码,而不是访问整个页面?我可能完全错了...
有人可以帮助我更清楚地了解我需要什么吗understand/do?
这是我的 app.js 代码,放轻松 :)
const express = require('express'),
app = express(),
bodyParser = require('body-parser'),
mongoose = require('mongoose'),
jsdom = require("jsdom"),
{ JSDOM } = jsdom,
dom = new JSDOM('localhost:3000/');
// ----------------------------------------//
const date = new Date(),
day = date.getDate(),
month = date.toLocaleString('default', { month: 'long' }),
table = dom.window.document.querySelector('table'),
totalShiftHours = dom.window.document.querySelectorAll('.totalShiftHours');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.listen(3000, () => console.log("I'm listening"));
mongoose.connect('mongodb://localhost:27017/hours_calculator', { useNewUrlParser: true, useUnifiedTopology: true });
const shiftSchema = new mongoose.Schema({
date: Number,
startTime: Number,
finishTime: Number,
lunchTime: Number,
});
const Shift = mongoose.model('Shift', shiftSchema);
app.get('/', (req, res) => {
Shift.find({}, (err, allShifts) => {
if (err) console.log(`There's an error: ${err}`)
else res.render('index', {
shifts: allShifts,
day: day,
month: month,
table: table,
totalShiftHours: totalShiftHours
})
})
});
app.post('/', (req, res) => {
const startTime = Number(req.body.startTime),
finishTime = Number(req.body.endTime),
lunchTime = Number(req.body.lunchTime),
newShift = {
date: day,
startTime: startTime,
finishTime: finishTime,
lunchTime: lunchTime
};
Shift.create(newShift, (err, newShift) => {
if (err) console.log(`Somethings wrong, ${err}`);
else res.redirect('/')
})
});
服务器端没有DOM(除了DOM的一些虚拟化)。在您的情况下,如果您想编写这样的应用程序,最好分别创建前端和后端代码。前端部分可以由您的服务器提供服务(甚至可以通过使用 express 中的 app.static
方法来完成)并且它将包含 html、css、javascript 代码能够操作表单值,之后您将能够使用 ajax/fetch API 或仅使用经典表单 POST 请求向服务器发出请求。稍后服务器将继续处理这些值并将数据保存在数据库中(就像您使用猫鼬所做的那样)。希望我描述的足够清楚,对你有所帮助。
我正在努力摆脱教程地狱并创造一些东西让我的生活更轻松(具有讽刺意味),这是一个小时计算器。
我不会过多地介绍该功能,但基本上它只是一个应用程序,可以存储我所有的月份小时数,我可以通过单击按钮在月底计算这些小时数。
但是我被卡住了,我对此(尤其是后端)还很陌生,我找不到访问 DOM 的方法,据我所知,这是正常的,因为它是服务器端代码。
但是我只需要知道如果后端不存在此功能,您如何获取 DOM 元素并将它们分配给变量? 有没有替代品...
document.querySelector('...')
?
我确实安装了 JSDOM,但是据我了解,您只能传入部分代码,而不是访问整个页面?我可能完全错了...
有人可以帮助我更清楚地了解我需要什么吗understand/do?
这是我的 app.js 代码,放轻松 :)
const express = require('express'),
app = express(),
bodyParser = require('body-parser'),
mongoose = require('mongoose'),
jsdom = require("jsdom"),
{ JSDOM } = jsdom,
dom = new JSDOM('localhost:3000/');
// ----------------------------------------//
const date = new Date(),
day = date.getDate(),
month = date.toLocaleString('default', { month: 'long' }),
table = dom.window.document.querySelector('table'),
totalShiftHours = dom.window.document.querySelectorAll('.totalShiftHours');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.listen(3000, () => console.log("I'm listening"));
mongoose.connect('mongodb://localhost:27017/hours_calculator', { useNewUrlParser: true, useUnifiedTopology: true });
const shiftSchema = new mongoose.Schema({
date: Number,
startTime: Number,
finishTime: Number,
lunchTime: Number,
});
const Shift = mongoose.model('Shift', shiftSchema);
app.get('/', (req, res) => {
Shift.find({}, (err, allShifts) => {
if (err) console.log(`There's an error: ${err}`)
else res.render('index', {
shifts: allShifts,
day: day,
month: month,
table: table,
totalShiftHours: totalShiftHours
})
})
});
app.post('/', (req, res) => {
const startTime = Number(req.body.startTime),
finishTime = Number(req.body.endTime),
lunchTime = Number(req.body.lunchTime),
newShift = {
date: day,
startTime: startTime,
finishTime: finishTime,
lunchTime: lunchTime
};
Shift.create(newShift, (err, newShift) => {
if (err) console.log(`Somethings wrong, ${err}`);
else res.redirect('/')
})
});
服务器端没有DOM(除了DOM的一些虚拟化)。在您的情况下,如果您想编写这样的应用程序,最好分别创建前端和后端代码。前端部分可以由您的服务器提供服务(甚至可以通过使用 express 中的 app.static
方法来完成)并且它将包含 html、css、javascript 代码能够操作表单值,之后您将能够使用 ajax/fetch API 或仅使用经典表单 POST 请求向服务器发出请求。稍后服务器将继续处理这些值并将数据保存在数据库中(就像您使用猫鼬所做的那样)。希望我描述的足够清楚,对你有所帮助。