基於SpringCloud+vue(ElementUI)+mySQL前後端分離設計之--前端Fetch請求封裝

開發一個博客系統

文章數：菜單文章都沒更新完
搭建eureka註冊中心 （請先閱讀此文章） https://segmentfault.com/a/11...
搭建Beans編寫Token解析註解 https://segmentfault.com/a/11...
搭建權限管理系統 https://segmentfault.com/a/11...
搭建後臺管理系統 https://segmentfault.com/a/11...
前端Fetch請求封裝 https://segmentfault.com/a/11...

搭建Vue項目，不多說網上搜

目錄結構：

HTTP.js 在這裏我沒有考慮不支持瀏覽器Fetch的情況

export default(type = '', url = '',data = {},parameter = {},headers = {},api = 'fetch') =>{
  const default_headers = {
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Credentials':'true',
    'Accept-Charset':'utf-8'
  };

  if(!headers){
    headers = default_headers;
  }

  if (parameter) {
    let parameter_str = ''; //數據拼接字符串
    for (var key of parameter.keys()) {
      parameter_str += key + '=' + parameter.get(key) + '&';
    }
    if (parameter_str !== '') {
      parameter_str = parameter_str.substr(0, parameter_str.lastIndexOf('&'));
      url = url + '?' + parameter_str;
    }
  }

  let requestConfig = {
    method:type,
    headers:headers,
    mode:'cors',
    cache:'default',
    credentials:'include'
  }

  if(data){
    Object.defineProperty(requestConfig, 'body', {
      value: data
    });
  }

  return fetch(url, requestConfig);
}

verify.js 權限過濾部分

import router from '../router'
import http from '../tools/HTTP'
import { Message } from 'element-ui';
export default(type, url,data,parameter = {},headers = {}) => {
  //這裏寫獲取訪問url的權並進行接下來的操作（是否請求數據）
    return http(type, url, data,parameter, headers,'fetch');
}

api.js 封裝前端要使用的請求

import verify from '../api/verify'
//import router from '../router'
import Constant from '../tools/Constant'//我的工具類
import VueCookies from 'vue-cookies'
var token = VueCookies.get(Constant.CookiesNames.ACCESS_TOKEN);
//token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MzY3MTk0MTMsInVzZXJJZCI6ImFkbWluIiwiaWF0IjoxNTM2MzczODEzfQ.eXns9N5fZBFiOfEeqSF5tU31QqrC20YSsNfeAtKRifU";
const default_headers = {
  'Accept':'application/json',
  'Access-Control-Allow-Origin':'*',
  'Access-Control-Allow-Credentials':'true',
  'Accept-Charset':'utf-8',
  'Content-Type': 'application/json',
  'at':token
};

var address = "http://127.0.0.1:8762";

var api={};
api.uploadFile=(data)=>verify('POST',address+'/api/matter',data,null,default_headers);
api.createProject=(data)=>verify('POST',address+'/api/set/project',data,null,default_headers);
api.getProject=(data)=>verify('GET',address+'/api/get/project',null,data,default_headers);
api.getProjects=(data)=>verify('GET',address+'/api/get/projects',data,null,default_headers);

api.login=(data)=>verify('POST',address+'/auth/login',data,null,default_headers);
api.verify=(data)=>('GET',address+'/auth/verify',data,null,default_headers);//檢查是否有權限
export default api;

使用api

get請求：
      var get_project_form = new FormData();
      get_project_form.append(Constant.ParameterNames.PKID, 1);
      api.getProject(get_project_form).then((response) => response.json())
        .then((data) => {
          this.itemProject = data.data;
        });
post請求：
        var add_project_form = new FormData();
        add_project_form.append("projectName", this.projectForm.projectName);
        add_project_form.append("projectTag", this.projectForm.projectTag);//list
        add_project_form.append("projectTechnology", this.projectForm.projectTechnology);//list
        //注意：add_project_form工具自己的情況得到要提交的數據
        //convert_FormData_to_json工具類
        api.createProject(tool.convert_FormData_to_json(add_project_form)).then((response) => response.json())
          .then((data) => {
            console.log(data.data);
            Message({
              dangerouslyUseHTMLString: true,
              message: "<strong>創建項目</strong><br><strong>創建成功</i></strong>",
              iconClass:'el-icon-document'
            });
          });