自学flutter挺久的了,但最近才正式接触到使用flutter进行业务开发,当需求渐渐复杂,才明白一个项目的工程化有多重要,否则就是维护两行泪。
基于此背景,我仿照Quasar的初始化工程,自行封装了一套可以快速上手的Template,也就是按照前端开发的思维,进行项目封装
框架特点
- 集成工具集(flustarts)
- 状态管理(provider)
- mock服务
- 封装的api请求
- 集成国际化
- 简易封装的路由
- 调试打印(logger,可打印object)
- ......
项目文档
快速上手
git clone https://github.com/1467602180/flutter-create-framework.git
flutter pub get
flutter run
复制代码
目录结构
lib
├── api # 接口请求层
├── component # 组件层
├── config # 配置层
├── generated # 国际化
├── l10n # 国际化配置
├── layout # 界面
├── main.dart # 主方法
├── mock # mock服务层
├── provider # 状态管理层
├── router # 路由层
├── util # 工具层
└── view # 视图层
复制代码
功能模块
网络请求
核心封装代码
dio.interceptors.add(InterceptorsWrapper(
onRequest: (RequestOptions options) async {
Map optionsMap = {
"baseUrl":options.baseUrl,
"path":options.path,
"method":options.method,
"data":options.data,
"headers":options.headers,
};
LoggerUtil.d(optionsMap);
// 在请求被发送之前做一些事情
Map mockResult = Mock().MockServer(options);
// 遍历mock规则
if(mockResult["match"]){
return dio.resolve(mockResult["response"]);
}else{
return options; //continue
}
// 如果你想完成请求并返回一些自定义数据,可以返回一个`Response`对象或返回`dio.resolve(data)`。
// 这样请求将会被终止,上层then会被调用,then中返回的数据将是你的自定义数据data.
//
// 如果你想终止请求并触发一个错误,你可以返回一个`DioError`对象,或返回`dio.reject(errMsg)`,
// 这样请求将被中止并触发异常,上层catchError会被调用。
},
onResponse: (Response response) async {
// 在返回响应数据之前做一些预处理
LoggerUtil.d(response.data);
return response; // continue
},
onError: (DioError e) async {
// 当请求失败时做一些预处理
LoggerUtil.e(e);
return e; //continue
}
));
复制代码
基于dio的自定义返回数据功能,再结合faker的假数据生成库,我实现了mock模块
mock服务
List UserInfoRole(){
return [
{
"path":'/userinfo',
"method":"GET",
"response":{
"status":0,
"data":{
"username":faker.internet.userName(),
"email":faker.internet.email(),
"address":faker.address.city()
}
}
}
];
}
复制代码
这是一份示例的mock规则,并返回随机生成的用户数据
路由
List<Map<String,dynamic>> Routes(){
return [
{
"path":"/",
"view":Home(),
},
{
"path":"/changeLanguage",
"view":ChangeLanguage(),
},
{
"path":"/stateManage",
"view":StateManage()
},
{
"path":"/editStateManage",
"view":EditStateManage()
},
{
"path":"/mockRequest",
"view":MockRequest()
},
{
"path":"/mockRequest",
"view":MockRequest()
},
{
"path":"/utilsManage",
"view":UtilsManage()
},
{
"path":"/regexpValida",
"view":RegexpValida()
},
{
"path":"/simpleEncry",
"view":SimpleEncry()
}
];
}
复制代码
这是一份示例的路由列表,目前还只是简单封装,后续会增加嵌套路由,动画路由的功能
这只是简单的部分演示,更多的说明可以查看wiki
代码仓库
Github:github.com/1467602180/…
Gitee:gitee.com/hfybbs/flut…