许多小伙伴也许也会有着和小编一样的烦恼,在跟着一些教学视频coding时,突然发现视频中的一些后端接口用不了了,这时就会很影响我们coding的心情,同时也导致整个案例项目写不下去了,如果想要实现和视频同样的效果,只能等待接口恢复正常、或写死数据,这不太现实、或者自己写一个接口,但这需要一定的后端知识,对于大多数前端的小伙伴来说,后端知识几乎为零,为此我们需要一个不用写后端代码也能现实后台接口的搭建。

如何搭建后端接口

为此小编给大家带来了一个可以白嫖的服务器,yapi高效、易用、功能强大的可视化接口管理平台,首先我们要注册一个yapi账号。

前端和后端通过restcontroller 怎么通信的 前端怎么和后端对接口_前端

注册成功之后如何搭建接口

新建接口分三步走:1.创建分组 2.新建接口 3.添加接口路径、返回数据。

1.点击左侧接口分组右侧的菜单按钮,选择 添加接口,或者点击接口列表右上角的 添加接口

前端和后端通过restcontroller 怎么通信的 前端怎么和后端对接口_vue.js_02


2.选择接口分类,输入接口名称和接口路径,点击提交

前端和后端通过restcontroller 怎么通信的 前端怎么和后端对接口_数据_03


3.这时,你已创建了第一个YApi的接口,你可以看到在左侧看到接口名称,右侧有该接口的信息预览。点击已创建好的接口,进入接口操作界面。

前端和后端通过restcontroller 怎么通信的 前端怎么和后端对接口_数据_04

4.点击添加接口,输入相关信息

前端和后端通过restcontroller 怎么通信的 前端怎么和后端对接口_javascript_05


5.点击高级mock,点击添加期望,就可在脚本界面填写你想要的接口格式和数据了,注意数据是json格式!具体操作步骤可查阅yapi文档https://hellosean1025.github.io/yapi/documents/index.html

前端和后端通过restcontroller 怎么通信的 前端怎么和后端对接口_javascript_06


前端和后端通过restcontroller 怎么通信的 前端怎么和后端对接口_数据_07


到此,你已成功创建一个带来返回数据的后端接口,接下来你就可以在你的项目中应用了

前端和后端通过restcontroller 怎么通信的 前端怎么和后端对接口_端接_08


前端和后端通过restcontroller 怎么通信的 前端怎么和后端对接口_端接_09


我创建的接口已成功在我的项目中跑起来了

前端和后端通过restcontroller 怎么通信的 前端怎么和后端对接口_javascript_10


这也只是一时的解决方案,想要一劳永逸,小编还是希望各位前端小伙伴们要学习一些后端知识,加强自身技术栈,做一个全栈大佬,架构大师,希望小编写的这篇文章能够对你有所帮助!!!