vue 调用 RESTful风格接口操作


Posted in Javascript onAugust 11, 2020

首先是简单的java接口代码

写了四个让前端请求的接口,以下为代码

@GetMapping("/v1/user/{username}/{password}")
  public Result login2(@PathVariable("username") String username, @PathVariable("password") String password){
    return Result.succResult(200,username+"--"+password);
  }
 
  @PostMapping("/v1/user")
  public Result login3(@RequestBody User user){
    return Result.succResult(200,"ok",user);
  }
 
  @PutMapping("/v1/user")
  public Result putUser(@RequestBody User user){
     return Result.succResult(200,user);
  }
 
  @DeleteMapping("/v1/user/{id}")
  public Result delete(@PathVariable Integer id){
    return Result.succResult(200,id);
  }

前端请求需要在main.js中配置

import Axios from 'axios' Vue.prototype.$axios = Axios

前端请求方式如下

在调用的时候用以下方式进行请求

this.$axios.get('/api/v1/user/'+this.username+'/'+this.password)
        .then(data=> {
          alert('get//'+data.data.code);
        }).catch(error=> {
         alert(error);
        });
 
      this.$axios.get('/api/v1/user',{
        params: {
          username: this.username,
          password: this.password
        }
      }).then(data =>{
        alert('get'+data.data.data)
      }).catch(error => {
        alert(error)
      });
 
      this.$axios.put('/api/v1/user',{
        id: 1,
        username: this.username,
        password: this.password
      }).then(data => {
        alert('数据password:'+data.data.data.password)
        alert('数据username:'+data.data.data.username)
      }).catch(error => {
        alert(error)
      });
 
      this.$axios.delete('/api/v1/user/1')
        .then(data=> {
          alert('delete//'+data.data.code);
        }).catch(error=> {
         alert(error);
        });
        
      this.$axios.post('/api/v1/user',{
        username: this.username,
        password: this.password
      }).then(data => { 
        alert('post'+data.data.data.password)
      }).catch(error => {
        alert(error);
      });

补充知识:vue结合axios封装form,restful,get,post四种风格请求

axios特点

1.从浏览器中创建 XMLHttpRequests

2.从 node.js 创建 http 请求

3.支持 Promise API

4.拦截请求和响应 (就是有interceptor)

5.转换请求数据和响应数据

6.取消请求

7.自动转换 JSON 数据

8.客户端支持防御 XSRF

安装

npm i axios?save
npm i qs --save
npm i element-ui --save
npm i lodash --save

引入

1.在入口文件中引入所需插件

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import url from './apiUrl'
import api from './apiUtil'

Vue.prototype.$axios = api.generateApiMap(url);
Vue.config.productionTip = false

Vue.use(ElementUI);
new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

2.新建一个util文件夹(只要存放工具类)

在util中建apiUtil.js , apiUrl.js两个文件

apiUtil.js 封装请求体

import axios from 'axios'
import _ from 'lodash'
import router from '@/util/baseRouter.js'
import { Message } from 'element-ui'
import qs from 'qs'

const generateApiMap = (map) => {
 let facade = {}
 _.forEach(map, function (value, key) {
  facade[key] = toMethod(value)
 })
 return facade
}

//整合配置
const toMethod = (options) => {
 options.method = options.method || 'post'
 return (params, config = {}) => {
  return sendApiInstance(options.method, options.url, params, config)
 }
}

// 创建axios实例
const createApiInstance = (config = {}) => {
 const _config = {
  withCredentials: false, // 跨域是否
  baseURL: '',
  validateStatus: function (status) {
   if(status != 200){
    Message(status+':后台服务异常')
   }
   return status;
  }
 }
 config = _.merge(_config, config)
 return axios.create(config)
}

//入参前后去空格
const trim = (param) =>{
 for(let a in param){
  if(typeof param[a] == "string"){
   param[a] = param[a].trim();
  }else{
   param = trim(param[a])
  }
 }
 return param
}

//restful路径参数替换
const toRest = (url,params) => {
 let paramArr = url.match(/(?<=\{).*?(?=\})/gi)
 paramArr.forEach(el=>{
  url = url.replace('{'+el+'}',params[el])
 })
 return url
}

//封装请求体
const sendApiInstance = (method, url, params, config = {}) => {
 params = trim(params)
 if(!url){
  return
 }
 let instance = createApiInstance(config)
 //响应拦截
 instance.interceptors.response.use(response => {
   let data = response.data //服务端返回数据
   let code = data.meta.respcode //返回信息状态码
   let message = data.meta.respdesc //返回信息描述
   if(data === undefined || typeof data != "object"){
    Message('后台对应服务异常');
    return false;
   }else if(code != 0){
    Message(message);
    return false;
   }else{
    return data.data;
   }
  },
  error => {
   return Promise.reject(error).catch(res => {
    console.log(res)
   })
  }
 )
 //请求方式判断
 let _method = '';
 let _params = {}
 let _url = ''
 if(method === 'form'){
  _method = 'post'
  config.headers = {'Content-Type':'application/x-www-form-urlencoded'}
  _params = qs.stringify(params)
  _url = url
 }else if(method === 'resetful'){
  _method = 'get'
  _params = {}
  _url = toRest(url,params)
 }else if(method === 'get'){
  _method = 'get'
  _params = {
   params: params
  }
  _url = url
 }else if(method === 'post'){
  _method = 'post'
  _params = params
  _url = url
 }else{
  Message('请求方式不存在')
 }
 return instance[_method](_url, _params, config)

}

export default {
 generateApiMap : generateApiMap
}

apiUrl.js 配置所有请求路径参数

其中resetful风格请求的路径中的请求字段必须写在 ‘{}'中

const host= '/api' //反向代理
export default {
 userAdd:{ url: host + "/user/add", method:"post" },
 userList:{ url: host + "/user/userList", method:"get" },
 userInfo:{ url: host + "/user/userInfo/{id}/{name}", method:"resetful"},
 userInsert:{ url: host + "/login", method:"form"},
}

使用

四种请求方式的入参统一都以object形式传入

APP.vue

<template>
 <div class="login">
    <el-button type="primary" @click="submitForm" class="submit_btn">登录</el-button>
 </div>
</template>
<script>
export default {
 data() {
  return {
  };
 },
 methods:{
  submitForm(){
   this.$axios.userAdd({
    id:'123',
    name:'liyang'
   }).then(data=>{
    console.log(data)
   })
  }
 }
};
</script>

ps:入参也可以再请求interceptors.request中封装

以上这篇vue 调用 RESTful风格接口操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅析Prototype的模板类 Template
Dec 07 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 #Javascript
vue接口请求加密实例
Aug 11 #Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 #Javascript
vue npm install 安装某个指定的版本操作
Aug 11 #Javascript
小程序自动化测试的示例代码
Aug 11 #Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 #Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 #Javascript
You might like
php使用curl发送json格式数据实例
2013/12/17 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
python实现简单井字棋小游戏
2020/03/05 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
测量实习生自我鉴定
2013/09/19 职场文书
团日活动策划书
2014/02/01 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
Go语言怎么使用变长参数函数
2022/07/15 Golang