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 相关文章推荐
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
php中使用redis队列操作实例代码
2013/02/07 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
prototype 中文参数乱码解决方案
2009/11/09 Javascript
js select常用操作控制代码
2010/03/16 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
python实现低通滤波器代码
2020/02/26 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
政治表现评语
2014/05/04 职场文书
六一儿童节活动总结
2014/08/27 职场文书
家庭教育的心得体会
2014/09/01 职场文书
全陪导游词
2015/02/04 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书