详解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配置后台接口方式详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
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 更改连接后台的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接口的管理详解
如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-reso
-
详解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-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-cil) 情况二(使用的工具是 webpack) 二.打包 总结 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'sta
-
详解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
随机推荐
- Expand、Fasthelp、Fc命令的用法
- window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
- 仅需几行代码实现方便易用的状态栏指示器
- jquery插件jquery.confirm弹出确认消息
- javascript小技巧 超强推荐第1/5页
- 使用JavaScript获取地址栏参数的方法
- asp.net 数据库备份还原(sqlserver+access)
- lhgcalendar时间插件限制只能选择三个月的实现方法
- Android获取SD卡路径及SDCard内存的方法
- PHP过滤黑名单关键字的方法
- node.js中的buffer.Buffer.isBuffer方法使用说明
- 使用smartupload组件实现jsp+jdbc上传下载文件实例解析
- jQuery getJSON 处理json数据的代码
- jquery异步循环获取功能实现代码
- mysql中show指令使用方法详细介绍
- firefox扩展插件制作方法详细介绍
- 定制 404 页面的一些心得
- Spring mvc实现Restful返回xml格式数据实例详解
- Android Studio配置文件路径修改的方法
- Spring boot redis cache的key的使用方法