mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-12 14:24:34 +08:00
f45a57178a
* Add support to x vversion from npm * Add support to x vversion from npm * Add support to x vversion from npm * Add documentation for current repository
102 lines
2.9 KiB
Markdown
Executable File
102 lines
2.9 KiB
Markdown
Executable File
# Trabajar con el Servidor
|
|
|
|
## Flujo de solicitudes de front-end
|
|
|
|
En `adempiere-vue`, una interfaz de usuario completa interactúa con el flujo de procesamiento del lado del servidor de la siguiente manera:
|
|
|
|
1. Interacción de componentes UI;
|
|
2. Llamar a la función de solicitud de servicio API de gestión unificada;
|
|
3. Enviar solicitudes utilizando request.js;
|
|
4. Obtener respuesta del servidor;
|
|
5. Actualizar datos;
|
|
|
|
Como puedes ver en el flujo anterior, para facilitar la administración y el mantenimiento, el procesamiento de solicitudes unificadas se coloca en la carpeta `src/api` y los archivos generalmente se dividen de acuerdo con la latitud del modelo, como:
|
|
|
|
```
|
|
api/
|
|
login.js
|
|
article.js
|
|
remoteSearch.js
|
|
...
|
|
```
|
|
|
|
## request.js
|
|
|
|
`@/utils/request.js` se basa en [axios](https://github.com/axios/axios), para facilitar el manejo uniforme de POST, GET y otros parámetros de solicitud, encabezados de solicitud y mensajes de error. Para ver mas específico vea [request.js](https://github.com/adempiere/adempiere-vue/blob/master/src/utils/request.js).
|
|
|
|
Encapsula el 'interceptor de solicitud' global, el 'interceptor de respuesta', el 'manejo unificado de errores', el 'tiempo de espera unificado, la configuración de baseURL, etc.'
|
|
|
|
## Un ejemplo de solicitud de una lista de artículos:
|
|
|
|
```js
|
|
// api/article.js
|
|
import request from '../utils/request';
|
|
export function fetchList(query) {
|
|
return request({
|
|
url: '/article/list',
|
|
method: 'get',
|
|
params: query
|
|
})
|
|
}
|
|
|
|
// views/example/list
|
|
import { fetchList } from '@/api/article'
|
|
export default {
|
|
data() {
|
|
list: null,
|
|
listLoading: true
|
|
},
|
|
methods: {
|
|
fetchData() {
|
|
this.listLoading = true
|
|
fetchList().then(response => {
|
|
this.list = response.data.items
|
|
this.listLoading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Establecer múltiples baseURLs
|
|
|
|
Podemos solicitar múltiples direcciones api configurando múltiples `baseURL`s a través de [variables de entorno](/guide/essentials/deploy.html).
|
|
|
|
```bash
|
|
# .env.development
|
|
VUE_APP_BASE_API = '/dev-api' #Inyecta la ruta raíz de la api
|
|
VUE_APP_BASE_API2 = '/dev-api2' #Inyecta la ruta raíz de la api
|
|
```
|
|
|
|
Luego crea una instancia `axios` basada en la variable de entorno, dándole una `baseURL` [@/utils/request.js](https://github.com/adempiere/adempiere-vue/blob/master/src/utils/request.js) diferente.
|
|
|
|
```js
|
|
// crear una instancia de axios
|
|
const service = axios.create({
|
|
baseURL: process.env.BASE_API, // api base_url
|
|
timeout: 5000 // tiempo de espera agotado
|
|
})
|
|
|
|
const service2 = axios.create({
|
|
baseURL: process.env.BASE_API2, // api base_url
|
|
timeout: 5000 // tiempo de espera agotado
|
|
})
|
|
```
|
|
|
|
O
|
|
|
|
```js
|
|
export function fetchList(query) {
|
|
return request({
|
|
url: '/article/list',
|
|
method: 'get',
|
|
params: query,
|
|
baseURL: 'xxxx' // cobertura directa
|
|
})
|
|
}
|
|
```
|
|
|
|
## Cambiar de Mock directamente a la solicitud del servidor
|
|
|
|
Ver [Mock Data](mock-api.md)
|