《TypeScript入门与全栈式网站开发实战》 课件 ch12实现前端Vue应用

第12章实现前端Vue应用TypeScript入门与全栈式网站开发实战TypeScriptProgramming12.1案例分析目录/CONTENTS12.1.1需求分析12.2开发环境安装和配置设计Web前端Vue应用，调用RESTfulAPI来实现对书籍信息的管理。12.1.2技术分析12.3功能实现12.1.1分析12.1.2实现12.1PART案例分析12.1案例分析12.1.1需求分析前端Web应用使用Vue框架开发，优势：数据双向绑定，使用虚拟DOM，页面局部刷新，访问速度快，用户体验好。使用Vite构建Vue项目优势：无须打包、实时编译、模块热加载速度快、上手简单、开发效率高。引入路由管理器--VueRouter模块，构建SPA程序过程更轻松。引入Axios模块，简化对RESTfulAPI的访问代码。针对书籍信息操作的各个功能接口，开发相应的Web前端应用，实现：对书籍列表信息的获取、显示书籍详细信息、编辑书籍信息和删除书籍等功能的可视化操作。12.1.2技术分析设计必要的前端操作界面，再通过与RESTfulAPI服务交互，就可完成书籍信息的可视化维护功能。12.2PART开发环境安装和配置12.2开发环境安装和配置1安装Node.js（16.15.1）环境(已安装，另外运行时启动ch11中后端项目)

2创建项目：npmcreatevite@latestvueBooks--templatevue√Packagename:...vuebooks√Selectaframework:»Vue√Selectavariant:»TypeScript3安装项目依赖包

cdvueBooksnpmconfigsetregistry//新taobaonpm镜像npminstall4启动项目:

npmrundev5安装Volar插件:使用TypeScript语言开发Vue项目会有更好的支持12.2开发环境安装和配置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开发环境安装和配置（4）使用路由标签<router-view/>

改App.vue（5）为应用指定路由,main.ts中指定路由（6）测试路由npmrundev浏览器访问：<router-linkto="/list"…>list</router-link>

/list->List.vue，

books/649f989457aeb431a4225d92->Details.vue12.3PART功能实现12.3功能实现设计应用主界面；编写书籍服务类及其4个功能函数；通过Axios调用API实现：获取书籍列表、获取特定书籍的详细信息、修改书籍信息和删除书籍；设计书籍列表组件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//内容简介}12.3功能实现12.3.3设计服务类编写书籍服务类，以Axios为HTTP客户端调用Node.js应用中的RESTfulAPI（1）安装Axios模块：npminstallaxios（2）编写书籍服务类，调用RESTfulAPIsrc/services/BookService.ts12.3功能实现12.3.4设计Vue组件（1）书籍列表组件修改src/components/List.vue//apiClient.get("/books")//路由到/books/:id对应Details组件//响应(值变template更新…)类型：ref,reactive12.3功能实现12.3.4设计Vue组件（1）书籍列表组件启动API服务：C:\restBooks>node./server.js（MongoDB启动）启动Vue前端应用:C:\vueBooks>npmrundev浏览器/list；单击“某书”测试：防止盗链策略index.html<metaname="referrer"content="no-referrer"/>12.3功能实现（2）书籍详情组件修改src/components/Details.vue12.3功能实现（2）书籍详情组件修改src/components/Details.vue