Nachdem die allgemeine statische Front-End-Seite geschrieben wurde, müssen Daten vom Back-End abgerufen und eine Schnittstelle hergestellt werden. Um es ganz klar auszudrücken: Die Verbindungsschnittstelle besteht darin, Netzwerkanforderungen zu senden, Daten vom Backend abzurufen und die Daten dann auf der Seite zu rendern.
Heute werde ich ein einfaches Uniapp-Projekt als Beispiel nehmen, um vorzustellen, wie die Schnittstelle geschrieben wird.
Zunächst geht es darum, eine request.js-Datei zu kapseln (der Name wird selbst ausgewählt, es handelt sich um eine Datei, die die Anforderung kapselt), und die Kapselung dient dazu, wiederholte Anforderungscodes zu reduzieren.
Dies ist die Kapselung von Uniapp (da diese Uniapp eine App ist und daher keine Axios benötigt und das Web im Allgemeinen mit Axios gekapselt ist). Tatsächlich
ist die Anforderung eine Funktion und gibt nach dem Aufruf ein Versprechensobjekt zurück.
// 同时发送多个请求的次数
let ajaxTimes = 0;
//h5端才存在跨域,App端没有跨域
let baseUrl =' ' ; //这个地址是后端给的，可以从后端的接口文档看
// #ifdef H5
baseUrl = '/api/'; //这个重写是因为h5端会存在跨域（跨域是什么自行查询）
// #endif
export const request = (params) => {
// 避免覆盖传递过来的header
let header = {
...params.header
}
//请求头要带token（为什么要带token自行查询）
const token = uni.getStorageSync('token')
if (token) {
header['Authorization'] = 'Bearer '+token
}
ajaxTimes++;
// 显示加载中 效果
uni.showLoading({
title: '加载中',
mask: true
});
return new Promise((resolve, reject) => {
uni.request({
url: baseUrl + params.url,
data: {
...params.data,
},
header: header,
method: params.method,
success: (response) => {
//请求成功的处理
},
fail: (err) => {
//请求失败的处理
},
complete: () => {
//请求完毕的处理
ajaxTimes--;
//请求处理完毕
if(ajaxTimes===0){
uni.hideLoading()
}
}
})
})
}
Dann können Sie sich auch das Paket von axios ansehen
import axios from "axios";
import router from "../router";
const Host = ;
const baseURL = ;
let fullURL = Host + baseURL
const headerTokenKey = ''
//创建一个axios实例
export const request = axios.create({
baseURL: fullURL,
timeout: 10 * 1000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
}
})
//请求拦截器，就是请求前做一些检查
request.interceptors.request.use(
function (config) {
if (!window.localStorage.getItem(headerTokenKey)) {
console.log("没有token");
} else {
console.log(window.localStorage.getItem(headerTokenKey));
config.headers[headerTokenKey] = window.localStorage.getItem(headerTokenKey);
}
return config;
},
function (error) {
return Promise.reject(error);
}
)
//响应拦截器，对响应结果做一些处理
request.interceptors.response.use(response => {
console.log("response")
console.log(response)
console.log(response.data.code)
if (response.data.code == 506) {
console.log("没有操作权限");
router.replace({
path: '/login'
})
return response;
}
else
return response;
})
Der zweite Schritt besteht dann darin, dass jeder die Schnittstelle der Seite schreiben kann, für die er verantwortlich ist (kopieren Sie jede Schnittstelle und ändern Sie dann den Funktionsnamen und die Parameter).
//刚才封装好的文件引入
import {request} from '@/api/request.js'
//导出这样的一个test函数就是一个接口
export function test(params){
//可以看到这里的request函数调用了，所以它返回了一个promise
//对象，所以调用test函数就会return一个promise对象，
return request({
//传入的参数是对应后端给的接口的url,参数，还有请求方法
url:'/ms/account/create',
data:params,
method:'POST'
})
}
Gehen Sie nach dem Schreiben einer Schnittstelle zur entsprechenden Seite, um sie anzuwenden.
Der dritte Schritt besteht darin, die Anfrage auszulösen (es gibt viele Situationen, in denen die Anfrage ausgelöst werden kann, der Klick auf die Schaltfläche, der Lebenszyklus, dies hängt von der spezifischen Situation der Seite ab).
template>
<view>
<text>请求篇</text>
<button @click="send()">POST请求</button>
</view>
</template>
<script>
//导入test接口，通过按钮点击事件触发请求
import {test} from '@/api/try.js'
export default{
data(){
return {
listData: [],
data:'数据',
params:{
"message": "[{\"id\": \"序号1\",\"deviceName\": \"设备名称\",\"managerNumber\": \"管理编号\",\"brand\": \"品牌\",\"type\": \"型号\",\"factoryNumber\": \"出厂编号\",\"nominalAccuracy\": \"标称精度\",\"checkDate\": \"检定日期\",\"certificate\": \"证书编号\",\"ackCycle\": \"确认周期\",\"enpiryTime\": \"有效期至\",\"state\": \"仪器状态\",\"projectName\": \"所在项目\",\"keeper\": \"保管人\",\"note\": \"备注\"},{\"id\": \"序号2\",\"deviceName\": \"设备名称\",\"managerNumber\": \"管理编号\",\"brand\": \"品牌\",\"type\": \"型号\",\"factoryNumber\": \"出厂编号\",\"nominalAccuracy\": \"标称精度\",\"checkDate\": \"检定日期\",\"certificate\": \"证书编号\",\"ackCycle\": \"确认周期\",\"enpiryTime\": \"有效期至\",\"state\": \"仪器状态\",\"projectName\": \"所在项目\",\"keeper\": \"保管人\",\"note\": \"备注\"},{\"id\": \"序号31\",\"deviceName\": \"设备名称\",\"managerNumber\": \"管理编号\",\"brand\": \"品牌\",\"type\": \"型号\",\"factoryNumber\": \"出厂编号\",\"nominalAccuracy\": \"标称精度\",\"checkDate\": \"检定日期\",\"certificate\": \"证书编号\",\"ackCycle\": \"确认周期\",\"enpiryTime\": \"有效期至\",\"state\": \"仪器状态\",\"projectName\": \"所在项目\",\"keeper\": \"保管人\",\"note\": \"备注\"}]",
"uploader": "张三",
"accountTime": "2016-08-11",
"accountName": "仪器设备台账",
"accountYear": "2016"
},
}
},
methods:{
send(){
//在点击事件里触发请求，上一步说了test调用后是一个promise对象，所以这里就通过then，catch处理请求情况
test(this.params).then(res=>{
console.log('成功')
console.log(res)
}).catch(err=>{
console.log('错误')
console.log(err)
})
},
}
}
Im vierten Schritt können wir dann den Status im Browser anfordern und das Netzwerk der Google Chrome-Entwicklertools öffnen, um den Anforderungsstatus zu überprüfen.
Das Bild unten zeigt die Anforderung, die nach dem Klicken auf die Schaltfläche gesendet wird. Warum heißt sie „Erstellen“, weil die Schnittstellen-URL „Erstellen“ heißt und in der zweiten Zeile 200 der Statuscode der Anforderung ist (200 bedeutet, dass die Anforderung erfolgreich ist, 40x, 40x steht im Allgemeinen dort). Anfrage im Frontend ist falsch geschrieben, überprüfen Sie es selbst, 50x, mehr als 50 ist das Problem des Backends)
Wenn im Netzwerk keine Erstellungsanfrage vorhanden ist, wird diese nicht gesendet. Sie müssen den Grund selbst überprüfen.
Wenn Sie auf diese Anfrage klicken, können Sie viele Dinge sehen.
Header: Hier können Sie den Anforderungsheader und den Antwortheader sehen. Außerdem können wir sehen, dass die Anforderung ein Element Authorization: Bearer test1 enthält, bei dem es sich um die in request.js gekapselte Nutzlast handelt: Es handelt sich um den Anforderungsparameter Response: Dies ist der Fall die Antwortdaten
des
Backends
Ich möchte hinzufügen, dass die häufig verwendete Front-End-Lösung für domänenübergreifende Probleme
darin besteht, eine vue.config.js-Datei im Stammverzeichnis des Projekts zu erstellen und den folgenden Inhalt zu schreiben
module.exports = {
devServer:{
port:'8080',//端口比如8080等等
disableHostCheck:true,
proxy:{
'/api':{
target:'',//后端给的地址
changeOrigin:true,//确定跨域
pathRewrite:{
'^/api': ''//这个就是以在写请求的时候加上这个api,然后这里重写去掉api
}
}
}
}
}
Im Grunde ist das alles. Wenn Sie der Projektleiter sind, werden Sie in der Regel die Anfrage kapseln und domänenübergreifend abwickeln. Die Projektmitglieder schreiben im Allgemeinen ihre eigenen Schnittstellen. Das ist wahrscheinlich so. Wenn es Ihnen gefällt, geben Sie ihm einen Stern.
—————————————————
Copyright-Erklärung: Dieser Artikel ist ein Originalartikel des CSDN-Bloggers „No Name Hahaha“. Gemäß der CC 4.0 BY-SA-Copyright-Vereinbarung fügen Sie bitte die Originalquelle bei Link und diese Aussage.
Ursprünglicher Link: https://blog.csdn.net/m0_52536354/article/details/126036858