フロントエンドの一般的な静的ページを書き込んだ後、バックエンドからデータを取得する必要があり、インターフェースする必要があります。率直に言うと、接続インターフェイスはネットワーク リクエストを送信し、バックエンドからデータを取得し、そのデータをページにレンダリングすることです。
今日は、単純な uniapp プロジェクトを例にして、インターフェースの書き方を紹介します。
まず、request.jsファイル(名前は任意で、リクエストをカプセル化したファイルです)をカプセル化するのですが、カプセル化はリクエストコードの繰り返しを減らすためのものです。
これは uniapp のカプセル化です (この uniapp はアプリなので axios は必要なく、Web は通常 axios でカプセル化されています) 実際、
request は関数であり、呼び出し後に Promise オブジェクトを返します。
// 同时发送多个请求的次数
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()
}
}
})
})
}
次に、axios のパッケージも見ることができます。
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;
})
次に、2 番目のステップとして、誰もが自分が担当するページのインターフェイスを作成できるようにします (各インターフェイスをコピーし、関数名とパラメーターを変更します)。
//刚才封装好的文件引入
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'
})
}
インターフェイスを作成した後、対応するページに移動して適用します。
3 番目のステップは、リクエストをトリガーすることです (リクエスト、ボタンのクリック、ライフサイクルなど、リクエストをトリガーする状況は数多くあります。これはページの特定の状況によって異なります)。
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)
})
},
}
}
4 番目のステップでは、ブラウザでステータスをリクエストし、Google Chrome 開発者ツールのネットワークを開いてリクエストのステータスを確認します。
下の図は、ボタンをクリックした後に送信されたリクエストを示しています。なぜこれが create と呼ばれるかというと、インターフェイスの URL が create という名前で、2 行目の 200 がリクエストのステータス コードであるためです (200 はリクエストが成功したことを意味し、40x、40x は通常、フロントエンドのリクエストの書き方が間違っています、自分で確認してください、50x、50以上はバックエンドの問題です)
ネットワーク上に作成リクエストが存在しない場合は送信されないので、原因は自分で確認する必要がありますが、
このリクエストをクリックすると色々なことがわかります。
headers: ここでは、リクエスト ヘッダーとレスポンス ヘッダーが確認できます。また、リクエスト内に項目 Authorization: Bearer test1 があることもわかります。これは、request.js にカプセル化されたペイロードです。これはリクエスト パラメーターです。 Response: です。
バック
エンドの応答データ
クロスドメインの問題に対して一般的に使用されるフロントエンドの解決策は、
プロジェクトのルート ディレクトリに vue.config.js ファイルを作成し、次の内容を記述することであることを 付け加えておきます。
module.exports = {
devServer:{
port:'8080',//端口比如8080等等
disableHostCheck:true,
proxy:{
'/api':{
target:'',//后端给的地址
changeOrigin:true,//确定跨域
pathRewrite:{
'^/api': ''//这个就是以在写请求的时候加上这个api,然后这里重写去掉api
}
}
}
}
}
基本的にそれだけです。あなたがプロジェクト リーダーの場合は、通常、リクエストをカプセル化し、クロスドメインを処理します。プロジェクト メンバーは通常、独自のインターフェイスを作成します。おそらく次のようなものです。気に入ったら、スターを付けてください。
—————————————————
著作権表示: この記事は CSDN ブロガー「No Name Hahaha」のオリジナル記事であり、CC 4.0 BY-SA 著作権契約に従い、元の情報源を添付してくださいリンクとこの声明。
元のリンク: https://blog.csdn.net/m0_52536354/article/details/126036858