javascript - 使用 nginx 在网络上托管的“文本老虎机”。npm 的问题

问题描述

我正在开发一个完整的堆栈应用程序，该应用程序由两个系统组成，一个带有打印机，另一个托管远程处理基于 Web 的“老虎机”样式应用程序，该应用程序提供要在另一个系统上打印的字符串。

我已经创建了基于 python 的通信和打印机连接组件。我阅读了 web 部分的主题，并意识到最好的方法可能是使用 nginx 将页面提供给访问者。最初我曾考虑直接使用 django（而不是烧瓶），但是因为可能有太多的并发性并且从服务器端更新页面可能会导致速度变慢甚至崩溃，我相信某种基于 javascript 的实现会最好。我的大部分经验都在 javascript 之外，所以这里有很大的障碍，但我发现 vue.js 看起来很直观。我找到了一台可以满足我 50% 要求的老虎机，即它的描述中的第一个示例。

我想在网页上做的事情很简单：老虎机在页面加载时滚动，人们按下一个按钮然后它就停止了。它停止的位置被发送到后端，随后的处理对我来说似乎不是遥不可及的。与此时的网页不同。

可以跳到第二次编辑

我根据自述文件在我的系统上创建了一个 npm 环境，安装了 vue 并安装了包。但是，无论我尝试加载它的方式和位置，vue 永远无法找到它。

我尝试添加到index.html的正文中：

<script src="https://raw.githubusercontent.com/josex2r/jQuery-SlotMachine/master/dist/jquery.slotmachine.js"></script>

在 app.vue 中，我尝试以所有这些不同的方式将其加载到脚本部分中：

var SlotMachine = require('jquery_slotmachine.js');
import SlotMachine from "jquery-slotmachine"
import SlotMachine from './components/jquery.slotmachine.js'
import SlotMachine from '@/components/jquery.slotmachine.js' 
import * as SlotMachine from '../src/components/jquery.slotmachine.js' 
import SlotMachine from "jquery_slotmachine.js"

这些都没有导致任何事情。甚至在导出组件上也没有：

export default {
  name: 'App',
  components: {
    HelloWorld
  },mounted() {
    const plugin = document.createElement("script");
    plugin.setAttribute(
        "src",
        "@/components/jquery.slotmachine.js"
    );
    plugin.async = true;
    document.head.appendChild(plugin);
  }
};

任何想法/帮助？

先感谢您！

＃编辑：

<script src="https://raw.githubusercontent.com/josex2r/jQuery-SlotMachine/master/dist/jquery.slotmachine.js"></script>

在 stackoverflow 上书写时的错字。问题仍然适用。

＃编辑：

所以我发现 rawgithub 没有提供数据，或者更好的是，提供了一个空文件（标题问题？），无论如何，我在线托管了文件（私有云）并再次尝试使用新源，但我在返回时遇到了问题。我意识到这个版本可能存在问题，所以我回到了一个在运行测试时成功的旧版本。我下载了所有这些 lib 文件，将它们放在组件文件夹中，并使用“从 './components/slotmachine.js 导入 SlotMachine”能够使文件出现在浏览器控制台的网络选项卡中。

有了这个，我的新问题与课程开始时的这一行有关，这是通过浏览器控制台检测到的。

class SlotMachine {
    constructor (element, options) {
        this.element = element;
        // Slot Machine elements
        this.tiles = [].slice.call(this.element.children);

我的页面有以下脚本：

<script>
import SlotMachine from './components/slotmachine.js'
export default {
  name: 'App',
  components: {
  }
};
const el = document.querySelector('#machine');
const machine = new SlotMachine(el, {active: 1,delay: 450,auto: 1500});
</script>

其中#machine涉及：

<template>
  <div id="app">
    <div id="machine">
      <div>Madrid</div>
      <div>London</div>
      <div>New York</div>
    </div>
  </div>
</template>

与示例类似。但是，有了这个元素#machine没有传递给类，然后导致this.tiles[] 元素上的错误，因为元素是None

文档是否未完全加载，因此 querySelector 找不到元素？

先感谢您！

标签： javascripthtmlvue.js

javascript - 使用 nginx 在网络上托管的“文本老虎机”。npm 的问题

问题描述

解决方案

推荐阅读