Day2. 安裝環境 Node.js+Express.js+Three.js

14th鐵人賽 node.js express.js three.js

Yingge170

團隊來啊!打摳啊!

2022-09-06 12:13:37

1360 瀏覽

分享至

安裝Node.js

Node.js官網: https://nodejs.org/en/
安裝完後可以透過node --version指令檢查是否安裝成功

安裝Express.js

Npm install -g express-generator
安裝完後可以透過 express --version 指令檢查是否安裝成功

EJS

EJS全名為「Embedded Javascript」，意思就是內嵌式模板引擎，可以透過JS直接生成HTML標籤語法
建立專案資料夾並設定模板引擎為ejs
express -f 專案名稱 --view ejs
如需要在 index.js 將參數 title:”Express” 傳遞出去

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

透過EJS語法在 index.ejs 由<%和%>所夾取的內容接收

<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/home.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

在 cmd 執行npm start 可以看到參數被成功讀取，並生成HTML頁面

安裝 Dependencies

package.json 定義了該專案的相關資訊及相依的各種模組，是一種描述檔案。
因為這次會用到 three.js，所以將 three 新增到 package.json，使用 npm install 就會依照 package.json內指定的套件進行安裝。

Npm start 會執行 package.json 內 ”start” 配置中所述的所有內容，而 node app.js 只會執行 app.js 檔案，因此在 app.js 添加設定要監聽在哪一port上，之後就可以透過node app.js只啟動app.js。

const http = require('http')
const server = http.createServer(app);
const PORT = process.env.PORT || 3000

server.listen(3000, (err) => {
    if(err){
        console.log("error")
    }
    console.log("The server is work on", "http://127.0.0.1:" + PORT)
})