2024年10月axios教程（SpringMVC前后端分离交互传参详细教程-）

　　⑴axios教程（SpringMVC前后端分离交互传参详细教程-

　　⑵SpringMVC前后端分离交互传参详细教程-

　　⑶温故而知新，本文为一时兴起写出，如有错误还请指正

　　⑷本文后台基于SpringBoot..编写，前端基于Vue+axios和微信小程序JS版分别编写进行联调测试，用于理解前后端分离式开发的交互流程，如果没用过axios可以点我看之前的帖子

　　⑸如果你没有学过SpringBoot也不要紧，把他看做成SpringMVC即可，写法完全一致（其实我不说你也发现不了

　　⑹本文主要讲前后端交互流程，力求帮助新人快速入门前后端分离式开发，不会讲关于环境搭建部分的内容

　　⑺在文章开头快速的过一遍SpringMVC接收参数的几种方式，一定要记住这几种方式，看不懂或不理解都没关系，后续会结合前端代码过一遍，这里就不过多解释了，直接上代码

　　⑻细心的人应该留意到了，最后使用变量接收参数的时候只接收了username这一个值，并没有接收password，作为扩展在这里解释一下，不看也可以，看了不理解也没关系，知道这个事儿就够了，以后接触多了就理解了

　　⑼如果请求参数放在了请求体中，只有参数列表第一个变量能接收到值，这里需要站在Servlet的角度来看：

　　⑽可以看到请求体内容是存到了InputStream输入流对象中，想要知道请求体中的内容是什么必须读流中的数据，读取到数据后会将值给第一个变量，而流中的数据读取一次之后就没了，当第二个变量读流时发现流已经被关闭了，自然就接收不到

　　⑾SpringMVC回顾到此为止，只需要记住那三种方式即可，在前后端交互之前先在Controller中写个测试接口

　　⑿这个接口对应的是GET类型的请求，这里直接在浏览器地址栏访问测试一下：

　　⒀这里推荐一个Chrome浏览器的插件JSONView，它可以对浏览器显示的JSON数据进行格式化显示，推荐的同时也提个醒，安装需谨慎，如果JSON数据量太大的话页面会很卡

　　⒁之前已经写好一个GET请求的测试接口了，这里就在前端写代码访问一下试试看

　　⒂代码已经写完了，接下来打开页面试一下能不能调通：

　　⒃可以看到请求代码报错了，查看报错信息找到重点关键词CORS，表示该请求属于跨域请求

　　⒄什么是跨域请求？跨域请求主要体现在跨域两个字上，当发起请求的客户端和接收请求的服务端他们的【协议、域名、端口号】有任意一项不一致的情况都属于跨域请求，拿刚刚访问的地址举例，VUE页面运行在端口上，后台接口运行在端口上，端口号没有对上所以该请求为跨域请求

　　⒅如果在调试的时候仔细一点就会发现，虽然前端提示请求报错了，但是后端还是接收到请求了，那为什么会报错呢？是因为后端返回数据后，浏览器接收到响应结果发现该请求跨域，然后给我们提示错误信息，也就是说问题在浏览器这里

　　⒆怎样才能让浏览器允许该请求呢？我们需要在后端动点手脚，在返回结果的时候设置允许前端访问即可

　　⒇首先配置一个过滤器，配置过滤器有很多种实现的方法，我这里是实现Filter接口

　　⒈过滤器创建完成了，回来看前端提示的报错信息为Aess-Control-Allow-Origin，意思是允许访问的地址中并不包含当前VUE的地址，那么我们就在响应结果时将VUE的地址追加上

　　⒉添加完成后重启项目后台就会发现请求已经成功并且拿到了返回值

　　⒊再次进行测试，将后台的GetMapping修改为PostMapping，修改前端请求代码后重新发起请求进行测试

　　⒋可以看到POST请求还是提示跨域请求，对应的错误信息则是Aess-Control-Allow-Headers，也就是说请求头中包含了不被允许的信息，这里图省事儿用*通配符把所有请求头都放行

　　⒌这样处理之后，请求就可以正常访问啦

　　⒍路径占位参数，就是将参数作为请求路径的一部分，例如你现在正在看的这篇博客使用的就是路径占位传参

　　⒎这种传参方法很简单，就不细讲了，可以效仿他这种方法写个测试案例

　　⒏这里需要注意区分【路径占位传参】和【路径传参】两个概念，不要记混

　　⒐什么是路径传参？发起一个请求在路径?后面的都属于路径传参，路径传参就是将参数以明文方式拼接在请求地址后面

　　⒑路径传参使用【正常接收参数】中的实例代码即可接收到值

　　⒒除了自己手动拼接请求参数之外，axios在config中提供了params属性，也可以实现该功能

　　⒓表单类型参数，就是通过form表单提交的参数，通常用在例如HTML、JSP页面的form标签上，但如果是前后端分离的话就不能使用form表单提交了，这里可以手动创建表单对象进行传值

　　⒔需要注意，GET请求一般只用于路径传参，其他类型传参需要使用POST或其他类型的请求

　　⒕表单类型参数也是【正常接收参数】中的实例代码接收值

　　⒖小程序删除了FormData对象，不能发起表单类型参数的请求，如果非要写的话可以试着使用wx.uploadFile实现，这里就不尝试了

　　⒗请求体传参，是在发起请求时将参数放在请求体中

　　⒘表单类型参数需要使用上面【请求体接收参数】中的实例代码接收值

　　⒙axios如果发起的为POST类型请求，默认会将参数放在请求体中，这里直接写即可

　　⒚小程序代码也是一样的，当发起的时POST类型的请求时，默认会把参数放在请求体中

　　⒛在实际开发中大概率不用写前端代码，只负责编写后台接口，但怎样才能知道前端请求是什么类型参数？

　　关于这点可以通过浏览器开发者工具的【网络】面板可以看出来，网络面板打开时会录制网页发起的所有请求

　　路径占位传参就不解释了，没啥好说的，这里介绍一下路径传参、表单传参和请求体传参

　　编写好路径传参的请求代码后切换到网络面板，点击发起请求：

　　编写好请求体传参的请求代码后切换到网络面板，点击发起请求：

　　编写好表单类型传参的请求代码后切换到网络面板，点击发起请求：

　　掌握了前后端交互的流程就可以正常开发网站了，这里推荐后端返回一套规定好的模板数据，否则某些情况可能会比较难处理，例如这个查询用户列表的接口：

　　该接口乍一看没毛病，拿到用户列表数据后返回给前端用于渲染，合情合理，可是如果后端业务逻辑有BUG可能会导致前端接收到的结果为空，这种情况下前端就需要判断，如果接收到的值为空，就提示请求出错，问题貌似已经解决，但是如果表中本来就没有任何数据的话有应该怎么处理

　　上述的就是最常见的一种比较头疼的情况，所以针对这种情况最好指定一套标准的返回模板进行处理

　　根据刚刚的举例来看，返回结果中应该有一个标识来判断该请求是否执行成功，如果执行失败的话还应该返回失败原因，响应给前端的数据会被转换为JSON数据，使用Map集合来返回最合适不过了

　　在后台接口编写完成后，一般情况下我们都需要进行测试，GET请求还好，浏览器直接就访问呢了，如果是POST请求还要去写前端代码就很烦，这里介绍一款接口调试工具ApiPost

　　你可能没听过ApiPost，但是你大概率听说过Postman，他们的用法几乎一致，且ApiPost是国人开发的免费的接口调试工具，界面中文很友好

　　这里也可以看出来，form表单传参其实也算在了请求体里面，只不过使用的是multipart/form-data类型的参数而已，而之前提到的请求体传参对应的就是application/json

　　有没有简单的方法防止网页刷新等导致数据重复提交到数据库，求详细代码，谢谢！！！

　　防止网页刷新导致数据重复提交，可以在表单中添加Token令牌机制，这即保证了安全性（防CSRF攻击，又能够验证重复提交，每次生成表单页面时，会生成一个Token，在每次提交数据时，都要求检查Token，通过token检验合法的请求，可以多去看看实战教程。

　　async/await来处理异步/同步

　　前面比较啰嗦，希望读者耐心看完。async/await可以说是一个老生常谈，但是每一个前端工程师却又避不开的话题。在JQuery一把梭的时代，如果遇到下面类似的需求，你要怎么做？需求：拿到第一个ajax请求省，拿到省数据请求第二个ajax来获得市的数据，拿到市的数据再请求第三个ajax来获得区的数据。最常见的写法莫过于两种：、回调地狱式写法：简直令人发疯。或者是这样？同步请求我靠，只要一个数据请求不回来页面就完犊子了。这简直是噩梦。别笑，我相信身为前端工程师一定这么写过。直到有一天，你发现vue里没有Jquery，只有基于promise写的axios.一开始在使用axios的时候，还是脱离不了必须同步请求的变成思想，于是在vue项目中引入了jquery，把项目搞成了四不像。研究了好久，终于发现了async/awaitasync词面翻译“异步”。async关键字一般放到function的前面，用来表示一个异步函数。如下根据阮一峰es教程关于async部分的介绍，能得知async会返回一个Promise对象。所以我们可以通过then来调用。如果不太明白，那我这么写你一定会明白：词面意思“等待”，它只会在async函数体内出现，代表执行到这里的时候，等一下。它后面可以跟任何表达式，不过一般会跟一个Promise，可以实现异步函数同步调用的效果。delay是异步函数，在正常情况下，如果这样写：会先输出，然后秒后再输出.但是在await的影响下，函数会先等待秒后输出a，在等待秒后输出b。话题再转回到我们一开始说的ajax，使用async/await的方法来写，是不是感觉优雅多了？在vue中，我们会使用axios来与后台做数据交互，axios没有同步请求，只有异步请求，所以我们可以使用async/await来模拟一个同步请求，实现功能。

　　零基础学习前端的话，自学和培训两条路。

　　自主学习成本相对来说较低，可以从网上找到相关的书籍、视频进行学习。锻炼自己，能从生活总锻炼自己自主的能力、控制力、协调力，对自身有一个很大的提高。学习内容会很深刻，自己一步一步学来的，很多知识会牢牢记住在脑海中。

　　自学的话，你需要注意以下几点：

　　俗话说得好，兴趣是最好的老师。不管是零基础还是有经验，想要学习某样知识就需要对它产生兴趣，带着探索求知的心态去接触、了解并学习它，会使自己更加容易接受新知识，而不是为了完成任务似的机械性学习，枯燥无味，重复内容，这样只会让自己对学习内容产生抵触和厌烦的心理。

　　学习前端，资料必不可少，闲暇之余上网查查一些相关的前端书籍和视频教程都可以，两者结合着看。书籍补充基本知识，打好基础才是关键；视频教程提升技能操作度，让自己熟练掌握知识，可以看自己的实际情况决定。

　　其次，不管你是学生还是上班族，想要学好某样技能就必须安排好学习它的时间，做好两全其美的准备，不要拆了东墙补西墙，最后只会两败俱伤，得不偿失。

　　很多人刚开始都是信心满满豪情万丈的学习前端，但是过不了多久就都蔫了，临阵脱逃了，为什么？是学习内容枯燥无味还是知识越学越难学不下去？都不是，是你自己没有坚持学下去的勇气罢了；我可以告诉你，科技在进步，学习内容也会越来越多，难易程度也会随之提升，不仅实现在难，将来会更难，坚持不下去，那你就趁早放弃，别浪费时间和精力。

　　还有一点，你需要一位指引人，单单靠自己是学不下去的，尤其是小白。学习过程中会有很多问题，如果你没有一位帮助你解决问题的老师，只会死磕答案的话，不仅得不到对的答案，也走不了多远，只会半途而废。好的老师不仅学习上可以帮助你，还会在生活、心理上帮助你，为你排忧解难。

　　作为一个初学者，你必须明确系统的学习方案，我建议一定有一个指导的人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就都靠自己钻研，第一步就是确定web前端都需要哪些内容，并且在多少时间内学完，建议时间个月保底。

　　视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里给大家提醒，书可以看，但是是在建立于你已经对于某个知识点有了具体操作的执行后，在用书去巩固概念，这样更加利于你对于知识的理解。

　　对于学习技术来讲，掌握一个学习方法是非常重要的，其实对于学习web前端来讲，学习方法确实很多都是相通的，一旦学习方法不对，可能就会造成“方法不对，努力白费”。其实关于这方面还是很多的，我就简单说个例子，有的人边听课边跟着敲代码，这样就不对，听课的时候就专心听，做题的时候就专心做题，这都是过来人的经验，一定要听。根据每个人的不同，可能学习方法也会有所出路，找到适合你自己的学习法方法是学习的前提。

　　不建议自己一个人瞎学，在我了解学习编程的这些人来看，从零基础开始学并且最后成功做这份工作的其实并没有几个，我觉得大部分原因就是因为他们都不了解web前端是干什么的，学什么的，就盲目的买书看，到处找视频看，最后看着看着就放弃了，所以我建议初学者在没有具体概念之前，还是找有经验的人请教一下，聊过之后你就会知道web前端具体是干什么的，该怎么学，这是我个人的小建议，可以不采纳。

　　学前端的话，书籍是必不可少的：

　　《JavaScript高级程序设计(第版)红皮书》，适合有一定编程经验的Web应用开发人员阅读，也可作为高校及社会实用技术培训相关专业课程的教材。

　　《JavaScript权威指南(第版)》犀牛书，本书不仅适合初学者系统学习，也适合有经验的JavaScript开发者随手翻阅。

　　《JavaScriptDOM编程艺术(第版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的JavaScript编程原则和最佳实践，并全面探讨了HTML以及jQuery等JavaScript库。

　　《CSS权威指南(第三版)》，不管你是一个有经验的Web开发人员还是一个彻底的初学者，《CSS权威指南(第版)》都是你的CSS学习源泉。

　　《JavaScript设计模式》，适合JavaScript初学者、前端设计者、JavaScript程序员学习，也可以作为大专院校相关专业师生的学习用书，以及培训学校的教材。

　　《你不知道的JavaScript(上中下卷)》，本书既适合JavaScript语言初学者了解其精髓，又适合经验丰富的JavaScript开发人员深入学习。

　　《Vue.js权威指南》，该书内容全面，讲解细致，实例丰富，适用于各层次的开发者。

　　第阶段：前端页面重构(周)

　　内容包含了：(PC端网站布局项目、HTML+CSS基础项目、WebApp页面布局项目)

　　第阶段：JavaScript高级程序设计(周)

　　内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES/ES应用项目、JavaScript工具库自主研发项目)

　　第阶段：PC端全栈项目开发(周)

　　内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

　　第阶段：移动端项目开发(周)

　　内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)

　　第阶段：混合(Hybrid,ReactNative)开发(周)

　　内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

　　第阶段：NodeJS全栈开发(周)

　　内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)

　　如果你资金允许，选择培训班，这几点你可以参考一下：

　　为什么要看重培训机构这一点呢?因为前端是一门衔接UI和后台开发的职位，这个机构只有同时懂前端设计和后台开发才能做出最全面、最专业的前端课程，我们才能学到高性价比的web前端课程。

　　web课程设置是否等于企业招聘要求

　　选择培训机构的时候要看该机构是否包含了全面的web系列课程，企业需求的技能是否在课程中都有相关的内容。另外，我们除了要看培训机构教不教这些内容，还要看培训机构的在这些技术领域是否专业，web前端工程师课程完全专注于前端知识，全面、深入的讲解HTML、CSS、Java、JQuery等内容，我们要看培训机构是否能将这些核心知识让我们学到极致。

　　首先，这个培训机构是否有课程体系的保障，能让我们边学边练，并且能够分阶段的让我们学会前端所有的技能。

　　其次，这个培训机构是否有师资团队保障体系，是否有总监级讲师授课和上项目实战经验课，是否有技术最牛的行业老师，是否有完善的同步教学系统。

　　参加培训班的话，学习时间花费相对来说，较短。自学时间会长一点，因为自控力什么的都是非常考验的。讲师授课，可以随时请教老师，遇到问题能及时解决，技术提升也会很快。系统的学习web前端知识。一般培训都会有系统的课程，根据课程安排每天的学习，学习的内容很全面；管理严，培训机构管理很严；有伙伴，做起事情来更好，因为小伙伴的相互鼓励，共同探讨，不仅能让你收获一批朋友，还对学习有很大的帮助！

　　最后，欢迎加入我的前端qq交流群，里面也是一群学前端的小伙伴，我们可以一起学习，互相监督，互相交流学习经验，一起进行项目实践，还有很多学习资料哦~期待你的加入。

　　Vue数据怎么获取使用外部的数据

　　通常情况下，在构建?JavaScript?应用程序时，您希望从远程源或从API获取数据。我最近研究了一些公开的API，发现可以使用这些数据源完成很多很酷的东西。

　　使用Vue.js，可以逐步地构建围绕其中一个服务的应用程序，并在几分钟内就可以开始向用户提供内容服务。

　　我将演示如何构建一个简单的新闻应用程序，它可以显示当天的热门新闻文章，并允许用户按照他们的兴趣类别进行过滤，从纽约时报API获取数据。您可以在这里找到本教程的完整代码。

　　下面是最终应用的外观：

　　要学习本教程，您将需要一些非常基本的Vue.js的知识。您可以在这里找到一个很棒的“入门指南”。我还将使用ES语法，您可以到这里进一步学习：

　　为了保持简单，我们只使用个文件:

　　app.js将包含我们应用程序的所有逻辑，index.html?文件将包含我们应用程序的主视图。

　　我们先在?index.html?中写一些基本的标记:

　　然后，在index.html的底部导入?Vue.js和app.js，就在《/body》标签之前：

　　可选的，我们还可以导入Foundation，以利用一些预先创建的样式，来使我们的视图看起来更好一点。

　　创建一个简单的?Vue?App

　　首先，我们将在div#app?元素上创建一个新的?Vue?实例，并使用一些测试数据来模拟新闻API的响应：

　　我们通过el选项告诉?Vue?要挂载的目标元素，并通过data选项指定我们的应用程序用到的数据。

　　要在我们的应用程序视图中显示这些模拟数据，我们可以在#app元素中写入下面的标记：

　　v-for?指令用于渲染我们的results列表。我们使用双花括号来显示每一项的内容。

　　您可以在?Vue?模板语法?这里阅读更多内容

　　我们现在已经完成了基本的布局工作：

　　要使用?纽约时报API，您需要获得一个API密钥。所以如果你还没有，注册并获取一个热点事件API的API密钥。

　　创建ajax请求和处理响应

　　Axios是一个基于Promise的HTTP客户端，用于创建Ajax请求，并且非常适合我们的应用。它提供了一些简单而丰富的API。它与fetchAPI非常相似，但不需要为旧版浏览器额外的添加一个polyfill，另外还有一些很巧妙的地方。

　　以前，vue-resource?通常用于Vue项目，但现在已经退休了。