iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
Modern Web

來個Django Web介面測試吧系列 第 5

來個Django Web介面測試吧:Day05-Django 視圖(view)之1

前言

  • 計畫花六天的時間透過實作一個簡易線上簽到系統,理解Django MTV開發模式,其細部計畫如下:
    • DAY05、DAY06:說明Django視圖(view)。
    • DAY07、DAY08:說明Django模型(model)。
    • DAY09、DAY10:說明Django範本(template)。

Django視圖:寫個登錄頁面吧

將會使用到部分html、css語法,看到副檔名為.html就是網頁語言哦!!

  • 改寫Day04的index.html(路徑:sign\templates),開發一個登錄頁面,今日將新增day05資料夾進行今日作業。
    https://ithelp.ithome.com.tw/upload/images/20190906/20102269GxsqHNA1SC.jpg

    • 新增下列程式碼,創造一個登錄頁面
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>黑修斯的第11屆it邦鐵人賽挑戰-DAY05</title>
      </head>
      <body>
        <h1>Hello 你好嗎? 第五天挑戰加油</h1>
        <form>
          <input type="text" name="id" placeholder="請輸入帳號"><br>
          <input type="text" name="password" placeholder="請輸入密碼"><br>
          <button id="btn" type="submit" name="button">login</button>
        </form>
      </body>
    </html>
    
    • 重開專案,輸入路徑http://127.0.0.1:8000/index/
      https://ithelp.ithome.com.tw/upload/images/20190906/201022690YCNnIZMCw.jpg

html中的form(表單):GET與POST請求

  • 程式碼中有一段是關於<form></form>區塊,稱之為html中的form(表單),而表單設計完成,如一個登錄頁面,可以透過兩種方式,向後台(資料伺服器)請求資料:

    • GET請求:資料藏在URL 進行連線
    • POST請求:資料藏在封包中進行連線

    請大家參考淺談 HTTP Method:表單中的 GET 與 POST 有什麼差別?,這邊不在深入探討。

  • GET請求:在form(表單)程式碼修改為 <form method="get">
    - 帳號輸入:abcd
    - 密碼輸入:1234
    - 按下login
    https://ithelp.ithome.com.tw/upload/images/20190906/20102269K47AJ7mkAv.jpg

    • 透過GET請求,可以看到資料被放在URL中(俗稱機敏資料不能用GET請求)
      https://ithelp.ithome.com.tw/upload/images/20190906/20102269JhwYqXnEsk.jpg
  • POST請求:在form(表單)程式碼修改為 <form method="post">

    • 帳號輸入:abcd
    • 密碼輸入:1234
    • 按下login
    • 會出現403錯誤提示,提示沒有設置CSRF
      https://ithelp.ithome.com.tw/upload/images/20190906/20102269pLZYlhVYo5.jpg

    跨站請求偽造(英語:Cross-site request forgery),也被稱為 one-click attack 或者 session riding,通常縮寫為 CSRF 或者 XSRF, 是一種挾制用戶在目前已登入的Web應用程式上執行非本意的操作的攻擊方法。(引用自wiki百科)


未完待續

後續會再介紹Django View與CSRF的設置,並完成一個登錄頁面。


上一篇
來個Django Web介面測試吧:Day04-Django Web開發:Django的MTV開發模式
下一篇
來個Django Web介面測試吧:Day06-Django 視圖(view)之2
系列文
來個Django Web介面測試吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言