基于SpringCloud+vue(ElementUI)+mySQL前后端分离设计之--前端Fetch请求封装

2018-10-13 admin

开发一个博客系统

文章数:菜单文章都没更新完 搭建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'
            });
          });

原文链接:https://segmentfault.com/a/1190000016664352

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42542.html

文章标题:基于SpringCloud+vue(ElementUI)+mySQL前后端分离设计之--前端Fetch请求封装

相关文章
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
JavaScript游戏之连连看源码分享
JavaScript游戏之连连看源码 下载地址:JavaScript游戏之连连看源码 解压密码:www.javascriptcn.com ...
2015-11-12
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
回到顶部