day16-bootstrap和django
今日概要：javascript
一、bootstrap使用php
二、柵格系統css
三、orm簡介html
四、路由系統前端
五、mvc和mtv模式java
六、django框架python
一、bootstrap的引用方式
一、Bootstrap 專門構建了免費的 CDN 加速服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費 mysql
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可選的 Bootstrap 主題文件（通常不用引入） --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script type="application/javascript" src="bootstrap-3.3.7-dist/jquery-3.1.1.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <title>Bootstrap-demo</title> </head> <body> <div class="container"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Bootstrap theme</a> </div> <div id="navbar" class="navbar-collapse collapse in" aria-expanded="true"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </nav> </div> </body> </html>
二、本地下載bootstrap,經過路徑引入(注意引入順序,bootstrap的js依賴jquery,要在引入js前,先引入jquery)jquery
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> 7 <script type="application/javascript" src="bootstrap-3.3.7-dist/jquery-3.1.1.js"></script> 8 <script type="application/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 9 10 <title>Bootstrap-demo</title> 11 </head> 12 <body> 13 <div class="container"> 14 <nav class="navbar navbar-inverse navbar-fixed-top"> 15 <div class="container"> 16 <div class="navbar-header"> 17 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar"> 18 <span class="sr-only">Toggle navigation</span> 19 <span class="icon-bar"></span> 20 <span class="icon-bar"></span> 21 <span class="icon-bar"></span> 22 </button> 23 <a class="navbar-brand" href="#">Bootstrap theme</a> 24 </div> 25 <div id="navbar" class="navbar-collapse collapse in" aria-expanded="true"> 26 <ul class="nav navbar-nav"> 27 <li class="active"><a href="#">Home</a></li> 28 <li><a href="#about">About</a></li> 29 <li><a href="#contact">Contact</a></li> 30 <li class="dropdown"> 31 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 32 <ul class="dropdown-menu"> 33 <li><a href="#">Action</a></li> 34 <li><a href="#">Another action</a></li> 35 <li><a href="#">Something else here</a></li> 36 <li role="separator" class="divider"></li> 37 <li class="dropdown-header">Nav header</li> 38 <li><a href="#">Separated link</a></li> 39 <li><a href="#">One more separated link</a></li> 40 </ul> 41 </li> 42 </ul> 43 </div><!--/.nav-collapse --> 44 </div> 45 </nav> 46 </div> 47 </body> 48 </html>
二、柵格系統
一、bootstrap將每一行分爲12列,並且這一行會有居中和兩邊有間距git
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> 8 9 <title>Bootstrap-demo</title> 10 <style> 11 .row [class*="col-"]{ 12 padding-top: 15px; 13 padding-bottom: 15px; 14 background-color: rebeccapurple; 15 border: 2px solid yellowgreen; 16 color:#fff; 17 } 18 19 /*媒體查詢*/ 20 21 /*@media(max-width:800px){*/ 22 /*.media{*/ 23 /*color: red;*/ 24 /*}*/ 25 /*}*/ 26 /*多條件*/ 27 @media(max-width:800px) and (min-width: 500px){ 28 .media{ 29 color: red; 30 } 31 } 32 </style> 33 </head> 34 <body> 35 36 <!--bootstrap將寬分爲12個列--> 37 <!------------------------------柵格系統的結構------------> 38 <!--container是距離左右各15px--> 39 <div class="container"> 40 41 <div class="row"> 42 <div class="col-md-2">md-2</div> 43 <div class="col-md-4">md-4</div> 44 <div class="col-md-6">md-6</div> 45 </div> 46 47 <div class="row"> 48 <div class="col-md-6 col-sm-4">md6-sm4</div> 49 <div class="col-md-6 col-sm-8">md6-sm8</div> 50 </div> 51 52 <div class="media">hello @media</div> 53 54 55 <!------------------------------柵格系統的使用------------> 56 57 <div class="row"> 58 <div class="col-sm-2">md-2</div> 59 <div class="col-sm-4">md-4</div> 60 <div class="col-sm-6">md-6</div> 61 </div> 62 63 <!-- 2 列偏移offset --> 64 65 <div class="row"> 66 <div class="col-md-2">col-md-3</div> 67 <div class="col-md-4 col-md-offset-4">col-md-offset-3</div> 68 <!--<div class="col-md-1">col-md-1col-md-1col-md-1col-md-1col-md-1</div>--> 69 </div> 70 71 <!-- 3 列嵌套 --> 72 73 <div class="row"> 74 <div class="col-md-9"> 75 <!--這個嵌套是將原9列,在分爲12列,去分割--> 76 <div class="row"> 77 <div class="col-md-8">col-md-8</div> 78 <div class="col-md-4">col-md-4</div> 79 </div> 80 </div> 81 <div class="col-md-3">col-md-3</div> 82 </div> 83 84 85 <!-- 4 列排序 --> 86 87 <div class="row"> 88 <div class="col-md-9 col-md-push-3">col-md-9</div> 89 <div class="col-md-3 col-md-pull-9">col-md-3</div> 90 </div> 91 92 <!-- 5 清除浮動 --> 93 94 <div class="row"> 95 <div class="col-md-6 col-sm-1">col-md-1</div> 96 <div class="clearfix visible-sm"></div> 97 <div class="col-md-6 col-sm-1">col-md-3</div> 98 </div> 99 100 101 </div> 102 </body> 103 </html> 104 105 柵格系統
二、媒介查詢-響應式佈局(使用場景多種不一樣分辨率的設備進行自適應)
@media
/* 超小屏幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的代碼，由於這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */
/* 小屏幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) { ... }
咱們偶爾也會在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小範圍的屏幕大小以內。
@media (
max-width
: @screen-xs-max) { ... }
@media (
min-width
: @screen-sm-min) and (
max-width
: @screen-sm-max) { ... }
@media (
min-width
: @screen-md-min) and (
max-width
: @screen-md-max) { ... }
@media (
min-width
: @screen-lg-min) { ... }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .header{ 8 background-color: wheat; 9 width: 100%; 10 height: 100px; 11 } 12 .header div{ 13 display: inline-block; 14 border: 1px solid red; 15 background-color: blue; 16 padding: 10px 100px; 17 } 18 19 @media (max-width: 800px) { 20 .header .c3{ 21 background-color: yellow; 22 display: none; 23 } 24 } 25 26 </style> 27 </head> 28 <body> 29 30 <div class="header"> 31 <div>hello</div> 32 <div>hello</div> 33 <div class="c3">hello</div> 34 </div> 35 36 </body> 37 </html> 38 39 響應式佈局
三、排版
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> 8 9 <title>demo-排版</title> 10 </head> 11 <body> 12 13 14 <div class="container"> 15 <!------------------------------排版基礎------------> 16 <div class="row"> 17 <div class="col-md-2">hello md-2</div> 18 <a class="col-md-4">md-4</a> 19 <p class="col-md-6">md-6</p> 20 </div> 21 22 23 <!------------------------------排版標題------------> 24 25 <h1>我是h1</h1> 26 <h2>我是h2</h2> 27 <h3>我是h3</h3> 28 <h4>我是h4</h4> 29 <h5>我是h5</h5> 30 <h6>我是h6</h6> 31 32 <!--若是向任何標題添加一個內聯子標題，只須要簡單地在元素兩旁添加 <small>，--> 33 <!--或者添加 .small class便可--> 34 35 <h1>h1...<small>h1子標題</small></h1> 36 <h2>h2...<small>h2子標題</small></h2> 37 38 39 <!------------------------------強調------------> 40 41 <!--添加 class="lead"使段落文本更大更粗、行高更高--> 42 <p class="lead">莫道君行早,更有早行人</p> 43 44 <small>small</small><br> 45 <strong>strong</strong><br> 46 <em>em</em><br> 47 <p class="text-left">文本左對齊</p> 48 <p class="text-center">文本居中對齊</p> 49 <p class="text-right">文本右對齊</p> 50 51 <p class="text-primary">text-primary</p> 52 <p class="text-success">text-success</p> 53 <p class="text-info">text-info</p> 54 <p class="text-warning">text-warning</p> 55 <p class="text-danger">text-danger</p> 56 57 <!------------------------------縮寫------------> 58 <abbr title="HyperText Transfer Protocol">http</abbr><br> 59 <abbr title="Domain Name System" class="initialism">dns</abbr> 60 61 <!------------------------------地址(沒有太大樣式改變)------------> 62 63 <address> 64 <strong>oldboy</strong><br> 65 XXX street<br> 66 beijing<br> 67 <abbr title="Phone">P:</abbr> (123) 456-7890 68 </address> 69 70 <!------------------------------引用------------> 71 <p class="lead">hello world hello world hello world hello world</p> 72 <blockquote class="pull-left"> 73 <small><em>發佈於 2017-02-19</em></small> 74 </blockquote> 75 76 77 <!------------------------------列表(有序列表、無序列表和定義列表)------------> 78 <br> 79 <hr> 80 81 <h3>未定義樣式列表</h3> 82 <ul class="list-unstyled"> 83 <li>item</li> 84 <li>item</li> 85 <li>item</li> 86 <li>item</li> 87 </ul> 88 <h3>內聯列表</h3> 89 <ul class="list-inline"> 90 <li>item</li> 91 <li>item</li> 92 <li>item</li> 93 <li>item</li> 94 </ul> 95 96 <h3>水平的定義列表</h3> 97 <dl class="dl-horizontal"> 98 <dt>Desc</dt> 99 <dd>item</dd> 100 <dt>Desc</dt> 101 <dd>item</dd> 102 </dl> 103 104 </div> 105 </body> 106 </html> 107 108 排版
四、代碼
Bootstrap 容許您以兩種方式顯示代碼：
-
- 第一種是 <code> 標籤。若是您想要內聯顯示代碼，那麼您應該使用 <code> 標籤。
- 第二種是 <pre> 標籤。若是代碼須要被顯示爲一個獨立的塊元素或者代碼有多行，那麼您應該使用
1 <div class="container"> 2 <p><code><p>hello</p></code> 是一個p標籤</p> 3 <p>若是須要把代碼顯示爲一個獨立的塊元素，請使用 <code><pre></code> 4 <pre> 5 <div> 6 <h1>介紹</h1> 7 </div> 8 </pre> 9 </div> 10 11 代碼展現
五、表格
1.表格的樣式
1 <div class="container"> 2 3 <table class="table table-striped"> 4 <!--關於表格存儲內容的描述或總結。--> 5 <caption>條紋表格佈局</caption> 6 <thead> 7 <tr> 8 <th>姓名</th> 9 <th>年齡</th> 10 <th>salary</th> 11 </tr> 12 </thead> 13 <tbody> 14 <tr> 15 <td>Bob</td> 16 <td>23</td> 17 <td>3000</td> 18 </tr> 19 <tr class="danger"> 20 <td>steven</td> 21 <td>34</td> 22 <td>5000</td> 23 </tr> 24 <tr class="success"> 25 <td>alvin</td> 26 <td>33</td> 27 <td>7000</td> 28 </tr> 29 30 <tr class="warning"> 31 <td>alvin</td> 32 <td>33</td> 33 <td>7000</td> 34 </tr> 35 </tbody> 36 </table> 37 </div> 38 39 表格
二、響應式表格
經過把任意的 .table 包在 .table-responsive class 內可讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，看不到任何的差異。
六、表單
Bootstrap 提供了下列類型的表單佈局：
- 垂直表單（默認）
- 內聯表單
- 水平表單
一、垂直表單
建立基本表單的步驟：
- 向父 <form> 元素添加 role="form"。
- 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
- 向全部的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
-
View Code
1 <form role="form"> 2 3 <div class="form-group"> 4 <label for="username">用戶名</label> 5 <input type="text" class="form-control" id="username" placeholder="請輸入用戶名"> 6 </div> 7 8 <div class="form-group"> 9 <label for="password">密碼</label> 10 <input type="password" class="form-control" id="password" placeholder="請輸入密碼"> 11 </div> 12 13 14 <div class="checkbox"> 15 <label> 16 <input type="checkbox">記住密碼 17 </label> 18 </div> 19 20 <button type="submit" class="btn">提交</button> 21 </form>
二、內聯表單
若是須要建立一個表單，它的全部元素是內聯的，向左對齊的，標籤是並排的，請向 <form> 標籤添加 class .form-inline。
-
- 默認狀況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內聯表單時，您須要在表單控件上設置一個寬度。
- 使用 class .sr-only，您能夠隱藏內聯表單的標籤。
三、水平表單
水平表單與其餘表單不只標記的數量上不一樣，並且表單的呈現形式也不一樣。如需建立一個水平佈局的表單，請按下面的幾個步驟進行：
-
- 向父 <form> 元素添加 class .form-horizontal。
- 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。
- 向標籤添加 class .control-label。
-
View Code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> 8 9 <title>demo-排版</title> 10 </head> 11 <body> 12 13 <div class="container"> 14 15 <form class="form-horizontal" role="form"> 16 17 <div class="form-group"> 18 <label for="username" class="col-sm-2 control-label">用戶名</label> 19 <div class="col-sm-10"> 20 <input type="text" class="form-control" id="username" placeholder="請輸入用戶名"> 21 </div> 22 </div> 23 24 <div class="form-group"> 25 <label for="pwd" class="col-sm-2 control-label">密碼</label> 26 <div class="col-sm-10"> 27 <input type="text" class="form-control" id="pwd" placeholder="請輸入用戶名"> 28 </div> 29 </div> 30 31 <div class="form-group"> 32 <div class="col-sm-offset-2 col-sm-10"> 33 <div class="checkbox"> 34 <label> 35 <input type="checkbox">記住密碼 36 </label> 37 </div> 38 </div> 39 </div> 40 41 <div class="form-group"> 42 <div class="col-sm-offset-2 col-sm-10"> 43 <button type="submit" class="btn">登陸</button> 44 </div> 45 </div> 46 47 </form> 48 </div> 49 </body> 50 </html> 51 52 登陸頁面
四、表單控件插件
輸入框焦點：當輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。
禁用的輸入框 input：若是您想要禁用一個輸入框 input，只須要簡單地添加 disabled 屬性，這不只會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。
禁用的字段集 fieldset：對<添加 disabled 屬性來禁用內的全部控件。
驗證狀態：Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只須要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）便可使用驗證狀態
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> 8 9 <title>demo-排版</title> 10 </head> 11 <body> 12 13 14 <div class="container"> 15 <!------------------------------排版基礎------------> 16 <div class="row"> 17 <div class="col-md-2">hello md-2</div> 18 <a class="col-md-4">md-4</a> 19 <p class="col-md-6">md-6</p> 20 </div> 21 22 23 <!------------------------------排版標題------------> 24 25 <h1>我是h1</h1> 26 <h2>我是h2</h2> 27 <h3>我是h3</h3> 28 <h4>我是h4</h4> 29 <h5>我是h5</h5> 30 <h6>我是h6</h6> 31 32 <!--若是向任何標題添加一個內聯子標題，只須要簡單地在元素兩旁添加 <small>，--> 33 <!--或者添加 .small class便可--> 34 35 <h1>h1...<small>h1子標題</small></h1> 36 <h2>h2...<small>h2子標題</small></h2> 37 38 39 <!------------------------------強調------------> 40 41 <!--添加 class="lead"使段落文本更大更粗、行高更高--> 42 <p class="lead">莫道君行早,更有早行人</p> 43 44 <small>small</small><br> 45 <strong>strong</strong><br> 46 <em>em</em><br> 47 <p class="text-left">文本左對齊</p> 48 <p class="text-center">文本居中對齊</p> 49 <p class="text-right">文本右對齊</p> 50 51 <p class="text-primary">text-primary</p> 52 <p class="text-success">text-success</p> 53 <p class="text-info">text-info</p> 54 <p class="text-warning">text-warning</p> 55 <p class="text-danger">text-danger</p> 56 57 <!------------------------------縮寫------------> 58 <abbr title="HyperText Transfer Protocol">http</abbr><br> 59 <abbr title="Domain Name System" class="initialism">dns</abbr> 60 61 <!------------------------------地址(沒有太大樣式改變)------------> 62 63 <address> 64 <strong>oldboy</strong><br> 65 XXX street<br> 66 beijing<br> 67 <abbr title="Phone">P:</abbr> (123) 456-7890 68 </address> 69 70 <!------------------------------引用------------> 71 <p class="lead">hello world hello world hello world hello world</p> 72 <blockquote class="pull-left"> 73 <small><em>發佈於 2017-02-19</em></small> 74 </blockquote> 75 76 77 <!------------------------------列表(有序列表、無序列表和定義列表)------------> 78 <br> 79 <hr> 80 81 <h3>未定義樣式列表</h3> 82 <ul class="list-unstyled"> 83 <li>item</li> 84 <li>item</li> 85 <li>item</li> 86 <li>item</li> 87 </ul> 88 <h3>內聯列表</h3> 89 <ul class="list-inline"> 90 <li>item</li> 91 <li>item</li> 92 <li>item</li> 93 <li>item</li> 94 </ul> 95 96 <h3>水平的定義列表</h3> 97 <dl class="dl-horizontal"> 98 <dt>Desc</dt> 99 <dd>item</dd> 100 <dt>Desc</dt> 101 <dd>item</dd> 102 </dl> 103 104 </div> 105 </body> 106 </html> 107 108 控件插件
五、表單控件大小
您能夠分別使用 class .input-lg 和 .col-lg-* 來設置表單的高度和寬度
1 <div class="container"> 2 3 <form role="form"> 4 <div class="form-group"> 5 <!--have a try: input-sm--> 6 <input class="form-control input-lg" type="text" placeholder=".input-lg"> 7 </div> 8 9 <div class="form-group"> 10 <!--have a try: input-sm--> 11 <select class="form-control input-lg"> 12 <option value="">默認選擇</option> 13 </select> 14 </div> 15 16 <div class="row"> 17 <div class="col-lg-6"> 18 <input type="text" class="form-control"> 19 </div> 20 <div class="col-lg-6"> 21 <input type="text" class="form-control"> 22 </div> 23 </div> 24 25 </form> 26 </div> 27 28 表單控件大小
六、表單幫助文本
Bootstrap 表單控件能夠在輸入框 input 上有一個塊級幫助文本。爲了添加一個佔用整個寬度的內容塊，請在 <input> 後使用 .help-block。
<
div
class="container">
<
form
role="form">
<
span
>幫助文本實例</
span
>
<
input
class="form-control" type="text" placeholder="">
<
span
class="help-block">幫助文本實例幫助文本實例幫助文本實例幫助文本實例幫助文本實例
幫助文本實例幫助文本實例幫助文本實例幫助文本實例幫助文本實例幫助文本實例幫助文本實例
幫助文本實例幫助文本實例幫助文本實例</
span
>
</
form
>
</
div
>
七、按鈕
任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認外觀。可是 Bootstrap 提供了一些選項來定義按鈕的樣式
1 <div class="container"> 2 3 <!-- 標準的按鈕 --> 4 <button type="button" class="btn btn-default">默認按鈕</button> 5 <!-- 提供額外的視覺效果，標識一組按鈕中的原始動做 --> 6 <button type="button" class="btn btn-primary">原始按鈕</button> 7 <!-- 表示一個成功的或積極的動做 --> 8 <button type="button" class="btn btn-success">成功按鈕</button> 9 <!-- 信息警告消息的上下文按鈕 --> 10 <button type="button" class="btn btn-info">信息按鈕</button> 11 <!-- 表示應謹慎採起的動做 --> 12 <button type="button" class="btn btn-warning">警告按鈕</button> 13 <!-- 表示一個危險的或潛在的負面動做 --> 14 <button type="button" class="btn btn-danger">危險按鈕</button> 15 <!-- 並不強調是一個按鈕，看起來像一個連接，但同時保持按鈕的行爲 --> 16 <button type="button" class="btn btn-link">連接按鈕</button> 17 18 19 <hr> 20 <button type="button" class="btn btn-primary btn-lg">大的原始按鈕</button> 21 <button type="button" class="btn btn-default btn-sm">小的按鈕</button> 22 23 <hr> 24 <p> 25 <button type="button" class="btn btn-default btn-lg ">默認按鈕</button> 26 <button type="button" class="btn btn-default btn-lg active">激活按鈕</button> 27 </p> 28 <p> 29 <button type="button" class="btn btn-primary btn-lg ">原始按鈕</button> 30 <button type="button" class="btn btn-primary btn-lg active">激活的原始按鈕</button> 31 </p> 32 33 <hr> 34 <p> 35 <button type="button" class="btn btn-primary btn-lg ">原始按鈕</button> 36 <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按鈕</button> 37 </p> 38 39 </div> 40 41 按鈕
八、圖片
Bootstrap 提供了三個可對圖片應用簡單樣式的 class：
- .img-rounded：添加 border-radius:6px 來得到圖片圓角。
- .img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
- .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。
<
img
src="mienv.png" class="img-rounded">
另外，經過在 <img> 標籤添加 .img-responsive 類來讓圖片支持響應式設計。.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上
<img src="meinv.jpg" class="img-responsive">
九、Django基礎
一、什麼是web框架
框架，即framework，特指爲解決一個開放性問題而設計的具備必定約束性的支撐結構，使用框架能夠幫你快速開發特定的系統，簡單地說，就是你用別人搭建好的舞臺來作表演。
對於全部的Web應用，本質上其實就是一個socket服務端，用戶的瀏覽器其實就是一個socket客戶端。
1 import socket 2 3 def handle_request(client): 4 5 buf = client.recv(1024) 6 client.send("HTTP/1.1 200 OK\r\n\r\n".encode("utf8")) 7 client.send("<h1 style='color:red'>Hello, yuan</h1>".encode("utf8")) 8 9 def main(): 10 11 sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) 12 sock.bind(('localhost',8001)) 13 sock.listen(5) 14 15 while True: 16 connection, address = sock.accept() 17 handle_request(connection) 18 connection.close() 19 20 if __name__ == '__main__': 21 22 main()
最簡單的Web應用就是先把HTML用文件保存好，用一個現成的HTTP服務器軟件，接收用戶請求，從文件中讀取HTML，返回。
若是要動態生成HTML，就須要把上述步驟本身來實現。不過，接受HTTP請求、解析HTTP請求、發送HTTP響應都是苦力活，若是咱們本身來寫這些底層代碼，還沒開始寫動態HTML呢，就得花個把月去讀HTTP規範。
正確的作法是底層代碼由專門的服務器軟件實現，咱們用Python專一於生成HTML文檔。由於咱們不但願接觸到TCP鏈接、HTTP原始請求和響應格式，因此，須要一個統一的接口，讓咱們專心用Python編寫Web業務。
這個接口就是WSGI：Web Server Gateway Interface。
-----------------------------Do a web framework ourselves---------------------------
step1：建立服務端
1 from wsgiref.simple_server import make_server 2 3 4 def application(environ, start_response): 5 start_response('200 OK', [('Content-Type', 'text/html')]) 6 return [b'<h1>Hello, web!</h1>'] 7 8 9 httpd = make_server('', 8080, application) 10 11 print('Serving HTTP on port 8000...') 12 # 開始監聽HTTP請求: 13 httpd.serve_forever()
注意：
1 整個application()函數自己沒有涉及到任何解析HTTP的部分，也就是說，底層代碼不須要咱們本身編寫， 2 咱們只負責在更高層次上考慮如何響應請求就能夠了。 3 4 application()函數必須由WSGI服務器來調用。有不少符合WSGI規範的服務器，咱們能夠挑選一個來用。 5 6 Python內置了一個WSGI服務器，這個模塊叫wsgiref 7 8 9 application()函數就是符合WSGI標準的一個HTTP處理函數，它接收兩個參數： 10 11 //environ：一個包含全部HTTP請求信息的dict對象； 12 13 //start_response：一個發送HTTP響應的函數。 14 15 在application()函數中，調用： 16 17 start_response('200 OK', [('Content-Type', 'text/html')]) 18 19 就發送了HTTP響應的Header，注意Header只能發送一次，也就是隻能調用一次start_response()函數。 20 start_response()函數接收兩個參數，一個是HTTP響應碼，一個是一組list表示的HTTP Header，每 21 個Header用一個包含兩個str的tuple表示。 22 23 一般狀況下，都應該把Content-Type頭髮送給瀏覽器。其餘不少經常使用的HTTP Header也應該發送。 24 25 而後，函數的返回值b'<h1>Hello, web!</h1>'將做爲HTTP響應的Body發送給瀏覽器。 26 27 有了WSGI，咱們關心的就是如何從environ這個dict對象拿到HTTP請求信息，而後構造HTML， 28 經過start_response()發送Header，最後返回Body。
step2:設置路由系統
1 print(environ['PATH_INFO']) 2 path=environ['PATH_INFO'] 3 start_response('200 OK', [('Content-Type', 'text/html')]) 4 f1=open("index1.html","rb") 5 data1=f1.read() 6 f2=open("index2.html","rb") 7 data2=f2.read() 8 9 if path=="/yuan": 10 return [data1] 11 elif path=="/alex": 12 return [data2] 13 else: 14 return ["<h1>404</h1>".encode('utf8')]
step3:更改版
1 from wsgiref.simple_server import make_server 2 3 def f1(): 4 f1=open("index1.html","rb") 5 data1=f1.read() 6 return [data1] 7 8 def f2(): 9 f2=open("index2.html","rb") 10 data2=f2.read() 11 return [data2] 12 13 def application(environ, start_response): 14 15 print(environ['PATH_INFO']) 16 path=environ['PATH_INFO'] 17 start_response('200 OK', [('Content-Type', 'text/html')]) 18 19 20 if path=="/yuan": 21 return f1() 22 23 elif path=="/alex": 24 return f2() 25 26 else: 27 return ["<h1>404</h1>".encode("utf8")] 28 29 30 httpd = make_server('', 8502, application) 31 32 print('Serving HTTP on port 8084...') 33 34 # 開始監聽HTTP請求: 35 httpd.serve_forever()
step4:模擬數據庫
1 from wsgiref.simple_server import make_server 2 3 4 def f1(req): 5 print(req) 6 print(req["QUERY_STRING"]) 7 8 f1=open("index1.html","rb") 9 data1=f1.read() 10 return [data1] 11 12 def f2(req): 13 14 f2=open("index2.html","rb") 15 data2=f2.read() 16 return [data2] 17 18 import time 19 20 def f3(req): #模版以及數據庫 21 22 f3=open("index3.html","rb") 23 data3=f3.read() 24 times=time.strftime("%Y-%m-%d %X", time.localtime()) 25 data3=str(data3,"utf8").replace("!time!",str(times)) 26 27 28 return [data3.encode("utf8")] 29 30 31 def routers(): 32 33 urlpatterns = ( 34 ('/yuan',f1), 35 ('/alex',f2), 36 ("/cur_time",f3) 37 ) 38 return urlpatterns 39 40 41 def application(environ, start_response): 42 43 print(environ['PATH_INFO']) 44 path=environ['PATH_INFO'] 45 start_response('200 OK', [('Content-Type', 'text/html')]) 46 47 48 urlpatterns = routers() 49 func = None 50 for item in urlpatterns: 51 if item[0] == path: 52 func = item[1] 53 break 54 if func: 55 return func(environ) 56 else: 57 return ["<h1>404</h1>".encode("utf8")] 58 59 httpd = make_server('', 8518, application) 60 61 print('Serving HTTP on port 8084...') 62 63 # 開始監聽HTTP請求: 64 65 httpd.serve_forever()
二、MVC和MTV模式
Django的MTV模式本質是各組件之間爲了保持鬆耦合關係,Django的MTV分別表明：
Model(模型)：負責業務對象與數據庫的對象(ORM)
Template(模版)：負責如何把頁面展現給用戶
View(視圖)：負責業務邏輯，並在適當的時候調用Model和Template
此外，Django還有一個url分發器，它的做用是將一個個URL的頁面請求分發給不一樣的view處理，view再調用相應的Model和Template
十、django的基本命令
安裝django pip3 install django
一、建立一個django project
django-admin.py startproject mysite
當前目錄下會生成mysite的工程,目錄結構以下
- manage.py ----- Django項目裏面的工具，經過它能夠調用django shell和數據庫等。
- settings.py ---- 包含了項目的默認設置，包括數據庫信息，調試標誌以及其餘一些工做的變量。
- urls.py ----- 負責把URL模式映射到應用程序。
二、在mysite目錄下建立應用，好比blog:
python manage.py startapp blog
三、啓動django項目
python manage.py runserver 8080
四、同步更改數據庫表或字段
'''
python manage.py syncdb
注意：Django 1.7.1 及以上的版本須要用如下命令
python manage.py makemigrations
python manage.py migrate
'''
這種方法能夠建立表，當你在models.py中新增了類時，運行它就能夠自動在數據庫中建立表了，不用手動建立。
五、清空數據庫
python manage.py flush
六、建立超級管理員
'''
python manage.py createsuperuser
# 按照提示輸入用戶名和對應的密碼就行了郵箱能夠留空，用戶名和密碼必填
# 修改 用戶密碼能夠用：
python manage.py changepassword username
'''
七、Django 項目環境終端
python manage.py shell
這個命令和 直接運行 python 進入 shell 的區別是：你能夠在這個 shell 裏面調用當前項目的 models.py 中的 API，對於操做數據的測試很是方便。
八、Django 項目環境終端
python manage.py dbshell
Django 會自動進入在settings.py中設置的數據庫，若是是 MySQL 或 postgreSQL,會要求輸入數據庫用戶密碼。
在這個終端能夠執行數據庫的SQL語句。若是您對SQL比較熟悉，可能喜歡這種方式。
九、static配置***
1 #三、STATIC文件還能夠配置STATICFILES_DIRS，指定額外的靜態文件存儲位置。 2 # STATIC_URL的含義與MEDIA_URL相似。 3 4 # ---------------------------------------------------------------------------- 5 #注意1: 6 #爲了後端的更改不會影響前端的引入，避免形成前端大量修改 7 8 STATIC_URL = '/static/' #引用名 9 STATICFILES_DIRS = ( 10 os.path.join(BASE_DIR,"statics") #實際名 ,即實際文件夾的名字 11 ) 12 13 #django對引用名和實際名進行映射,引用時,只能按照引用名來,不能按實際名去找 14 #<script src="/statics/jquery-3.1.1.js"></script> 15 #------error－－－－－不能直接用，必須用STATIC_URL = '/static/': 16 #<script src="/static/jquery-3.1.1.js"></script> 17 18 #注意2(statics文件夾寫在不一樣的app下,靜態文件的調用): 19 20 STATIC_URL = '/static/' 21 22 STATICFILES_DIRS=( 23 ('hello',os.path.join(BASE_DIR,"app01","statics")) , 24 ) 25 26 #<script src="/static/hello/jquery-1.8.2.min.js"></script> 27 28 #注意3: 29 STATIC_URL = '/static/' 30 {% load staticfiles %} 31 # <script src={% static "jquery-1.8.2.min.js" %}></script>
十一、路由系統配置(URL.conf)
URL配置(URLconf)就像Django 所支撐網站的目錄。它的本質是URL與要爲該URL調用的視圖函數之間的映射表；你就是以這種方式告訴Django，對於這個URL調用這段代碼，對於那個URL調用那段代碼。
urlpatterns = [
url(正則表達式, views視圖函數，參數，別名),
]
參數說明：
一個正則表達式字符串
一個可調用對象，一般爲一個視圖函數或一個指定視圖函數路徑的字符串
可選的要傳遞給視圖函數的默認參數（字典形式）
一個可選的name參數
二、URLconf的正則字符串參數
簡單配置：
from
django.conf.urls
import
url
from
.
import
views
urlpatterns
=
[
url(r
'^articles/2003/$'
, views.special_case_2003),
url(r
'^articles/([0-9]{4})/$'
, views.year_archive),
url(r
'^articles/([0-9]{4})/([0-9]{2})/$'
, views.month_archive),
url(r
'^articles/([0-9]{4})/([0-9]{2})/([0-9]+)/$'
, views.article_detail),
]
規則：
'''
NOTE:
一旦匹配成功則再也不繼續
若要從URL 中捕獲一個值，只須要在它周圍放置一對圓括號。
不須要添加一個前導的反斜槓，由於每一個URL 都有。例如，應該是^articles 而不是 ^/articles。
每一個正則表達式前面的'r' 是可選的可是建議加上。
一些請求的例子：
/articles/2005/3/ 不匹配任何URL 模式，由於列表中的第三個模式要求月份應該是兩個數字。
/articles/2003/ 將匹配列表中的第一個模式不是第二個，由於模式按順序匹配，第一個會首先測試是否匹配。
/articles/2005/03/ 請求將匹配列表中的第三個模式。Django 將調用函數
views.month_archive(request, '2005', '03')。
'''
#設置項是否開啓URL訪問地址後面不爲/跳轉至帶有/的路徑
APPEND_SLASH
=
True
三、無名分組和有名分組
上面的示例使用簡單的、沒有命名的正則表達式組（經過圓括號）來捕獲URL 中的值並以位置 參數傳遞給視圖。在更高級的用法中，可使用命名的正則表達式組來捕獲URL 中的值並以關鍵字 參數傳遞給視圖。
在Python 正則表達式中，命名正則表達式組的語法是(?P<name>pattern)，其中name 是組的名稱，pattern 是要匹配的模式。
下面是以上URLconf 使用命名組的重寫：
from
django.conf.urls
import
url
from
.
import
views
urlpatterns
=
[
url(r
'^articles/2003/$'
, views.special_case_2003),
url(r
'^articles/([0-9]{4})/$'
, views.year_archive),
-
-
-
>無名分組
url(r
'^articles/(?P<year>[0-9]{4})/$'
, views.year_archive),
-
-
-
>有名分組
url(r
'^articles/(?P<year>[0-9]{4})/(?P<month>[0-9]{2})/$'
, views.month_archive),
url(r
'^articles/(?P<year>[0-9]{4})/(?P<month>[0-9]{2})/(?P<day>[0-9]{2})/$'
, views.article_detail),
]
這個實現與前面的示例徹底相同，只有一個細微的差異：捕獲的值做爲關鍵字參數而不是位置參數傳遞給視圖函數。例如：
/
articles
/
2005
/
03
/
請求將調用views.month_archive(request, year
=
'2005'
, month
=
'03'
)函數
/
articles
/
2003
/
03
/
03
/
請求將調用函數views.article_detail(request, year
=
'2003'
, month
=
'03'
, day
=
'03'
)。
無名分組和有名分組的區別：
無名分組是位置變量,後面必須一一對應才能正確傳參，有名分組是關鍵字變量，不須要一一對應。
在實際應用中，這意味你的URLconf 會更加明晰且不容易產生參數順序問題的錯誤 —— 你能夠在你的視圖函數定義中從新安排參數的順序。固然，這些好處是以簡潔爲代價；有些開發人員認爲命名組語法醜陋而繁瑣。
四、urlconf在什麼上查找
URLconf 在請求的URL 上查找，將它當作一個普通的Python 字符串。不包括GET和POST參數以及域名。
例如，http://www.example.com/myapp/ 請求中，URLconf 將查找myapp/。
在http://www.example.com/myapp/?page=3 請求中，URLconf 仍將查找myapp/。
URLconf 不檢查請求的方法。換句話講，全部的請求方法 —— 同一個URL的POST、GET、HEAD等等 —— 都將路由到相同的函數。
五、捕獲的參數永遠是字符串
每一個捕獲的參數都做爲一個普通的Python 字符串傳遞給視圖，不管正則表達式使用的是什麼匹配方式。例如，下面這行URLconf 中：
url(r
'^articles/(?P<year>[0-9]{4})/$'
, views.year_archive),
views.year_archive() 的year 參數將是一個字符串
六、指定視圖參數的默認值
# URLconf
from
django.conf.urls
import
url
from
.
import
views
urlpatterns
=
[
url(r
'^blog/$'
, views.page),
url(r
'^blog/page(?P<num>[0-9]+)/$'
, views.page),
]
# View (in blog/views.py)
def
page(request, num
=
"1"
):
...
在上面的例子中，兩個URL模式指向同一個視圖views.page —— 可是第一個模式不會從URL 中捕獲任何值。若是第一個模式匹配，page() 函數將使用num參數的默認值"1"。若是第二個模式匹配，page() 將使用正則表達式捕獲的num 值。
第一個若是匹配上，表示num會走默認值，這個對分頁的做用很重要！
七、include url urlconf
#At any point, your urlpatterns can 「include」 other URLconf modules. This
#essentially 「roots」 a set of URLs below other ones.
#For example, here’s an excerpt of the URLconf for the Django website itself.
#It includes a number of other URLconfs:
from
django.conf.urls
import
include, url
urlpatterns
=
[
url(r
'^admin/'
, admin.site.urls),
url(r
'^blog/'
, include(
'blog.urls'
)),
-
-
>子項目的urls.py
]
八、傳遞額外參數給視圖(瞭解)
URLconfs 具備一個鉤子，讓你傳遞一個Python 字典做爲額外的參數傳遞給視圖函數。
django.conf.urls.url() 函數能夠接收一個可選的第三個參數，它是一個字典，表示想要傳遞給視圖函數的額外關鍵字參數。
from
django.conf.urls
import
url
from
.
import
views
urlpatterns
=
[
url(r
'^blog/(?P<year>[0-9]{4})/$'
, views.year_archive, {
'foo'
:
'bar'
}),
]
在這個例子中，對於/blog/2005/請求，Django 將調用views.year_archive(request, year='2005', foo='bar')。
這個技術在Syndication 框架中使用，來傳遞元數據和選項給視圖。
九、name參數
1 ''' 2 3 urlpatterns = [ 4 url(r'^index',views.index,name='INDEX'), 5 6 ] 7 ################### 8 9 def index(req): 10 if req.method=='POST': 11 username=req.POST.get('username') 12 password=req.POST.get('password') 13 if username=='alex' and password=='123': 14 return HttpResponse("登錄成功") 15 16 return render(req,'index.html') 17 18 ##################### 19 20 <!DOCTYPE html> 21 <html lang="en"> 22 <head> 23 <meta charset="UTF-8"> 24 <title>Title</title> 25 </head> 26 <body> 27 {# <form action="/index/" method="post">#} 28 <form action="{% url 'INDEX' %}" method="post"> 29 用戶名:<input type="text" name="username"> 30 密碼:<input type="password" name="password"> 31 <input type="submit" value="submit"> 32 </form> 33 </body> 34 </html> 35 36 37 ####################### 38 39 ''' 40 41 name參數
十二、視圖
一個視圖函數，或者簡短來講叫作視圖，是一個簡單的Python函數，它接受web請求，而且返回web響應。響應能夠是一張網頁的HTML內容，一個重定向，一個404錯誤，一個XML文檔，或者一張圖片. . . 是任何東西均可以。不管視圖自己包含什麼邏輯，都要返回響應。代碼寫在哪裏也無所謂，只要它在你的Python目錄下面。除此以外沒有更多的要求了——能夠說「沒有什麼神奇的地方」。爲了可以把代碼放在某個地方，慣例是把視圖放在叫作views.py的文件中，而後把它放到你的項目或者應用目錄裏
一個簡單的視圖(返回當前時間)：
from
django.http
import
HttpResponse
import
datetime
def
current_datetime(request):
now
=
datetime.datetime.now()
html
=
"<html><body>It is now %s.</body></html>"
%
now
return
HttpResponse(html)
讓咱們逐行閱讀上面的代碼：
- 首先，咱們從 django.http模塊導入了HttpResponse類，以及Python的datetime庫。
- 接着，咱們定義了current_datetime函數。它是一個視圖函數。每一個視圖函數都應接收HttpRequest對象做爲第一個參數，通常叫作request。
- 注意視圖函數的名稱並不重要；不須要用一個統一的命名方式來命名，以便讓Django識別它。咱們將其命名爲current_datetime，是由於這個名稱可以精確地反映出它的功能。
- 這個視圖會返回一個HttpResponse對象，其中包含生成的響應。每一個視圖函數都要返回HttpResponse對象
http請求－響應過程當中有兩個核心對象：
http請求對象：HttpRequest
http響應響應：HttpResponse
所在位置：django.http
三、快捷函數
一、render函數
－－－－－－－－－－－－－－－render(request, template_name[, context]）
結合一個給定的模板和一個給定的上下文字典，並返回一個渲染後的 HttpResponse 對象。
參數：
request： 用於生成響應的請求對象。
template_name：要使用的模板的完整名稱，可選的參數
context：添加到模板上下文的一個字典。默認是一個空字典。若是字典中的某個值是可調用的，視圖將在渲染模板以前調用它。
content_type：生成的文檔要使用的MIME類型。默認爲DEFAULT_CONTENT_TYPE 設置的值。
status：響應的狀態碼。默認爲
200
。
二、redirect函數(跳轉函數)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
url.py
url(r
"login"
, views.login),
url(r
"yuan_back"
, views.yuan_back),
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
views.py
def
login(req):
if
req.method
=
=
"POST"
:
if
1
:
# return redirect("/yuan_back/")
name
=
"yuanhao"
return
render(req,
"my backend.html"
,
locals
())
return
render(req,
"login.html"
,
locals
())
def
yuan_back(req):
name
=
"苑昊"
return
render(req,
"my backend.html"
,
locals
())
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
login.html
<form action
=
"/login/"
method
=
"post"
>
<p>姓名<
input
type
=
"text"
name
=
"username"
><
/
p>
<p>性別<
input
type
=
"text"
name
=
"sex"
><
/
p>
<p>郵箱<
input
type
=
"text"
name
=
"email"
><
/
p>
<p><
input
type
=
"submit"
value
=
"submit"
><
/
p>
<
/
form>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
my backend.html
<h1>用戶{{ name }}你好<
/
h1>
#總結: render和redirect的區別:
# 1 if render的頁面須要模板語言渲染,須要的將數據庫的數據加載到html,那麼全部的這一部分
# 除了寫在yuan_back的視圖函數中,必須還要寫在login中,代碼重複,沒有解耦.
# 2 the most important: url沒有跳轉到/yuan_back/,而是還在/login/,因此當刷新後
# 又得從新登陸.
1三、Template模版
一、模版系統介紹：
你可能已經注意到咱們在例子視圖中返回文本的方式有點特別。 也就是說，HTML被直接硬編碼在 Python代碼之中。
def
current_datetime(request):
now
=
datetime.datetime.now()
html
=
"<html><body>It is now %s.</body></html>"
%
now
return
HttpResponse(html)
儘管這種技術便於解釋視圖是如何工做的，但直接將HTML硬編碼到你的視圖裏卻並非一個好主意。 讓咱們來看一下爲何：
-
對頁面設計進行的任何改變都必須對 Python 代碼進行相應的修改。 站點設計的修改每每比底層 Python 代碼的修改要頻繁得多，所以若是能夠在不進行 Python 代碼修改的狀況下變動設計，那將會方便得多。
-
Python 代碼編寫和 HTML 設計是兩項不一樣的工做，大多數專業的網站開發環境都將他們分配給不一樣的人員（甚至不一樣部門）來完成。 設計者和HTML/CSS的編碼人員不該該被要求去編輯Python的代碼來完成他們的工做。
-
程序員編寫 Python代碼和設計人員製做模板兩項工做同時進行的效率是最高的，遠勝於讓一我的等待另外一我的完成對某個既包含 Python又包含 HTML 的文件的編輯工做。
基於這些緣由，將頁面的設計和Python的代碼分離開會更乾淨簡潔更容易維護。 咱們可使用 Django的 模板系統 (Template System)來實現這種模式，這就是本章要具體討論的問題。
python的模板：HTML代碼＋邏輯控制代碼
二、模版支持的語法
一、變量
語法格式：{{ val_name }}
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－Template和Context對象
>>> python manange.py shell (進入該django項目的環境)
>>>
from
django.template
import
Context, Template
>>> t
=
Template(
'My name is {{ name }}.'
)
>>> c
=
Context({
'name'
:
'Stephane'
})
>>> t.render(c)
'My name is Stephane.'
# 同一模板，多個上下文，一旦有了模板對象，你就能夠經過它渲染多個context，不管什麼時候咱們均可以
# 像這樣使用同一模板源渲染多個context，只進行 一次模板建立而後屢次調用render()方法渲染會
# 更爲高效：
# Low
for
name
in
(
'John'
,
'Julie'
,
'Pat'
):
t
=
Template(
'Hello, {{ name }}'
)
print
t.render(Context({
'name'
: name}))
# Good
t
=
Template(
'Hello, {{ name }}'
)
for
name
in
(
'John'
,
'Julie'
,
'Pat'
):
print
t.render(Context({
'name'
: name}))
Django 模板解析很是快捷。 大部分的解析工做都是在後臺經過對簡短正則表達式一次性調用來完成。 這和基於 XML 的模板引擎造成鮮明對比，那些引擎承擔了 XML 解析器的開銷，且每每比 Django 模板渲染引擎要慢上幾個數量級。
1 from django.shortcuts import render,HttpResponse 2 from django.template.loader import get_template #記得導入 3 # Create your views here. 4 5 6 import datetime 7 from django.template import Template,Context 8 9 # def current_time(req): 10 #原始的視圖函數 11 # now=datetime.datetime.now() 12 # html="<html><body>如今時刻：<h1>%s.</h1></body></html>" %now 13 # return HttpResponse(html) 14 15 16 17 # def current_time(req): 18 19 #django模板修改的視圖函數 20 # now=datetime.datetime.now() 21 # t=Template('<html><body>如今時刻是:<h1 style="color:red">{{current_date}}</h1></body></html>') 22 #t=get_template('current_datetime.html') 23 # c=Context({'current_date':now}) 24 # html=t.render(c) 25 # return HttpResponse(html) 26 27 #另外一種寫法(推薦) 28 29 def current_time(req): 30 31 now=datetime.datetime.now() 32 33 return render(req, 'current_datetime.html', {'current_date':now})
三、深度變量查找(萬能的句點號)
在到目前爲止的例子中，咱們經過 context 傳遞的簡單參數值主要是字符串，然而，模板系統可以很是簡潔地處理更加複雜的數據結構，例如list、dictionary和自定義的對象。在 Django 模板中遍歷複雜數據結構的關鍵是句點字符 (.)。
#最好是用幾個例子來講明一下。
# 首先，句點可用於訪問列表索引，例如：
>>>
from
django.template
import
Template, Context
>>> t
=
Template(
'Item 2 is {{ items.2 }}.'
)
>>> c
=
Context({
'items'
: [
'apples'
,
'bananas'
,
'carrots'
]})
>>> t.render(c)
'Item 2 is carrots.'
#假設你要向模板傳遞一個 Python 字典。 要經過字典鍵訪問該字典的值，可以使用一個句點：
>>>
from
django.template
import
Template, Context
>>> person
=
{
'name'
:
'Sally'
,
'age'
:
'43'
}
>>> t
=
Template(
'{{ person.name }} is {{ person.age }} years old.'
)
>>> c
=
Context({
'person'
: person})
>>> t.render(c)
'Sally is 43 years old.'
#一樣，也能夠經過句點來訪問對象的屬性。 比方說， Python 的 datetime.date 對象有
#year 、 month 和 day 幾個屬性，你一樣能夠在模板中使用句點來訪問這些屬性：
>>>
from
django.template
import
Template, Context
>>>
import
datetime
>>> d
=
datetime.date(
1993
,
5
,
2
)
>>> d.year
>>> d.month
>>> d.day
>>> t
=
Template(
'The month is {{ date.month }} and the year is {{ date.year }}.'
)
>>> c
=
Context({
'date'
: d})
>>> t.render(c)
'The month is 5 and the year is 1993.'
# 這個例子使用了一個自定義的類，演示了經過實例變量加一點(dots)來訪問它的屬性，這個方法適
# 用於任意的對象。
>>>
from
django.template
import
Template, Context
>>>
class
Person(
object
):
...
def
__init__(
self
, first_name, last_name):
...
self
.first_name,
self
.last_name
=
first_name, last_name
>>> t
=
Template(
'Hello, {{ person.first_name }} {{ person.last_name }}.'
)
>>> c
=
Context({
'person'
: Person(
'John'
,
'Smith'
)})
>>> t.render(c)
'Hello, John Smith.'
# 點語法也能夠用來引用對象的方法。 例如，每一個 Python 字符串都有 upper() 和 isdigit()
# 方法，你在模板中可使用一樣的句點語法來調用它們：
>>>
from
django.template
import
Template, Context
>>> t
=
Template(
'{{ var }} -- {{ var.upper }} -- {{ var.isdigit }}'
)
>>> t.render(Context({
'var'
:
'hello'
}))
'hello -- HELLO -- False'
>>> t.render(Context({
'var'
:
'123'
}))
'123 -- 123 -- True'
# 注意這裏調用方法時並* 沒有* 使用圓括號 並且也沒法給該方法傳遞參數；你只能調用不需參數的
# 方法。
四、變量過濾器的使用(filter)
語法格式:{{ obj | filter:param}}
# 1 add ： 給變量加上相應的值
#
# 2 addslashes : 給變量中的引號前加上斜線
#
# 3 capfirst : 首字母大寫
#
# 4 cut ： 從字符串中移除指定的字符
#
# 5 date ： 格式化日期字符串
#
# 6 default ： 若是值是False,就替換成設置的默認值，不然就是用原本的值
#
# 7 default_if_none: 若是值是None，就替換成設置的默認值，不然就使用原本的值
#實例:
#value1="aBcDe"
{{ value1|upper }}<br>
#value2=5
{{ value2|add:
3
}}<br>
#value3='he llo wo r ld'
{{ value3|cut:
' '
}}<br>
#import datetime
#value4=datetime.datetime.now()
{{ value4|date:
'Y-m-d'
}}<br>
#value5=[]
{{ value5|default:
'空的'
}}<br>
#value6='<a href="#">跳轉</a>'
{{ value6 }}
{
%
autoescape off
%
}
{{ value6 }}
{
%
endautoescape
%
}
{{ value6|safe }}<br>
{{ value6|striptags }}
#value7='1234'
{{ value7|filesizeformat }}<br>
{{ value7|first }}<br>
{{ value7|length }}<br>
{{ value7|
slice
:
":-1"
}}<br>
#value8='http://www.baidu.com/?a=1&b=3'
{{ value8|urlencode }}<br>
value9
=
'hello I am yuan'
五、標籤(tag)的使用
語法格式：{% tag %}
{ % if % }的使用
{% if %}標籤計算一個變量值，若是是「true」，即它存在、不爲空而且不是false的boolean值,系統則會顯示{% if %}和{% endif %}間的全部內容
{% if num >= 100 and 8 %}
{% if num > 200 %}
<
p
>num大於200</
p
>
{% else %}
<
p
>num大於100小於200</
p
>
{% endif %}
{% elif num <
100
%}
<p>num小於100</
p
>
{% else %}
<
p
>num等於100</
p
>
{% endif %}
{% if %} 標籤接受and，or或者not來測試多個變量值或者否認一個給定的變量
{% if %} 標籤不容許同一標籤裏同時出現and和or，不然邏輯容易產生歧義，例以下面的標籤是不合法的：
{% if obj1 and obj2 or obj3 %}
{% for %}的使用
{% for %}標籤容許你按順序遍歷一個序列中的各個元素,每次循環模板系統都會渲染{% for %}和{% endfor %}之間的全部內容
<
ul
>
{% for obj in list %}
<
li
>{{ obj.name }}</
li
>
{% endfor %}
</
ul
>
#在標籤裏添加reversed來反序循環列表：
{% for obj in list reversed %}
...
{% endfor %}
#{% for %}標籤能夠嵌套：
{% for country in countries %}
<
h1
>{{ country.name }}</
h1
>
<
ul
>
{% for city in country.city_list %}
<
li
>{{ city }}</
li
>
{% endfor %}
</
ul
>
{% endfor %}
#系統不支持中斷循環，系統也不支持continue語句，{% for %}標籤內置了一個forloop模板變量，
#這個變量含有一些屬性能夠提供給你一些關於循環的信息
1，forloop.counter表示循環的次數，它從1開始計數，第一次循環設爲1:
{% for item in todo_list %}
<
p
>{{ forloop.counter }}: {{ item }}</
p
>
{% endfor %}
2，forloop.counter0 相似於forloop.counter，但它是從0開始計數，第一次循環設爲0
3，forloop.revcounter
4，forloop.revcounter0
5，forloop.first當第一次循環時值爲True，在特別狀況下頗有用：
{% for object in objects %}
{% if forloop.first %}<
li
class="first">{% else %}<
li
>{% endif %}
{{ object }}
</
li
>
{% endfor %}
# 富有魔力的forloop變量只能在循環中獲得，當模板解析器到達{% endfor %}時forloop就消失了
# 若是你的模板context已經包含一個叫forloop的變量，Django會用{% for %}標籤替代它
# Django會在for標籤的塊中覆蓋你定義的forloop變量的值
# 在其餘非循環的地方，你的forloop變量仍然可用
#{% empty %}
{{li }}
{% for i in li %}
<
li
>{{ forloop.counter0 }}----{{ i }}</
li
>
{% empty %}
<
li
>this is empty!</
li
>
{% endfor %}
# [11, 22, 33, 44, 55]
# 0----11
# 1----22
# 2----33
# 3----44
# 4----55
1四、數據庫與orm的配置
一、數據庫的配置
1 django默認支持sqlite，mysql, oracle,postgresql數據庫。
<1> sqlite
django默認使用sqlite的數據庫，默認自帶sqlite的數據庫驅動 , 引擎名稱：django.db.backends.sqlite3
<2> mysql
引擎名稱：django.db.backends.mysql
2 mysql驅動程序
- MySQLdb(mysql python)
- mysqlclient
- MySQL
- PyMySQL(純python的mysql驅動程序)
3 在django的項目中會默認使用sqlite數據庫，在settings裏有以下設置：
修改爲mysql數據庫以下：
1 DATABASES = { 2 3 'default': { 4 5 'ENGINE': 'django.db.backends.mysql', 6 7 'NAME': 'books', #你的數據庫名稱 8 9 'USER': 'root', #你的數據庫用戶名 10 11 'PASSWORD': '', #你的數據庫密碼 12 13 'HOST': '', #你的數據庫主機，留空默認爲localhost 14 15 'PORT': '3306', #你的數據庫端口 16 17 } 18 19 }
1 NAME即數據庫的名字，在mysql鏈接前該數據庫必須已經建立，而上面的sqlite數據庫下的db.sqlite3則是項目自動建立 2 3 USER和PASSWORD分別是數據庫的用戶名和密碼。 4 5 設置完後，再啓動咱們的Django項目前，咱們須要激活咱們的mysql。 6 7 而後，啓動項目，會報錯：no module named MySQLdb 8 9 這是由於django默認你導入的驅動是MySQLdb，但是MySQLdb對於py3有很大問題，因此咱們須要的驅動是PyMySQL 10 11 因此，咱們只須要找到項目名文件下的__init__,在裏面寫入： 12 13 import pymysql 14 pymysql.install_as_MySQLdb() 15 16 問題解決！ 17 18 解釋
二、ORM表模型：
表(模型)的建立：
實例：咱們來假定下面這些概念，字段和關係
做者模型：一個做者有姓名。
做者詳細模型：把做者的詳情放到詳情表，包含性別，email地址和出生日期，做者詳情模型和做者模型之間是一對一的關係（one－to－one）（相似於每一個人和他的身份證之間的關係），在大多數狀況下咱們沒有必要將他們拆分紅兩張表，這裏只是引出一對一的概念。
出版商模型：出版商有名稱，地址，所在城市，省，國家和網站。
書籍模型：書籍有書名和出版日期，一本書可能會有多個做者，一個做者也能夠寫多本書，因此做者和書籍的關係就是多對多的關聯關係（many－to－many），一本書只應該由一個出版商出版，因此出版商和書籍是一對多關聯關係（one－to－many），也被稱做外鍵。
1 from django.db import models<br> 2 class Publisher(models.Model): 3 name = models.CharField(max_length=30, verbose_name="名稱") 4 address = models.CharField("地址", max_length=50) 5 city = models.CharField('城市',max_length=60) 6 state_province = models.CharField(max_length=30) 7 country = models.CharField(max_length=50) 8 website = models.URLField() 9 10 class Meta: 11 verbose_name = '出版商' 12 verbose_name_plural = verbose_name 13 14 def __str__(self): 15 return self.name 16 17 class Author(models.Model): 18 name = models.CharField(max_length=30) 19 def __str__(self): 20 return self.name 21 22 class AuthorDetail(models.Model): 23 sex = models.BooleanField(max_length=1, choices=((0, '男'),(1, '女'),)) 24 email = models.EmailField() 25 address = models.CharField(max_length=50) 26 birthday = models.DateField() 27 author = models.OneToOneField(Author) 28 29 class Book(models.Model): 30 title = models.CharField(max_length=100) 31 authors = models.ManyToManyField(Author) 32 publisher = models.ForeignKey(Publisher) 33 publication_date = models.DateField() 34 price=models.DecimalField(max_digits=5,decimal_places=2,default=10) 35 def __str__(self): 36 return self.title
分析代碼：
<1> 每一個數據模型都是django.db.models.Model的子類，它的父類Model包含了全部必要的和數據庫交互的方法。並提供了一個簡介漂亮的定義數據庫字段的語法。
<2> 每一個模型至關於單個數據庫表（多對多關係例外，會多生成一張關係表），每一個屬性也是這個表中的字段。屬性名就是字段名，它的類型（例如CharField）至關於數據庫的字段類型（例如varchar）。你們能夠留意下其它的類型都和數據庫裏的什麼字段對應。
<3> 模型之間的三種關係：一對一，一對多，多對多。
一對一：實質就是在主外鍵（author_id就是foreign key）的關係基礎上，給外鍵加了一個UNIQUE＝True的屬性；
一對多：就是主外鍵關係；（foreign key）
多對多：(ManyToManyField) 自動建立第三張表(固然咱們也能夠本身建立第三張表：兩個foreign key)
ORM之增(create,save)
from app01.models import *
#一種是建立一個對象的形式,另外是對象傳參
#create方式一: Author.objects.create(name='Alvin')
#create方式二: Author.objects.create(**{"name":"alex"})
#save方式一: author=Author(name="alvin")
author.save()
#save方式二: author=Author()
author.name="alvin"
author.save()
重點來了－－－－－－－>那麼如何建立存在一對多或多對多關係的一本書的信息呢？(如何處理外鍵關係的字段如一對多的publisher和多對多的authors)
1 #一對多(ForeignKey): 2 3 #方式一: 因爲綁定一對多的字段,好比publish,存到數據庫中的字段名叫publish_id,因此咱們能夠直接給這個 4 # 字段設定對應值: 5 Book.objects.create(title='php', 6 publisher_id=2, #這裏的2是指爲該book對象綁定了Publisher表中id=2的行對象 7 publication_date='2017-7-7', 8 price=99) 9 10 11 #方式二: 12 # <1> 先獲取要綁定的Publisher對象: 13 pub_obj=Publisher(name='河大出版社',address='保定',city='保定', 14 state_province='河北',country='China',website='http://www.hbu.com') 15 OR pub_obj=Publisher.objects.get(id=1) 16 17 # <2>將 publisher_id=2 改成 publisher=pub_obj 18 19 #多對多(ManyToManyField()): 20 21 author1=Author.objects.get(id=1) 22 author2=Author.objects.filter(name='alvin')[0] 23 book=Book.objects.get(id=1) 24 book.authors.add(author1,author2) 25 #等同於: 26 book.authors.add(*[author1,author2]) 27 book.authors.remove(*[author1,author2]) 28 #------------------- 29 book=models.Book.objects.filter(id__gt=1) 30 authors=models.Author.objects.filter(id=1)[0] 31 authors.book_set.add(*book) 32 authors.book_set.remove(*book) 33 #------------------- 34 book.authors.add(1) 35 book.authors.remove(1) 36 authors.book_set.add(1) 37 authors.book_set.remove(1) 38 39 #注意: 若是第三張表是經過models.ManyToManyField()自動建立的,那麼綁定關係只有上面一種方式 40 # 若是第三張表是本身建立的: 41 class Book2Author(models.Model): 42 author=models.ForeignKey("Author") 43 Book= models.ForeignKey("Book") 44 # 那麼就還有一種方式: 45 author_obj=models.Author.objects.filter(id=2)[0] 46 book_obj =models.Book.objects.filter(id=3)[0] 47 48 s=models.Book2Author.objects.create(author_id=1,Book_id=2) 49 s.save() 50 s=models.Book2Author(author=author_obj,Book_id=1) 51 s.save()
ORM之刪（delete）
先filter出行數,在執行.delete()進行刪除
>>> Book.objects.
filter
(
id
=
1
).delete()
(
3
, {
'app01.Book_authors'
:
2
,
'app01.Book'
:
1
})
咱們表面上刪除了一條信息，實際卻刪除了三條，由於咱們刪除的這本書在Book_authors表中有兩條相關信息，這種刪除方式就是django默認的級聯刪除。
ORM之改（update和save）
注意：
<1> 第二種方式修改不能用get的緣由是：update是QuerySet對象的方法，get返回的是一個model對象，它沒有update方法，而filter返回的是一個QuerySet對象(filter裏面的條件可能有多個條件符合，好比name＝'alvin',可能有兩個name＝'alvin'的行數據)。
<2>在「插入和更新數據」小節中，咱們有提到模型的save()方法，這個方法會更新一行裏的全部列。 而某些狀況下，咱們只須要更新行裏的某幾列。
下面是二者區別的解釋：
1 #---------------- update方法直接設定對應屬性---------------- 2 models.Book.objects.filter(id=3).update(title="PHP") 3 ##sql: 4 ##UPDATE "app01_book" SET "title" = 'PHP' WHERE "app01_book"."id" = 3; args=('PHP', 3) 5 6 7 #--------------- save方法會將全部屬性從新設定一遍,效率低----------- 8 obj=models.Book.objects.filter(id=3)[0] 9 obj.title="Python" 10 obj.save() 11 # SELECT "app01_book"."id", "app01_book"."title", "app01_book"."price", 12 # "app01_book"."color", "app01_book"."page_num", 13 # "app01_book"."publisher_id" FROM "app01_book" WHERE "app01_book"."id" = 3 LIMIT 1; 14 # 15 # UPDATE "app01_book" SET "title" = 'Python', "price" = 3333, "color" = 'red', "page_num" = 556, 16 # "publisher_id" = 1 WHERE "app01_book"."id" = 3;
此外，update()方法對於任何結果集（QuerySet）均有效，這意味着你能夠同時更新多條記錄update()方法會返回一個整型數值，表示受影響的記錄條數。
注意，這裏由於update返回的是一個整形，因此無法用query屬性；對於每次建立一個對象，想顯示對應的raw sql，須要在settings加上日誌記錄部分：
1 LOGGING = { 2 'version': 1, 3 'disable_existing_loggers': False, 4 'handlers': { 5 'console':{ 6 'level':'DEBUG', 7 'class':'logging.StreamHandler', 8 }, 9 }, 10 'loggers': { 11 'django.db.backends': { 12 'handlers': ['console'], 13 'propagate': True, 14 'level':'DEBUG', 15 }, 16 } 17 }
ORM之查（filter,value)
1 # 查詢相關API： 2 3 # <1>filter(**kwargs): 它包含了與所給篩選條件相匹配的對象 4 5 # <2>all(): 查詢全部結果 6 7 # <3>get(**kwargs): 返回與所給篩選條件相匹配的對象，返回結果有且只有一個，若是符合篩選條件的對象超過一個或者沒有都會拋出錯誤。 8 9 #-----------下面的方法都是對查詢的結果再進行處理:好比 objects.filter.values()-------- 10 11 # <4>values(*field): 返回一個ValueQuerySet——一個特殊的QuerySet，運行後獲得的並非一系列 model的實例化對象，而是一個可迭代的字典序列 12 13 # <5>exclude(**kwargs): 它包含了與所給篩選條件不匹配的對象 14 15 # <6>order_by(*field): 對查詢結果排序 16 17 # <7>reverse(): 對查詢結果反向排序 18 19 # <8>distinct(): 從返回結果中剔除重複紀錄 20 21 # <9>values_list(*field): 它與values()很是類似，它返回的是一個元組序列，values返回的是一個字典序列 22 23 # <10>count(): 返回數據庫中匹配查詢(QuerySet)的對象數量。 24 25 # <11>first(): 返回第一條記錄 26 27 # <12>last(): 返回最後一條記錄 28 29 # <13>exists(): 若是QuerySet包含數據，就返回True，不然返回False 30 31 查詢的api
相關文章
- 1. Django的FBV和CB Django的FBV和CBV
- 2. Django | RequestContext 和 Context
- 3. django blank 和autonow
- 4. Django - Cookie和Session
- 5. Django和Ajax
- 6. django-admin和manage.py
- 7. Django - Form和ModelForm
- 8. Django-cookie和session
- 9. Django session和cookie
- 10. Django CBV和FBV
- 更多相關文章...
- • XLink 和 XPointer 語法 - XLink 和 XPointer 教程
- • Kotlin 類和對象 - Kotlin 教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
