前后端api交互

前端使用工具：
----webstorm
技术：
----vue框架 axios代替ajax获取数据 element-ui编写样式
后端:
----php java nodejs
交互平台：
----eolinker 一起写

平台界面

平台界面.png
接口
接口png
请求信息
请求信息.png
响应信息
响应信息.png

前端调取数据
【configUrl.js】

// 测试ip

// const baseul = 'http://10.31.161.99';
// const onbaseul = ' ';

const type = document.location.protocol;
const baseul = type + '//api.star.store';
const onbaseul = type + '//stat.star.store';


export default {
    baseURL: baseul,
    onbaseURL: onbaseul,
    logURL: baseul + '/uploads/',
    uploadURL: baseul + '/upload',
    defaultImg: 'logo.png'
}

【apiRequest.js】

import axios from "axios";
import baseURL from './configUrl.js';

function baseRequest(method, path, params, data, type) {
    method = method.toUpperCase() || 'GET';
    let url = '';
    let paramsobj = { params: params };
    if (type === 'msg') {
        url = baseURL.onbaseURL;
    } else {
        url = baseURL.baseURL;
    }
    axios.defaults.baseURL = url;
    if (method === 'POST') {
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
        return axios.post(path, qs.stringify(data));
    } else if (method === 'GET') {
        return axios.get(path, paramsobj);
    } else {
        return axios.delete(path, qs.stringify(data));
    };
}

exports.baseURL = baseURL.baseURL;

exports.influenceContactProduct = function influencecontact(params) {
    return baseRequest('GET', '/operation/distr_influ', params, '');
};
exports.addInfluencer = function addinflu(data) {
    return baseRequest('POST', '/operation/add_influ', '', data);
};

【页面调用】

<template>
        <el-form-item label="关联产品">
          <el-select v-model="form.pid" placeholder="请选择产品" style="width: 100%">
            <el-option
              v-for="prodct in pruductData"
              :key="prodct.product_name"
              :label="prodct.product_name"
              :value="prodct.product_id">
            </el-option>
          </el-select>
        </el-form-item>
</template>

<script>
 import {
    getProductList,
    registerInfluencer, 
    registerInfluencerLink
  } from "../../apiRequest.js";
 export default {
    data() {
      return {
        form: {
          name: '',
          pid: ''
        },
        prepend: 'Http://',
        append: '.star.store',
        pruductData: [],
        rules: {
          name: [
            { required: true, message: '请输入网红名称', trigger: 'blur' },
            { min: 1, max: 40, message: '长度在 1 到 40 个字符', trigger: 'blur' }
          ]
        }
      }
    }
  created(){
      // 获取产品信息
      this.getProductList();
    },
method:{
  if(this.form.pid){
    let linkPrduct = {
      influencer_id: influencer_id,
      product_id: this.form.pid
    }
    registerInfluencerLink(linkPrduct).then((data2)=>{
      // console.log(data2);
      if(data2.status === 200){
        this.$notify({
          title: '成功',
          message: '网红关联产品成功',
          type: 'success'
        });
        this.form.name = '';
        this.form.pid = '';
      }
    }).catch((response)=> {
      this.$notify.error({
        title: '错误',
        message: response.toString()
      });
    });
  }

}
</script>