如何配置 JSON 服务器支持特定的查询字符串参数?
How to configure JSON Server to support specific query string parameters?
我查看了json服务器添加配置:https://github.com/typicode/json-server/#add-custom-routes
因为我想在开发环境中的应用程序中添加对查询字符串参数的支持。
routes.json
:
{
"/api/v1/*": "/",
}
/api-faked/db.json
:
{
"operations?code=": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
"operations?code=adi": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
"operations?code=adid": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
"operations?code=adida": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
"operations?code=adidas": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
"operations?code=adidas1": [{"operationCode":"ADIDAS101"}],
"operations?code=adidas10": [{"operationCode":"ADIDAS101"}],
"operations?code=adidas101": [{"operationCode":"ADIDAS101"}],
"operations?code=adidas9": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"}],
"operations?code=adidas96": [{"operationCode":"ADIDAS96"}],
"operations?code=adidas99": [{"operationCode":"ADIDAS99"}],
}
应用程序 运行 具有:
{
"name": "rm-combo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "concurrently -k \"json-server --watch api-faked/db.json --routes api-faked/routes.json --ro\" \"vue-cli-service serve\"",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...
启动应用程序时:
[1] INFO Starting development server...
[0]
[0] \{^_^}/ hi!
[0]
[0] Loading api-faked/db.json
[0] Loading api-faked/routes.json
[0] Done
[0]
[0] Resources
[0] http://localhost:3000/operations?code=
[0] http://localhost:3000/operations?code=adi
[0] http://localhost:3000/operations?code=adid
[0] http://localhost:3000/operations?code=adida
[0] http://localhost:3000/operations?code=adidas
[0] http://localhost:3000/operations?code=adidas1
[0] http://localhost:3000/operations?code=adidas10
[0] http://localhost:3000/operations?code=adidas101
[0] http://localhost:3000/operations?code=adidas9
[0] http://localhost:3000/operations?code=adidas96
[0] http://localhost:3000/operations?code=adidas99
...
有点奇怪的是折叠起来,上面的资源显示JSON服务器生成的资源中没有/api/v1/
段。
很明显,当我在端点上执行 GET 操作时,例如:
http://localhost:3000/api/v1/operations?code=
或
http://localhost:3000/operations?code=adidas1
我收到 404。
但是如果我添加到 db.json
:
"operations": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
然后 /api/v1/operations?code=whatever
上的任何 GET 请求都将 return(不管 code
查询字符串如何)将 return operations
中给出的对象 [= =25=].
我怎样才能有一个 JSON 服务器 运行ning 遵守 /api-faked/db.json
中给出的查询字符串配置,即:
/api/v1/operations?code=adidas101
和/api/v1/operations?code=adidas99
return两个不同的结果。
设法使其适用于以下配置:
routes.json
{
"/api/v1/*": "/"
}
db.json
{
"operations": [
{
"code": "empty",
"operationCode": "EMPTY"
},
{
"code": "adidas96",
"operationCode": "ADIDAS96"
},
{
"code": "adidas99",
"operationCode": "ADIDAS99"
},
{
"code": "adidas101",
"operationCode": "ADIDAS101"
},
{
"code": "vpe_ultima2",
"operationCode": "VPE_ULTIMA2"
}
],
"stockaccountingdata": [
{
"operationId": "ADIDAS96",
"codeStock":"STO61177",
"companyName":"ICM (INTERNATIONAL)",
"contractualTypology":"ACHAT/REVENTE",
"vatCode":null
},
{
"operationId": "ADIDAS99",
"codeStock":"STO69084",
"companyName":"ICM (INTERNATIONAL)",
"contractualTypology":"ACHAT/REVENTE",
"vatCode":null
},
{
"operationId": "ADIDAS101",
"codeStock":"STO73106",
"companyName":"ICM (INTERNATIONAL)",
"contractualTypology":"ACHAT/REVENTE",
"vatCode":null
},
{
"operationId": "ADIDAS101",
"codeStock":"STO77162",
"companyName":"ICM (INTERNATIONAL)",
"contractualTypology":"ACHAT/REVENTE",
"vatCode":null
},
{
"operationId": "VPE_ULTIMA2",
"codeStock":"STO73220",
"companyName":"PPK",
"contractualTypology":"EN MANDAT",
"vatCode":"FR51442790366"
}
],
"virtualshipping": [
{
"operationId": "VPE_ULTIMA2",
"operationCode":"VPE_ULTIMA2",
"siteId":0,
"createdOn":"0001-01-01T00:00:00"
}
]
}
在 TypeScript 突变代码(即 Vuex)代码中的 axios 端:
const isDevEnvironment = process.env.NODE_ENV && process.env.NODE_ENV === "development";
const operationsApiUrl = `${process.env.VUE_APP_API_URL}/v1/operations`;
const suggestionCount = 10;
const minLength = 3;
// See https://github.com/typicode/json-server/issues/530#issuecomment-512733522
function getOperationCodeParams(searchedOperationCode: string): AxiosRequestConfig {
if (isDevEnvironment) {
return {
params: {
code_like: searchedOperationCode,
},
};
}
return {
params: {
code: searchedOperationCode,
},
};
}
// [...]
async [Actions.fetchOperationCodeSuggestions]({ commit }, searchedOperationCode: string): Promise<void> {
if (searchedOperationCode && searchedOperationCode.length >= minLength) {
try {
const url = `${operationsApiUrl}/`;
const result = await axios.get<IOperationCode[]>(url, getOperationCodeParams(searchedOperationCode));
const operationCodesFetched = result.data;
const operationCodes = [...operationCodesFetched].map((o) => o.operationCode).sort().slice(0, suggestionCount);
commit(Mutations.setOperationCodeSuggestions, operationCodes);
} catch {
commit(Mutations.setOperationCodeSuggestions, []);
}
} else {
commit(Mutations.setOperationCodeSuggestions, []);
}
}
我查看了json服务器添加配置:https://github.com/typicode/json-server/#add-custom-routes
因为我想在开发环境中的应用程序中添加对查询字符串参数的支持。
routes.json
:
{
"/api/v1/*": "/",
}
/api-faked/db.json
:
{
"operations?code=": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
"operations?code=adi": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
"operations?code=adid": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
"operations?code=adida": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
"operations?code=adidas": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
"operations?code=adidas1": [{"operationCode":"ADIDAS101"}],
"operations?code=adidas10": [{"operationCode":"ADIDAS101"}],
"operations?code=adidas101": [{"operationCode":"ADIDAS101"}],
"operations?code=adidas9": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"}],
"operations?code=adidas96": [{"operationCode":"ADIDAS96"}],
"operations?code=adidas99": [{"operationCode":"ADIDAS99"}],
}
应用程序 运行 具有:
{
"name": "rm-combo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "concurrently -k \"json-server --watch api-faked/db.json --routes api-faked/routes.json --ro\" \"vue-cli-service serve\"",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...
启动应用程序时:
[1] INFO Starting development server...
[0]
[0] \{^_^}/ hi!
[0]
[0] Loading api-faked/db.json
[0] Loading api-faked/routes.json
[0] Done
[0]
[0] Resources
[0] http://localhost:3000/operations?code=
[0] http://localhost:3000/operations?code=adi
[0] http://localhost:3000/operations?code=adid
[0] http://localhost:3000/operations?code=adida
[0] http://localhost:3000/operations?code=adidas
[0] http://localhost:3000/operations?code=adidas1
[0] http://localhost:3000/operations?code=adidas10
[0] http://localhost:3000/operations?code=adidas101
[0] http://localhost:3000/operations?code=adidas9
[0] http://localhost:3000/operations?code=adidas96
[0] http://localhost:3000/operations?code=adidas99
...
有点奇怪的是折叠起来,上面的资源显示JSON服务器生成的资源中没有/api/v1/
段。
很明显,当我在端点上执行 GET 操作时,例如:
http://localhost:3000/api/v1/operations?code=
或
http://localhost:3000/operations?code=adidas1
我收到 404。
但是如果我添加到 db.json
:
"operations": [{"operationCode":"ADIDAS96"},{"operationCode":"ADIDAS99"},{"operationCode":"ADIDAS101"}],
然后 /api/v1/operations?code=whatever
上的任何 GET 请求都将 return(不管 code
查询字符串如何)将 return operations
中给出的对象 [= =25=].
我怎样才能有一个 JSON 服务器 运行ning 遵守 /api-faked/db.json
中给出的查询字符串配置,即:
/api/v1/operations?code=adidas101
和/api/v1/operations?code=adidas99
return两个不同的结果。
设法使其适用于以下配置:
routes.json
{
"/api/v1/*": "/"
}
db.json
{
"operations": [
{
"code": "empty",
"operationCode": "EMPTY"
},
{
"code": "adidas96",
"operationCode": "ADIDAS96"
},
{
"code": "adidas99",
"operationCode": "ADIDAS99"
},
{
"code": "adidas101",
"operationCode": "ADIDAS101"
},
{
"code": "vpe_ultima2",
"operationCode": "VPE_ULTIMA2"
}
],
"stockaccountingdata": [
{
"operationId": "ADIDAS96",
"codeStock":"STO61177",
"companyName":"ICM (INTERNATIONAL)",
"contractualTypology":"ACHAT/REVENTE",
"vatCode":null
},
{
"operationId": "ADIDAS99",
"codeStock":"STO69084",
"companyName":"ICM (INTERNATIONAL)",
"contractualTypology":"ACHAT/REVENTE",
"vatCode":null
},
{
"operationId": "ADIDAS101",
"codeStock":"STO73106",
"companyName":"ICM (INTERNATIONAL)",
"contractualTypology":"ACHAT/REVENTE",
"vatCode":null
},
{
"operationId": "ADIDAS101",
"codeStock":"STO77162",
"companyName":"ICM (INTERNATIONAL)",
"contractualTypology":"ACHAT/REVENTE",
"vatCode":null
},
{
"operationId": "VPE_ULTIMA2",
"codeStock":"STO73220",
"companyName":"PPK",
"contractualTypology":"EN MANDAT",
"vatCode":"FR51442790366"
}
],
"virtualshipping": [
{
"operationId": "VPE_ULTIMA2",
"operationCode":"VPE_ULTIMA2",
"siteId":0,
"createdOn":"0001-01-01T00:00:00"
}
]
}
在 TypeScript 突变代码(即 Vuex)代码中的 axios 端:
const isDevEnvironment = process.env.NODE_ENV && process.env.NODE_ENV === "development";
const operationsApiUrl = `${process.env.VUE_APP_API_URL}/v1/operations`;
const suggestionCount = 10;
const minLength = 3;
// See https://github.com/typicode/json-server/issues/530#issuecomment-512733522
function getOperationCodeParams(searchedOperationCode: string): AxiosRequestConfig {
if (isDevEnvironment) {
return {
params: {
code_like: searchedOperationCode,
},
};
}
return {
params: {
code: searchedOperationCode,
},
};
}
// [...]
async [Actions.fetchOperationCodeSuggestions]({ commit }, searchedOperationCode: string): Promise<void> {
if (searchedOperationCode && searchedOperationCode.length >= minLength) {
try {
const url = `${operationsApiUrl}/`;
const result = await axios.get<IOperationCode[]>(url, getOperationCodeParams(searchedOperationCode));
const operationCodesFetched = result.data;
const operationCodes = [...operationCodesFetched].map((o) => o.operationCode).sort().slice(0, suggestionCount);
commit(Mutations.setOperationCodeSuggestions, operationCodes);
} catch {
commit(Mutations.setOperationCodeSuggestions, []);
}
} else {
commit(Mutations.setOperationCodeSuggestions, []);
}
}