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 相关文章推荐
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
浅谈php://filter的妙用
2019/03/05 PHP
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
vue.js实现照片放大功能
2020/06/23 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
Python实现的远程登录windows系统功能示例
2018/06/21 Python
对python 命令的-u参数详解
2018/12/03 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
Python文件操作方法详解
2020/02/09 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
单位实习证明怎么写
2014/01/17 职场文书
学校班班通实施方案
2014/06/11 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
大学生操行评语大全
2014/12/31 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python