> For the complete documentation index, see [llms.txt](https://johch3n611u.gitbook.io/c50108/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://johch3n611u.gitbook.io/c50108/ju-li-cheng-bei/201905/2019-0522.md). # 2019/0522/Bootstrap Components 元件介紹 + MVC API 概念&實作響應式上午 ( bs + js or jq ( 利用bs已經寫好的函式庫完成 \#Bootstrap components 元/組件 ### ##標籤/元素 data 屬性 {% embed url="" %} ### ##alert 警報警告 bs class #### ###keyword alert-danger alert-dark alert-info alert-success &開頭;結尾 ( \× 特殊符號 X \#bs js庫 ( 第一次講 ( alert關閉功能 data 開頭的屬性 ( 事件發生做甚麼 data-dismiss=”alert” ( 被消失沒反應? ( 要link jq庫近來後再進 bs庫 ( js 寫 jq庫， jq庫寫 bs庫再來完成某個小功能下id在 alert class div上用jq選擇器當選擇器被關掉時執行某funtion Log ? api 存到資料庫 #### ###/RWD/20Alert.html ```

您現在是最高權限,用完後請馬上登出!!

您現在是最高權限,用完後請馬上登出!!點我登出系統

您好!!系統管理員!!

您現在是最高權限,用完後請馬上登出!!

目前登入系統是危險的!!請注意密碼外洩或其他資安問題

您現在是最高權限,用完後請馬上登出!!

您好!!系統管理員!!

您現在是最高權限,用完後請馬上登出!!

目前登入系統是危險的!!請注意密碼外洩或其他資安問題

``` ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU1HLM2R3tl-IAVfc9%2Fimage.png?alt=media\&token=19aed702-ec11-40af-823c-7e8b5b90bf87) 以上其實就是jq show 跟 hide 還能跑特效 fade in fade out 只是說用它的可以很快，而且它沒寫的就沒得用還是要自己寫 ### ##題外話如果用 jq開發一個空白網站應該至少要有 ```

``` ### ##badge ( 小按鈕小提示 #### ###keyword Badge Badge-danger . . . Ex 站內信 ( 已讀未讀 sr seo 排名 ??? class sr-only 會被盲用電腦讀出 #### ### /RWD/21Badge.html ```

This is a h1 heading!!New

primary success info

``` ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU1cxC6Ck6UkkoUAVX%2Fimage.png?alt=media\&token=808e4f34-bdd3-4ea9-80da-96db1a4ce3c0) ### ##BreadCrumb 麵包屑網站設計是一層一層的Sitemap邏輯性的但是實體的網站其實是網狀的藉由Url可以直接跳轉而網站地圖就是麵包屑網站地圖一定跟選單有關架構 ( 階層 SiteMap => Menu選單 #### ###keyword breadcrumb breadcrumb-item breadcrumb 搭配超連結 active作用中(自己去寫? (每個 combind的效果都不一樣要去參考庫上的屬性 4版本的跟3版本的改的地方不一樣但其實就是原生的css或js寫的庫不改的屬性不用貼進來不用重複寫比較不會出錯 ctrl+f5 指重新整理 head Shift 整個網頁重讀 ### ##button #### ##keyword 有點多看範例程式碼行動裝置上常用 block 區塊型的 Bs4專屬啟用跟非啟用狀態 active > 點擊後tago combind呈現 active Disabled 功能拿掉但外觀一樣 #### ###/RWD/23Button.html ```

Warning

沒女友多金位高權重

``` ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU1yq3GS98gc_sKoXn%2Fimage.png?alt=media\&token=d513cf22-5342-43a6-8654-dfd0b572cdf6) #### ###題外話 Id 在 SEO中第一個不要寫1 第二個寫2 3 4 這樣排名會高一些互動就是一種功能一定會用到js 所以屬性要下 data Data-toggle 最後把網頁介面改寫為行動裝置適合的頁面 ### ##Dropdown menu 下拉式按鈕 #### ###基本操作給base -> btn 然後再給顏色 btn-danger … 按下menu後才會顯示選單 #### ###keyword Dropdown-menu Dropdown-item 但是這時只是隱藏 ( 點擊時觸發所以又是js data-target \##bs裡面 class 掌管外觀 data 掌控功能非常多種還是要去bs官網看 #### ##早上的debug 是popper.js函式庫壞掉 ? 結果用cdn引入就好了結果就用bundle ( 所有的函式庫總庫結果可以所以判斷就是poper壞了偵錯原則 1.f12 console 不能有紅色 2.看DOM #### ###/RWD/24Dropdown.html ```

``` ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU2I_8fkVL4Ta4cOvZ%2Fimage.png?alt=media\&token=890d6fe8-75d0-4b46-87aa-850bdc9b4151) 下次這個地方會在講一次 ( 講一半 ## #MVC API 概念 !!!!!!!!!!!!!!!!!!!!!!!!!大重點!!!!!!!!!!!!!!!!!!!!!!!!!! 學會就成為全端工程師 ??? {% embed url="" %} Webserver 不太算 api 現在講的api是 restful l ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU2UNwSJFjhHvf89wd%2Fimage.png?alt=media\&token=f2dbff73-61a4-45fa-80b1-bca47d8e6f45) 程式在哪裡被執行的判斷前後端但 restfull 夯的原因可用於異質性設備 UI給人用的介面user interface API 給程式用的看的介面給瀏覽器看的寫一個會看程式的 JAVA or C# Application INTERFACE ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU39BtmNCY9x-E8t4S%2Fimage.png?alt=media\&token=1654a1df-e953-44ac-b70b-a18343b54408) ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU3JYy69nBJ4_rOE5d%2Fimage.png?alt=media\&token=baa55eb9-7368-4a27-96ab-6ec0926bd3ed) 擴充性很高要盡量寫成 api XML 階層太多所以現在流行用 JOSON API的 Request 是透過 URL 之前都是我們去接 API的資料 JASON 今天我們要當那個拋的 ### ##API 實作這個其實有API範本 Global.asax 整個網站的組態 ( 應用程式被執行時會先來這裡 Webapi 與 Route的組態交給這裡 #### ### /07WebAPI/Global.asax ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; using System.Web.Security; using System.Web.SessionState; using System.Web.Http; namespace _07WebAPI { public class Global : HttpApplication { void Application_Start(object sender, EventArgs e) { // 應用程式啟動時執行的程式碼 AreaRegistration.RegisterAllAreas(); GlobalConfiguration.Configure(WebApiConfig.Register); RouteConfig.RegisterRoutes(RouteTable.Routes); } } } ``` 接著看 api 跟 Route的組態路由設定隱藏路徑下一次會講 #### ### /07WebAPI/App\_Start/RouteConfig.cs ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace _07WebAPI { public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); } } } ``` 我們今天先看 api的 ( 路徑一定要依樣 #### ### /07WebAPI/App\_Start/WebApiConfig.cs ``` using System; using System.Collections.Generic; using System.Linq; using System.Web.Http; namespace _07WebAPI { public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API 設定和服務 // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); } } } ``` Web.config 給iis看的server的 ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU3lJdtDJbpchJRplX%2Fimage.png?alt=media\&token=3d5b42c3-534b-4737-94f2-24c6242886bb) IQueryable 底層實作都是回復一個集合差別在於 IEnumerable 抓資料進記憶體但有時候查詢時就會不一樣 iv會全抓再去查出來再塞給view ie會先把查詢linq轉為 tsql command 抓查詢的東西再塞給記憶體節省記憶體但效能會慢一點 List只能用Ie 所以直接 return 即可它因為繼承apicontroller 所以不用 return view 因為只會回傳值要用IHttpActionResult介面 NotFound() 方法丟404 Ok() 方法失敗error 成功success 200 不用寫 else 因為看到 return就結束了不然不會結束反而會報錯沒有view直接編譯候用url呼叫 ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU3r062HS7V4HjVzUS%2Fimage.png?alt=media\&token=f5e2e252-bb03-4650-8273-42407480027c) 到webapiconfig.cs 編輯拋出格式 ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU3xy-jAH80oIAtG-c%2Fimage.png?alt=media\&token=9a3c7cac-7f2c-4038-9314-5ffadbd36ee0) 接著用前端呼叫API試試看用JQ寫AJAX呼叫寫偵錯 console.log 等等如出錯比較好偵錯 Data.forEach() 把資料利用jason讀的方式讀出來 ( 之前有教 jason的階層) 讀出來 #### ### /07WebAPI/HtmlPage1.html ```

``` #### ###安全性問題必須透過url呼叫無法直接開啟 ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU4A5rDPP3r7Xn123t%2Fimage.png?alt=media\&token=65a27cb7-9b1e-429a-b122-0bfb6899b6d4) #### ###建億的錄影影片 {% embed url="" %} ### ##小結論: 前端就是在寫介接 scrip ( 純前端拋資料 ( 純後端 Api讓前後端可以完全切開弄個bs排版之類的應該就是 ( 網頁設計師 …. 接著再回到HtmlPage1.html ### ##寫前端的jq查詢 ( 只要傳id 雖然是後端要資料但是是在後台運作的ajax 所以並不會postback 使用者ux感覺良好 #### ### /07WebAPI/HtmlPage1.html ```

``` 以上講的都是讀取接著三個都是寫進去增加一筆既有資料修改既有資料刪除複雜隙結法傳整個類別刪除只要傳id所以不用傳整個類別這三個都是void 如果要回傳值就可以同時顯示資料庫狀況填表單通常就要驗證資料 ( 前端會做初步塞選但前端可能會失誤所以最好還是要防範 ( 公開資料通常只會拋資料出來介接網址跟使用文件無法寫回去 ModelState.IsValid ( 布林值 ) 回傳funtion結構關係所以if 都要先寫反的 ( 如果沒有 Return BadRequest(ModelState);丟錯誤訊息回去接著如果驗證通過 db.學生.Add(stu); 常犯錯誤 pk 重複或缺少所以我們就可以把已下放在 try crach 通過才執行db.SaveChanges(); catch(DbUpdateException) Conflict()將錯誤訊息回傳如果是沒辦法判斷的例外利用以下 Throw 把例外直接拋出 Return CreatedAtRoute(“DefaultApi”,new {id=stu.學號}); 接著下一個既有資料修改把新增一筆資料拿來改即可驗證如果傳進來的id與stu的學號不同拋 badrequest() db.Entry(stu).State=EntityState.Modified 狀態改成修改以下相同最後要 return statuscode (HttpStatuscode.nocontent); 最後一個抓學號然後刪掉跟查詢資料很像最後也是return Ok(stu); 後端api至此 ok 回到前端HtmlPage1.html 純前端有壞處沒razor可以寫所以遇到功能只能寫js 簡單用 bootstrap排版 ### ##Form 不用寫 action 也不用寫 mether 也不用submit 因為都是藉由 ajax 接著 ### ##寫新增的jq方法 ( 只要id 新增type要用post Request 一定是 url Data只要呼叫 form id 使用.serialize()資料序列化?(直接幫你把帶的參數寫好的方法 ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU4po_DV-n8hHX_VqB%2Fimage.png?alt=media\&token=a9433cb9-50e4-45f4-9f83-15e0ded375be) Api / student?學號=s010&姓名=abcd8 這裡又出現bug 可能是jq1.9版本序列化會怪怪的結果原來是標籤沒有name所以後端擷取不到 ### ##接著要修改資料 ( 最麻煩要id又要model 我們把上面的修改一下在查詢時就把資料讀在表單內 ( 原本是獨立在最下面 val() 沒傳參數是取值，有傳參數是給值 ### ##最後是刪除 ( 只要id 跟剛剛新增差不多整個就是 #### ###/07WebAPI/Controllers/StudentController.cs ``` using _07WebAPI.Models; using System; using System.Collections.Generic; using System.Data.Entity; using System.Data.Entity.Infrastructure; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; namespace _07WebAPI.Controllers { public class StudentController : ApiController { 教務系統Entities db = new 教務系統Entities(); // GET: api/Student public IQueryable<學生> Get() { return db.學生; } // GET: api/Student/5 public IHttpActionResult Get(string id) { 學生 stu = db.學生.Find(id); if (stu == null) return NotFound(); return Ok(stu); } // POST: api/Student public IHttpActionResult Post([FromBody]學生 stu) { if(!ModelState.IsValid) { return BadRequest(ModelState); } db.學生.Add(stu); try { db.SaveChanges(); } catch (DbUpdateException) { if(db.學生.Count(s=>s.學號==stu.學號)>0) { return Conflict(); } else { throw; } } return CreatedAtRoute("DefaultApi",new { id=stu.學號},stu); } // PUT: api/Student/5 public IHttpActionResult Put(string id, [FromBody]學生 stu) { if (!ModelState.IsValid) { return BadRequest(ModelState); } if(id!=stu.學號) { return BadRequest(); } db.Entry(stu).State = EntityState.Modified; try { db.SaveChanges(); } catch (DbUpdateException) { if (db.學生.Count(s => s.學號 == stu.學號) > 0) { return Conflict(); } else { throw; } } return StatusCode(HttpStatusCode.NoContent); } // DELETE: api/Student/5 public IHttpActionResult Delete(string id) { 學生 stu = db.學生.Find(id); if (stu == null) return NotFound(); db.學生.Remove(stu); db.SaveChanges(); return Ok(stu); } } } ``` #### ###/07WebAPI/HtmlPage1.html ```

``` ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU5PUWkfrZ1cwJfIYT%2Fimage.png?alt=media\&token=cf72fd6e-121f-48b7-8163-8a9d4c50107b) 本機 IIS Webserver 範例 ( 後端會傳這個給前端 ![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LfU0YFsbnIE2mVwzX-C%2F-LfU5YAg1i9G1LG6tu0l%2Fimage.png?alt=media\&token=6c0bcaaf-0f18-4fd5-a9fd-c60112868827) ### ##題外話繫結 #### ###複雜繫結 {% embed url="" %} #### ###簡單繫結 {% embed url="" %} #### ###下一次會講用異質性平台存取同一個api