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

第11章实现RESTfulAPI服务TypeScript入门与全栈式网站开发实战TypeScriptProgramming11.1案例分析目录/CONTENTS11.1.1需求分析11.2开发环境安装和配置书籍信息已保存至MongoDB中，接着定义RESTfulAPI在后端进行数据统一维护。如：获取列表信息、获取详细信息、修改书籍信息、更换书籍封面图片、删除书籍等。RESTfulAPI是一种软件架构风格，将一切数据视为资源，而资源的增、删、改、查操作则可通过URL进行标识。RESTfulAPI架构将行为和资源分离：数据操作指令都是“动词+宾语”的结构。11.1.2技术分析11.3功能实现11.1.1分析11.1.2实现11.1PART案例分析11.1案例分析11.1.1需求分析Express.js是一个轻量级的Web应用框架。可以在Node.js平台上快速搭建出RESTfulAPI构架的Web应用。可用Mongoose模块提供的API具体实现对数据的增、删、改、查操作。使用RESTfulAPI管理书籍信息，主要包括5种功能操作：列表、新增、查询、更新和删除。11.1.2技术分析11.2PART开发环境安装和配置11.2开发环境安装和配置安装Node.js（16.15.1）环境（1）下载安装MongoDB和管理工具MongoDBCompass。（应该ch10中安装了）（2）创建项目目录：mkdirrestBooks（3）项目初始化：cdrestBooks、npminit-y（4）安装TypeScript：npmconfigsetregistry（npmtabao新镜像）npminstalltypescript（5）初始化TypeScript项目开发环境：tsc--init（6）安装Mongoose模块：npminstallmongoose（应该ch10中安装了）（7）安装Express.js模块：npminstallexpress、npminstall@types/express（8）VSCode中安装RESTClient插件：RESTClient11.3PART功能实现11.3功能实现1基于Express.js搭建RESTfulAPI应用的整体构架；2针对书籍信息5种操作，设置相应的5个RESTfulAPI路由；3针对每个路由，实现相应的控制器处理函数。11.3.1搭建Express.js应用构架搭建RESTfulAPI应用构架：Express.js设置中间件（含跨域访问）、路由，以及启动应用。server.ts：整体步骤：

11.3功能实现11.3.2设置路由1.设置对书籍信息各类操作的RESTfulAPI路由编写routers/books.ts：11.3功能实现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右击，执行SendRequest11.3功能实现11.3.3实现控制器1.控制器中实现对书籍信息的各操作controllers/books.ts改:11.3功能实现11.3.3实现控制器1.控制器中实现对书籍信息的各操作controllers/books.ts改(续):11.3功能实现11.3.3实现控制器2.修改路由处理routers/books.ts，引入controllers/books中的控制器处理函数，并修改路由处理代码11.3功能实现11.3.3实现控制器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章实现前端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-refe