mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-12 06:15:45 +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.6 KiB
Markdown
Executable File
102 lines
2.6 KiB
Markdown
Executable File
# Work with Server
|
|
|
|
## Front-end request flow
|
|
|
|
In `adempiere-vue` , a complete front-end UI interacts to the server-side processing flow as follows:
|
|
|
|
1. UI component interaction;
|
|
2. Call unified management API service request function;
|
|
3. Send requests using encapsulated request.js;
|
|
4. Get server return;
|
|
5. Update data;
|
|
|
|
As you can see from the above flow, in order to facilitate management and maintenance, unified request processing is placed in the `src/api` folder and the files are generally split according to the model latitude,such as:
|
|
|
|
```
|
|
api/
|
|
login.js
|
|
article.js
|
|
remoteSearch.js
|
|
...
|
|
```
|
|
|
|
## request.js
|
|
|
|
`@/utils/request.js` is based on the [axios](https://github.com/axios/axios), to facilitate the uniform handling of POST, GET and other request parameters, request headers, and error messages。Specific can see [request.js](https://github.com/adempiere/adempiere-vue/blob/master/src/utils/request.js).
|
|
|
|
It encapsulates the global `request interceptor`, `response interceptor`,`unified error handling`, `unified timeout, baseURL settings, etc.`
|
|
|
|
## An example of a request article list:
|
|
|
|
```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
|
|
})
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Set multiple baseURLs
|
|
|
|
We can request multiple api addresses by setting multiple `baseURL`s through [environment variables](/guide/essentials/deploy.html).
|
|
|
|
```bash
|
|
# .env.development
|
|
VUE_APP_BASE_API = '/dev-api' #Inject the root path of the api
|
|
VUE_APP_BASE_API2 = '/dev-api2' #Inject the root path of the api
|
|
```
|
|
|
|
Then create an `axios` instance based on the environment variable, giving it a different `baseURL` [@/utils/request.js](https://github.com/adempiere/adempiere-vue/blob/master/src/utils/request.js)
|
|
|
|
```js
|
|
// create an axios instance
|
|
const service = axios.create({
|
|
baseURL: process.env.BASE_API, // api base_url
|
|
timeout: 5000 // request timeout
|
|
})
|
|
|
|
const service2 = axios.create({
|
|
baseURL: process.env.BASE_API2, // api base_url
|
|
timeout: 5000 // request timeout
|
|
})
|
|
```
|
|
|
|
Or
|
|
|
|
```js
|
|
export function fetchList(query) {
|
|
return request({
|
|
url: '/article/list',
|
|
method: 'get',
|
|
params: query,
|
|
baseURL: 'xxxx' // direct coverage
|
|
})
|
|
}
|
|
```
|
|
|
|
## Switch from mock directly to server request
|
|
|
|
See [Mock Data](mock-api.md)
|