Question

我是构建Node应用程序以及编写Vue的新手，但我想我可以创建一个小项目来帮助我理解这两个。

这个想法非常简单。我正在尝试创建一个可以在屏幕上显示的琐事游戏，用户可以使用他们的手机选择主机屏幕上显示的问题的答案。 Socket.io用于在服务器和客户端之间发送数据。

目前，有两条路线：/和/host。连接到/host将生成一个唯一的ID（我在响应中发送）并创建一个新的游戏实例，它将等待“玩家”加入，方法是输入主持人。

路由/ index.js

exports.host = (req, res) => {
  let id = generateRandomNumber(1000, 9999);

  res.render("host", { type: "host", gameId: id });
};

exports.player = (req, res) => {
  res.render("player", { type: "player" });
};

function generateRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

视图/ host.pug

<!DOCTYPE html>
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    meta(http-equiv="X-UA-Compatible", content="ie=edge")
    title Trivia
    script.
      let gameId = #{gameId};
      let clientType = "#{type}";

  body
    main#host-container

    script(id="host-intro-template", type="text/template")
      h1 To join in, visit #[span#url example.com] on your mobile device
      h2 Enter code #[span#code= gameId]
      button Start Game
      ul#player-list

    script(id="host-question-template", type="text/template")
      span#round Round 1 of 10
      h1#question What is blah blah blah?
      ul#option-list
        li Option 1
        li Option 2
        li Option 3
        li Option 4

    script(src="/socket.io/socket.io.js")
    script(src="/scripts/io.js")
    script(src="/scripts/app.js")
    script(src="/scripts/main.js")
    script(src="/scripts/host.js")

视图/ player.pug

<!DOCTYPE html>
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    meta(http-equiv="X-UA-Compatible", content="ie=edge")
    title Trivia Player
    script.
      let clientType = "#{type}";

  body

    main#player-container

    script(id="player-intro-template", type="text/template")
      label(for="player-name-input") Enter Your Name
      input(id="player-name-input", type="text")
      label(for="game-code-input") Enter Code
      input(id="game-code-input", type="text")
      button(id="player-start-button", type="submit") Start

    script(id="player-waiting-template", type="text/template")
      p Waiting for game to start

    script(id="player-answer-template", type="text/template")
      ul#option-list
        li Option 1
        li Option 2
        li Option 3
        li Option 4

    script(src="/socket.io/socket.io.js")
    script(src="/scripts/io.js")
    script(src="/scripts/app.js")
    script(src="/scripts/main.js")
    script(src="/scripts/player.js")

我现在想在客户端上加入Vue，而不是直接触摸DOM（问题之间的转换，更新播放器列表等）。关于如何解决这个问题，我有几个问题（对不起，如果这些真的很蠢）：

由于我在服务器上生成该唯一ID，我是否需要使用服务器端渲染才能立即在主机屏幕上显示该内容？
有没有办法让Express服务器与Vue的dev服务器配合良好？我可以同时跑两个吗？
我是否以正确的方式解决这个问题？

我很困惑我是否需要使用服务器端渲染。 Host最初会有一个屏幕，显示Players在其设备上输入的游戏的唯一ID。将会有一个已加入的玩家列表和一个启动游戏的按钮。点击start后，第一个问题将出现，玩家将有时间输入他们的回复。时间用完后，Host将显示正确的答案，然后转到下一个，等等。

如果需要任何其他信息，请告诉我。

非常感谢任何帮助！

在Express应用中使用Vue

0 个答案: