在前后端分离的前提下，完成前端的页面开发，就可以开始链接开发服务器
安装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;
完成以上步骤就可链接到开发服务器了，用上接口就可以获取到数据了
TRANSLATE with x
English
| Arabic | Hebrew | Polish |
| Bulgarian | Hindi | Portuguese |
| Catalan | Hmong Daw | Romanian |
| Chinese Simplified | Hungarian | Russian |
| Chinese Traditional | Indonesian | Slovak |
| Czech | Italian | Slovenian |
| Danish | Japanese | Spanish |
| Dutch | Klingon | Swedish |
| English | Korean | Thai |
| Estonian | Latvian | Turkish |
| Finnish | Lithuanian | Ukrainian |
| French | Malay | Urdu |
| German | Maltese | Vietnamese |
| Greek | Norwegian | Welsh |
| Haitian Creole | Persian |
TRANSLATE with
COPY THE URL BELOW
Back
EMBED THE SNIPPET BELOW IN YOUR SITE
Enable collaborative features and customize widget: Bing Webmaster Portal
Back