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