Question

我正试图摆脱教程的困境，并创造一些使我的生活更轻松（具有讽刺意味的东西）的工具，这是一个小时计算器。

我不会在功能上投入太多，但基本上，它只是一个存储我所有月份时间的应用程序，我可以通过单击按钮在月底计算出该小时数。

无论如何，我对此还是很陌生（尤其是后端），我无法找到一种方法来访问DOM，并且据我了解，这是服务器端代码，这是正常的。

但是，如果后端不存在此功能，我只需要知道如何获取DOM元素并将其分配给变量？除了...以外还有其他选择吗？

document.querySelector('...')

？

我确实安装了JSDOM，但是据我了解，您只能传递部分代码，而不是访问整个页面？我可能完全错了...

有人可以帮助我更清楚地了解我需要理解/做什么吗？

这是我的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('/')
    })
});

Answer 1

服务器端没有DOM（除了DOM的某些虚拟化）。在您的情况下，如果您要编写这样的应用程序，则最好是分别创建前端和后端代码。前端部分可以由您的服务器提供服务（甚至可以通过使用express中的app.static方法来完成），它将包括html，css，javascript代码，您将可以在其中操纵表单值，然后能够使用ajax / fetch API或仅经典形式的POST请求向服务器发出请求。稍后服务器将继续使用这些值，并将数据保存在数据库中（就像使用猫鼬一样）。我希望我已经足够清楚地描述了它，它将对您有所帮助。

有没有办法访问DOM服务器端？

1 个答案: