《TypeScript入門與全棧式網(wǎng)站開發(fā)實(shí)戰(zhàn)》 課件 ch12實(shí)現(xiàn)前端Vue應(yīng)用

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

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

cdvueBooksnpmconfigsetregistry//新taobaonpm鏡像npminstall4啟動(dòng)項(xiàng)目:

npmrundev5安裝Volar插件:使用TypeScript語言開發(fā)Vue項(xiàng)目會(huì)有更好的支持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）使用路由標(biāo)簽<router-view/>

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

/list->List.vue，

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

12.3.1設(shè)計(jì)應(yīng)用主界面（1）安裝前端UI框架

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

書籍列表

</router-link>（3）測(cè)試：瀏覽器/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,//定價(jià)

isbn:string,//ISBN號(hào)

pubDate:string,//出版日期

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