网站做装修效果图,泉州网站建设选择讯呢,查询域名注册信息,梧州网站优化目录
后端准备
导入依赖
解决跨域
User实体类
DemoController测试接口
前端准备
项目结构
axios.js
axios.html
开始测试
后端结果
前端结果 后端准备
导入依赖
案例会用到以下的三个依赖。
dependencygroupIdorg.springframework.boot/gro…目录
后端准备
导入依赖
解决跨域
User实体类
DemoController测试接口
前端准备
项目结构
axios.js
axios.html
开始测试
后端结果
前端结果 后端准备
导入依赖
案例会用到以下的三个依赖。
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId
/dependency
dependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdoptionaltrue/optional
/dependency
dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.83/version
/dependency
解决跨域
定义一个过滤器解决跨域的问题。
import jakarta.servlet.*;
import jakarta.servlet.annotation.WebFilter;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;import java.io.IOException;Component
WebFilter(urlPatterns /*)
public class MyFilter implements Filter {Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletRequest request (HttpServletRequest) servletRequest;HttpServletResponse response (HttpServletResponse) servletResponse;response.setHeader(Access-control-Allow-Origin, request.getHeader(Origin));response.setHeader(Access-Control-Allow-Methods, GET,POST,OPTIONS,PUT,DELETE,PATCH);response.setHeader(Access-Control-Allow-Headers, request.getHeader(Access-Control-Request-Headers));filterChain.doFilter(servletRequest, servletResponse);}
}
User实体类
将接收到的数据封装到User实体类中。
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;Data
NoArgsConstructor
AllArgsConstructor
public class User {private Long id;private String username;
}
DemoController测试接口
我们测试两个接口一个GET请求一个POST请求。 因为在案例中前端发出的POST请求是以表单的形式传数据所以不需要加RequestBody注解。只有在接收json格式的数据时才需要在参数上加RequestBody注解。 import com.alibaba.fastjson.JSONObject;
import com.demo.pojo.User;
import org.springframework.web.bind.annotation.*;RestController
RequestMapping(/test)
public class DemoController {GetMappingpublic String demo1() {System.out.println(get test success!);return get test success!;}PostMappingpublic String demo2(User user) {System.out.println(post test success!);return JSONObject.toJSONString(user);}
}
前端准备
项目结构
如图所示创建项目。 axios.js
这里直接给出复制粘贴即可。
/* axios v0.18.0 | (c) 2018 by Matt Zabriskie */
!function(e,t){objecttypeof exportsobjecttypeof module?module.exportst():functiontypeof definedefine.amd?define([],t):objecttypeof exports?exports.axiost():e.axiost()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var on[r]{exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded!0,o.exports}var n{};return t.me,t.cn,t.p,t(0)}([function(e,t,n){e.exportsn(1)},function(e,t,n){use strict;function r(e){var tnew s(e),ni(s.prototype.request,t);return o.extend(n,s.prototype,t),o.extend(n,t),n}var on(2),in(3),sn(5),un(6),ar(u);a.Axioss,a.createfunction(e){return r(o.merge(u,e))},a.Canceln(23),a.CancelTokenn(24),a.isCanceln(20),a.allfunction(e){return Promise.all(e)},a.spreadn(25),e.exportsa,e.exports.defaulta},function(e,t,n){use strict;function r(e){return[object Array]R.call(e)}function o(e){return[object ArrayBuffer]R.call(e)}function i(e){returnundefined!typeof FormDatae instanceof FormData}function s(e){var t;return tundefined!typeof ArrayBufferArrayBuffer.isView?ArrayBuffer.isView(e):ee.buffere.buffer instanceof ArrayBuffer}function u(e){returnstringtypeof e}function a(e){returnnumbertypeof e}function c(e){returnundefinedtypeof e}function f(e){return null!eobjecttypeof e}function p(e){return[object Date]R.call(e)}function d(e){return[object File]R.call(e)}function l(e){return[object Blob]R.call(e)}function h(e){return[object Function]R.call(e)}function m(e){return f(e)h(e.pipe)}function y(e){returnundefined!typeof URLSearchParamse instanceof URLSearchParams}function w(e){return e.replace(/^\s*/,).replace(/\s*$/,)}function g(){return(undefinedtypeof navigator||ReactNative!navigator.product)(undefined!typeof windowundefined!typeof document)}function v(e,t){if(null!eundefined!typeof e)if(object!typeof e(e[e]),r(e))for(var n0,oe.length;no;n)t.call(null,e[n],n,e);else for(var i in e)Object.prototype.hasOwnProperty.call(e,i)t.call(null,e[i],i,e)}function x(){function e(e,n){objecttypeof t[n]objecttypeof e?t[n]x(t[n],e):t[n]e}for(var t{},n0,rarguments.length;nr;n)v(arguments[n],e);return t}function b(e,t,n){return v(t,function(t,r){nfunctiontypeof t?e[r]E(t,n):e[r]t}),e}var En(3),Cn(4),RObject.prototype.toString;e.exports{isArray:r,isArrayBuffer:o,isBuffer:C,isFormData:i,isArrayBufferView:s,isString:u,isNumber:a,isObject:f,isUndefined:c,isDate:p,isFile:d,isBlob:l,isFunction:h,isStream:m,isURLSearchParams:y,isStandardBrowserEnv:g,forEach:v,merge:x,extend:b,trim:w}},function(e,t){use strict;e.exportsfunction(e,t){return function(){for(var nnew Array(arguments.length),r0;rn.length;r)n[r]arguments[r];return e.apply(t,n)}}},function(e,t){function n(e){return!!e.constructorfunctiontypeof e.constructor.isBuffere.constructor.isBuffer(e)}function r(e){returnfunctiontypeof e.readFloatLEfunctiontypeof e.slicen(e.slice(0,0))}/*!* Determine if an object is a Buffer** author Feross Aboukhadijeh https://feross.org* license MIT*/e.exportsfunction(e){return null!e(n(e)||r(e)||!!e._isBuffer)}},function(e,t,n){use strict;function r(e){this.defaultse,this.interceptors{request:new s,response:new s}}var on(6),in(2),sn(17),un(18);r.prototype.requestfunction(e){stringtypeof e(ei.merge({url:arguments[0]},arguments[1])),ei.merge(o,{method:get},this.defaults,e),e.methode.method.toLowerCase();var t[u,void 0],nPromise.resolve(e);for(this.interceptors.request.forEach(function(e){t.unshift(e.fulfilled,e.rejected)}),this.interceptors.response.forEach(function(e){t.push(e.fulfilled,e.rejected)});t.length;)nn.then(t.shift(),t.shift());return n},i.forEach([delete,get,head,options],function(e){r.prototype[e]function(t,n){return this.request(i.merge(n||{},{method:e,url:t}))}}),i.forEach([post,put,patch],function(e){r.prototype[e]function(t,n,r){return this.request(i.merge(r||{},{method:e,url:t,data:n}))}}),e.exportsr},function(e,t,n){use strict;function r(e,t){!i.isUndefined(e)i.isUndefined(e[Content-Type])(e[Content-Type]t)}function o(){var e;returnundefined!typeof XMLHttpRequest?en(8):undefined!typeof process(en(8)),e}var in(2),sn(7),u{Content-Type:application/x-www-form-urlencoded},a{adapter:o(),transformRequest:[function(e,t){return s(t,Content-Type),i.isFormData(e)||i.isArrayBuffer(e)||i.isBuffer(e)||i.isStream(e)||i.isFile(e)||i.isBlob(e)?e:i.isArrayBufferView(e)?e.buffer:i.isURLSearchParams(e)?(r(t,application/x-www-form-urlencoded;charsetutf-8),e.toString()):i.isObject(e)?(r(t,application/json;charsetutf-8),JSON.stringify(e)):e}],transformResponse:[function(e){if(stringtypeof e)try{eJSON.parse(e)}catch(e){}return e}],timeout:0,xsrfCookieName:XSRF-TOKEN,xsrfHeaderName:X-XSRF-TOKEN,maxContentLength:-1,validateStatus:function(e){return e200e300}};a.headers{common:{Accept:application/json, text/plain, */*}},i.forEach([delete,get,head],function(e){a.headers[e]{}}),i.forEach([post,put,patch],function(e){a.headers[e]i.merge(u)}),e.exportsa},function(e,t,n){use strict;var rn(2);e.exportsfunction(e,t){r.forEach(e,function(n,r){r!tr.toUpperCase()t.toUpperCase()(e[t]n,delete e[r])})}},function(e,t,n){use strict;var rn(2),on(9),in(12),sn(13),un(14),an(10),cundefined!typeof windowwindow.btoawindow.btoa.bind(window)||n(15);e.exportsfunction(e){return new Promise(function(t,f){var pe.data,de.headers;r.isFormData(p)delete d[Content-Type];var lnew XMLHttpRequest,honreadystatechange,m!1;if(undefinedtypeof window||!window.XDomainRequest||withCredentialsin l||u(e.url)||(lnew window.XDomainRequest,honload,m!0,l.onprogressfunction(){},l.ontimeoutfunction(){}),e.auth){var ye.auth.username||,we.auth.password||;d.AuthorizationBasic c(y:w)}if(l.open(e.method.toUpperCase(),i(e.url,e.params,e.paramsSerializer),!0),l.timeoute.timeout,l[h]function(){if(l(4l.readyState||m)(0!l.status||l.responseURL0l.responseURL.indexOf(file:))){var ngetAllResponseHeadersin l?s(l.getAllResponseHeaders()):null,re.responseTypetext!e.responseType?l.response:l.responseText,i{data:r,status:1223l.status?204:l.status,statusText:1223l.status?No Content:l.statusText,headers:n,config:e,request:l};o(t,f,i),lnull}},l.onerrorfunction(){f(a(Network Error,e,null,l)),lnull},l.ontimeoutfunction(){f(a(timeout of e.timeoutms exceeded,e,ECONNABORTED,l)),lnull},r.isStandardBrowserEnv()){var gn(16),v(e.withCredentials||u(e.url))e.xsrfCookieName?g.read(e.xsrfCookieName):void 0;v(d[e.xsrfHeaderName]v)}if(setRequestHeaderin lr.forEach(d,function(e,t){undefinedtypeof pcontent-typet.toLowerCase()?delete d[t]:l.setRequestHeader(t,e)}),e.withCredentials(l.withCredentials!0),e.responseType)try{l.responseTypee.responseType}catch(t){if(json!e.responseType)throw t}functiontypeof e.onDownloadProgressl.addEventListener(progress,e.onDownloadProgress),functiontypeof e.onUploadProgressl.uploadl.upload.addEventListener(progress,e.onUploadProgress),e.cancelTokene.cancelToken.promise.then(function(e){l(l.abort(),f(e),lnull)}),void 0p(pnull),l.send(p)})}},function(e,t,n){use strict;var rn(10);e.exportsfunction(e,t,n){var on.config.validateStatus;n.statuso!o(n.status)?t(r(Request failed with status code n.status,n.config,null,n.request,n)):e(n)}},function(e,t,n){use strict;var rn(11);e.exportsfunction(e,t,n,o,i){var snew Error(e);return r(s,t,n,o,i)}},function(e,t){use strict;e.exportsfunction(e,t,n,r,o){return e.configt,n(e.coden),e.requestr,e.responseo,e}},function(e,t,n){use strict;function r(e){return encodeURIComponent(e).replace(/%40/gi,).replace(/%3A/gi,:).replace(/%24/g,$).replace(/%2C/gi,,).replace(/%20/g,).replace(/%5B/gi,[).replace(/%5D/gi,])}var on(2);e.exportsfunction(e,t,n){if(!t)return e;var i;if(n)in(t);else if(o.isURLSearchParams(t))it.toString();else{var s[];o.forEach(t,function(e,t){null!eundefined!typeof e(o.isArray(e)?t[]:e[e],o.forEach(e,function(e){o.isDate(e)?ee.toISOString():o.isObject(e)(eJSON.stringify(e)),s.push(r(t)r(e))}))}),is.join()}return i(e(e.indexOf(?)-1??:)i),e}},function(e,t,n){use strict;var rn(2),o[age,authorization,content-length,content-type,etag,expires,from,host,if-modified-since,if-unmodified-since,last-modified,location,max-forwards,proxy-authorization,referer,retry-after,user-agent];e.exportsfunction(e){var t,n,i,s{};return e?(r.forEach(e.split(\n),function(e){if(ie.indexOf(:),tr.trim(e.substr(0,i)).toLowerCase(),nr.trim(e.substr(i1)),t){if(s[t]o.indexOf(t)0)return;set-cookiet?s[t](s[t]?s[t]:[]).concat([n]):s[t]s[t]?s[t], n:n}}),s):s}},function(e,t,n){use strict;var rn(2);e.exportsr.isStandardBrowserEnv()?function(){function e(e){var te;return n(o.setAttribute(href,t),to.href),o.setAttribute(href,t),{href:o.href,protocol:o.protocol?o.protocol.replace(/:$/,):,host:o.host,search:o.search?o.search.replace(/^\?/,):,hash:o.hash?o.hash.replace(/^#/,):,hostname:o.hostname,port:o.port,pathname:/o.pathname.charAt(0)?o.pathname:/o.pathname}}var t,n/(msie|trident)/i.test(navigator.userAgent),odocument.createElement(a);return te(window.location.href),function(n){var or.isString(n)?e(n):n;return o.protocolt.protocolo.hostt.host}}():function(){return function(){return!0}}()},function(e,t){use strict;function n(){this.messageString contains an invalid character}function r(e){for(var t,r,iString(e),s,u0,ao;i.charAt(0|u)||(a,u%1);sa.charAt(63t8-u%1*8)){if(ri.charCodeAt(u.75),r255)throw new n;tt8|r}return s}var oABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789/;n.prototypenew Error,n.prototype.code5,n.prototype.nameInvalidCharacterError,e.exportsr},function(e,t,n){use strict;var rn(2);e.exportsr.isStandardBrowserEnv()?function(){return{write:function(e,t,n,o,i,s){var u[];u.push(eencodeURIComponent(t)),r.isNumber(n)u.push(expiresnew Date(n).toGMTString()),r.isString(o)u.push(patho),r.isString(i)u.push(domaini),s!0u.push(secure),document.cookieu.join(; )},read:function(e){var tdocument.cookie.match(new RegExp((^|;\\s*)(e)([^;]*)));return t?decodeURIComponent(t[3]):null},remove:function(e){this.write(e,,Date.now()-864e5)}}}():function(){return{write:function(){},read:function(){return null},remove:function(){}}}()},function(e,t,n){use strict;function r(){this.handlers[]}var on(2);r.prototype.usefunction(e,t){return this.handlers.push({fulfilled:e,rejected:t}),this.handlers.length-1},r.prototype.ejectfunction(e){this.handlers[e](this.handlers[e]null)},r.prototype.forEachfunction(e){o.forEach(this.handlers,function(t){null!te(t)})},e.exportsr},function(e,t,n){use strict;function r(e){e.cancelTokene.cancelToken.throwIfRequested()}var on(2),in(19),sn(20),un(6),an(21),cn(22);e.exportsfunction(e){r(e),e.baseURL!a(e.url)(e.urlc(e.baseURL,e.url)),e.headerse.headers||{},e.datai(e.data,e.headers,e.transformRequest),e.headerso.merge(e.headers.common||{},e.headers[e.method]||{},e.headers||{}),o.forEach([delete,get,head,post,put,patch,common],function(t){delete e.headers[t]});var te.adapter||u.adapter;return t(e).then(function(t){return r(e),t.datai(t.data,t.headers,e.transformResponse),t},function(t){return s(t)||(r(e),tt.response(t.response.datai(t.response.data,t.response.headers,e.transformResponse))),Promise.reject(t)})}},function(e,t,n){use strict;var rn(2);e.exportsfunction(e,t,n){return r.forEach(n,function(n){en(e,t)}),e}},function(e,t){use strict;e.exportsfunction(e){return!(!e||!e.__CANCEL__)}},function(e,t){use strict;e.exportsfunction(e){return/^([a-z][a-z\d\\-\.]*:)?\/\//i.test(e)}},function(e,t){use strict;e.exportsfunction(e,t){return t?e.replace(/\/$/,)/t.replace(/^\//,):e}},function(e,t){use strict;function n(e){this.messagee}n.prototype.toStringfunction(){returnCancel(this.message?: this.message:)},n.prototype.__CANCEL__!0,e.exportsn},function(e,t,n){use strict;function r(e){if(function!typeof e)throw new TypeError(executor must be a function.);var t;this.promisenew Promise(function(e){te});var nthis;e(function(e){n.reason||(n.reasonnew o(e),t(n.reason))})}var on(23);r.prototype.throwIfRequestedfunction(){if(this.reason)throw this.reason},r.sourcefunction(){var e,tnew r(function(t){et});return{token:t,cancel:e}},e.exportsr},function(e,t){use strict;e.exportsfunction(e){return function(t){return e.apply(null,t)}}}])});
//# sourceMappingURLaxios.min.map
axios.html
当点击对应的按钮会发出相应的请求将返回的结果打印在控制台。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/axios.js/script
/headbodyinput typebutton value获取数据GET onclickget()input typebutton value获取数据POST onclickpost()/bodyscriptfunction get() {axios({method: get,url: http://localhost:8080/test}).then(result {console.log(result.data)})}function post() {axios({method: post,url: http://localhost:8080/test,data: id1username艾伦}).then(result {console.log(result.data)})}
/script/html
开始测试
将后端代码运行起来然后在浏览器中打开前端页面。点击按钮后查看结果可以看到后端成功响应了请求并且前端也成功接收到了数据。
后端结果 前端结果
