iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0
Modern Web

Three.js 反閘之路系列 第 2

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

  • 分享至 

  • xImage
  •  

安裝Node.js

Node.js官網: https://nodejs.org/en/
安裝完後可以透過node --version指令檢查是否安裝成功
https://ithelp.ithome.com.tw/upload/images/20220906/20142082Z1eLNtbBhc.png

安裝Express.js

Npm install -g express-generator
安裝完後可以透過 express --version 指令檢查是否安裝成功
https://ithelp.ithome.com.tw/upload/images/20220906/201420822OkPbhmHuM.png

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頁面
https://ithelp.ithome.com.tw/upload/images/20220906/20142082MfpzaOIrzy.png

安裝 Dependencies

package.json 定義了該專案的相關資訊及相依的各種模組,是一種描述檔案。
因為這次會用到 three.js,所以將 three 新增到 package.json,使用 npm install 就會依照 package.json內指定的套件進行安裝。
https://ithelp.ithome.com.tw/upload/images/20220906/20142082f0w4QvmTpA.png
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)
})

Reference

https://docs.npmjs.com/cli/v8/configuring-npm/package-json
https://ejs.bootcss.com/


上一篇
Day1. 簡介與開發框架
下一篇
Day3. Express.js 介紹
系列文
Three.js 反閘之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言