大型网站团队人数,泉州企业网站维护制作,wordpress移动适配,七台河做网站文章目录一、前端1. 封装网络请求2. 封装模块请求方法二、后端2.1. 返回对象2.2. 热搜接口三、微信模拟请求3.1. Network3.2. Console一、前端
1. 封装网络请求
创建 utils 文件夹创建 request.js #xff0c;封装请求对象
// const BASE_URL https://api.imooc-blog.lgds…
文章目录一、前端1. 封装网络请求2. 封装模块请求方法二、后端2.1. 返回对象2.2. 热搜接口三、微信模拟请求3.1. Network3.2. Console一、前端
1. 封装网络请求
创建 utils 文件夹创建 request.js 封装请求对象
// const BASE_URL https://api.imooc-blog.lgdsunday.club/api;
const BASE_URL http://127.0.0.1:8080;
function request({ url, data, method }) {return new Promise((resolve, reject) {// 发起网络请求uni.request({url: BASE_URL url,data,method,success: ({ data }) {// 响应成功获取数据解析数据if (data.success) {resolve(data);} else {// 响应失败给用户提示uni.showToast({title: data.message,icon: none,mask: true,duration: 3000,});reject(data.message);}},fail: (error) {reject(error);},complete: () {// 关闭加载uni.hideLoading();},});});
}export default request;后端需要按照前的接收的对象封装后端返回的对象 2. 封装模块请求方法 原则每个模块都有自己的请求管理api 创建 api 文件夹创建 hot 文件封装 hot 相关的请求方法 hot.js
import request from ../utils/request;export function getHotTabs() {return request({url: /hot/tabs});
}数据列表
templateview classhot-containerview v-for(item, index) in tabData :keyindex{{ item.label }} - {{ index }}/view/view
/templatescript
import { getHotTabs } from api/hot;
export default {data() {return {tabData: [],};},// 组件实例配置完成但是DOM尚未渲染进行网络请求配置响应数据created() {this.loadHotTabs();},methods: {/*** 获取热搜标题数据*/async loadHotTabs() {// uniapp 支持 async awaitconst res await getHotTabs();this.tabData res.content;console.log(res, res.content);},},
};
/scriptstyle langscss/style二、后端
2.1. 返回对象
package com.gblfy.wx.miniapp.vo;/*** 返回封装对象** author gblfy* date 2022-01-02*/
public class ResponseDtoT {/*** 业务上的成功或失败*/private boolean success true;/*** 返回码*/private String code;/*** 返回信息*/private String message;/*** 返回泛型数据自定义类型*/private T content;public String getCode() {return code;}public void setCode(String code) {this.code code;}public boolean getSuccess() {return success;}public void setSuccess(boolean success) {this.success success;}public String getMessage() {return message;}public void setMessage(String message) {this.message message;}public T getContent() {return content;}public void setContent(T content) {this.content content;}Overridepublic String toString() {final StringBuffer sb new StringBuffer(ResponseDto{);sb.append(success).append(success);sb.append(, code).append(code).append(\);sb.append(, message).append(message).append(\);sb.append(, content).append(content);sb.append(});return sb.toString();}
}
2.2. 热搜接口
package com.gblfy.wx.miniapp.controller;import com.gblfy.wx.miniapp.vo.ResponseDto;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** 热搜列表用于测试前后端数据交互** author gblfy* date 2022-01-02*/
RestController
public class HotController {GetMapping(/hot/tabs)public ResponseDto hotList() {MapString, Object map new HashMap();map.put(id, 1);map.put(label, 热榜);MapString, Object map2 new HashMap();map2.put(id, 2);map2.put(label, 热榜2);MapString, Object map3 new HashMap();map3.put(id, 3);map3.put(label, 热榜3);MapString, Object map4 new HashMap();map4.put(id, 4);map4.put(label, 热榜4);MapString, Object map5 new HashMap();map5.put(id, 5);map5.put(label, 热榜5);ListMapString, Object list new ArrayList();list.add(map);list.add(map2);list.add(map3);list.add(map4);list.add(map5);ResponseDto dto new ResponseDto();dto.setContent(list);return dto;}
}三、微信模拟请求
3.1. Network 3.2. Console
