《TypeScript入門與全棧式網(wǎng)站開發(fā)實戰(zhàn)》 課件ch11實現(xiàn)RESTful API服務、ch12實現(xiàn)前端Vue應用

第11章實現(xiàn)RESTfulAPI服務TypeScript入門與全棧式網(wǎng)站開發(fā)實戰(zhàn)TypeScriptProgramming11.1案例分析目錄/CONTENTS11.1.1需求分析11.2開發(fā)環(huán)境安裝和配置書籍信息已保存至MongoDB中，接著定義RESTfulAPI在后端進行數(shù)據(jù)統(tǒng)一維護。如：獲取列表信息、獲取詳細信息、修改書籍信息、更換書籍封面圖片、刪除書籍等。RESTfulAPI是一種軟件架構風格，將一切數(shù)據(jù)視為資源，而資源的增、刪、改、查操作則可通過URL進行標識。RESTfulAPI架構將行為和資源分離：數(shù)據(jù)操作指令都是“動詞+賓語”的結構。11.1.2技術分析11.3功能實現(xiàn)11.1.1分析11.1.2實現(xiàn)11.1PART案例分析11.1案例分析11.1.1需求分析Express.js是一個輕量級的Web應用框架?？梢栽贜ode.js平臺上快速搭建出RESTfulAPI構架的Web應用?？捎肕ongoose模塊提供的API具體實現(xiàn)對數(shù)據(jù)的增、刪、改、查操作。使用RESTfulAPI管理書籍信息，主要包括5種功能操作：列表、新增、查詢、更新和刪除。11.1.2技術分析11.2PART開發(fā)環(huán)境安裝和配置11.2開發(fā)環(huán)境安裝和配置安裝Node.js（16.15.1）環(huán)境（1）下載安裝MongoDB和管理工具MongoDBCompass。（應該ch10中安裝了）（2）創(chuàng)建項目目錄：mkdirrestBooks（3）項目初始化：cdrestBooks、npminit-y（4）安裝TypeScript：npmconfigsetregistry（npmtabao新鏡像）npminstalltypescript（5）初始化TypeScript項目開發(fā)環(huán)境：tsc--init（6）安裝Mongoose模塊：npminstallmongoose（應該ch10中安裝了）（7）安裝Express.js模塊：npminstallexpress、npminstall@types/express（8）VSCode中安裝RESTClient插件：RESTClient11.3PART功能實現(xiàn)11.3功能實現(xiàn)1基于Express.js搭建RESTfulAPI應用的整體構架；2針對書籍信息5種操作，設置相應的5個RESTfulAPI路由；3針對每個路由，實現(xiàn)相應的控制器處理函數(shù)。11.3.1搭建Express.js應用構架搭建RESTfulAPI應用構架：Express.js設置中間件（含跨域訪問）、路由，以及啟動應用。server.ts：整體步驟：

11.3功能實現(xiàn)11.3.2設置路由1.設置對書籍信息各類操作的RESTfulAPI路由編寫routers/books.ts：11.3功能實現(xiàn)11.3.2設置路由2.應用中導入路由處理器server.ts改:importroutersfrom'./routers/books'router.use('/',routers)3.用RESTClient測試RESTfulAPI（1）編譯并啟動應用：tsc、node./server.js（2）編寫RESTfulAPI測試，rest.http：###gethttp://localhost:8080/books###posthttp://localhost:8080/books###gethttp://localhost:8080/books/63a831f45bc5244a4a4c35e1###patchhttp://localhost:8080/books/63a831f45bc5244a4a4c35e1###deletehttp://localhost:8080/books/63a831f45bc5244a4a4c35e1右擊，執(zhí)行SendRequest11.3功能實現(xiàn)11.3.3實現(xiàn)控制器1.控制器中實現(xiàn)對書籍信息的各操作controllers/books.ts改:11.3功能實現(xiàn)11.3.3實現(xiàn)控制器1.控制器中實現(xiàn)對書籍信息的各操作controllers/books.ts改(續(xù)):11.3功能實現(xiàn)11.3.3實現(xiàn)控制器2.修改路由處理routers/books.ts，引入controllers/books中的控制器處理函數(shù)，并修改路由處理代碼11.3功能實現(xiàn)11.3.3實現(xiàn)控制器3.測試RESTfulAPI（1）編譯并啟動應用：tsc、node./server.js（2）編輯rest.http文件，修正RESTfulAPI測試代碼：（3）對5種請求逐一測試rest.httpGet/books、Get/books/{id}、Post/books、

Patch/books/{id}、Delete/books/{id}第12章實現(xiàn)前端Vue應用TypeScript入門與全棧式網(wǎng)站開發(fā)實戰(zhàn)TypeScriptProgramming12.1案例分析目錄/CONTENTS12.1.1需求分析12.2開發(fā)環(huán)境安裝和配置設計Web前端Vue應用，調(diào)用RESTfulAPI來實現(xiàn)對書籍信息的管理。12.1.2技術分析12.3功能實現(xiàn)12.1.1分析12.1.2實現(xiàn)12.1PART案例分析12.1案例分析12.1.1需求分析前端Web應用使用Vue框架開發(fā)，優(yōu)勢：數(shù)據(jù)雙向綁定，使用虛擬DOM，頁面局部刷新，訪問速度快，用戶體驗好。使用Vite構建Vue項目優(yōu)勢：無須打包、實時編譯、模塊熱加載速度快、上手簡單、開發(fā)效率高。引入路由管理器--VueRouter模塊，構建SPA程序過程更輕松。引入Axios模塊，簡化對RESTfulAPI的訪問代碼。針對書籍信息操作的各個功能接口，開發(fā)相應的Web前端應用，實現(xiàn)：對書籍列表信息的獲取、顯示書籍詳細信息、編輯書籍信息和刪除書籍等功能的可視化操作。12.1.2技術分析設計必要的前端操作界面，再通過與RESTfulAPI服務交互，就可完成書籍信息的可視化維護功能。12.2PART開發(fā)環(huán)境安裝和配置12.2開發(fā)環(huán)境安裝和配置1安裝Node.js（16.15.1）環(huán)境(已安裝，另外運行時啟動ch11中后端項目)

2創(chuàng)建項目：npmcreatevite@latestvueBooks--templatevue√Packagename:...vuebooks√Selectaframework:?Vue√Selectavariant:?TypeScript3安裝項目依賴包

cdvueBooksnpmconfigsetregistry//新taobaonpm鏡像npminstall4啟動項目:

npmrundev5安裝Volar插件:使用TypeScript語言開發(fā)Vue項目會有更好的支持12.2開發(fā)環(huán)境安裝和配置6安裝和配置路由模塊（1）安裝vue-router模塊:

npminstallvue-router

（2）添加Vue組件:

src/components/List.vue、Details.vue（3）配置路由src/router/index.ts//router.push({name:"list"})//路由模式，另hash#12.2開發(fā)環(huán)境安裝和配置（4）使用路由標簽<router-view/>

改App.vue（5）為應用指定路由,main.ts中指定路由（6）測試路由npmrundev瀏覽器訪問：<router-linkto="/list"…>list</router-link>

/list->List.vue，

books/649f989457aeb431a4225d92->Details.vue12.3PART功能實現(xiàn)12.3功能實現(xiàn)設計應用主界面；編寫書籍服務類及其4個功能函數(shù)；通過Axios調(diào)用API實現(xiàn)：獲取書籍列表、獲取特定書籍的詳細信息、修改書籍信息和刪除書籍；設計書籍列表組件List.vue和書籍詳情組件Details.vue，完成書籍顯示和維護功能。整體步驟：

12.3.1設計應用主界面（1）安裝前端UI框架

npminstallbootstrap//安裝bootstrap框架importbootstrap”//main.ts中導入BootStrap框架import"bootstrap/dist/css/bootstrap.min.css"（2）主界面（src/App.vue）加入“書籍列表”導航<router-linkto="/list"class="nav-link">

書籍列表

</router-link>（3）測試：瀏覽器/list，<router-view>切至List.vue/books/123切至Details.vue12.3.2定義書籍類型（src/types/Book.ts）erexportinterfaceIBook{//.vue組件中使用_id:string,//主鍵

title:string,//書名

coverImgUrl:string,//封面URLlocalCoverUrl:string,//封面本地存放路徑

author:string,//作者

price:number,//定價

isbn:string,//ISBN號

pubDate:string,//出版日期

summary:string//內(nèi)容簡介}12.3功能實現(xiàn)12.3.3設計服務類編寫書籍服務類，以Axios為HTTP客戶端調(diào)用Node.js應用中的RESTfulAPI（1）安裝Axios模塊：npminstallaxios（2）編寫書籍服務類，調(diào)用RESTfulAPIsrc/services/BookService.ts12.3功能實現(xiàn)12.3.4設計Vue組件（1）書籍列表組件修改src/components/List.vue//apiClient.get("/books")//路由到/books/:id對應Details組件//響應(值變template更新…)類型：ref,reactive12.3功能實現(xiàn)12.3.4設計Vue組件（1）書籍列表組件啟動API服務：C:\restBooks>node./server.js（MongoDB啟動）啟動Vue前端應用:C:\vueBooks>npmrundev瀏覽器/list；單擊“某書”測試：防止盜鏈策略index.html<metaname="referrer"content="no-refe