浏览器打开图片链接时直接显示或下载到底怎么回事

最近瞎JB搞了一通,各个项目都是喊组装上就交付,难以有时间学习总结,简直违反程序员的基本原则。很多时候已经忘记踩了哪些坑,如何解决的了。

问题

图片上传至阿里云OSS生成链接在浏览器中打开是直接下载文件,而需求需要打开图片而非下载。

常用方式

浏览器中的图片,通常印象中,前端上传文件获取url,终端当然是下载再展示。浏览器端都是img标签展示

1
<img src="/css/images/favicon.png"/>

下载图片及附件时都是右键保存或者点击按钮下载写入文件流中。
最近的需求中提到上传的图片生成的url,在浏览器中是打开而非下载文件 。我们正常上传到我们服务器上的是没问题的。这个问题出在阿里云OSS上?到底要怎么玩?

就经验来讲肯定是响应头header的问题。Android有类似的机制,view-type啥的,你是直接在别的应用中打开,还是怎么操作。
对比下载和打开图片两种不同链接

Read More

VUE中使用Mock模拟数据请求


Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:

  • 根据数据模板生成模拟数据
  • 模拟 Ajax 请求,生成并返回模拟数据
  • 基于 HTML 模板生成模拟数据

记录一下在项目中的使用方法

安装

1
npm install mockjs

当然通常在项目中会在package.json中添加mockjs依赖,再npm install所有项目中需要依赖的库

1
2
3
"dependencies": {
"mockjs": "^1.1.0"
}

引用

src/mock/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//引入mock
import Mock from 'mockjs'

let configArray = []
// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/)
files.keys().forEach((key) => {
if (key === './index.js') return
configArray = configArray.concat(files(key).default)
})

// 设置拦截ajax请求的相应时间
Mock.setup({
timeout: '200-600'
});

// 注册所有的mock服务
configArray.forEach((item) => {
for (const [path, target] of Object.entries(item)) {
const protocol = path.split('|')
Mock.mock(protocol[1], protocol[0], target)
}
})

main.js中引入

1
2
3
4
//开发环境引入
if (process.env.NODE_ENV === 'development') {
require('@/mock')
}

mock文件下建立personList.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let personList = [{
id: 1,
name: '小丽',
age: '18',
number: '8'
},{
id: 1,
name: '小芳',
age: '20',
number: '6'
}]

export default {
'get|/parameter/query': option => {
return {
status: 200,
message: 'success',
data: personList
};
}
}

接下来在网络请求时,发现如果是get请求路径是/parameter/query,就会返回我们mock定义好的数据。另外还有其它语法来生成随机数据。详细参考数据模板定义 DTD

参考

Mock.js
Mock

转载请标明出处:
http://blog.520wa.com/
本文出自Tu’s blog

Gson序列化、反序列化枚举

后端返回了N多枚举,前端Gson解析报错?

后端接口返回很多枚举,Android复用实体,解析时却报错

1
2
com.google.gson.JsonSyntaxException: java.lang.IllegalStateException: 
Expected a string but was BEGIN_OBJECT at line 1 column 70 path $.data.type

先定义一个枚举例子 Type.java

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
public enum Type{
GSON(0, "Gson"),
JACKSON(1, "Jackson"),
FASTJSON(2, "FastJson");
private final int code;
private final String name;

Type(int code, String name){
this.code = code;
this.name = name;
}

public static Type code(int code){
for (Type i : Type.values()){
if(i.code() == code){
return i;
}
}
return null;
}

public static Type name(String name){
for (Type i : Type.values()){
if(i.name().equals(name)){
return i;
}
}
return null;
}

public int code(){
return code;
}

public String name(){
return name;
}
}

在序列化时服务端有两种试返回
1、完整返回枚举

1
{"type":{"code":0,"name":"Gson"}}

2、序列化code或name

1
2
{"type":0}
//{"type":"Gson"}

最好的解决办法——解决提出问题的人

很不幸后端是我负责的,所以我们有三个解决方法
1、让前端自己解决
2、为前端提供技术方案
3、修改后端枚举
我应该怎么办?
以上,当然是认怂,直接奉上代码喽
Json是一种广泛使用的数据交换格式,在Java中序列化和反序列化的各API名称也都类似,下面正式介绍Gson如何序列化、反序列化枚举

Read More

使用FeignClient上传文件

问题

使用FeignClient上传文件时居然失败了?意外,不敢相信SpringCloud中的组件不可能不支持该功能
版本
SpringCloud: Dalston.Release
feign: 9.4.0

期间有各种报错,如:
FileUploadException: the request was rejected because no multipart boundary was found
MissingServletRequestPartException: Required request part ‘file’ is not present

原因

因为feign 9.4.0默认并不支持multipart/form(文件上传),需要手动引入feign-form、feign-form-spring

使用方式

引入feign-form依赖

1
2
3
4
5
6
7
8
9
10
11
12
<dependencies>
<dependency>
<groupId>io.github.openfeign.form</groupId>
<artifactId>feign-form</artifactId>
<version>3.3.0</version>
</dependency>
<dependency>
<groupId>io.github.openfeign.form</groupId>
<artifactId>feign-form-spring</artifactId>
<version>3.3.0</version>
</dependency>
</dependencies>

改造上传文件FeignClient

Read More

修复X转换Time Zone出错问题

IllegalArgumentException Unknown pattern character ‘x’, when using SimpleDateFormat

代码如下:

1
2
3
4
5
try {
new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ssX").parse("2019-05-14T19:00:11+08:00");
} catch (ParseException e) {
e.printStackTrace();
}

在Android 8.0运行没问题,但在5.1及以下会抛“IllegalArgumentException Unknown pattern character ‘x’, when using SimpleDateFormat”,如此看来基本可以认为是版本兼容问题

Read More

设置,你所不知道的权限

我们知道Android中权限分为 normal, dangerous,其实官方介绍中还有signature and special

正常权限,对用户风险小,声明后系统会在安装时自动授予该应用该权限。不提示用户授予正常权限,用户无法撤消这些权限。

危险权限,涉及用户隐私,需要用户授权。且用户授权后也可以再修改拒绝。所以每次使用危险权限时都得先检查用户是否赋予该权限。

签名权限则是相同签名的应用可以使用。

特殊权限,与正常、危险权限不同,特别敏感。SYSTEM_ALERT_WINDOWWRITE_SETTINGS

Read More

蓝牙和WIFI在智能硬件中的应用

某天加班后在一个苍蝇馆子吃完饭开发票。老板娘用手机将公司信息录入后一个黑暗的角落里付出了吱吱..吱吱吱的打印声,整个店里面没有电脑。好奇解决小店摆不下电脑,不会使用电脑,不愿多花钱买电脑的黑科技如何实现手机连接打印机打印发票

手机无线传输有三种,蓝牙、WIFI,还有NFC。这种场景下可以排除NFC。

在我古老认知中,蓝牙可以传照片、文件,还有蓝牙耳机。

WIFI可以上网,还有在换手机时备份数据也是用WIFI。

Read More