详解vue配置后台接口方式

在vueAdmin项目中有两种方式配置后端接口的方式，在此做下记录

第一种（代理方式）

在工程目录下 > config > index.js
- 修改为如下配置

proxyTable: {
   '/api': {
    target: 'http://127.0.0.1:8000',
    pathRewrite: {
     '^/api': ''
    }
   }

  },

在工程目录下 > src > api > user.js
- 接口写法

import axios from 'axios'
export function getIdcsList() {
 return axios.get('/api/idcs/')
}
export function getPaginationList(params) {
 return axios.get(`/api/idcs/?page=${params.page}`)
}

第二种

在工程目录下 > config > dev.env.js
修改为如下

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 BASE_API: '"http://127.0.0.1:8000"',
})

在工程目录下 > src > api > user.js
- 接口写法

import request from '@/utils/request'

export function getUserList(params) {
 return request({
  url: '/users/',
  method: 'get',
  params
 })
}

以上所述是小编给大家介绍的vue配置后台接口方式详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue 更改连接后台的api示例

    vue 更改连接后台的api,是更改在config文件夹下的index.js文件中的proxyTable的值. 如下代码,其中 10.1.166.88:8888/springTimes 为后台暴露出来的appi. dev: { env: require('./dev.env'), port: 8886, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api':

  • vue中Axios的封装与API接口的管理详解

    vue中Axios的封装与API接口的管理详解

    如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-reso

  • vue实现的请求服务器端API接口示例

    本文实例讲述了vue实现的请求服务器端API接口.分享给大家供大家参考,具体如下: import axios from 'axios' import router from '@/router' axios.defaults.timeout = 3000 axios.defaults.baseURL = '' axios.interceptors.request.use( config => { // const token = getCookie('名称') config.data = con

  • 详解vue配置后台接口方式

    详解vue配置后台接口方式

    在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 proxyTable: { '/api': { target: 'http://127.0.0.1:8000', pathRewrite: { '^/api': '' } } }, 在工程目录下 > src > api > user.js - 接口写法 import axios from 'axios' export

  • 详解Vue.js 响应接口

    Vue 可以添加数据动态响应接口. 例如以下实例,我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应. 实例中通过点击按钮计数器会加 1.setTimeout 设置 10 秒后计算器的值加上 20 . <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click

  • 详解vue配置请求多个服务端解决方案

    一.解决方案 1.1 描述接口context-path 后端的两个接口服务请求前缀,如下: 前缀1: /bryant 前缀2: / 1.2 vue.config.js配置 devServer: { port: 8005, proxy: { // 第一台服务器配置 '/bryant': { target: 'http://localhost:8081, ws: true, changeOrigin: true, pathRewrite: { '^/bryant': '/bryant' } }, /

  • 详解Vue项目的打包方式(生成dist文件)

    详解Vue项目的打包方式(生成dist文件)

    目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'static

  • 详解vue 模拟后台数据（加载本地json文件）调试

    本文介绍了vue 模拟后台数据(加载本地json文件)调试,分享给大家,也给自己留个笔记 首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages": 0, "TotalItems": 0, "ItemsPerPage": 100, "Items":[ {"DEVICEID":&quo

  • 详解Vue结合后台的列表增删改案例

    首先列表内容还是与之前的列表内容类似,不过此处我们会采用Vue中数据请求的方式来实现数据的增删.那么我们使用的Vue第三方组件就是vue-resource,vue发起请求的方式与jQuery的ajax相似,组要是请求地址与参数.和方法 首先我们先看到的是列表请求 获取列表 <table class=" table table-bordered table-hover table-striped"> <thead> <tr> <th>Id&

  • 详解Django配置JWT认证方式

    1. 安装 rest_framework + djangorestframework_simplejwt 安装djangorestframework_simplejwt : pip install djangorestframework-simplejwt 安装rest_framework: pip install djangorestframework djangorestframework_simplejwt 是提供 jwt 的 django 应用. 2. 配置好 rest_framewor

  • 详解iOS平台调用后台接口的正确姿势

    前言 做iOS开发,除非你做的是单机应用,否则一定避免不了接口调用,也就是所谓的API调用. 而对于这方面,每个公司定义接口的格式不尽相同,从而导致我们的代码没法达到通用. 甚至你接私活的话,更会遇到五花八门的接口格式.那么有没有一种通用的方式来处理这些不通用的格式呢? 我尝试从变化的接口格式中找到不变的东西,把这些不变的东西进行可配置,从而形成以不变应万变的接口调用方式. 这些不变的东西,包括如下几种: 错误码 错误消息 业务数据 而对于错误码又可以分如下几类: 成功 失败 token失效 基

  • 详解Vue项目的打包方式

    详解Vue项目的打包方式

    目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 总结 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'sta

  • 详解Vue与element-ui整合方式

    详解Vue与element-ui整合方式

    目录 一.Vue与element-ui整合 1.安装element-ui: 2.引入ElementUI: 3.按需引入ElementUI元素即可 4.使用组件渲染UI效果 一.Vue与element-ui整合 element-ui官网介绍很详细,这里摘抄官网的融入方式: 1.安装element-ui: npm i element-ui -S 2.引入ElementUI: 分为全部引入和部分引入,因为全部引入文件体积太大,这里直接部分引入:按需引入,需要借助一个插件,安装插件: npm insta

随机推荐