a_bazu
/
cloud-web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

接口调用

pull/4/head
WeiRan 2024-08-25 19:56:23 +08:00
parent fb6dd79f27
commit 772fbd7b6d
5 changed files with 254 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/market/myapi.js 100644
View File

@ -0,0 +1,10 @@
import request from "@/utils/request";
export function selectmyapiList(data){
return request({
url:"/market/myapi/list",
method: "POST",
data: data
})
}

12
src/router/index.js
View File

@ -91,7 +91,19 @@ export const constantRoutes = [
meta: {title: '个人中心', icon: 'user'}
}
]
},
{
path: '/apitest',
component: Layout,
children: [
{
path: 'index',
name: 'apitest',
component: () => import('@/views/market/apitest/index.vue'),
meta: { title: 'API文档', icon: 'form' }
}
]
},
]
// 动态路由，基于用户权限动态去加载

131
src/views/market/apitest/index.vue 100644
View File

@ -0,0 +1,131 @@
<template>
<div>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark">
<el-form ref="form" :model="myapi" label-width="120px" :rules="rules">
<el-form-item label="产品名称:" >
{{myapi.productName}}
</el-form-item>
<el-form-item label="产品价格:">
{{myapi.productPrice}}元/次
</el-form-item>
<el-form-item label="产品介绍:">
{{myapi.productContent}}
</el-form-item>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark">
<el-button type="info" @click="test()">测试</el-button>
<el-button type="primary">立即申请</el-button>
</div></el-col>
</el-row>
</el-form>
</div></el-col>
</el-row>
<el-divider></el-divider>
<el-row class="first-row" >
<el-col :span="24"><div class="grid-content bg-purple-dark" >
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="API文档" name="first">
<el-form ref="form" :model="myapi" label-width="120px" :rules="rules">
<el-form-item label="接口地址:" >
{{myapi.productName}}
</el-form-item>
<el-form-item label="返回格式:">
{{myapi.productPrice}}元/次
</el-form-item>
<el-form-item label="请求方式:">
{{myapi.productContent}}
</el-form-item>
<el-form-item label="简介:">
{{myapi.productContent}}
</el-form-item>
<el-form-item label="请求参数说明:">
{{myapi.productContent}}
</el-form-item>
<el-form-item label="返回参数说明:">
{{myapi.productContent}}
</el-form-item>
<el-form-item label="JSON返回示例:">
{{myapi.productContent}}
</el-form-item>
<el-form-item label="XML返回示例:">
{{myapi.productContent}}
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="错误码参照" name="second">错误码参照</el-tab-pane>
<el-tab-pane label="数据统计" name="third">数据统计</el-tab-pane>
</el-tabs>
</div></el-col>
</el-row>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
export default {
name: "Apitest",
//import引入的组件需要注入到对象中才能使用"
components: {},
props: {},
data() {
//这里存放数据"
return {
myapi: {
productName: '',
productPrice: '',
productContent: ''
},
activeName: 'first'
};
},
//计算属性 类似于data概念",
computed: {},
//监控data中的数据变化",
watch: {},
//方法集合",
methods: {
//标签页
handleClick(tab, event) {
console.log(tab, event);
}
},
//生命周期 - 创建完成（可以访问当前this实例）",
created() {
},
//生命周期 -` 挂载完成（可以访问DOM元素）",
mounted() {
this.myapi = this.$route.query.myapi
if (typeof this.myapi === 'string' && this.myapi.trim() !== '') {
try {
this.myapi = JSON.parse(this.myapi);
} catch (error) {
console.error('Failed to parse JSON:', error);
// 可以设置一个错误处理逻辑，比如将 myapi 设置为空对象
this.myapi = {};
}
}
},
beforeCreate() {
}, //生命周期 - 创建之前",
beforeMount() {
}, //生命周期 - 挂载之前",
beforeUpdate() {
}, //生命周期 - 更新之前",
updated() {
}, //生命周期 - 更新之后",
beforeDestroy() {
}, //生命周期 - 销毁之前",
destroyed() {
}, //生命周期 - 销毁完成",
activated() {
} //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>
.first-row {
margin-bottom: 20px; /* 创建一个空间，以便可以清晰地看到边框 */
}
</style>

68
src/views/market/myapi/index.vue
View File

@ -8,8 +8,7 @@
<el-row>
<el-col :span="20"><div class="grid-content bg-purple">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item prop="couponName">
<el-select v-model="value" placeholder="请选择状态">
<el-select v-model="ruleForm.productState" placeholder="请选择状态">
<el-option
v-for="item in options"
:key="item.value"
@ -17,13 +16,37 @@
:value="item.value">
</el-option>
</el-select>
<el-input type="text" v-model="ruleForm.couponName" style="width: 200px" autocomplete="off" placeholder="关键词搜索"></el-input>
<el-input type="text" v-model="ruleForm.productName" style="width: 200px" autocomplete="off" placeholder="名称搜索"></el-input>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
</el-form-item>
</el-form>
</div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"><el-button type="primary">新增数据</el-button></div></el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="8" v-for="myapi in myapiList" :key="index" >
<el-card class="box-card" >
<div slot="header" class="clearfix">
<el-form ref="form" :model="myapi" label-width="120px" :rules="rules">
<el-form-item label="产品名称">
<el-input v-model="myapi.productName">{{myapi.productName}}}</el-input>
</el-form-item>
<el-form-item label="产品价格">
<el-input v-model="myapi.productPrice">{{myapi.productPrice}}}</el-input>
</el-form-item>
<el-form-item label="产品介绍">
<el-input v-model="myapi.productContent">{{myapi.productContent}}}</el-input>
</el-form-item>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple">
<el-button type="info" @click="test(myapi)">测试</el-button>
</div></el-col>
</el-row>
</el-form>
</div>
</el-card>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
@ -35,7 +58,10 @@
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
export default {
import myapi from "@/views/market/myapi/index.vue";
import {selectmyapiList} from "@/api/market/myapi";
export default {
name: 'Myapi',
//import引入的组件需要注入到对象中才能使用"
components: {},
@ -44,6 +70,8 @@
//这里存放数据"
return {
myapiList:[],
myapi:{},
ruleForm:{},
options: [{
value: '选项1',
@ -62,13 +90,39 @@
};
},
//计算属性 类似于data概念",
computed: {},
computed: {
myapi() {
return myapi
}
},
//监控data中的数据变化",
watch: {},
//方法集合",
methods: {},
methods: {
//我购买的api列表
getList(){
selectmyapiList(this.ruleForm).then(response=>{
this.myapiList=response.data
})
},
//查询
submitForm(){
this.getList()
},
//测试
test(myapi) {
if (myapi && myapi.productAddress) {
let url = myapi.productAddress; // 使用 product.address 的值
window.open(url, '_blank'); // 在新标签页中打开 URL
} else {
console.error('无效的 address 或 product 未定义');
// 或者您可以根据需要处理错误情况
}
}
},
//生命周期 - 创建完成（可以访问当前this实例）",
created() {
this.getList()
},
//生命周期 - 挂载完成（可以访问DOM元素）",
mounted() {

59
src/views/market/product/index.vue
View File

@ -1,30 +1,34 @@
<template>
<div>
<span>产品名称</span>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item prop="couponName">
<el-input type="text" v-model="ruleForm.couponName" style="width: 200px" autocomplete="off" placeholder="关键词搜索"></el-input>
<el-form-item prop="productName">
<el-input type="text" v-model="ruleForm.productName" style="width: 200px" autocomplete="off" placeholder="关键词搜索"></el-input>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
</el-form-item>
</el-form>
<span>产品名称</span>
<el-row :gutter="12">
<el-col :span="8" v-for="product in productList" :key="index" >
<el-row :gutter="12" class="mb8">
<el-col :span="8" v-for="(product,index) in productList" :key="index" >
<el-card class="box-card" >
<div slot="header" class="clearfix">
<el-form ref="form" :model="product" label-width="120px" :rules="rules">
<el-form-item label="产品名称">
<el-input v-model="product.productName">{{product.productName}}}</el-input>
<el-form-item label="产品名称:">
<el-textarea v-model="product.productName">{{product.productName}}</el-textarea>
</el-form-item>
<el-form-item label="产品价格">
<el-input v-model="product.productPrice">{{product.productPrice}}}</el-input>
<el-form-item label="产品价格:">
<el-textarea v-model="product.productPrice">￥{{product.productPrice}}</el-textarea>
</el-form-item>
<el-form-item label="产品介绍">
<el-input v-model="product.productContent">{{product.productContent}}}</el-input>
<el-form-item label="产品介绍:">
<el-textarea v-model="product.productContent">{{product.productContent}}</el-textarea>
</el-form-item>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"><el-button type="info">测试</el-button></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple">
<el-button type="info" @click="test(product)">测试</el-button>
</div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"><el-button type="primary">立即申请</el-button></div></el-col>
</el-row>
</el-form>
@ -56,7 +60,7 @@ export default {
//产品列表
productList:[],
product:{},
ruleForm:{}
ruleForm:{},
};
},
//计算属性 类似于data概念",
@ -74,6 +78,23 @@ export default {
//查询
submitForm(){
this.getList()
},
//接口测试页面
// test(product){
// // let url = `http://21.12.0.10/prod-api/doc.html#/cloud-market/客户控制层/findListByuserPhone?userId=${this.userId}`;
// let url = `product`;
// window.open(url, '_blank'); // 在新标签页中打开 URL
//
// // this.$router.push({path:"/apitest/index",query:{myapi:JSON.stringify(product)}})
// },
test(product) {
if (product && product.productAddress) {
let url = product.productAddress; // 使用 product.address 的值
window.open(url, '_blank'); // 在新标签页中打开 URL
} else {
console.error('无效的 address 或 product 未定义');
// 或者您可以根据需要处理错误情况
}
}
},
//生命周期 - 创建完成（可以访问当前this实例）",
@ -100,12 +121,10 @@ export default {
};
</script>
<style scoped>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
.box-card{
margin: 10px 0;
}
/*.box-card:not(:last-child) {*/
/* margin-bottom: 20px; !* 你可以根据需要调整这个值 *!*/
/*}*/
</style>