最近、vben admin を使用してバックエンド管理システムを開発しています。vben admin のバックエンド フレームワークは非常にカプセル化されており、粒度が非常に細かいため、コンポーネントや API の使用法を理解していれば、非常に早く開発できます。現在、vben 管理開発の問題に関するブログは非常に少ないため、見つけにくい問題もあります。そんな過程を経てきたので、使える学生が遠回りしないようにと思い、開発中に遭遇した問題点をまとめてみました。
1. インターフェースリクエストによって返されたデータ構造が現在のテーブルコンポーネントと一致しない場合はどうすればよいですか?
まず、最初に遭遇した問題は、バックエンドはデータを返しましたが、データ構造とデータ名が私が望んでいたものではなかったということでした。これは、テーブル コンポーネントがカプセル化されており、フィールド名もあらかじめ決められていたためです。バックエンドから返されるデータ構造とデータ名は異なりますか?
まずはコードを見てください
// 获取页面的列表数据
// getRuleList();
const [registerTable, {
getRawDataSource, reload, updateTableDataRecord, getForm }] = useTable({
api: getRuleList,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showResetButton: false,
showSubmitButton: false,
},
beforeFetch: (params) => {
params.ruleId = query.ruleId;
return params;
},
afterFetch: (data) => {
console.log('-------------------请求之后的参数处理---------');
// 获取接口的原始数据
getRawData();
return data;
},
useSearchForm: true,
bordered: true,
showIndexColumn: false,
});
getRuleList インターフェイスの場合、返されるデータ構造は次のようになります。
{
code:2000
message:null,
data:{
list: [....],
last: 161,
count: 1610,
pageNo: 1,
pageSize: 10,
}
}
ただし、バックエンドによって返されるデータ構造は次のようになります。
{
resultCode:2000
resultMessage:null,
resultData:{
records: [....],
pageCount: 161,
totalCount: 1610,
pageNum: 1,
pageSize: 10,
}
}
現時点では、インターフェイス要求データが返された後に変換レイヤーを実行する必要があります。
コードは以下のように表示されます:
//获取客户资料列表
export const getRuleList = (params: any) => {
return new Promise((resolve, reject) => {
defHttp
.post<any>(
{
url: Api.GetRuleList,
params,
}
)
.then((res) => {
console.log('-----------列表返回的数据------------');
console.log(res);
resolve({
code:res.resultCode,
message:res.message,
data:{
list: res.resultData.records,
last: res.resultData.pageCount,
count: res.resultData.totalCount,
pageNo: res.resultData.pageNum,
pageSize: res.resultData.pageSize,
}
});
});
});
};
変換層を経ると、現在のデータ構造はこの要件を満たします。
この問題は解決され、フォーム データがレンダリングされます。
しかし、新しいデータが到着しました。ページに検索フォームがある場合、フォーム内のデータを反転表示するにはどうすればよいでしょうか?
2. フォームとテーブルが含まれるページで、フォーム データを反転して表示するにはどうすればよいですか?
この問題は 2 つのステップで完了する必要があります。最初のステップはフォーム データを取得することであり、2 番目のステップはフォームに値を割り当てることです。
テーブルデータは反転表示できるが、フォームデータが取得できないため、この問題が発生しました。
// 获取页面的列表数据
// getRuleList();
const [registerTable, {
getRawDataSource, reload, updateTableDataRecord, getForm }] = useTable({
api: getRuleList,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showResetButton: false,
showSubmitButton: false,
},
// 请求数据接口之前的处理函数
beforeFetch: (params) => {
params.ruleId = query.ruleId;
return params;
},
// 请求接口数据之后的处理函数
afterFetch: (data) => {
console.log('-------------------请求之后的参数处理---------');
// 获取接口的原始数据并给表单赋值，使表单反显
getRawData();
return data;
},
useSearchForm: true,
bordered: true,
showIndexColumn: false,
});
1. 最初のステップの問題を解決します: フォームデータを取得します
afterFetch 処理関数で印刷要求が戻ってきたとき、データは印刷されますが、印刷できません。この時点ではデータが何であるかはわかりませんが、後でレンダリングされたページ データから判断すると、データは次のとおりであるはずです。 res.data.list, list フォームデータは含まれておらず、テーブルデータのみが含まれています。では、元のリクエストデータを取得するにはどうすればよいでしょうか?
vben admin ではインターフェースの元データを取得するメソッド getRawDataSource を useTable 内に用意しており（コード内での導入方法をご覧ください）、この際にフォームデータを取得することができます。
// 获取接口的原始数据
// getRawData();
// 获取接口的完整数据
function getRawData() {
console.log('请在控制台查看！');
console.log(getRawDataSource());
// 获取到请求回来的原始数据，然后对原始数据赋值
let getFormData = getRawDataSource();
// 第一步 拿到表单数据
fromData.name = getFormData.data.name;
fromData.departmentName = getFormData.data.departmentName;
fromData.field = getFormData.data.field;
fromData.scenarioName = getFormData.data.scenarioName;
fromData.applicableUserName = getFormData.data.applicableUserName;
console.log('---------------form表单-----------------');
console.log(fromData);
// 第二步 对表单数据进行赋值
let form = getForm();
console.log('---------------获取到的form表单数据-----------------');
console.log(form);
getForm().setFieldsValue({
datalistName: fromData.departmentName,
department: fromData.departmentName,
field: fromData.field,
UsageScenario: fromData.scenarioName,
applicableUser: fromData.applicableUserName,
});
}
2. 2 番目のステップで問題を解決します。取得したデータをフォームに割り当てます。
useTableにはgetFormメソッドが用意されており、getFormメソッドにはフォームを処理するための様々なメソッドが含まれており、フォームに値を代入するメソッドはフォームデータを設定するメソッドであるsetFieldsValueです。(上記の最初のステップのコードには、2 番目のステップのコードも含まれています)
// 第二步 对表单数据进行赋值
let form = getForm();
console.log('---------------获取到的form表单数据-----------------');
console.log(form);
getForm().setFieldsValue({
datalistName: fromData.departmentName,
department: fromData.departmentName,
field: fromData.field,
UsageScenario: fromData.scenarioName,
applicableUser: fromData.applicableUserName,
});
最初のステップと 2 番目のステップの問題は解決されましたが、getRawData を呼び出してデータを取得し、値を割り当てるステップがまだ 1 つ残っています。
現時点では、afterFetch を使用し、afterFetch で getRawData を呼び出します。これで私の問題は完全に解決されます。
はい、以上です。今後新しい概要を発行する予定です。皆様のお役に立てれば幸いです。