vue項目怎麼鏈接開發服務器

在前後端分離的前提下，完成前端的頁面開發，就可以開始鏈接開發服務器

 

安裝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://58.221.7.174: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是鏈接成功的返回參數，根據實際情況修改，後端的接口文檔裏面會註明*/
        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;

完成以上步驟就可鏈接到開發服務器了，用上接口就可以獲取到數據了