为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第14天 Vue3 + TS...

【九月打卡】第14天 Vue3 + TS 仿知乎专栏企业级项目

2022.09.19 09:30 86浏览

课程名称2022全面升级. Vue3 + TS 仿知乎专栏企业级项目

课程章节7-3 使用 swagger在线文档查看接口详情,7-4 axios 的基本用法和独家后端API 使用(必看),7-5 后端Icode终极使用方案

主讲老师:张轩

课程内容:

了解后端生成的swagger文档

课程收获:

由于前后端分离,前端或者后端无法做到及时协商,最终导致问题爆发,所以程序猿写代码时都是很暴躁的。

这个时候,就可以用到Swagger了,它号称世界上最流行的API框架,Restful Api文档在线自动生成器。还可以在线测试API接口,不必特意去下载Postman,ApiPost去测试接口。还支持多种语言,如:Java,PHP(PHP是世界上最好的语言!)等

接口文档需要包括的点

1.endpoints:具体路径

2.使用什么样的method?

3.发送请求的具体参数

4.请求返回数据的格式

axios是当今前端最流行的请求接口的一个工具,Axios,可以理解为ajax i/o system,这不是一种新技术,本质上还是对原生XMLHttpRequest的封装,可用于浏览器和nodejs的HTTP客户端,只不过它是基于Promise的,符合最新的ES规范。具备以下特点:

1.在浏览器中创建XMLHttpRequest请求

2.在node.js中发送http请求

3.支持Promise API

4.拦截请求和响应

5.转换请求和响应数据

6.取消要求

7.自动转换JSON数据

8.客户端支持防止CSRF/XSRF(跨域请求伪造)

慕课网提供的 Icode 经过几次升级,现在把最终的解决方案整理如下,供同学们参考。

可以在 main.ts 中的拦截器里面一劳永逸的添加。

慕课网提供的 Icode 经过几次升级,现在把最终的解决方案整理如下,供同学们参考。

可以在 main.ts 中的拦截器里面一劳永逸的添加。

// 替换 baseURL

axios.defaults.baseURL = 'http://apis.imooc.com/api/'

// 下面的 icode 值是从慕课网获取的 token 值,可以在课程右侧的项目接口校验码找到

axios.interceptors.request.use(config => {

... 其他代码

// get 请求,添加到 url 中

config.params = { ...config.params, icode: '******' }

// 其他请求,添加到 body 中

// 如果是上传文件,添加到 FormData 中

if (config.data instanceof FormData) {

config.data.append('icode', '******')

} else {

// 普通的 body 对象,添加到 data 中

config.data = { ...config.data, icode: '******' }

}

return config

})

https://img1.sycdn.imooc.com/6327c63a0001dccc16490874.jpg


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1
获赞与收藏
3

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消