vue-element-admin and server interaction

And server interaction

# Front end request process

In  vue-element-admin , the front end of a complete UI interactions to the server process flow is such that:

1. UI components interoperate;
2. Call the unified management api service request function;
3. Request.js encapsulated using the transmission request;
4. Gets returned from the server;
5. Update data;

It can be seen from the above process, in order to facilitate management and maintenance, are placed in a unified request processing  @/src/api folder and file in accordance with the general split Latitude model, such as:

api/
  login.js
  article.js
  remoteSearch.js
  ...

#request.js

Wherein, @/src/utils/request.js based axios package, to facilitate unitary POST, GET request parameters, etc., the request header, and error information. Referring specifically request.js. It encapsulates global  request拦截器, response拦截器, 统一的错误处理, 统一做了超时处理, baseURL设置等.

# An example of the article list page request:

// 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 baseURL

We can set up multiple environment variable baseURL, so request a different api address.

# .env.development
VUE_APP_BASE_API = '/dev-api' #注入本地 api 的根路径
VUE_APP_BASE_API2 = '/dev-api2' #注入本地 api 的根路径 

After you create an environment variable in accordance with axiosan example, it has a different baseURL. @ / utils / request.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

export function fetchList(query) { return request({ url: '/article/list', method: 'get', params: query, baseURL: 'xxxx' // 直接通过覆盖的方式 }) }

http://www.kemaisii.cn
http://www.eternelle.cn
http://www.yajuxuan.cn
http://www.nodonkg.cn
http://www.yurunyipinn.cn
http://www.niudangjiaa.cn
http://www.feikeshoubiaoo.cn
http://www.yumengse.cn
http://www.parniss.cn
http://www.sensefadd.cn
http://www.youmaqi.cn
http://www.yinghengg.cn
http://www.xizuann.cn