Vue中使用Ajax与后台交互

一、下载依赖包

npm install --save axios

二、封装 ajax 请求模块

1. api/ajax.js

/*
ajax 请求函数模块
 */
import axios from ‘axios‘

export default function ajax (url = ‘‘, data = {}, type = ‘GET‘) {
  return new Promise(function (resolve, reject) {
    let promise

    if (type === ‘GET‘) {
      let dataStr = ‘‘
      Object.keys(data).forEach(key => {
        dataStr += key + ‘=‘ + data[key] + ‘&‘
      })
      if (dataStr !== ‘‘) {
        dataStr = dataStr.substring(0, dataStr.lastIndexOf(‘&‘))
        url = url + ‘?‘ + dataStr
      }
      promise = axios.get(url)
    } else {
      promise = axios.post(url, data)
    }

    promise.then(response => {
      resolve(response.data)
    }).catch(error => {
      reject(error)
    })
  })
}

2. api/index.js

/*
与后台交互模块
 */
import ajax from ‘./ajax‘

/**
 * 根据经纬度获取位置详情
 */
export const reqAddress = geohash => ajax(‘/api/position/‘ + geohash)

/**
 * 获取食品分类列表
 */
export const reqCategorys = () => ajax(‘/api/index_category‘)

/**
 * 根据经纬度获取商铺列表
 */
export const reqShops = ({longitude, latitude}) => ajax(‘/api/shops/‘, {longitude, latitude})

/**
 * 获取一次性验证码
 */
export const reqCaptcha = geohash => ajax(‘/api/position/‘ + geohash)

/**
 * 用户名密码登陆
 */
export const reqPwdLogin = (name, pwd, captcha) => ajax(‘/api/login_pwd‘, {name, pwd, captcha}, ‘POST‘)

/**
 * 发送短信验证码
 */
export const reqSendCode = phone => ajax(‘/api/sendcode‘ + {phone})

/**
 * 手机号验证码登陆
 */
export const reqSmsLogin = (phone, code) => ajax(‘/api/logon_sms/‘, {phone, code}, ‘POST‘)

/**
 * 根据会话获取用户信息
 */
export const reqUser = () => ajax(‘/api/userinfo‘)

/**
 * 用户登出
 */
export const reqLogout = () => ajax(‘/api/logout‘)

三、配置代理

proxyTable: {
    ‘/api‘: { // 匹配所有以 ‘/api‘ 开头的请求路径
        target: ‘http://localhost:4000‘, // 代理目标的基础路径
        changeOrigin: true, // 支持跨域
        pathRewrite: { // 重写路径:去掉路径中开头的‘/api‘
            ‘^/api‘: ‘‘
        }
    }
}    

原文地址:https://www.cnblogs.com/mxsf/p/10877704.html

时间: 2024-11-05 17:31:06

Vue中使用Ajax与后台交互的相关文章

利用ajax与后台交互容易出现的问题及解决办法

Ajax在当今的前后台交互中可以说是很火的.那么在使用ajax与后台交互的过程中我们会遇到哪些小问题呢. 使用get方法的时候: 1.浏览器的缓存问题:当我们多次访问同一个地址的时候,浏览器不会每次都更新地址,而是将第一次访问到的数据缓存起来,后面访问同样地址的时候直接从缓存中获取数据,而不会从服务器中读取数据,因此如果我们改变后台中的数据,我们访问时数据将不会更新,访问到的数据也不会改变.如何解决这个问题呢?这时我们可以在"url?"后面用"&"符号连接一

vue实战使用ajax请求后台数据(小白)

vue实战使用ajax请求后台数据(小白) 前言:前端小白入门到这个阶段,应该会知道我们所做的页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果.ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它. vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/

通过PHP前端后台交互/通过ajax前端后台交互/php基础传输数据应用/简单的留言版/简单的注册账户/简单的登录页/

  前  言  PHP     通过上一篇博客,注册账号与登录页面--前后台数据交互  跳转转到index主页,接下来进入主页留言板功能,通过ajax向后台传输数据,同时发表留言. 具体的内容分析如下: ① PHP中的数据传输-->>--在主页先添加基础HTML5基本框架,通过form表单提交数据 >>由主页传输给主页后台-->>主页后台经过转码保存实例化的文件 ②主页后台通过判断(是否保存文件)使用输出语句输出true或false,前台通过ajax中的post中的fu

通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

  前  言  PHP     学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输给注册页后台-->>注册页后台经过转码保存实例化的文件 ② 在登录页输入账户密码,点击登录时,获得触发函数:获得由后台传输过来的true或者false---转换页面或者弹出输入错误.    登录页后台获取保存账户密码的实例化文件,通过转码,if判断之后传输给前台登录页TURE或者FALSE. 总共

Spring Mvc模式下Jquery Ajax 与后台交互操作

1.基本代码 1)后台控制器基本代码 @Controller @RequestMapping("/user") public class UserController { @Autowired private UserService userService;//服务 @ResponseBody @RequestMapping(value="/getUser/*访问路径自己设置*/", method = RequestMethod.POST) public Objec

vue中使用Ajax(axios)

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求.Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios中文文档库:http://www.axios-js.com/zh-cn/docs/ 1.Axios简单使用 1.axios发送简单的get请求 后台: @RequestMapping("/index") @ResponseBody public Map index(HttpServletRequest req

Vue 中使用Ajax请求

Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用 在线文档   https://github.com/pagekit/vue-resource/blob/develop/docs/http.md 下载 npm install vue-resource--save 编码 // 引入模块 ,注意应该在App.vue中引入和声明 import VueResource from 'vue-res

vue中使用socket连接后台

1.需求背景 工程车巡检,实时发送巡检位置信息.现场状况到服务器,页面实时显示工程车位置以及状况信息 2.VUE中使用socket建立实时连接 3.mounted生命周期中初始化连接 mounted () {this.initWebSocket() }, 4.socket连接方法 /** * 建立socket连接,调用时间: * 1.首次进入页面,如果不是查看记录,请求出来初始数据后,建立socket连接 * 2.调用数据库查询完毕后 * */ initWebSocket() { //初始化we

使用Bootstrap的popover标签中嵌入插件,并且为插件注册事件实现Ajax与后台交互

下午研究了一下bootstrap的popover写了个例子.如果项目很多地方都需要用到可以考虑封装成插件. javascript代码: 1 <script type="text/javascript"> 2 var _types = '0'; 3 var _status = '0'; 4 5 $(function () { 6 LoadFilter(); 7 }); 8 9 function search() { 10 $.ajax({ 11 .... 12 }); 13