Skip to content

Commit e2c78f3

Browse files
jiangxyjiangxy
committed
update config & add Logger util
1 parent 280c4fd commit e2c78f3

File tree

2 files changed

+270
-3
lines changed

2 files changed

+270
-3
lines changed

Diff for: ‎src/config.js

+102-3
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,116 @@
22
* 定义整个项目的全局配置
33
*/
44

5+
// 约定优于配置
6+
// 我可以提供尽量多的配置, 但尽量不要太个性化, 接口的路径/名称/格式之类的
7+
// 遵循统一的规范, 好维护, 交给其他人也比较简单
8+
59
module.exports = {
610
name: 'ABC管理后台', // 项目的名字
711
footer: 'xxx版权所有 © 2015-2099', // footer中显示的字
812

9-
debug: true, // 是否开启debug模式
13+
debug: true, // 是否开启debug模式, 不会请求后端接口, 使用mock的数据
14+
logLevel: 'debug', // 日志级别, 目前支持debug/info/warn/error 4种级别
1015

1116
api: { // 对后端请求的相关配置
12-
host: '', // 调用ajax接口的地址, 默认值空, 如果是跨域的, 服务端要支持CORS
17+
host: 'http://remoteHost:8080', // 调用ajax接口的地址, 默认值空, 如果是跨域的, 服务端要支持CORS
1318
path: '/api', // ajax请求的路径
19+
timeout: 5000, // 请求的超时时间, 单位毫秒
20+
},
21+
22+
login: { // 登录相关配置
23+
getCurrentUser: '/login/getCurrentUser', // 后端必须要提供接口校验当前用户的身份, 如果拿不到用户信息, 才会尝试登录
24+
25+
// 登录有两种情况:
26+
27+
// 1. 使用sso登录, 直接跳转就可以了
28+
sso: 'https://wdren.vdian.net/sso/wdrlogin?redirect=', // 是否使用单点登录? 是的话我会把地址encode后加到后面, 然后跳转, 如果这个是空字符串, 说明不使用单点登录
29+
// 2. 不使用sso, 使用我提供的一个登录界面
30+
validate: '/login', // 校验用户信息, 表单的submit地址. 如果登录成功, 必须返回用户名
31+
32+
logout: '/logout', // 退出的url, 用户点击退出时, 浏览器会直接跳转到这个链接
33+
},
34+
35+
// 以下一些辅助的函数, 不要修改
36+
// 不能使用箭头函数, 会导致this是undefined
37+
38+
/**
39+
* 是否要跨域请求
40+
*
41+
* @returns {boolean}
42+
*/
43+
isCrossDomain: function () {
44+
if (this.api.host && this.api.host !== '') {
45+
return true;
46+
} else {
47+
return false;
48+
}
49+
},
50+
51+
/**
52+
* 是否单点登录
53+
*
54+
* @returns {boolean}
55+
*/
56+
isSSO: function () {
57+
if (this.login.sso && this.login.sso !== '') {
58+
return true;
59+
} else {
60+
return false;
61+
}
62+
},
63+
64+
/**
65+
* 获得api请求的路径
66+
*
67+
* @returns {*}
68+
*/
69+
getAPIPath: function () {
70+
if (this.tmpApiPath) { // 缓存
71+
return this.tmpApiPath;
72+
}
73+
74+
const paths = [];
75+
76+
// js的字符串处理真是麻烦
77+
if (this.isCrossDomain()) {
78+
// 去除结尾的'/'
79+
const tmp = this.api.host;
80+
let index = tmp.length - 1;
81+
// 如果超出指定的 index 范围，charAt返回一个空字符串
82+
while (tmp.charAt(index) === '/') {
83+
index--;
84+
}
85+
if (index < 0)
86+
paths.push('');
87+
else
88+
paths.push(tmp.substring(0, index + 1));
89+
} else {
90+
paths.push('');
91+
}
92+
93+
if (this.api.path) {
94+
const tmp = this.api.path;
95+
let begin = 0;
96+
let end = tmp.length - 1;
97+
98+
while (tmp.charAt(begin) === '/') {
99+
begin++;
100+
}
101+
while (tmp.charAt(end) === '/') {
102+
end--;
103+
}
104+
if (begin > end)
105+
paths.push('');
106+
else
107+
paths.push(tmp.substring(begin, end + 1));
108+
} else {
109+
paths.push('');
110+
}
14111

15-
login: '/login', // 用于校验用户是否登录的接口, 要返回当前登录的用户名
112+
const tmpApiPath = paths.join('/');
113+
this.tmpApiPath = tmpApiPath;
114+
return tmpApiPath;
16115
},
17116

18117
}

Diff for: ‎src/utils/Logger.js

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import globalConfig from '../config';
2+
3+
/**
4+
* 日志工具类 <br/>
5+
*
6+
* <p>
7+
* 工程变大之后, 日志就很重要了, 总不能一直console.log.
8+
* 本来想看看有没有现成的工具, 找到一个log4js的库, 但只能用在node环境下, 浏览器环境下似乎没什么好用的.
9+
* 作为一个用惯了slf4j的人, 干脆自己写个吧, 练练手.
10+
* 目前有以下功能:
11+
* <ul>
12+
* <li>支持常用的日志级别: debug/info/warn/error, 说实话其他的级别极少用到</li>
13+
* <li>支持变量替换: 类似slf4j中的logger.info("a={}",a)这种, 其实console本身已经支持的</li>
14+
* <li>根据日志级别设置样式: debug是黑色, info是默认, warn是黄色, error是红色, 看起来清晰很多</li>
15+
* <li>定义每个logger的名字: 也算是常规功能了吧</li>
16+
* </ul>
17+
* 我是尽量按着slf4j的习惯来设计的, 目前还比较简单.
18+
* 不支持pattern/appender之类的, 但对于二手前端来说, 也算够用了.
19+
* </p>
20+
*/
21+
class Logger {
22+
23+
// 定义一些预设的日志级别
24+
// 目前只有4种级别
25+
26+
static LOG_LEVEL_DEBUG = 1;
27+
static LOG_LEVEL_INFO = 2;
28+
static LOG_LEVEL_WARN = 3;
29+
static LOG_LEVEL_ERROR = 4;
30+
31+
/*暂存所有logger*/
32+
static loggerMap = new Map();
33+
34+
/*默认的logger*/
35+
static defaultLogger = new Logger();
36+
37+
/**
38+
* 获取一个Logger实例
39+
*
40+
* @param name
41+
* @returns {*}
42+
*/
43+
static getLogger(name) {
44+
if (name && name !== '') {
45+
// 缓存
46+
if (Logger.loggerMap.has(name)) {
47+
return Logger.loggerMap.get(name);
48+
}
49+
50+
const logger = new Logger(name);
51+
Logger.loggerMap.set(name, logger);
52+
return logger;
53+
} else {
54+
return Logger.defaultLogger;
55+
}
56+
}
57+
58+
constructor(name) {
59+
this.name = name; // logger的名字
60+
const configLogLevel = globalConfig.logLevel;
61+
62+
if (configLogLevel === 'debug') {
63+
this.logLevel = Logger.LOG_LEVEL_DEBUG;
64+
} else if (configLogLevel === 'info') {
65+
this.logLevel = Logger.LOG_LEVEL_INFO;
66+
} else if (configLogLevel === 'warn') {
67+
this.logLevel = Logger.LOG_LEVEL_WARN;
68+
} else if (configLogLevel === 'error') {
69+
this.logLevel = Logger.LOG_LEVEL_ERROR;
70+
} else {
71+
// 默认都是info级别
72+
this.error('unsupported logLevel: %s, use INFO instead', configLogLevel);
73+
this.logLevel = Logger.LOG_LEVEL_INFO;
74+
}
75+
}
76+
77+
/**
78+
* 设置日志级别, 只有4种级别可选
79+
*
80+
* @param newLogLevel 1~4之间的一个数字
81+
*/
82+
setLogLevel(newLogLevel) {
83+
if (isNaN(newLogLevel)) {
84+
this.error('setLogLevel error, not a number: %s', newLogLevel);
85+
}
86+
87+
if (newLogLevel < 1 || newLogLevel > 4) {
88+
this.error('setLogLevel error, input = %s, must between 1 and 4', newLogLevel);
89+
}
90+
91+
this.logLevel = newLogLevel;
92+
}
93+
94+
/**
95+
* 打印info日志
96+
*
97+
* @param pattern 日志格式, 支持%d/%s等占位符
98+
* @param args 可变参数, 用于替换pattern中的占位符
99+
*/
100+
info(pattern, ...args) {
101+
// 先判断日志级别
102+
if (this.logLevel > Logger.LOG_LEVEL_INFO)
103+
return;
104+
105+
if (this.name)
106+
args.unshift(`${this.name}: ${pattern}`);
107+
else
108+
args.unshift(pattern);
109+
console.log.apply(console, args);
110+
}
111+
112+
/**
113+
* 打印error日志
114+
*
115+
* @param pattern
116+
* @param args
117+
*/
118+
error(pattern, ...args) {
119+
if (this.logLevel > Logger.LOG_LEVEL_ERROR)
120+
return;
121+
122+
args.unshift('background: red; color: #bada55;');
123+
if (this.name)
124+
args.unshift(`%c${this.name}: ${pattern}`);
125+
else
126+
args.unshift(`%c${pattern}`);
127+
console.error.apply(console, args);
128+
}
129+
130+
/**
131+
* 打印debug日志
132+
*
133+
* @param pattern
134+
* @param args
135+
*/
136+
debug(pattern, ...args) {
137+
if (this.logLevel > Logger.LOG_LEVEL_DEBUG)
138+
return;
139+
140+
args.unshift('background: black; color: #bada55;');
141+
if (this.name)
142+
args.unshift(`%c${this.name}: ${pattern}`);
143+
else
144+
args.unshift(`%c${pattern}`);
145+
console.debug.apply(console, args);
146+
147+
}
148+
149+
/**
150+
* 打印warn日志
151+
*
152+
* @param pattern
153+
* @param args
154+
*/
155+
warn(pattern, ...args) {
156+
if (this.logLevel > Logger.LOG_LEVEL_WARN)
157+
return;
158+
159+
args.unshift('background: yellow; color: black;');
160+
if (this.name)
161+
args.unshift(`%c${this.name}: ${pattern}`);
162+
else
163+
args.unshift(`%c${pattern}`);
164+
console.warn.apply(console, args);
165+
}
166+
}
167+
168+
export default Logger;

0 commit comments

Comments
 (0)