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

人脸支付怎么敢采用后4位手机号

我们的人脸支付产品只需要后4位手机号(用户号码)即可辨识用户,这是比支付宝、微信自助机,蜻蜓优秀的地方(需要11位手机号)。但是今天猛然发现唯一的优势不再。

优势是一种市场说法,对于技术人来讲,原理是少量用户比对。因为注册用户少,用户号码能做到1:1,个别需要1:N(N<=4)。所以目前用户体量下无需担心影响用户体验。而支付宝、微信用户体量那么大,采用11位手机号才能1:1。

支付宝、微信到底如何做到只需后4位用户号码,甚至不需要输入手机号的呢?

支付宝用户超10亿

去除海外用户

去除尚未开通刷脸支付用户[后期越来越多]

剩下的数据依然庞大,还能怎么办呢?

Read More