[vue] 使用vue开发过程你是怎么做接口管理的?

[vue] 使用vue开发过程你是怎么做接口管理的?

创建一个request.js用于封装axios,在 src/api/request,设置拦截器统一处理请求和相应。

封装 axios:request.js:

import axios from 'axios'
import {Message, Loading} from "element-ui"
import {getToken} from "@/utils/auth"

function Index({...config}) {
  // create an axios instance
  const service = axios.create({
    /*headers: {
      'Cache-Control': 'no-cache'
    },*/
    baseURL: config.baseURL || process.env.VUE_APP_BASE_API, // url = base url + request url
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: 30000 // request timeout
  })

  // request interceptor
  service.interceptors.request.use(
    config => {
      return config
    },
    error => {
      return Promise.reject(error)
    }
  )

  // response interceptor
  service.interceptors.response.use(
    response => {
      return response
    },
    error => {
      const {request = {}} = error;
      const {status, response} = request;

      error.status = status
      try {
        error.res = JSON.parse(response)
      } catch (e) {
        console.warn(e)
      }
      return Promise.reject(error)
    }
  )

  /**
   * 发起请求
   * @param method 请求方法
   * @param url 请求地址
   * @param params 要发送的数据
   * @param config 配置
   * @param axiosConfig Axios配置项
   * @returns {Promise<never>|Promise<AxiosResponse<T>>}
   */
  const requestProcessor = (method, url, params, config, axiosConfig) => {
    const headers = {}
    const token = getToken().token
    if (token) {
      // let each request carry token
      headers['Authorization'] = 'JWT ' + token
    }

    if (config.formData) {
      const fd = new FormData();
      for (let key in params) {
        fd.append(key, params[key])
      }
      params = fd
    }

    switch (method.toUpperCase()) {
      case 'GET':
        return service.get(url, {
          params,
          headers,
          ...axiosConfig,
        })
      case 'POST':
        return service.post(url, params, {
          headers,
          ...axiosConfig,
        })
      case 'DELETE':
        return service.delete(url, {
          params,
          headers,
          ...axiosConfig,
        })
      case 'PUT':
        return service.put(url, params, {
          headers,
          ...axiosConfig,
        })
      default:
        return Promise.reject(new Error(`${method} 方法无效,请用正确的请求方法`))
    }
  }

  this.service = async ({method, url, params, config = {}, axiosConfig = {}}) => {
    const {isLoading = true, isToast = true} = config

    let loadingInstance
    isLoading && (loadingInstance = Loading.service({
      fullscreen: true,
      background: 'transparent',
      text: '加载中...'
    }))

    try {
      const response = await requestProcessor(method, url, params, config, axiosConfig)
      // 此处可以再次拦截
      return response.data
    } catch (error) {
      isToast && Message.error(error.message)
      throw error
    } finally {
      isLoading && loadingInstance.close()
    }

  }
}

export const {request} = new Index()
export default Index

接口 listing.js:

import Request from "@/api/request"

const {service} = new Request()

export default {
  userPostList({pageSize, page}) {
    return service({
      method: 'get',
      url: '/userpostlist/',
      params: {
        pageSize,
        page
      },
      config: {
        isLoading: false
      }
    })
  }
}

在 Vue 组件中使用:

import listing from "@/api/listing"

export default {
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        this.isLoading = true

        listing.userPostList({
          pageSize: this.pageSize,
          page: this.currentPage,
        }).then(data => {
          this.currentPage = parseInt(data.currentPage)
          this.total = data.total
          this.list = data.results

        }).finally(() => {
          this.isLoading = false
        })
      }
    }
}

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

已标记关键词 清除标记
相关推荐
<p style="color:#666666;"> <span style="font-size:14px;">本门课程重实战,将基础知识拆解到项目里,让你在项目情境里学知识。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">这样的学习方式能让你保持兴趣、充满动力,时刻知道学的东西能用在哪、能怎么用。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">平时不明白的知识点,放在项目里去理解就恍然大悟了。</span> </p> <p style="color:#666666;"> <span></span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>一、融汇贯通</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本视频采用了前后端分离的开发模式,前端使用Vue.js+Element UI实现了Web页面的呈现,后端使用Python 的Django框架实现了数据访问的接口,前端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解前后端的各自承担的工作。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>二、贴近实战</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本系列课程为练手项目实战:学生管理系统v4.0的开发,项目包含了如下几个内容:项目的总体介绍、基本功能的演示、Vuejs的初始化、Element UI的使用、在Django中实现针对数据的增删改查的接口、在Vuejs中实现前端增删改查的调用、实现文件的上传、实现表格的分页、实现导出数据到Excel、实现通过Excel导入数据、实现针对表格的批量化操作等等,所有的功能都通过演示完成、贴近了实战</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>三、课程亮点</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">在本案例中,最大的亮点在于前后端做了分离,真正理解前后端的各自承担的工作。前端如何和后端交互</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>适合人群:</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">1、有Python语言基础、web前端基础,想要深入学习Python Web框架的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">2、有Django基础,但是想学习企业级项目实战的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">3、有MySQL数据库基础的朋友</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><img alt="" src="https://img-bss.csdnimg.cn/202009070752197496.png" /><br /> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><br /> </span> </p>
<span style="color:#666666;font-size:14px;background-color:#FFFFFF;">VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就业的你来说,那么这门课程便是你手中的葵花宝典。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">学习技巧:学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">此vue课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">代码和ppt均可下载!</span><br /> <br /> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">免费提供《企业级完整实战项目接口文档》,绝对可用。</span> </p> <p> <img src="https://img-bss.csdn.net/202001090736032736.png" alt="" /><img src="https://img-bss.csdn.net/202001090736166806.png" alt="" /><img src="https://img-bss.csdn.net/202001090736273968.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p>
<p style="margin: 0px; max-width: 100%; box-sizing: border-box; color: #333333; font-family: 'Hiragino Sans GB', 'Microsoft Yahei', arial, 宋体, 'Helvetica Neue', Helvetica, STHeiTi, sans-serif; font-size: 14px; background-color: #ffffff;"><span style="max-width: 100%; box-sizing: border-box; font-size: 18px;"><strong>本课程是基于vue-element-admin实现的后台权限验证系统,解决在前后端分离场景下如何实现前端菜单访问的动态权限以及如何在脚手架中进行接口的封装调用,</strong></span><span style="max-width: 100%; box-sizing: border-box; font-size: 18px;"><strong>您将学习到如下知识:</strong></span> <span style="max-width: 100%; box-sizing: border-box; font-size: 18px;">1、学习如何使用后台集成框架vue-element-admin进行后台前端框架的搭建;</span><span style="max-width: 100%; box-sizing: border-box; font-size: 18px;">2、学习如何在vue-element-admin中使用element-ui组件,学习到后台通用列表页面的制作方式;</span><span style="max-width: 100%; box-sizing: border-box; font-size: 18px;">3、学习如何在前后端分离下,实现前端菜单的动态权限,如何进行请求的统一拦截;</span><span style="max-width: 100%; box-sizing: border-box; font-size: 18px;">4、学习基于JWT的登陆认证流程;</span><span style="max-width: 100%; box-sizing: border-box; font-size: 18px;">5、学习到前端项目的前后端联调,如何在服务器层解决前后端分离引起的跨域问题;</span><span style="max-width: 100%; box-sizing: border-box; font-size: 18px;">6、学习如何在响应拦截器里自定义各类错误提示</span></p>
<p> <span style="font-size:16px;">课程采用目前市面上比较热门的技术Vue、Spring Boot、Spring Security开发,符合绝大多数公司开发的主流技术,采用前后端分离完成项目的开发;<br /></span> </p> <p> <span style="font-size:16px;">    课程分前端和后端两部分;前端采用Vue Element 完成界面布局,从零开始搭建前端项目,手把手带领搭建完成从0到1的完成前端项目的开发,数据接口对接,动态菜单的加载,动态路由的生成,token的校验等;后端采用Spring Boot 、Spring Security开发接口,从0开始带领搭建后端项目,权限管理设计开发、Spring Security权限框架在前后端分离项目中的使用等。课程做了详细的笔记文档,方便使用学习。<br /></span> </p> <p> <span style="font-size:16px;">    课程收货</span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span></span><span>掌握Vue Element 开发后台页面的能力,从而深入理解Vue在后台管理系统中的开发流程;</span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span></span><span>掌握运用Spring Boot开发后台接口的能力;</span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span></span><span>掌握Spring Security开发权限管理的能力;</span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span style="font-size:14px;"></span><span>掌握Redis缓存在开发中的运用能力;</span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span style="font-size:14px;"></span><span>最终学会用Vue Element  Spring Boot 从0到1搭建小型前后端分离项目的能力,从而更深入的理解系统中整个数据的流向,从哪里来,到哪里去;</span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span> </span></span></p><p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span>课程截图<br /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span>    <img src="https://img-bss.csdn.net/202005240214191169.png" alt="" /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span><br /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span><img src="https://img-bss.csdn.net/202005240215025050.png" alt="" /><br /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span><img src="https://img-bss.csdn.net/202005240215236455.png" alt="" /><br /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span><br /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span><img src="https://img-bss.csdn.net/202005240215342541.png" alt="" /><br /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <br /></p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span><br /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span><br /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span><br /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span><br /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span><br /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span><br /></span></span> </p> <p style="background-color:#FFFFFF;color:#333333;font-size:19px;text-align:justify;"> <span><span><br /></span></span> </p>
<span style="color:#666666;font-size:14px;background-color:#FFFFFF;">React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React和VUE高薪就业的你来说,那么这门课程便是你手中的葵花宝典。</span><br /><br /><span style="color:#666666;font-size:14px;background-color:#FFFFFF;">学习技巧:此系列课react和vue可以单独学习,无需学会react再学习vue,学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。</span><br /><br /><p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">此react和vue课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!</span> </p> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;"><br /></span> </p> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;"><span style="color:#666666;font-size:14px;background-color:#FFFFFF;">免费提供《企业级完整实战项目接口文档》,绝对可用!</span><br /><br /><span style="color:#666666;font-size:14px;background-color:#FFFFFF;">课程代码和ppt均可下载!</span><br /></span> </p> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;"><span style="color:#666666;font-size:14px;background-color:#FFFFFF;"><img src="https://img-bss.csdn.net/202001081405016470.jpg" alt="" /><img src="https://img-bss.csdn.net/202001081405216987.jpg" alt="" /><img src="https://img-bss.csdn.net/202001081405399767.png" alt="" /><img src="https://img-bss.csdn.net/202001081405501839.jpg" alt="" /><br /></span></span> </p>
©️2020 CSDN 皮肤主题: 点我我会动 设计师:白松林 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值