在前后端分离的前提下，完成前端的页面开发，就可以开始链接开发服务器
安装axios到项目中
npm install axios --save
安装完成后问你的后端开发人员要IP
后端会给一个IP以及端口号，比如：config.json文件里的代码
在相同位置新建相同文件，设置好IP
{ "BASE_URL":"http://112.0.xxx.xxx:8400" }
修改min.js文件如下，这里面引入了element包可以不引入
min.js
import Vue from 'vue' import App from './App' import router from './router' /*import ElementUI from 'element-ui';*/ /*import 'element-ui/lib/theme-chalk/index.css'*/ import axios from 'axios'/*把刚刚安装axios引入进来*/ import VueAxios from 'vue-axios'/*引入*/ Vue.use(VueAxios,axios); Vue.config.productionTip = false Vue.use(ElementUI);/*可以不安装*/ /* eslint-disable no-new */ let startApp = function(){ axios.get('static/config.json').then((res)=>{ Vue.prototype.BASE_URL = res.data.BASE_URL; new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) }); } startApp();
在项目src文件夹下新建文件夹如下：文件夹services里面在新建message.js
message.js
export default {
message(that,type,content){
that.$message({
type: type,
message: content
})
}
};
在src文件下新建axios文件夹，api文件里面用来放后端的接口，request.js文件用来响应参数
api.js
import Vue from 'vue' import request from './request' function getBaseUrl(){ return Vue.prototype.BASE_URL } /* 工程列表 */ export const proLists = (data) =>{ return request({ url:'/project/selectProject', method:'post', baseURL:getBaseUrl(), data:data }) }
request.js
import axios from 'axios' import qs from 'qs' // import store from '../store' import ElementUI from 'element-ui' import router from '../router' /* 创建axios实例 */ const service = axios.create({ timeout:5000 }); /* request拦截器==>对请求参数做处理 */ service.interceptors.request.use(config => { config.method === 'post' ?config.data = qs.stringify({...config.data}) :config.params = {...config.params}; config.headers['Content-Type'] = 'application/x-www-form-urlencoded'; /* if(store.state.login.token && config.baseURL != 'http://xxx.xxx.xxx.xxx:10000'){ config.headers['token'] = store.state.login.token; } */ return config; },error => { Promise.reject(error) }) /* respone拦截器==>对响应做处理 */ service.interceptors.response.use(response => { if(response.data.result == 1){ /*这里的1是链接成功的返回参数，result是后端返回的字段名，根据实际情况修改，后端的接口文档里面会注明*/ return Promise.resolve(response); }else{ ElementUI.Message({ message: response.data.message, type: 'warning' }); return Promise.reject(response); } },error =>{ return Promise.reject(error.response) }) export default service;
完成以上步骤就可链接到开发服务器了，用上接口就可以获取到数据了
