更多问题解答
# 更多问题解答
# 项目开发必要接口
本项目需要三个必要的接口，联调前务必保证这登录接口、用户信息接口、退出接口无问题，请注意application/x-www-form-urlencoded;charset=UTF-8与 application/json;charset=UTF-8请求的区别，具体可在src/config/settings.js 中配置
登录接口 /login
application/x-www-form-urlencoded;charset=UTF-8 请求参数
username=admin&password=123456;
1
application/json;charset=UTF-8 请求参数
{
"username": "admin",
"password": "123456"
}
1
2
3
4
2
3
4
返回格式
{
"code": 200,
"msg": "success",
"data": {
"accessToken": "admin-accessToken"
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- 用户信息接口 /info
返回格式
{
"code": 200,
"msg": "success",
"data": {
"permissions": ["admin"],
"username": "admin"
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 退出接口 /logout
返回格式
{
"code": 200,
"msg": "success"
}
1
2
3
4
2
3
4
# 前端请求示例
强烈建议：所有请求放到 src/api 文件夹下
import request from "@/utils/request";
export function getList(data) {
return request({
url: "/table/list",
method: "post",
data,
});
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 前端请求约定
请求中会在 headers 中自动传入 accessToken，用于后端接收，accessToken 的字段名可以在 setting.js 中配置
/*表格中请求参数约定*/
{
"pageNo": 1, //页数
"pageSize": 10 //每页条数
}
1
2
3
4
5
2
3
4
5
# 后端返回 JSON 数据的约定
{
"code": 200,//成功的状态码
"msg": "success",//提示信息
"totalCount": 238,//总条数（表格中用到）
"data": [{}，{}，{}]//返回数据
}
1
2
3
4
5
6
2
3
4
5
6
# Easy-Mock 的使用
easy-mock
它是一个纯前端可视化，并且能快速生成模拟数据的持久化服务。非常的简单易用还能结合 swagger，天然支持跨域 ，不管团队还是个人项目都值得一试。
# 项目内置 mock 的使用
在本地会启动一个 node 版本的mock-server来模拟数据，测试环境还是继续使用mockjs来进行模拟，支持在多环境中使用，相比较花裤衩开源项目的优势，
无需在 mock/index.js 中配置导出接口，框架已自动为您导出接口，您直接通过 api 调用即可,甚至 mock 和 api 也可以完全为您生成
cnpm run template
#上下键选择 mock&api输入名字即可
1
2
3
2
3
# mock 模拟数据占位符
{
// 随机生成一个大区。
region:"@region",
// 随机生成一个（中国）省（或直辖市、自治区、特别行政区）。
province:"@province",
// 随机生成一个（中国）市。
city:"@city",
// 随机生成一个（中国）县。
county：:"@county",
// 随机生成一个邮政编码（六位数字）。
zip:"@zip",
// 返回一个随机的布尔值。
boolean:"@boolean",
// 返回一个随机的自然数（大于等于 0 的整数）。
natural:"@natural",
// 返回一个随机的整数。
integer:"@integer",
// 返回一个随机的浮点数。
float:"@float",
// 返回一个随机字符。
character:"@character",
// 返回一个随机字符串。
string:"@string",
// 返回一个整型数组。
range:"@range",
// 随机生成一个有吸引力的颜色，格式为 '#RRGGBB'。
color:"@color",
// #DAC0DE
hex:"@hex",
// rgb(128,255,255)
rgb:"@rgb",
// rgba(128,255,255,0.3)
rgba:"@rgba",
// hsl(300,80%,90%)
hsl:"@hsl",
// 随机生成一个有吸引力的颜色。
_goldenRatioColor:"@_goldenRatioColor",
// 日期占位符集合。
_patternLetters:"@_patternLetters",
// 日期占位符正则。
_rformat:"@_rformat",
// 格式化日期。
_formatDate:"@_formatDate",
// 生成一个随机的 Date 对象。
_randomDate:"@_randomDate",
// 返回一个随机的日期字符串。
date:"@date",
// 返回一个随机的时间字符串。
time:"@time",
// 返回一个随机的日期和时间字符串。
datetime:"@datetime",
// 返回当前的日期和时间字符串。
now:"@now",
// 常见的广告宽高
_adSize:"@_adSize",
// 常见的屏幕宽高
_screenSize:"@_screenSize",
// 常见的视频宽高
_videoSize:"@_videoSize",
//生成一个随机的图片地址。
image:"@image",
//大牌公司的颜色集合
_brandColors:"@_brandColors",
// 生成一段随机的 Base64 图片编码。
dataImage:"@dataImage",
//随机生成一个 GUID。
guid:"@guid",
// 随机生成一个 18 位身份证。
id:"@id",
// 生成一个全局的自增整数。
increment:"@increment",
// 随机生成一个常见的英文名。
first:"@first"
// 随机生成一个常见的英文姓。
last:"@last",
// 随机生成一个常见的英文姓名。
name:"@name",
// 随机生成一个常见的中文姓。
cfirst:"@cfirst",
// 随机生成一个常见的中文名。
clast:"@clast",
// 随机生成一个常见的中文姓名。
cname:"@cname",
// 随机生成一段文本。
paragraph:"@paragraph",
// 随机生成一个句子，第一个单词的首字母大写。
sentence:"@sentence",
// 随机生成一个中文句子。
csentence:"@csentence",
// 随机生成一个单词。
word:"@word",
// 随机生成一个或多个汉字。
cword:"@cword",
// 随机生成一句标题，其中每个单词的首字母大写。
title:"@title",
// 随机生成一句中文标题。
ctitle:"@ctitle",
// 随机生成一个 URL。
url:"@url",
// 随机生成一个 URL 协议。
protocol:"@protocol",
// 随机生成一个域名。
domain:"@domain",
// 随机生成一个顶级域名。
tld:"@tld",
// 随机生成一个邮件地址。
email:"@email",
// 随机生成一个 IP 地址。
ip:"@ip",
}
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
# 开发环境直接使用 mock
打开根目录.env.development
NODE_ENV = 'development'
VUE_APP_BASE_API = 'mock-server'
VUE_APP_OTHER_API = '/'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
1
2
3
4
5
6
2
3
4
5
6
# 开发环境直接使用正式的 api 接口
打开根目录.env.development
NODE_ENV = 'development'
#修改为你的接口地址
VUE_APP_BASE_API = 'http://xxx.xxx.xxx.xxx:8080/api'
VUE_APP_OTHER_API = '/'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
1
2
3
4
5
6
7
2
3
4
5
6
7
# 生产环境使用正式的 api 接口
打开根目录.env.production
NODE_ENV = 'production'
#修改为你的接口地址
VUE_APP_BASE_API = 'http://xxx.xxx.xxx.xxx:8080/api'
VUE_APP_OTHER_API = '/'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
1
2
3
4
5
6
7
2
3
4
5
6
7