iT邦幫忙

0

Day 47 (Node.js)

  • 分享至 

  • xImage
  •  

1.use static or Router

express.static =>Web 伺服器的靜態檔案置於 public 資料夾 中介城市
use => 掛中介城市

app.use( express.static( "public" ) );

2.EJS

Model = Data (後端)
View = UI (前端) <% %>
Cont roller = Program(使用者請求) (後端)

<% ejs %>

3.EJS安裝

npm install ejs


4.EJS 開始使用

程式碼:

   //不可更動 set(代號,變成ejs)
   app.set('view engine','ejs')

   //指令輸入 網址 顯示內容
   app.get("/test",function(req,res){

   //render 搭配 app.set('view engine','ejs')  
   res.render("lab",{   
   })

環境:

Error: Failed to lookup view "lab,{}" in views directory "C:\XXX\Node.js\lab0810express\views"
創資料夾views 建立 .ejs
資料在views內才抓地到


5.EJS 使用 - 注意事項

   res.render("lab",{  // /member/lab
   userName:  "王曉明", 
   twoLines: "<script>alert('ok');</script>",
   twoLines2: "123<br>123",
   scoreList: [100, 90, 59, 100]} )

<% %> 流程控制標籤 for while ...

    <% if (userName == "Guest") { %>
    <a href="#">Login</a>
    <% } else { %>
    <a href="#">Member Center</a>
    <% } %>

<%= %> 輸出標籤(必要時.轉譯HTML符號)

    <%= userName %><br />
    <%= Date(); %> <br />

<%- %> 輸出標籤(不會轉譯HTML符號) ==> 使用到HTML、js用
注意,怕資安問題,小心使用

    <%- twoLines %>
    <%- twoLines2 %>

<%# %> 注釋標籤


6.嵌入

頁首(標題導覽)

    <%- include() %>

內容

    <%=  %>

頁尾

    <%- include(footer) %>
    <%- include("../shared/footer.txt") %>

7.query.id

ex:
http://localhost:3000/test?id=3
?id=3為使用者輸入

    app.get("/test", function (req, res) {

    // 如果找不到ID輸出
    if (typeof req.query.id === "undefined") {  //req.query.id 請求把id處理給我
        res.send("ID找不到");                   //res回應找不到
    }
    else {
        res.send(req.query.id);                 //依照此處案例:3
    }
})

8. 把HTML的body抓成物件express.urlencoded

    app.use(express.urlencoded({extended:true}));  //搭配body.userName; 

    app.post("/testPost",function(req,res){

    var data = req.body.userName; 
    //抓index.html的body 抓不到
    //前面要增加urlencoded物件才抓的到body

    res.send("我抓到了" + data);   
    })

9. postman 安裝

https://www.postman.com/downloads/

測試程式用
不用註冊會員 > SKIP


req(Request:請求)與res(Response:回應)

app.get("/test", function (req, res)

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言