宁波网站制作报价,互助县公司网站建设,奉贤品牌网站建设,o2o电子商务平台在前后端分离开发中#xff0c;我们都是基于文档进行开发#xff0c;那前端人员有时候无法马上拿到后端的数据#xff0c;该怎么办#xff1f;我们一般采用mock模拟伪造数据直接进行测试#xff0c;本篇文章主要介绍YApi在线接口文档的简单使用#xff0c;并结合Vue的小d… 在前后端分离开发中我们都是基于文档进行开发那前端人员有时候无法马上拿到后端的数据该怎么办我们一般采用mock模拟伪造数据直接进行测试本篇文章主要介绍YApi在线接口文档的简单使用并结合Vue的小demo让你快速了解到前后端分离开发整体流程。 文章目录 1、YApi可视化接口管理平台2、Vue表格渲染demo 1、YApi可视化接口管理平台 YApi 是高效、易用、功能强大的 api 管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。 注意YApi现在好像没有人维护了但我们依旧可以通过下方的YApi访问地址去使用 其官网地址
YApi访问地址
YApi主要提供了2个功能
API接口管理根据需求撰写接口包括接口的地址参数响应等等信息。Mock服务模拟真实接口生成接口的模拟测试数据用于前端的测试。
使用步骤 ·1、登录进去后在个人空间中选择项目列表-添加项目效果如图所示
2、然后点击创建的项目进入到项目中紧接着先添加接口的分类如下图所示
3、然后我们选择当前创建的分类创建接口信息如下图所示
4、我们来到接口的编辑界面对接口的各种信息例如接口的参数接口的返回值等等效果图下图所示 这里看情况添加 5、我们还可以设置接口的mock信息通过添加期望直接指定响应信息
6、我们来到接口的预览界面直接点击Mock地址完成请求数据的响应
2、Vue表格渲染demo
1、首先导入两个js文件
axios-0.18.0.jsvue.js
下载地址直接解压导入使用
2)、编写前端HTML代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/axios-0.18.0.js/script !--js目录下的axios-0.18.0.js文件--script srcjs/vue.js/script
/head
bodydiv idapp styletext-align: center;table border1px cellspacing0 width60% trth编号/thth姓名/thth头像/thth性别/thth职位/thth入职日期/thth最后操作时间/th/trtr center v-for(item,index) in tableDatatd{{index1}}/tdtd{{item.name}}/tdtdimg :srcitem.image stylewidth: 100%; height: 200px; /tdtdspan v-ifitem.gender1男/spanspan v-ifitem.gender0女/span/tdtd{{item.job}}/tdtd{{item.entrydate}}/tdtd{{item.updatetime}}/td/tr/table/divscriptnew Vue({el:#app,data:{tableData:[]},// 钩子函数页面初始化便加载mounted() {// 通过axios发起请求获取数据axios.get(https://yapi.pro/mock/63341/emp/list).then(res{// this代表当前的Vue对象this.tableDatares.data.data})},});/script
/body
/html
最终实现效果 关于返回图片的URL可以参考这篇文章如何搭建自己的图床(GitHub版)
