目录
swagger接口文档
运行效果
代码演示
api->api.ts
import Request from '@/api/request.ts'
var request = new Request().http
//文章list接口
interface ArticleList {
parentId: string,
pageNumVO: {
current: number,
size: number
}
}
export function getArticleList(data:ArticleList) {
return request({
url: "/article-category/toFrontArticles",
method: "post",
data
})
}
api->request.ts
//后台请求根路径
var baseURL="https://www.xxxx.com/"
export default class Request {
http(param) {
// 请求参数
var url = param.url,
method = param.method,
header = {
'content-type': "application/json"
},
data = param.data || {},
token = param.token || "",
hideLoading = param.hideLoading || false;
//拼接完整请求地址
var requestUrl = baseURL + url;
//请求方法
if (method) {
method = method.toUpperCase(); //小写改为大写
}
//加载圈
if (!hideLoading) {
uni.showLoading({
title: '加载中...'
});
}
// 返回promise
return new Promise((resolve, reject) => {
// 请求
uni.request({
url: requestUrl,
data: data,
method: method,
header: header,
success: (res) => {
// 判断 请求api 格式是否正确
if (res.statusCode && res.statusCode != 200) {
uni.showToast({
//后台把错误请求信息放在msg中 你们可以根据自己公司的规格来
title: res.data.msg,
icon: 'none'
});
return;
}
// 将结果抛出
resolve(res.data)
},
//请求失败
fail: (e) => {
uni.showToast({
title: "" + e.data.msg,
icon: 'none'
});
resolve(e.data);
},
//请求完成
complete() {
//隐藏加载
if (!hideLoading) {
uni.hideLoading();
}
resolve();
return;
}
})
})
}
}
pages->details->details.vue
<template>
<view>
<h2>文章列表</h2>
<view class="btn">
</view>
</view>
</template>
<script setup>
import {
getArticleList
} from '../../api/api.ts'
import { onMounted, reactive } from "vue";
import { InitData } from "../../type/article";
//文章列表数据定义
const artList = reactive(new InitData());
//获取文章list
const getlist = () => {
getArticleList(artList.articleList)
.then((res) => {
console.log("请求数据");
console.log(res.data);
artList.list = res.data;
})
}
//生命周期函数 调用方法请求接口
onMounted(()=>{
getlist();
})
</script>
<style>
</style>
type->article.ts
//文章列表数据类型
export interface ListInt {
pkId: string,
articleName: string,
author: string,
synopsis: boolean,
gmtModified: string,
showPicUrl: string,
}
//文章list接口
interface ArticleList {
parentId: string,
pageNumVO: {
//当前页
current: number,
//每页显示条数
size: number
}
}
export class InitData {
//分页
articleList: ArticleList = {
parentId: "1521836474786492416",
pageNumVO: {
//当前页
current: 1,
//每页显示条数
size: 10
}
}
//展示的内容数据
list: ListInt[] = []
}