在快速应用程序中使用Vue
我对构buildNode应用程序以及编写Vue是新手，但是我认为可以创build一个小程序来帮助我理解这两个问题。
这个想法很简单。 我试图创build一个可以在屏幕上显示的琐事游戏，用户可以使用手机来select主屏幕上出现的问题的答案。 正在使用Socket.io在服务器和客户端之间发送数据。
目前有两种路由： /和/host 。 连接到/host将生成一个唯一的ID（我将在响应中发送）并创build一个新的游戏实例，通过input主机屏幕上显示的ID来等待“玩家”join。
路线/ 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的开发服务器一起工作？ 我可以同时运行吗？
- 我甚至会以正确的方式去做这件事吗？
我很困惑我是否需要使用服务器端渲染。 Host最初将拥有一个屏幕，显示Players在其设备上input的游戏的唯一ID。 将会有一个已经join的玩家名单和一个启动游戏的button。 start ，第一个问题将出现，玩家将有时间进入他们的回应。 时间用完后， Host将显示正确的答案，并继续下一个等等。
让我知道是否需要其他信息。
任何帮助将不胜感激！