如何使jquery 3.6.0与node.js v12.16.1一起工作

kqlmhetl  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(379)

我正在使用一个名为replit的在线ide,node.js项目运行在节点版本12.16.1上。但我正试图让jquery 3.6.0使用这个版本的node.js,但我在网上找到的每一种方法都不起作用。我并没有使用html,而是使用pug,这是一种在html文件中插入变量的方法。
我尝试使用的第一种方法是使用cdn导入jquery:

script(src='https://code.jquery.com/jquery-3.6.0.slim.min.js', integrity='sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=', crossorigin='anonymous')

第二种方法是使用jquery npm包:

const { JSDOM } = require( 'jsdom' );
const jsdom = new JSDOM();
const { window } = jsdom;
const { document } = window;
global.window = window;
global.document = document;

const $ = global.jQuery = require( 'jquery' );
console.log( `jQuery ${jQuery.fn.jquery} working! Yay!!!` );

console.log()可以工作,但代码运行不正确。
代码如下:

const { JSDOM } = require( 'jsdom' );
const jsdom = new JSDOM();
const { window } = jsdom;
const { document } = window;
global.window = window;
global.document = document;

const $ = global.jQuery = require( 'jquery' );
console.log( `jQuery ${jQuery.fn.jquery} working! Yay!!!` );

const users = require('../../../data/user')
const sessions = require('../../../data/session')

let session = {}
let user = {}

$('#createSessionButton').on("click", async () => {
  session = await sessions.create({
    name: $('#session').val(),
    players: $('#players').val(),
    rewardMultiplier: $('#multiplier').val()
  })

  user = await users.create({
    session: session.name,
    username: $('#username').val(),
    email: $('#email').val(),
    password: $('#password').val(),
    isAdmin: true,
    total: 0
  })
})

$('#joinSessionButton').on("click", async () => {
  session = await sessions.findOne({ name: $('#session').val() })

  user = await users.findOne({
    session: session.name,
    username: $('#username').val(),
    email: $('#email').val(),
    password: $('#password').val()
  }) || await users.create({
    session: session.name,
    username: $('#username').val(),
    email: $('#email').val(),
    password: $('#password').val(),
    isAdmin: false,
    total: 0
  })
})

module.exports = session, user

基本上,一旦按下一个按钮,就会使用多个输入html标记的id(在pug中,您使用#声明id=>示例:h3#test test=test)获取多个输入html标记的文本值,并将其发送到数据库。
下面是一个使用此脚本的pug/jade文件:

doctype
html(lang="en")
  head
    include ../includes/header.pug
    link(rel="stylesheet", href="/css/session.css")

  body
    h1.mb-3.font-weight-normal(style="margin-top: 7.5vw; margin-bottom: 5vw;") Please fill in each and everyone of these fields to create a session
      form(style="max-width: 480px; margin: auto;")

        h2.mt-5 Session Information
        h5 (This will create a session for you and your friends to play together)
        input#session.form-control.mb-3(type="text", placeholder="Session Name", required)
        input#players.form-control.mb-2(type="number", min='5', max='25', placeholder="Number of Players", required)
        input#multiplier.form-range(type='range', value="1", min='0.5', max='10', step='0.5', onchange="rangevalue.value = `Reward Multiplier : ${value}`")
        output#rangevalue.h4 Reward Multiplier : 1

        h2.mt-5 User Information
        h5 (This will create or fetch your account)
        input#username.form-control.mb-3(type="text", placeholder="Username", required)
        input#email.form-control.mb-3(type="email", placeholder="Email Address", required)
        input#password.form-control(type="password", placeholder="Password", required)

      div.mt-3.center
        a.btn.btn-lg.btn-primary(href='/session') <-- Back
        a#createSessionButton.btn.btn-lg.btn-primary.btn-block(href="/session/dashboard") Create session -->

    script(src="/js/session.js")

但是jquery在我的项目中根本不起作用,即使它在web浏览器控制台中起作用。如果有人能帮我,那真是太棒了!!!
以下是指向web浏览器的链接:网站

bsxbgnwa

bsxbgnwa1#

“异端猴子”说的是真的。这个 script() 问题顶部的行是正确的方式,因为它将jquery加载到您的网页中,而不是服务器中。它从cdn加载它。那很好。
jquery使用浏览器端(客户端)javascript来操作网页中内容的文档对象模型(dom)。
nodejs服务器中没有dom(除非您正在做一些不同寻常的事情——您没有),因此服务器中的jquery是毫无意义的。

相关问题