查找了很多资料, 使用原生的上传也是可以的 , 只是之前没有注意到userId这事, 导致发送请求时总是报错500(internal server error)
在这里插入图片描述
接下来看一下如何使用Upload标签实现点击/拖拽上传
如何携带参数, 如何设置headers
<template>
<div>
<Row>
<Col>
<Upload
multiple
type="drag"
:data="submitData"
:headers="upHeaders"
action="/api/cs-dzjf-soa/api/v1/file/upload"
>
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>点击或拖拽到此处上传</p>
</div>
</Upload>
</Col>
</Row>
</div>
</template>
<script>
import axios from "axios"
export default {
components: {},
name: "first",
data() {
return {
submitData: { // 这里是需要携带的数据
srcLanguage: "en",
tgtLanguage: "zh"
},
upHeaders: { // 这里设置的是请求头中的userId, 用于鉴权的
"userId": "fffffffffffffffffffffffffff"
}
}
},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
效果图如下
在这里插入图片描述
Upload标签中配置的:data就是用于携带参数的, :headers是用于携带头信息的, 请求的url地址中开头位置的api是用于解决跨域的, 具体如何在前端解决跨域参考 前端解决跨域
**这里在headers中不需要配置Content-Type: multipart/form-data, 多此一举
后期补充的问题:
Upload中默认上传时的格式是
file: (binary)
1
1
这里现在使用的后台接口中, 用于接收上传文件的字段是是data, 那么这时候就需要在前台修改一下Upload默认的键名, 百度一番之后, 无果, 决定找一下源码看看, 源码也没找到有用的信息, 在一个github项目上找到了点信息
github地址
在这里插入图片描述
看到这句话 是不是觉得好像有点对症呢???没错, 就是这里可以设置
在这里插入图片描述
在这配置上name属性之后, 我们重新上传一下文件试试
现在已经成功的修改了
温故而知新，本文为一时兴起写出，如有错误还请指正
本文后台基于SpringBoot2.5.6编写，前端基于Vue2 + axios和微信小程序JS版分别编写进行联调测试，用于理解前后端分离式开发的交互流程，如果没用过axios可以点我看之前的帖子
如果你没有学过SpringBoot也不要紧，把他看做成SpringMVC即可，写法完全一致（其实我不说你也发现不了）
本文主要讲前后端交互流程，力求帮助新人快速入门前后端分离式开发，不会讲关于环境搭建部分的内容
在文章开头快速的过一遍SpringMVC接收参数的几种方式，一定要记住这几种方式，看不懂或不理解都没关系，后续会结合前端代码过一遍，这里就不过多解释了，直接上代码
细心的人应该留意到了，最后使用变量接收参数的时候只接收了 username 这一个值，并没有接收 password ，作为扩展在这里解释一下， 不看也可以，看了不理解也没关系，知道这个事儿就够了，以后接触多了就理解了
如果请求参数放在了请求体中，只有参数列表第一个变量能接收到值，这里需要站在Servlet的角度来看：
可以看到请求体内容是存到了 InputStream 输入流对象中，想要知道请求体中的内容是什么必须读流中的数据，读取到数据后会将值给第一个变量，而流中的数据读取一次之后就没了，当第二个变量读流时发现流已经被关闭了，自然就接收不到
SpringMVC回顾到此为止，只需要记住那三种方式即可，在前后端交互之前先在Controller中写个测试接口
这个接口对应的是GET类型的请求，这里直接在浏览器地址栏访问测试一下：
这里推荐一个Chrome浏览器的插件 JSONView ，它可以对浏览器显示的JSON数据进行格式化显示，推荐的同时也提个醒，安装需谨慎，如果JSON数据量太大的话页面会很卡
之前已经写好一个GET请求的测试接口了，这里就在前端写代码访问一下试试看
代码已经写完了，接下来打开页面试一下能不能调通：
可以看到请求代码报错了，查看报错信息找到重点关键词 CORS ，表示该请求属于 跨域请求
什么是跨域请求？跨域请求主要体现在跨域两个字上，当发起请求的客户端和接收请求的服务端他们的【协议、域名、端口号】有任意一项不一致的情况都属于跨域请求，拿刚刚访问的地址举例，VUE页面运行在9000端口上，后台接口运行在8080端口上，端口号没有对上所以该请求为跨域请求
如果在调试的时候仔细一点就会发现，虽然前端提示请求报错了，但是后端还是接收到请求了，那为什么会报错呢？是因为后端返回数据后，浏览器接收到响应结果发现该请求跨域，然后给我们提示错误信息，也就是说问题在浏览器这里
怎样才能让浏览器允许该请求呢？我们需要在后端动点手脚，在返回结果的时候设置允许前端访问即可
首先配置一个过滤器，配置过滤器有很多种实现的方法，我这里是实现Filter接口
过滤器创建完成了，回来看前端提示的报错信息为 Access-Control-Allow-Origin ，意思是允许访问的地址中并不包含当前VUE的地址，那么我们就在响应结果时将VUE的地址追加上
添加完成后重启项目后台就会发现请求已经成功并且拿到了返回值
再次进行测试，将后台的GetMapping修改为PostMapping，修改前端请求代码后重新发起请求进行测试
可以看到POST请求还是提示跨域请求，对应的错误信息则是 Access-Control-Allow-Headers ，也就是说请求头中包含了不被允许的信息，这里图省事儿用 * 通配符把所有请求头都放行
这样处理之后，请求就可以正常访问啦
路径占位参数，就是将参数作为请求路径的一部分，例如你现在正在看的这篇博客使用的就是路径占位传参
这种传参方法很简单，就不细讲了，可以效仿他这种方法写个测试案例
这里需要注意区分【路径占位传参】和【路径传参】两个概念，不要记混
什么是路径传参？发起一个请求 http://localhost:8080/index?a=1&b=2 ，在路径 ? 后面的都属于路径传参，路径传参就是将参数以明文方式拼接在请求地址后面
路径传参使用【正常接收参数】中的实例代码即可接收到值
除了自己手动拼接请求参数之外，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
1）网络请求与域名的合法性
微信小程序包括四种类型的网络请求：
普通HTTPS请求(wx.request)
上传文件(wx.uploadFile)
下载文件(wx.downloadFile)
WebSocket通信(wx.connectSocket)
关于“URL 域名不合法，请在后台配置后重试”的错误
小程序只允许与合法配置的域名进行数据交互
进入微信公共平台=>设置=>开发设置：设置需要交互的域名
2）对于接口调用http和https的问题
对于这一个问题，在之前来说，微信公共平台支持使用http测试项目，但是正式发布需要使用https的域名，
但是前几天看到了微信公众平台发的一则公告：
应该是要封杀http方式调用了，公告链接：为保证数据传输安全，提高业务安全性，公众平台将不再支持HTTP方式调用（时间2017年9月21日）
3）关于method以及data数据
微信小程序多地方都严格区分大小写，所以要注意method的value需要为大写，request的默认的超时时间都是60s；
对于data数据，上次我们从接口中拿到的数据是json格式的，最终发送给服务器的数据是String类型，如果传入的 data 不是 String 类型，会被转换成 String 。
文档中提供的转换规则如下：
对于 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化
对于 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string；
（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
这个工作在我们设置header头为application/x-www-form-urlencoded后，在后面为我们进行。
4）关于GET和POST请求
根据HTTP的规范，get是用与信息获取，post表示可能修改服务器的资源的请求
对于post请求：'application/json'用在get请求中没有问题，但是用在POST请求中不好使了，content-type 默认为 'application/json'
所以使用post请求时，将content-type设置为 application/x-www-form-urlencoded
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）