小呆呆666
小呆呆666

fish_redux使用详解---看完就会用！

说句心里话，这篇文章，来来回回修改了很多次，如果认真看完这篇文章，还不会写fish_redux，请在评论里喷我。

前言

来学学难搞的fish_redux框架吧，这个框架，官方的文档真是一言难尽，比flutter_bloc官网的文档真是逊色太多了，但是一旦知道怎么写，页面堆起来也是非常爽呀，结构分明，逻辑也会错落有致。

其实在当时搞懂这个框架的时候，就一直想写一篇文章记录下，但是因为忙（lan），导致一直没写，现在觉得还是必须把使用的过程记录下，毕竟刚上手这个框架是个蛋痛的过程，必须要把这个过程做个记录。

这不仅仅是记录的文章，文中所给出的示例，也是我重新构思去写的，过程也是力求阐述清楚且详细。

img

几个问题点

  • 页面切换的转场动画
  • 页面怎么更新数据
  • fish_redux各个模块之间，怎么传递数据
  • 页面跳转传值，及其接受下个页面回传的值
  • 怎么配合ListView使用
  • ListView怎么使用adapter，数据怎么和item绑定
  • 怎么将Page当做widget使用（BottomNavigationBar，NavigationRail等等导航栏控件会使用到）
    • 这个直接使用：XxxPage.buildPage(null) 即可

如果你在使用fish_redux的过程中遇到过上述的问题，那就来看看这篇文章吧！这里，会解答上面所有的问题点！

准备

引入

fish_redux相关地址

  • GitHub地址：https://github.com/alibaba/fish-redux
  • Pub地址：https://pub.dev/packages/fish_redux

我用的是0.3.X的版本，算是第三版，相对于前几版，改动较大

  • 引入fish_redux插件，想用最新版插件，可进入pub地址里面查看
fish_redux: ^0.3.4
#演示列表需要用到的库
dio: ^3.0.9    #网络请求框架
json_annotation: ^2.4.0 #json序列化和反序列化用的

开发插件

  • 此处我们需要安装代码生成插件，可以帮我们生成大量文件和模板代码

  • 在Android Studio里面搜索”fish“就能搜出插件了，插件名叫：FishReduxTemplate

    image-20200808181112391

  • BakerJQ编写：Android Studio的Fish Redux模板。

  • huangjianke编写：VSCode的Fish Redux模板

创建

  • 这里我在新建的count文件夹上，选择新建文件，选择：New ---> FishReduxTemplate
image-20200808181242775
  • 此处选择：Page，底下的“Select Fils”全部选择，这是标准的redux文件结构；这边命名建议使用大驼峰：Count
    • Component：这个一般是可复用的相关的组件；列表的item，也可以选择这个
    • Adapter：这里有三个Adapter，都可以不用了；fish_redux第三版推出了功能更强大的adapter，更加灵活的绑定方式
image-20200808181325258
  • 创建成功后，记得在创建的文件夹上右击，选择：Reload From Disk；把创建的文件刷新出来
image-20200808181410600
  • 创建成功的文件结构
    • page：总页面，注册effect，reducer，component，adapter的功能，相关的配置都在此页面操作
    • state：这地方就是我们存放子模块变量的地方；初始化变量和接受上个页面参数，也在此处，是个很重要的模块
    • view：主要是我们写页面的模块
    • action：这是一个非常重要的模块，所有的事件都在此处定义和中转
    • effect：相关的业务逻辑，网络请求等等的“副作用”操作，都可以写在该模块
    • reducer：该模块主要是用来更新数据的，也可以写一些简单的逻辑或者和数据有关的逻辑操作
image-20200808181550186
  • OK，至此就把所有的准备工作搞定了，下面可以开搞代码了
img

开发流程

redux流程

  • 下图是阮一峰老师博客上放的redux流程图
img

fish_redux流程

  • 在写代码前，先看写下流程图，这图是凭着自己的理解画的

    • 可以发现，事件的传递，都是通过dispatch这个方法，而且action这层很明显是非常关键的一层，事件的传递，都是在该层定义和中转的
    • 这图在语雀上调了半天，就在上面加了个自己的github水印地址
    fish_redux流程

  • 通过俩个流程图对比，其中还是有一些差别的

    • redux里面的store是全局的。fish_redux里面也有这个全局store的概念，放在子模块里面理解store，react；对应fish_redux里的就是：state，view
    • fish_redux里面多了effect层：这层主要是处理逻辑，和相关网络请求之类
    • reducer里面，理论上也是可以处理一些和数据相关，简单的逻辑；但是复杂的，会产生相应较大的“副作用”的业务逻辑，还是需要在effect中写

范例说明

这边写几个示例，来演示fish_redux的使用

  • 计数器
    • fish_redux正常情况下的流转过程
    • fish_redux各模块怎么传递数据
  • 页面跳转
    • A ---> B（A跳转到B，并传值给B页面）
    • B ---> A（B返回到A，并返回值给A页面）
  • 列表文章
    • 列表展示-网络请求
    • 列表修改-单item刷新
    • 多样式列表
    • 列表存在的问题+解决方案
  • 全局模块
    • 全局切换主题
  • 全局模式优化
    • 大幅度提升开发体验
  • Component使用
    • page中使用component
  • 广播
  • 开发小技巧
    • 弱化reducer
    • widget组合式开发

计数器

效果图

fish_redux中count
  • 这个例子演示，view中点击此操作，然后更新页面数据；下述的流程，在effect中把数据处理好，通过action中转传递给reducer更新数据
    • view ---> action ---> effect ---> reducer（更新数据）
  • 注意：该流程将展示，怎么将数据在各流程中互相传递

标准模式

  • main
    • 这地方需要注意，cupertino，material这类系统包和fish_redux里包含的“Page”类名重复了，需要在这类系统包上使用hide，隐藏系统包里的Page类
    • 关于页面的切换风格，可以在MaterialApp中的onGenerateRoute方法中，使用相应页面切换风格，这边使用通用风格：Material
///需要使用hide隐藏Page
import 'package:flutter/cupertino.dart'hide Page;
import 'package:flutter/material.dart' hide Page;

void main() {
  runApp(MyApp());
}

Widget createApp() {
  ///定义路由
  final AbstractRoutes routes = PageRoutes(
    pages: >{
      "CountPage": CountPage(),
    },
  );

  return MaterialApp(
    title: 'FishDemo',
    home: routes.buildPage("CountPage", null), //作为默认页面
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute(
        builder: (BuildContext context) {
          return routes.buildPage(settings.name, settings.arguments);
        },
        settings: settings,
      );
    },
  );
}
  • state
    • 定义我们在页面展示的一些变量，initState中可以初始化变量；clone方法的赋值写法是必须的
class CountState implements Cloneable {
  int count;

  @override
  CountState clone() {
    return CountState()..count = count;
  }
}

CountState initState(Map args) {
  return CountState()..count = 0;
}
  • view：这里面就是写界面的模块，buildView里面有三个参数
    • state：这个就是我们的数据层，页面需要的变量都写在state层
    • dispatch：类似调度器，调用action层中的方法，从而去回调effect，reducer层的方法
    • viewService：这个参数，我们可以使用其中的方法：buildComponent("组件名")，调用我们封装的相关组件
Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) {
  return _bodyWidget(state, dispatch);
}

Widget _bodyWidget(CountState state, Dispatch dispatch) {
  return Scaffold(
    appBar: AppBar(
      title: Text("FishRedux"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('You have pushed the button this many times:'),
          ///使用state中的变量，控住数据的变换
          Text(state.count.toString()),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        ///点击事件，调用action 计数自增方法
        dispatch(CountActionCreator.countIncrease());
      },
      child: Icon(Icons.add),
    ),
  );
}
  • action
    • 该层是非常重要的模块，页面所有的行为都可以在本层直观的看到
    • XxxxAction中的枚举字段是必须的，一个事件对应有一个枚举字段，枚举字段是：effect，reducer层标识的入口
    • XxxxActionCreator类中的方法是中转方法，方法中可以传参数，参数类型可任意；方法中的参数放在Action类中的payload字段中，然后在effect，reducer中的action参数中拿到payload值去处理就行了
    • 这地方需要注意下，默认生成的模板代码，return的Action类加了const修饰，如果使用Action的payload字段赋值并携带数据，是会报错的；所以这里如果需要携带参数，请去掉const修饰关键字
enum CountAction { increase, updateCount }

class CountActionCreator {
  ///去effect层去处理自增数据
  static Action countIncrease() {
    return Action(CountAction.increase);
  }
  ///去reducer层更新数据，传参可以放在Action类中的payload字段中，payload是dynamic类型，可传任何类型
  static Action updateCount(int count) {
    return Action(CountAction.updateCount, payload: count);
  }
}
  • effect
    • 如果在调用action里面的XxxxActionCreator类中的方法，相应的枚举字段，会在combineEffects中被调用，在这里，我们就能写相应的方法处理逻辑，方法中带俩个参数：action，ctx
      • action：该对象中，我们可以拿到payload字段里面，在action里面保存的值
      • ctx：该对象中，可以拿到state的参数，还可以通过ctx调用dispatch方法，调用action中的方法，在这里调用dispatch方法，一般是把处理好的数据，通过action中转到reducer层中更新数据
Effect buildEffect() {
  return combineEffects(>{
    CountAction.increase: _onIncrease,
  });
}
///自增数
void _onIncrease(Action action, Context ctx) {
  ///处理自增数逻辑
  int count = ctx.state.count + 1;
  ctx.dispatch(CountActionCreator.updateCount(count));
}
  • reducer
    • 该层是更新数据的，action中调用的XxxxActionCreator类中的方法，相应的枚举字段，会在asReducer方法中回调，这里就可以写个方法，克隆state数据进行一些处理，这里面有俩个参数：state，action
    • state参数经常使用的是clone方法，clone一个新的state对象；action参数基本就是拿到其中的payload字段，将其中的值，赋值给state
Reducer buildReducer() {
  return asReducer(
    >{
      CountAction.updateCount: _updateCount,
    },
  );
}
///通知View层更新界面
CountState _updateCount(CountState state, Action action) {
  final CountState newState = state.clone();
  newState..count = action.payload;
  return newState;
}
  • page模块不需要改动，这边就不贴代码了

优化

  • 从上面的例子看到，如此简单数据变换，仅仅是个state中一个参数自增的过程，effect层就显得有些多余；所以，把流程简化成下面

    • view ---> action ---> reducer

  • 注意：这边把effect层删掉，该层可以舍弃了；然后对view，action，reducer层代码进行一些小改动

搞起来

  • view
    • 这边仅仅把点击事件的方法，微微改了下：CountActionCreator.countIncrease()改成CountActionCreator.updateCount()
Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) {
  return _bodyWidget(state, dispatch);
}

Widget _bodyWidget(CountState state, Dispatch dispatch) {
  return Scaffold(
    appBar: AppBar(
      title: Text("FishRedux"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('You have pushed the button this many times:'),
          Text(state.count.toString()),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        ///点击事件，调用action 计数自增方法
        dispatch(CountActionCreator.updateCount());
      },
      child: Icon(Icons.add),
    ),
  );
}
  • action
    • 这里只使用一个枚举字段，和一个方法就行了，也不用传啥参数了
enum CountAction { updateCount }

class CountActionCreator {
  ///去reducer层更新数据，传参可以放在Action类中的payload字段中，payload是dynamic类型，可传任何类型
  static Action updateCount() {
    return Action(CountAction.updateCount);
  }
}
  • reducer
    • 这里直接在：_updateCount方法中处理下简单的自增逻辑
Reducer buildReducer() {
  return asReducer(
    >{
      CountAction.updateCount: _updateCount,
    },
  );
}
///通知View层更新界面
CountState _updateCount(CountState state, Action action) {
  final CountState newState = state.clone();
  newState..count = state.count + 1;
  return newState;
}

搞定

  • 可以看见优化了后，代码量减少了很多，对待不同的业务场景，可以灵活的变动，使用框架，但不要拘泥框架；但是如果有网络请求，很复杂的业务逻辑，就万万不能写在reducer里面了，一定要写在effect中，这样才能保证一个清晰的解耦结构，保证处理数据和更新数据过程分离
img

页面跳转

效果图

fish_redux中jump
  • 从效果图，很容易看到，俩个页面相互传值
    • FirstPage ---> SecondPage（FirstPage跳转到SecondPage，并传值给SecondPage页面）
    • SecondPage ---> FirstPage（SecondPage返回到FirstPage，并返回值给FirstPage页面）

实现

  • 从上面效果图上看，很明显，这边需要实现俩个页面，先看看main页面的改动
  • main
    • 这里只增加了俩个页面：FirstPage和SecondPage；并将主页面入口换成了：FirstPage
Widget createApp() {
  ///定义路由
  final AbstractRoutes routes = PageRoutes(
    pages: >{
      ///计数器模块演示
      "CountPage": CountPage(),
      ///页面传值跳转模块演示
      "FirstPage": FirstPage(),
      "SecondPage": SecondPage(),
    },
  );

  return MaterialApp(
    title: 'FishRedux',
    home: routes.buildPage("FirstPage", null), //作为默认页面
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute(
        builder: (BuildContext context) {
          return routes.buildPage(settings.name, settings.arguments);
        },
        settings: settings,
      );
    },
  );
}

FirstPage

  • 先来看看该页面的一个流程

    • view ---> action ---> effect（跳转到SecondPage页面）
    • effect（拿到SecondPage返回的数据） ---> action ---> reducer（更新页面数据）

  • state

    • 先写state文件，这边需要定义俩个变量来
      • fixedMsg：这个是传给下个页面的值
      • msg：在页面上展示传值得变量
    • initState方法是初始化变量和接受页面传值的，这边我们给他赋个初始值
class FirstState implements Cloneable {
  ///传递给下个页面的值
  static const String fixedMsg = "\n我是FirstPage页面传递过来的数据：FirstValue";
  ///展示传递过来的值
  String msg;

  @override
  FirstState clone() {
    return FirstState()..msg = msg;
  }
}

FirstState initState(Map args) {
  return FirstState()..msg = "\n暂无";
}
  • view
    • 该页面逻辑相当简单，主要的仅仅是在onPressed方法中处理逻辑
Widget buildView(FirstState state, Dispatch dispatch, ViewService viewService) {
  return _bodyWidget(state, dispatch);
}

Widget _bodyWidget(FirstState state, Dispatch dispatch) {
  return Scaffold(
    appBar: AppBar(
      title: Text("FirstPage"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('下方数据是SecondPage页面传递过来的:'),
          Text(state.msg),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        ///跳转到Second页面
        dispatch(FirstActionCreator.toSecond());
      },
      child: Icon(Icons.arrow_forward),
    ),
  );
}
  • action：这里需要定义俩个枚举事件
    • toSecond：跳转到SecondPage页面
    • updateMsg：拿到SecondPage页面返回的数据，然后更新页面数据
enum FirstAction { toSecond , updateMsg}

class FirstActionCreator {
  ///跳转到第二个页面
  static Action toSecond() {
    return const Action(FirstAction.toSecond);
  }
  ///拿到第二个页面返回的数据,执行更新数据操作
  static Action updateMsg(String msg) {
    return Action(FirstAction.updateMsg, payload: msg);
  }
}
  • effect
    • 此处需要注意：fish_redux 框架中的Action类和系统包中的重名了，需要把系统包中Action类隐藏掉
    • 传值直接用pushNamed方法即可，携带的参数可以写在arguments字段中；pushNamed返回值是Future类型，如果想获取他的返回值，跳转方法就需要写成异步的，等待从SecondPage页面获取返回的值，
/// 使用hide方法，隐藏系统包里面的Action类
import 'package:flutter/cupertino.dart' hide Action;

Effect buildEffect() {
  return combineEffects(>{
    FirstAction.toSecond: _toSecond,
  });
}

void _toSecond(Action action, Context ctx) async{
  ///页面之间传值；这地方必须写个异步方法，等待上个页面回传过来的值；as关键字是类型转换
  var result = await Navigator.of(ctx.context).pushNamed("SecondPage", arguments: {"firstValue": FirstState.fixedMsg});
  ///获取到数据，更新页面上的数据
  ctx.dispatch(FirstActionCreator.updateMsg( (result as Map)["secondValue"]) );
}
  • reducer
    • 这里就是从action里面获取传递的值，赋值给克隆对象中msg字段即可
Reducer buildReducer() {
  return asReducer(
    >{
      FirstAction.updateMsg: _updateMsg,
    },
  );
}

FirstState _updateMsg(FirstState state, Action action) {
  return state.clone()..msg = action.payload;
}

SecondPage

  • 这个页面比较简单，后续不涉及到页面数据更新，所以reducer模块可以不写，看看该页面的流程
    • view ---> action ---> effect（pop当前页面，并携带值返回）
  • state
    • 该模块的变量和FirstPage类型，就不阐述了
    • initState里面通过args变量获取上个页面传递的值，上个页面传值需要传递Map类型，这边通过key获取相应的value
class SecondState implements Cloneable {
  ///传递给下个页面的值
  static const String fixedMsg = "\n我是SecondPage页面传递过来的数据：SecondValue";
  ///展示传递过来的值
  String msg;

  @override
  SecondState clone() {
    return SecondState()..msg = msg;
  }
}

SecondState initState(Map args) {
  ///获取上个页面传递过来的数据
  return SecondState()..msg = args["firstValue"];
}
  • view
    • 这边需要注意的就是：WillPopScope控件接管AppBar的返回事件
Widget buildView(SecondState state, Dispatch dispatch, ViewService viewService) {
  return WillPopScope(
    child: _bodyWidget(state),
    onWillPop: () {
      dispatch(SecondActionCreator.backFirst());
      ///true：表示执行页面返回    false:表示不执行返回页面操作，这里因为要传值，所以接管返回操作
      return Future.value(false);
    },
  );
}

Widget _bodyWidget(SecondState state) {
  return Scaffold(
    appBar: AppBar(
      title: Text("SecondPage"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('下方数据是FirstPage页面传递过来的:'),
          Text(state.msg),
        ],
      ),
    ),
  );
}
  • action
enum SecondAction { backFirst }

class SecondActionCreator {
  ///返回到第一个页面，然后从栈中移除自身，同时传回去一些数据
  static Action backFirst() {
    return Action(SecondAction.backFirst);
  }
}
  • effect
    • 此处同样需要隐藏系统包中的Action类
    • 这边直接在pop方法的第二个参数，写入返回数据
///隐藏系统包中的Action类
import 'package:flutter/cupertino.dart' hide Action;

Effect buildEffect() {
  return combineEffects(>{
    SecondAction.backFirst: _backFirst,
  });
}

void _backFirst(Action action, Context ctx) {
  ///pop当前页面，并且返回相应的数据
  Navigator.pop(ctx.context, {"secondValue": SecondState.fixedMsg});
}

搞定

  • 因为page模块不需要改动，所以就没必要将page模块代码附上了哈
  • OK，到这里，咱们也已经把俩个页面相互传值的方式get到了！
img

列表文章

  • 理解了上面俩个案例，相信你可以使用fish_redux实现一部分页面了；但是，我们堆页面的过程中，能体会列表模块是非常重要的一部分，现在就来学学，在fish_redux中怎么使用ListView吧！

    • 废话少说，上号！
00685430

列表展示-网络请求

效果图

fish_redux中list
  • 效果图对于列表的滚动，做了俩个操作：一个是拖拽列表；另一个是滚动鼠标的滚轮。flutter对鼠标触发的相关事件也支持的越来越好了！
    • 这边我们使用的是玩Android的api，这个api有个坑的地方，没设置开启跨域，所以运行在web上，这个api使用会报错，我在玩Android的github上提了issue，哎，也不知道作者啥时候解决，，，
  • 这地方只能曲线救国，关闭浏览器跨域限制，设置看这里：https://www.jianshu.com/p/56b1e01e6b6a
  • 如果运行在虚拟机上，就完全不会出现这个问题！

准备

  • 先看下文件结构
image-20200810225418771
  • main
    • 这边改动非常小，只在路由里，新增了：GuidePage，ListPage；同时将home字段中的默认页面，改成了：GuidePage页面；导航页面代码就不贴在文章里了，下面贴下该页面链接
      • https://github.com/xdd666t/ExampleCode/tree/master/Flutter/fish_redux_demo/lib/guide
    • ListPage才是重点，下文会详细说明
void main() {
  runApp(createApp());
}

Widget createApp() {
  ///定义路由
  final AbstractRoutes routes = PageRoutes(
    pages: >{
      ///导航页面
      "GuidePage": GuidePage(),
      ///计数器模块演示
      "CountPage": CountPage(),
      ///页面传值跳转模块演示
      "FirstPage": FirstPage(),
      "SecondPage": SecondPage(),
      ///列表模块演示
      "ListPage": ListPage(),
    },
  );

  return MaterialApp(
    title: 'FishRedux',
    home: routes.buildPage("GuidePage", null), //作为默认页面
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute(
        builder: (BuildContext context) {
          return routes.buildPage(settings.name, settings.arguments);
        },
        settings: settings,
      );
    },
  );
}

流程

  • Adapter实现的流程
    • 创建item(Component) ---> 创建adapter文件 ---> state集成相应的Source ---> page里面绑定adapter
  • 通过以上四步，就能在fish_redux使用相应列表里面的adapter了，过程有点麻烦，但是熟能生巧，多用用就能很快搭建一个复杂的列表了
  • 总流程：初始化列表模块 ---> item模块 ---> 列表模块逻辑完善
    • 初始化列表模块
      • 这个就是正常的创建fish_redux模板代码和文件
    • item模块
      • 根据接口返回json，创建相应的bean ---> 创建item模块 ---> 编写state ---> 编写view界面
    • 列表模块逻辑完善：俩地方分俩步（adapter创建及其绑定，正常page页面编辑）
      • 创建adapter文件 ---> state调整 ---> page中绑定adapter
      • view模块编写 ---> action添加更新数据事件 ---> effect初始化时获取数据并处理 ---> reducer更新数据
  • 整体流程确实有些多，但是咱们按照整体三步流程流程走，保证思路清晰就行了

初始化列表模块

  • 此处新建个文件夹，在文件夹上新建fis_redux文件就行了；这地方，我们选择page，整体的五个文件：action，effect，reducer，state，view；全部都要用到，所以默认全选，填入Module的名字，点击OK
image-20200812140314075

item模块

按照流程走

  • 根据接口返回json，创建相应的bean ---> 创建item模块 ---> 编写state ---> 编写view界面

准备工作

  • 创建bean实体

    • 根据api返回的json数据，生成相应的实体
      • api：https://www.wanandroid.com/project/list/1/json
    • json转实体
      • 网站：https://javiercbk.github.io/json_to_dart/
      • 插件：AS中可以搜索：FlutterJsonBeanFactory
    • 这地方生成了：ItemDetailBean；代码俩百多行就不贴了，具体的内容，点击下面链接
      • ItemDetailBean代码：https://github.com/xdd666t/ExampleCode/blob/master/Flutter/fish_redux_demo/lib/list/bean/item_detail_bean.dart

  • 创建item模块

    • 这边我们实现一个简单的列表，item仅仅做展示功能；不做点击，更新ui等操作，所以这边我们就不需要创建：effect，reducer，action文件；只选择：state和view就行了
    • 创建item，这里选择component
    image-20200810225523628

文件结构

image-20200812141416796

OK，bean文件搞定了，再来看看，item文件中的文件，这里component文件不需要改动，所以这地方，我们只需要看：state.dart，view.dart

  • state
    • 这地方还是常规的写法，因为json生成的bean里面，能用到的所有数据，都在Datas类里面，所以，这地方建一个Datas类的变量即可
    • 因为，没用到reducer，实际上clone实现方法都能删掉，防止后面可能需要clone对象，暂且留着
import 'package:fish_redux/fish_redux.dart';
import 'package:fish_redux_demo/list/bean/item_detail_bean.dart';

class ItemState implements Cloneable {
  Datas itemDetail;

  ItemState({this.itemDetail});

  @override
  ItemState clone() {
    return ItemState()
        ..itemDetail = itemDetail;
  }
}

ItemState initState(Map args) {
  return ItemState();
}
  • view
    • 这里item布局稍稍有点麻烦，整体上采用的是：水平布局（Row），分左右俩大块
      • 左边：单纯的图片展示
      • 右边：采用了纵向布局（Column），结合Expanded形成比例布局，分别展示三块东西：标题，内容，作者和时间
    • OK，这边view只是简单用到了state提供的数据形成的布局，没有什么要特别注意的地方
Widget buildView(ItemState state, Dispatch dispatch, ViewService viewService) {
  return _bodyWidget(state);
}

Widget _bodyWidget(ItemState state) {
  return Card(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
    elevation: 5,
    margin: EdgeInsets.only(left: 20, right: 20, top: 20),
    child: Row(
      children: [
        //左边图片
        Container(
          margin: EdgeInsets.all(10),
          width: 180,
          height: 100,
          child: Image.network(
            state.itemDetail.envelopePic,
            fit: BoxFit.fill,
          ),
        ),
        //右边的纵向布局
        _rightContent(state),
      ],
    ),
  );
}

///item中右边的纵向布局,比例布局
Widget _rightContent(ItemState state) {
  return Expanded(
      child: Container(
    margin: EdgeInsets.all(10),
    height: 120,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        //标题
        Expanded(
          flex: 2,
          child: Container(
            alignment: Alignment.centerLeft,
            child: Text(
              state.itemDetail.title,
              style: TextStyle(fontSize: 16),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ),
        //内容
        Expanded(
            flex: 4,
            child: Container(
              alignment: Alignment.centerLeft,
              child: Text(
                state.itemDetail.desc,
                style: TextStyle(fontSize: 12),
                maxLines: 3,
                overflow: TextOverflow.ellipsis,
              ),
            )),
        Expanded(
          flex: 3,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              //作者
              Row(
                children: [
                  Text("作者：", style: TextStyle(fontSize: 12)),
                  Expanded(
                    child: Text(state.itemDetail.author,
                        style: TextStyle(color: Colors.blue, fontSize: 12),
                        overflow: TextOverflow.ellipsis),
                  )
                ],
              ),
              //时间
              Row(children: [
                Text("时间：", style: TextStyle(fontSize: 12)),
                Expanded(
                  child: Text(state.itemDetail.niceDate,
                      style: TextStyle(color: Colors.blue, fontSize: 12),
                      overflow: TextOverflow.ellipsis),
                )
              ])
            ],
          ),
        ),
      ],
    ),
  ));
}

item模块，就这样写完了，不需要改动什么了，接下来看看List模块

列表模块逻辑完善

首先最重要的，我们需要将adapter建立起来，并和page绑定

  • 创建adapter文件 ---> state调整 ---> page中绑定adapter

adapter创建及其绑定

  • 创建adapter
    • 首先需要创建adapter文件，然后写入下面代码：这地方需要继承SourceFlowAdapter适配器，里面的泛型需要填入ListState，ListState这地方会报错，因为我们的ListState没有继承MutableSource，下面state的调整就是对这个的处理
    • ListItemAdapter的构造函数就是通用的写法了，在super里面写入我们上面写好item样式，这是个pool应该可以理解为样式池，这个key最好都提出来，因为在state模块还需要用到，可以定义多个不同的item，很容易做成多样式item的列表；目前，我们这边只需要用一个，填入：ItemComponent()
class ListItemAdapter extends SourceFlowAdapter {
  static const String item_style = "project_tab_item";

  ListItemAdapter()
      : super(
          pool: >{
            ///定义item的样式
            item_style: ItemComponent(),
          },
        );
}
  • state调整
    • state文件中的代码需要做一些调整，需要继承相应的类，和adapter建立起关联
    • ListState需要继承MutableSource；还必须定义一个泛型是item的ItemState类型的List，这俩个是必须的；然后实现相应的抽象方法就行了
    • 这里只要向items里写入ItemState的数据，列表就会更新了
class ListState extends MutableSource implements Cloneable {
  ///这地方一定要注意,List里面的泛型,需要定义为ItemState
  ///怎么更新列表数据,只需要更新这个items里面的数据,列表数据就会相应更新
  ///使用多样式,请写出  List items;
  List items;

  @override
  ListState clone() {
    return ListState()..items = items;
  }

  ///使用上面定义的List,继承MutableSource,就把列表和item绑定起来了
  @override
  Object getItemData(int index) => items[index];

  @override
  String getItemType(int index) => ListItemAdapter.item_style;

  @override
  int get itemCount => items.length;

  @override
  void setItemData(int index, Object data) {
    items[index] = data;
  }
}

ListState initState(Map args) {
  return ListState();
}
 
 
     
  
  • page中绑定adapter
    •  
  
  • 这里就是将我们的ListSate和ListItemAdapter适配器建立起连接
    •  
 
 
 
class ListPage extends Page> {
  ListPage()
      : super(
          initState: initState,
          effect: buildEffect(),
          reducer: buildReducer(),
          view: buildView,
          dependencies: Dependencies(
              ///绑定Adapter
              adapter: NoneConn() + ListItemAdapter(),
              slots: >{}),
          middleware: >[],
        );
}

 
 
正常page页面编辑
 
 
整体流程
 
 
     
  
  • view模块编写 ---> action添加更新数据事件 ---> effect初始化时获取数据并处理 ---> reducer更新数据
    •  
  
  •  
    view
     
   
       
    
    • 这里面的列表使用就相当简单了，填入itemBuilder和itemCount参数就行了，这里就需要用viewService参数了哈
      •  
   
     
    •  
 
 
 
Widget buildView(ListState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: AppBar(
      title: Text("ListPage"),
    ),
    body: _itemWidget(state, viewService),
  );
}

Widget _itemWidget(ListState state, ViewService viewService) {
  if (state.items != null) {
    ///使用列表
    return ListView.builder(
      itemBuilder: viewService.buildAdapter().itemBuilder,
      itemCount: viewService.buildAdapter().itemCount,
    );
  } else {
    return Center(
      child: CircularProgressIndicator(),
    );
  }
}

 
 
     
  
  • action 
   
       
    
    • 只需要写个更新items的事件就ok了
      •  
   
     
    •  
 
 
 
enum ListAction { updateItem }

class ListActionCreator {
  static Action updateItem(var list) {
    return Action(ListAction.updateItem, payload: list);
  }
}

 
 
     
  
  • effect 
   
       
    
    • Lifecycle.initState是进入页面初始化的回调，这边可以直接用这个状态回调，来请求接口获取相应的数据，然后去更新列表
      •  
    
    • 这地方有个坑，dio必须结合json序列号和反序列的库一起用，不然Dio无法将数据源解析成Response类型
      •  
   
     
    •  
 
 
 
Effect buildEffect() {
  return combineEffects(>{
    ///进入页面就执行的初始化操作
    Lifecycle.initState: _init,
  });
}

void _init(Action action, Context ctx) async {
  String apiUrl = "https://www.wanandroid.com/project/list/1/json";
  Response response = await Dio().get(apiUrl);
  ItemDetailBean itemDetailBean =
      ItemDetailBean.fromJson(json.decode(response.toString()));
  List itemDetails = itemDetailBean.data.datas;
  ///构建符合要求的列表数据源
  List items = List.generate(itemDetails.length, (index) {
    return ItemState(itemDetail: itemDetails[index]);
  });
  ///通知更新列表数据源
  ctx.dispatch(ListActionCreator.updateItem(items));
}

 
 
     
  
  • reducer 
   
       
    
    • 最后就是更新操作了哈，这里就是常规写法了
      •  
   
     
    •  
 
 
 
Reducer buildReducer() {
  return asReducer(
    >{
      ListAction.updateItem: _updateItem,
    },
  );
}

ListState _updateItem(ListState state, Action action) {
  return state.clone()..items = action.payload;
}

 
 
列表修改-单item刷新
 
 
效果图
 
 
 
  
 
   
  
   
 
  
 
  

    list_editjump 
  
 
 
 
 
     
  
  • 这次来演示列表的单item更新，没有网络请求的操作，所以代码逻辑就相当简单了
    •  
 
 
 
结构
 
 
     
  
  • 来看看代码结构
    •  
 
 
 
 
  
 
   
  
   
 
  
 
  

    image-20200813171905618 
  
 
 
 
 
     
  
  • 这地方很明显得发现，list_edit主体文件很少，因为这边直接在state里初始化了数据源，就没有后期更新数据的操作，所以就不需要：action，effect，reducer这三个文件！item模块则直接在reducer里更新数据，不涉及相关复杂的逻辑，所以不需要：effect文件。
    •  
 
 
 
列表模块
 
 
     
  
  •  
    这次列表模块是非常的简单，基本不涉及什么流程，就是最基本初始化的一个过程，将state里初始化的数据在view中展示
     
   
       
    
    • state ---> view
      •  
   
     
    •  
  
  •  
    state
     
   
       
    
    • 老规矩，先来看看state中的代码
      •  
    
    • 这里一些新建了变量，泛型是ItemState（item的State），items变量初始化了一组数据；然后，同样继承了MutableSource，实现其相关方法
      •  
   
     
    •  
 
 
 
class ListEditState extends MutableSource implements Cloneable {
  List items;

  @override
  ListEditState clone() {
    return ListEditState()..items = items;
  }

  @override
  Object getItemData(int index) => items[index];

  @override
  String getItemType(int index) => ListItemAdapter.itemName;

  @override
  int get itemCount => items.length;

  @override
  void setItemData(int index, Object data) {
    items[index] = data;
  }
}

ListEditState initState(Map args) {
  return ListEditState()
    ..items = [
      ItemState(id: 1, title: "列表Item-1", itemStatus: false),
      ItemState(id: 2, title: "列表Item-2", itemStatus: false),
      ItemState(id: 3, title: "列表Item-3", itemStatus: false),
      ItemState(id: 4, title: "列表Item-4", itemStatus: false),
      ItemState(id: 5, title: "列表Item-5", itemStatus: false),
      ItemState(id: 6, title: "列表Item-6", itemStatus: false),
    ];
}

 
 
     
  
  • view 
   
       
    
    • view的代码主体仅仅是个ListView.builder，没有什么额外Widget
      •  
   
     
    •  
 
 
 
Widget buildView(ListEditState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: AppBar(
      title: Text("ListEditPage"),
    ),
    body: ListView.builder(
      itemBuilder: viewService.buildAdapter().itemBuilder,
      itemCount: viewService.buildAdapter().itemCount,
    ),
  );
}

 
 
     
  
  • adapter 
   
       
    
    • 和上面类型，adapter继承SourceFlowAdapter适配器
      •  
   
     
    •  
 
 
 
class ListItemAdapter extends SourceFlowAdapter {
  static const String itemName = "item";

  ListItemAdapter()
      : super(
          pool: >{itemName: ItemComponent()},
        );
}

 
 
     
  
  • page 
   
       
    
    • 在page里面绑定adapter
      •  
   
     
    •  
 
 
 
class ListEditPage extends Page> {
  ListEditPage()
      : super(
    initState: initState,
    view: buildView,
    dependencies: Dependencies(
        ///绑定适配器
        adapter: NoneConn() + ListItemAdapter(),
        slots: >{}),
    middleware: >[],
  );
}

 
 
item模块
 
 
     
  
  • 接下就是比较重要的item模块了，item模块的流程，也是非常的清晰 
   
       
    
    • view ---> action ---> reducer
      •  
   
     
    •  
  
  • state 
   
       
    
    • 老规矩，先来看看state里面的代码；此处就是写常规变量的定义，这些在view中都能用得着
      •  
   
     
    •  
 
 
 
class ItemState implements Cloneable {
  int id;
  String title;
  bool itemStatus;


  ItemState({this.id, this.title, this.itemStatus});

  @override
  ItemState clone() {
    return ItemState()
      ..title = title
      ..itemStatus = itemStatus
      ..id = id;
  }
}

ItemState initState(Map args) {
  return ItemState();
}

 
 
     
  
  • view 
   
       
    
    • 可以看到Checkbox的内部点击操作，我们传递了一个id参数，注意这个id参数是必须的，在更新item的时候来做区分用的
      •  
   
     
    •  
 
 
 
Widget buildView(ItemState state, Dispatch dispatch, ViewService viewService) {
  return Container(
    child: InkWell(
      onTap: () {},
      child: ListTile(
        title: Text(state.title),
        trailing: Checkbox(
          value: state.itemStatus,
          ///Checkbox的点击操作：状态变更
          onChanged: (value) => dispatch(ItemActionCreator.onChange(state.id)),
        ),
      ),
    ),
  );
}

 
 
     
  
  • action 
   
       
    
    • 一个状态改变的事件
      •  
   
     
    •  
 
 
 
enum ItemAction { onChange }

class ItemActionCreator {
  //状态改变
  static Action onChange(int id) {
    return Action(ItemAction.onChange, payload: id);
  }
}

 
 
     
  
  • reducer 
   
       
    
    • _onChange会回调所有ItemState，所以这地方必须用id或其它唯一标识去界定，我们所操作的item具体是哪一个
      •  
    
    • _onChange方法，未操作的item返回的时候要注意，需要返回：state原对象，标明该state对象未变动，其item不需要刷新；不能返回state.clone()，这样返回的就是个全新的state对象，每个item都会刷新，还会造成一个很奇怪的bug，会造成后续点击item操作失灵
      •  
   
     
    •  
 
 
 
Reducer buildReducer() {
  return asReducer(
    >{
      ItemAction.onChange: _onChange,
    },
  );
}

ItemState _onChange(ItemState state, Action action) {
  if (state.id == action.payload) {
    return state.clone()..itemStatus = !state.itemStatus;
  }
  ///这地方一定要注意，要返回:state；不能返回:state.clone()，否则会造成后续更新失灵
  return state;
}

 
 
多样式列表
 
 
注意：如果使用多样式，items的列表泛型不要写成ItemState，写成Object就行了；在下面代码，我们可以看到，实现的getItemData()方法返回的类型是Object，所以Items的列表泛型写成Object，是完全可以的。
 
 
     
  
  • 我们定义数据源的时候把泛型写成Object是完全可以的，但是初始化数据的时候一定要注意，写成对应adapter类型里面的state
    •  
  
  • 假设一种情况，在index是奇数时展示：OneComponent；在index是奇数时展示：TwoComponent； 
   
       
    
    • getItemType：这个重写方法里面，在index为奇偶数时分别返回：OneComponent和TwoComponent的标识
      •  
    
    • 数据赋值时也一定要在index为奇偶数时赋值泛型分别为：OneState和TwoState
      •  
   
     
    •  
  
  • 也可以这样优化去做，在getItemType里面判断当前泛型是什么数据类型，然后再返回对应的XxxxComponent的标识
    •  
  
  • 数据源的数据类型必须和getItemType返回的XxxxComponent的标识相对应，如果数据源搞成Object类型，映射到对应位置的item数据时，会报类型不适配的错误
    •  
 
 
 
下述代码可做思路参考
 
 
class ListState extends MutableSource implements Cloneable {
    List items;

    @override
    ListState clone() {
        return PackageCardState()..items = items;
    }

    @override
    Object getItemData(int index) => items[index];

    @override
    String getItemType(int index) {
        if(items[index] is OneState) {
            return PackageCardAdapter.itemStyleOne;
        }else{
            return PackageCardAdapter.itemStyleTwo;
        }
    }

    @override
    int get itemCount => items.length;

    @override
    void setItemData(int index, Object data) => items[index] = data;
}
 
 
列表存在的问题+解决方案
 
 
列表多item刷新问题
 
 
这里搞定了单item刷新场景，还存在一种多item刷新的场景
 
 
     
  
  • 说明下，列表item是没办法一次刷新多个item的，只能一次刷新一个item（一个clone对应着一次刷新），一个事件对应着刷新一个item；这边是打印多个日志分析出来了
    •  
  
  • 解决：解决办法是，多个事件去处理刷新操作
    •  
 
 
 
举例：假设一种场景，对于上面的item只能单选，一个item项被选中，其它item状态被重置到未选状态，具体效果看下方效果图
 
 
     
  
  • 效果图
    •  
 
 
 
 
  
 
   
  
   
 
  
 
  

    单选模式 
  
 
 
 
 
     
  
  • 这种效果的实现非常简单，但是如果思路不对，会掉进坑里出不来
    •  
  
  • 还原被选的状态，不能在同一个事件里写，需要新写一个清除事件
    •  
 
 
 
下述代码为整体流程
 
 
     
  
  • view
    •  
 
 
 
Widget buildView(ItemState state, Dispatch dispatch, ViewService viewService) {
  return InkWell(
    onTap: () {},
    child: ListTile(
      title: Text(state.title),
      trailing: Checkbox(
        value: state.itemStatus,
        ///CheckBox的点击操作：状态变更
        onChanged: (value) {
          //单选模式,清除选中的item,以便做单选
          dispatch(ItemActionCreator.clear());

          //刷新选中item
          dispatch(ItemActionCreator.onChange(state.id));
        }
      ),
    ),
  );
}

 
 
     
  
  • action
    •  
 
 
 
enum ItemAction {
  onChange,
  clear,
}

class ItemActionCreator {
  //状态改变
  static Action onChange(int id) {
    return Action(ItemAction.onChange, payload: id);
  }

  //清除改变的状态
  static Action clear() {
    return Action(ItemAction.clear);
  }
}

 
 
     
  
  • reducer
    •  
 
 
 
Reducer buildReducer() {
  return asReducer(
    >{
      ItemAction.onChange: _onChange,
      ItemAction.clear: _clear,
    },
  );
}

ItemState _onChange(ItemState state, Action action) {
  if (state.id == action.payload) {
    return state.clone()..itemStatus = !state.itemStatus;
  }

  ///这地方一定要注意，要返回:state；不能返回:state.clone()，否则会造成后续更新失灵
  return state;
}

///单选模式
ItemState _clear(ItemState state, Action action) {
  if (state.itemStatus) {
    return state.clone()..itemStatus = false;
  }

  ///这地方一定要注意，要返回:state；不能返回:state.clone()，否则会造成后续更新失灵
  return state;
}

 
 
这个问题实际上解决起来很简单，但是如果一直在 _onChange 方法重置状态，你会发现和你预期的结果一直对不上；完整且详细的效果，可以去看demo里面代码
 
 
搞定
 
 
     
  
  • 呼，终于将列表这块写完，说实话，这个列表的使用确实有点麻烦；实际上，如果大家用心看了的话，麻烦的地方，其实就是在这块：adapter创建及其绑定；只能多写写了，熟能生巧！
    •  
  
  • 列表模块大功告成，以后就能愉快的写列表了！
    •  
 
 
 
 
  
 
   
  
   
 
  
 
  

    img 
  
 
 
 
 
全局模式
 
 
效果图
 
 
 
  
 
   
  
   
 
  
 
  

    fish_redux_switch 
  
 
 
 
 
     
  
  • 理解了上面的是三个例子，相信大部分页面，对于你来说都不在话下了；现在我们再来看个例子，官方提供的全局主题功能，当然，这不仅仅是全局主题，全局字体样式，字体大小等等，都是可以全局管理，当然了，写app之前要做好规划
    •  
 
 
 
开搞
 
 
store模块
 
 
     
  
  • 文件结构 
   
       
    
    • 这地方需要新建一个文件夹，新建四个文件：action，reducer，state，store
      •  
   
     
    •  
 
 
 
 
  
 
   
  
   
 
  
 
  

    image-20200812162317741 
  
 
 
 
 
     
  
  • state 
   
       
    
    • 老规矩，先来看看state，我们这里只在抽象类里面定义了一个主题色，这个抽象类是很重要的，需要做全局模式所有子模块的state，都必须实现这个抽象类
      •  
   
     
    •  
 
 
 
abstract class GlobalBaseState{
  Color themeColor;
}

class GlobalState implements GlobalBaseState, Cloneable{
  @override
  Color themeColor;

  @override
  GlobalState clone() {
    return GlobalState();
  }
}

 
 
     
  
  • action 
   
       
    
    • 因为只做切换主题色，这地方只需要定义一个事件即可
      •  
   
     
    •  
 
 
 
enum GlobalAction { changeThemeColor }

class GlobalActionCreator{
  static Action onChangeThemeColor(){
    return const Action(GlobalAction.changeThemeColor);
  }
}

 
 
     
  
  • reducer 
   
       
    
    • 这里就是处理变色的一些操作，这是咸鱼官方demo里面代码；这说明简单的逻辑，是可以放在reducer里面写的
      •  
   
     
    •  
 
 
 
import 'package:flutter/material.dart' hide Action;

Reducer buildReducer(){
  return asReducer(
    >{
      GlobalAction.changeThemeColor: _onChangeThemeColor,
    },
  );
}

List _colors = [
  Colors.green,
  Colors.red,
  Colors.black,
  Colors.blue
];

GlobalState _onChangeThemeColor(GlobalState state, Action action) {
  final Color next =
  _colors[((_colors.indexOf(state.themeColor) + 1) % _colors.length)];
  return state.clone()..themeColor = next;
}

 
 
     
  
  • store 
   
       
    
    • 切换全局状态的时候，就需要调用这个类了
      •  
   
     
    •  
 
 
 
/// 建立一个AppStore
/// 目前它的功能只有切换主题
class GlobalStore{
  static Store _globalStore;
  static Store get store => _globalStore ??= createStore(GlobalState(), buildReducer());
}

 
 
main改动
 
 
     
  
  • 这里面将PageRoutes里面的visitor字段使用起来，状态更新操作代码有点多，就单独提出来了；所以main文件里面，增加了： 
   
       
    
    • visitor字段使用
      •  
    
    • 增加_updateState方法
      •  
   
     
    •  
 
 
 
void main() {
  runApp(createApp());
}

Widget createApp() {
  ///全局状态更新
  _updateState() {
    return (Object pageState, GlobalState appState) {
      final GlobalBaseState p = pageState;

      if (pageState is Cloneable) {
        final Object copy = pageState.clone();
        final GlobalBaseState newState = copy;
        if (p.themeColor != appState.themeColor) {
          newState.themeColor = appState.themeColor;
        }
        /// 返回新的 state 并将数据设置到 ui
        return newState;
      }
      return pageState;
    };
  }
  
  final AbstractRoutes routes = PageRoutes(
    ///全局状态管理:只有特定的范围的Page(State继承了全局状态),才需要建立和 AppStore 的连接关系
    visitor: (String path, Page page) {
      if (page.isTypeof()) {
        ///建立AppStore驱动PageStore的单向数据连接： 参数1 AppStore  参数2 当AppStore.state变化时,PageStore.state该如何变化
        page.connectExtraStore(GlobalStore.store, _updateState());
      }
    },

    ///定义路由
    pages: >{
      ///导航页面
      "GuidePage": GuidePage(),
      ///计数器模块演示
      "CountPage": CountPage(),
      ///页面传值跳转模块演示
      "FirstPage": FirstPage(),
      "SecondPage": SecondPage(),
      ///列表模块演示
      "ListPage": ListPage(),
    },
  );

  return MaterialApp(
    title: 'FishRedux',
    home: routes.buildPage("GuidePage", null), //作为默认页面
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute(
        builder: (BuildContext context) {
          return routes.buildPage(settings.name, settings.arguments);
        },
        settings: settings,
      );
    },
  );
}

 
 
子模块使用
 
 
     
  
  • 这里就用计数器模块的来举例，因为仅仅只需要改动少量代码，且只涉及state和view，所以其它模块代码也不重复贴出了
    •  
  
  • state 
   
       
    
    • 这地方，仅仅让CountState多实现了GlobalBaseState类，很小的改动
      •  
   
     
    •  
 
 
 
class CountState implements Cloneable,GlobalBaseState {
  int count;

  @override
  CountState clone() {
    return CountState()
        ..count = count
        ..themeColor = themeColor;
  }

  @override
  Color themeColor;
}

CountState initState(Map args) {
  return CountState()..count = 0;
}

 
 
     
  
  • view 
   
       
    
    • 这里面仅仅改动了一行，在AppBar里面加了backgroundColor，然后使用state里面的全局主题色
      •  
   
     
    •  
 
 
 
Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) {
  return _bodyWidget(state, dispatch);
}

Widget _bodyWidget(CountState state, Dispatch dispatch) {
  return Scaffold(
    appBar: AppBar(
      title: Text("FishRedux"),
      ///全局主题，仅仅在此处改动了一行
      backgroundColor: state.themeColor,
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('You have pushed the button this many times:'),
          Text(state.count.toString()),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        ///点击事件，调用action 计数自增方法
        dispatch(CountActionCreator.updateCount());
      },
      child: Icon(Icons.add),
    ),
  );
}

 
 
     
  
  • 如果其他模块也需要做主题色，也按照此处逻辑改动即可
    •  
 
 
 
调用
 
 
     
  
  • 调用状态更新就非常简单了，和正常模块更新View一样，这里我们调用全局的就行了，一行代码搞定，在需要的地方调用就OK了
    •  
 
 
 
GlobalStore.store.dispatch(GlobalActionCreator.onChangeThemeColor());

 
 
搞定
 
 
     
  
  • 经过上面的的三步，我们就可以使用全局状态了；从上面子模块的使用，可以很明显的感受到，全局状态，必须前期做好字段的规划，确定之后，最好不要再增加字段，不然继承抽象类的多个模块都会爆红，提示去实现xxx变量
    •  
 
 
 
全局模块优化
 
 
反思
 
 
在上面的全局模式里说了，使用全局模块，前期需要规划好字段，不然项目进行到中期的时候，想添加字段，多个模块的State会出现大范围爆红，提示去实现你添加的字段；项目开始规划好所有的字段，显然这需要全面的考虑好大部分场景，但是人的灵感总是无限的，不改代码是不可能，这辈子都不可能。只能想办法看能不能添加一次字段后，后期添加字段，并不会引起其他模块爆红，试了多次，成功的使用中间实体，来解决该问题
 
 
这里优化俩个方面
 
 
     
  
  • 使用通用的全局实体 
   
       
    
    • 这样后期添加字段，就不会影响其他模块，这样我们就能一个个模块的去整改，不会出现整个项目不能运行的情况
      •  
   
     
    •  
  
  • 将路由模块和全局模块封装 
   
       
    
    • 路由模块后期页面多了，代码会很多，放在主入口，真的不好管理；全局模块同理
      •  
   
     
    •  
 
 
 
因为使用中间实体，有一些地方会出现空指针问题，我都在流程里面写清楚了，大家可以把优化流程完整看一遍哈，都配置好，后面拓展使用就不会报空指针了
 
 
优化
 
 
入口模块
 
 
     
  
  • main：大改 
   
       
    
    • 从下面代码可以看到，这里将路由模块和全局模块单独提出来了，这地方为了方便观看，就写在一个文件里；说明下，RouteConfig和StoreConfig这俩个类，可以放在俩个不同的文件里，这样管理路由和全局字段更新就会很方便了！
      •  
    
    • RouteConfig：这里将页面标识和页面映射分开写，这样我们跳转页面的时候，就可以直接引用RouteConfig里面的页面标识
      •  
    
    • StoreConfig：全局模块里最重要的就是状态的判断，注释写的很清楚了，可以看看注释哈
      •  
   
     
    •  
 
 
 
void main() {
  runApp(createApp());
}

Widget createApp() {
  return MaterialApp(
    title: 'FishRedux',
    home: RouteConfig.routes.buildPage(RouteConfig.guidePage, null), //作为默认页面
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute(
        builder: (BuildContext context) {
          return RouteConfig.routes.buildPage(settings.name, settings.arguments);
        },
        settings: settings,
      );
    },
  );
}

///路由管理
class RouteConfig {
  ///定义你的路由名称比如   static final String routeHome = 'page/home';
  ///导航页面
  static const String guidePage = 'page/guide';

  ///计数器页面
  static const String countPage = 'page/count';

  ///页面传值跳转模块演示
  static const String firstPage = 'page/first';
  static const String secondPage = 'page/second';

  ///列表模块演示
  static const String listPage = 'page/list';
  static const String listEditPage = 'page/listEdit';

  static final AbstractRoutes routes = PageRoutes(
    pages: >{
      ///将你的路由名称和页面映射在一起，比如：RouteConfig.homePage : HomePage(),
      RouteConfig.guidePage: GuidePage(),
      RouteConfig.countPage: CountPage(),
      RouteConfig.firstPage: FirstPage(),
      RouteConfig.secondPage: SecondPage(),
      RouteConfig.listPage: ListPage(),
      RouteConfig.listEditPage: ListEditPage(),
    },
    visitor: StoreConfig.visitor,
  );
}

///全局模式
class StoreConfig {
  ///全局状态管理
  static _updateState() {
    return (Object pageState, GlobalState appState) {
      final GlobalBaseState p = pageState;

      if (pageState is Cloneable) {
        final Object copy = pageState.clone();
        final GlobalBaseState newState = copy;

        if (p.store == null) {
          ///这地方的判断是必须的，判断第一次store对象是否为空
          newState.store = appState.store;
        } else {
          /// 这地方增加字段判断，是否需要更新
          if ((p.store.themeColor != appState.store.themeColor)) {
            newState.store.themeColor = appState.store.themeColor;
          }

          /// 如果增加字段，同理上面的判断然后赋值...

        }

        /// 返回新的 state 并将数据设置到 ui
        return newState;
      }
      return pageState;
    };
  }

  static visitor(String path, Page page) {
    if (page.isTypeof()) {
      ///建立AppStore驱动PageStore的单向数据连接
      ///参数1 AppStore  参数2 当AppStore.state变化时,PageStore.state该如何变化
      page.connectExtraStore(GlobalStore.store, _updateState());
    }
  }
}

 
 
Store模块
 
 
下面俩个模块是需要改动代码的模块
 
 
     
  
  • state 
   
       
    
    • 这里使用了StoreModel中间实体，注意，这地方实体字段store，初始化是必须的，不然在子模块引用该实体下的字段会报空指针
      •  
   
     
    •  
 
 
 
abstract class GlobalBaseState{
  StoreModel store;
}

class GlobalState implements GlobalBaseState, Cloneable{

  @override
  GlobalState clone() {
    return GlobalState();
  }

  @override
  StoreModel store = StoreModel(
    /// store这个变量,在这必须示例化,不然引用该变量中的字段,会报空指针
    /// 下面的字段,赋初值,就是初始时展示的全局状态
    /// 这地方初值,理应从缓存或数据库中取,表明用户选择的全局状态
    themeColor: Colors.lightBlue
  );
}

///中间全局实体
///需要增加字段就在这个实体里面添加就行了
class StoreModel {
  Color themeColor;

  StoreModel({this.themeColor});
}

 
 
     
  
  • reducer 
   
       
    
    • 这地方改动非常小，将state.themeColor改成state.store.themeColor
      •  
   
     
    •  
 
 
 
Reducer buildReducer(){
  return asReducer(
    >{
      GlobalAction.changeThemeColor: _onChangeThemeColor,
    },
  );
}

List _colors = [
  Colors.green,
  Colors.red,
  Colors.black,
  Colors.blue
];

GlobalState _onChangeThemeColor(GlobalState state, Action action) {
  final Color next =
  _colors[((_colors.indexOf(state.store.themeColor) + 1) % _colors.length)];
  return state.clone()..store.themeColor = next;
}

 
 
下面俩个模块代码没有改动，但是为了思路完整，同样贴出来
 
 
     
  
  • action
    •  
 
 
 
enum GlobalAction { changeThemeColor }

class GlobalActionCreator{
  static Action onChangeThemeColor(){
    return const Action(GlobalAction.changeThemeColor);
  }
}

 
 
     
  
  • store
    •  
 
 
 
class GlobalStore{
  static Store _globalStore;
  static Store get store => _globalStore ??= createStore(GlobalState(), buildReducer());
}

 
 
子模块使用
 
 
     
  
  • 这里就用计数器模块的来举例，因为仅仅只需要改动少量代码，且只涉及state和view，所以其它模块代码也不重复贴出了
    •  
  
  • state 
   
       
    
    • 因为是用中间实体，所以在clone方法里面必须将实现的store字段加上，不然会报空指针
      •  
   
     
    •  
 
 
 
class CountState implements Cloneable, GlobalBaseState {
  int count;

  @override
  CountState clone() {
    return CountState()
      ..count = count
      ..store = store;
  }

  @override
  StoreModel store;
}

CountState initState(Map args) {
  return CountState()..count = 0;
}

 
 
     
  
  • view 
   
       
    
    • 这里面仅仅改动了一行，在AppBar里面加了backgroundColor，然后使用state里面的全局主题色
      •  
   
     
    •  
 
 
 
Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) {
  return _bodyWidget(state, dispatch);
}

Widget _bodyWidget(CountState state, Dispatch dispatch) {
  return Scaffold(
    appBar: AppBar(
      title: Text("FishRedux"),
      ///全局主题，仅仅在此处改动了一行
      backgroundColor: state.store.themeColor,
    ),
    ///下面其余代码省略....
}

 
 
     
  
  • 如果其他模块也需要做主题色，也按照此处逻辑改动即可
    •  
 
 
 
调用
 
 
     
  
  • 调用和上面说的一样，用下述全局方式在合适的地方调用
    •  
 
 
 
GlobalStore.store.dispatch(GlobalActionCreator.onChangeThemeColor());

 
 
体验
 
 
通过上面的优化，使用体验提升不是一个级别，大大提升的全局模式的扩展性，我们就算后期增加了大量的全局字段，也可以一个个模块慢慢改，不用一次爆肝全改完，猝死的概率又大大减少了！
 
 
 
  
 
   
  
   
 
  
 
  

    img 
  
 
 
 
 
Component使用
 
 
Component是个比较常用的模块，上面使用列表的时候，就使用到了Component，这次我们来看看，在页面中直接使用Component，可插拔式使用！Component的使用总的来说是比较简单了，比较关键的是在State中建立起连接。
 
 
效果图
 
 
 
  
 
   
  
   
 
  
 
  

    fish_redux中component 
  
 
 
 
 
     
  
  • 上图的效果是在页面中嵌入了俩个Component，改变子Component的操作是在页面中完成的
    •  
  
  • 先看下页面结构
    •  
 
 
 
 
  
 
   
  
   
 
  
 
  

    image-20200905183821129 
  
 
 
 
 
Component
 
 
这地方写了一个Component，代码很简单，来看看吧
 
 
     
  
  • component
    •  
 
 
 
这地方代码是自动生成了，没有任何改动，就不贴了
 
 
     
  
  • state 
   
       
    
    • initState()：我们需要注意，Component中的initState()方法在内部没有调用，虽然自动生成的代码有这个方法，但是无法起到初始化作用，可以删掉该方法
      •  
   
     
    •  
 
 
 
class AreaState implements Cloneable {
  String title;
  String text;
  Color color;

  AreaState({
    this.title = "",
    this.color = Colors.blue,
    this.text = "",
  });

  @override
  AreaState clone() {
    return AreaState()
      ..color = color
      ..text = text
      ..title = title;
  }
}

 
 
     
  
  • view
    •  
 
 
 
Widget buildView(
    AreaState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: AppBar(
      title: Text(state.title),
      automaticallyImplyLeading: false,
    ),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      alignment: Alignment.center,
      color: state.color,
      child: Text(state.text),
    ),
  );
}

 
 
Page
 
 
CompPage中，没用到effete这层，就没创建该文件，老规矩，先看看state
 
 
     
  
  • state 
   
       
    
    • 这地方是非常重要的地方，XxxxConnecto的实现形式是看官方代码写的
      •  
    
    • computed()：该方法是必须实现的，这个类似直接的get()方法，但是切记不能像get()直接返回state.leftAreaState()或state.rightAreaState，某些场景初始化无法刷新，因为是同一个对象，会被判断未更改，所以会不刷新控件 
     
         
      
      • 注意了注意了，这边做了优化，直接返回clone方法，这是对官方赋值写法的一个优化，也可以避免上面说的问题，大家可以思考思考
        •  
     
       
      •  
    
    • set()：该方法是Component数据流回推到页面的state，保持俩者state数据一致；如果Component模块更新了自己的State，不写这个方法会报错的
      •  
   
     
    •  
 
 
 
class CompState implements Cloneable {
  AreaState leftAreaState;
  AreaState rightAreaState;

  @override
  CompState clone() {
    return CompState()
      ..rightAreaState = rightAreaState
      ..leftAreaState = leftAreaState;
  }
}

CompState initState(Map args) {
  ///初始化数据
  return CompState()
    ..rightAreaState = AreaState(
      title: "LeftAreaComponent",
      text: "LeftAreaComponent",
      color: Colors.indigoAccent,
    )
    ..leftAreaState = AreaState(
      title: "RightAreaComponent",
      text: "RightAreaComponent",
      color: Colors.blue,
    );
}

///左边Component连接器
class LeftAreaConnector extends ConnOp
    with ReselectMixin {
  @override
  AreaState computed(CompState state) {
    return state.leftAreaState.clone();
  }

  @override
  void set(CompState state, AreaState subState) {
    state.leftAreaState = subState;
  }
}

///右边Component连接器
class RightAreaConnector extends ConnOp
    with ReselectMixin {
  @override
  AreaState computed(CompState state) {
    return state.rightAreaState.clone();
  }

  @override
  void set(CompState state, AreaState subState) {
    state.rightAreaState = subState;
  }
}

 
 
     
  
  • page 
   
       
    
    • 写完连接器后，我们在Page里面绑定下，就能使用Component了
      •  
   
     
    •  
 
 
 
class CompPage extends Page> {
  CompPage()
      : super(
          initState: initState,
          reducer: buildReducer(),
          view: buildView,
          dependencies: Dependencies(
              adapter: null,
              slots: >{
                //绑定Component
                "leftArea": LeftAreaConnector() + AreaComponent(),
                "rightArea": RightAreaConnector() + AreaComponent(),
              }),
          middleware: >[],
        );
}

 
 
     
  
  • view 
   
       
    
    • 使用Component就非常简单了：viewService.buildComponent("xxxxxx")
      •  
   
     
    •  
 
 
 
Widget buildView(CompState state, Dispatch dispatch, ViewService viewService) {
  return Container(
    color: Colors.white,
    child: Column(
      children: [
        ///Component组件部分
        Expanded(
          flex: 3,
          child: Row(
            children: [
              Expanded(child: viewService.buildComponent("leftArea")),
              Expanded(child: viewService.buildComponent("rightArea")),
            ],
          ),
        ),

        ///按钮
        Expanded(
            flex: 1,
            child: Center(
              child: RawMaterialButton(
                fillColor: Colors.blue,
                shape: StadiumBorder(),
                onPressed: () => dispatch(CompActionCreator.change()),
                child: Text("改变"),
              ),
            ))
      ],
    ),
  );
}

 
 
     
  
  • action
    •  
 
 
 
enum CompAction { change }

class CompActionCreator {
  static Action change() {
    return const Action(CompAction.change);
  }
}

 
 
     
  
  • reducer
    •  
 
 
 
Reducer buildReducer() {
  return asReducer(
    >{
      CompAction.change: _change,
    },
  );
}

CompState _change(CompState state, Action action) {
  final CompState newState = state.clone();
  //改变leftAreaComponent中state
  newState.leftAreaState.text = "LeftAreaState：${Random().nextInt(1000)}";
  newState.leftAreaState.color =
      Color.fromRGBO(randomColor(), randomColor(), randomColor(), 1);

  //改变rightAreaComponent中state
  newState.rightAreaState.text = "RightAreaState：${Random().nextInt(1000)}";
  newState.rightAreaState.color =
      Color.fromRGBO(randomColor(), randomColor(), randomColor(), 1);

  return newState;
}

int randomColor() {
  return Random().nextInt(255);
}

 
 
总结下
 
 
总的来说，Component的使用还是比较简单的；如果我们把某个复杂的列表提炼出一个Component的，很明显有个初始化的过程，这里我们需要将：请求参数调体或列表详情操作，在page页面处理好，然后再更新给我们绑定的子Component的State，这样就能起到初始化某个模块的作用；至于刷新，下拉等后续操作，就让Component内部自己去处理了
 
 
广播
 
 
广播在复杂的业务场景，能够起到非常巨大的作用，能非常轻松使用跨页面交互，跨Component交互！
 
 
fish_redux中是带有广播的通信方式，使用的方式很简单，这本是effect层，ctx参数自带的一个api，这里介绍一下
 
 
使用
 
 
说明：请注意广播可以通知任何页面的枚举方法，你可以单独写一个枚举事件，也可以不写，直接使用某个页面的枚举事件，是完全可以
 
 
     
  
  • action 
   
       
    
    • 广播事件单独写了一个action文件，仅方便演示，也可以不单独新建一个广播枚举Action
      •  
   
     
    •  
 
 
 
enum BroadcastAction { toNotify }

class BroadcastActionCreator {
  ///广播通知
  static Action toNotify(String msg) {
    return Action(BroadcastAction.toNotify, payload: msg);
  }
}

 
 
     
  
  • 发送广播 
   
       
    
    • 这是页面跳转的方法，就在此处写了，如果想看详细代码的话，可以去demo地址里面看下
      •  
   
     
    •  
 
 
 
void _backFirst(Action action, Context ctx) {
  //广播通信
  ctx.broadcast(BroadcastActionCreator.toNotify("页面二发送广播通知"));
}

 
 
     
  
  • 接受广播
    •  
 
 
 
Effect buildEffect() {
  return combineEffects(>{
    //接受发送的广播消息
    BroadcastAction.toNotify: _receiveNotify,
  });
}
void _receiveNotify(Action action, Context ctx) async {
  ///接受广播
  print("跳转一页面:${action.payload}");
}

 
 
说明
 
 
广播的使用还是挺简单的，基本和dispatch的使用是一致的，dispatch是模块的，而broadcast是处于Page或Component都能进行通信交互，很多情况下，我们在一个页面进行了操作，其他页面也需要同步做一些处理，使用广播就很简单了
 
 
注意： 广播发送和接受是一对多的关系，一处发送，可以在多处接受；和dispatch发送事件，如果在effect里面接受，在reducer就无法接受的情况是不一样的（被拦截了）
 
 
开发小技巧
 
 
弱化reducer
 
 
无限弱化了reducer层作用
 
 
     
  
  • 在日常使用fish_redux和flutter_bloc后，实际能深刻体会reducer层实际上只是相当于bloc中yield
     或emit关键字的作用，职能完全可以弱化为，仅仅作为状态刷新；这样可以大大简化开发流程，只需要关注
     view -> action -> effect (reducer：使用统一的刷新事件)
    •  
  
  • 下面范例代码，处理数据的操作直接在effect层处理，如需要更改数据，直接对ctx.state进行操作，涉及刷新页面的操作，统一调用onRefresh事件；对于一个页面有几十个表单的情况，这种操作，能大大提升你的开发速度和体验，亲身体验，大家可以尝试下
    •  
 
 
 
Reducer buildReducer() {
  return asReducer(
    >{
      TestAction.onRefresh: _onRefresh,
    },
  );
}

TestState _onRefresh(TreeState state, Action action) {
  return state.clone();
}

 
 
     
  
  • 具体可以查看 玩android 项目代码；花了一些时间，把玩android项目代码所有模块全部重构了，肝痛
    •  
 
 
 
widget组合式开发
 
 
说明
 
 
这种开发形式，可以说是个惯例，在android里面是封装一个个View，View里有对应的一套，逻辑自洽的功能，然后在主xm里面组合这些View；这种思想完全可以引申到Flutter里，而且，开发体验更上几百层楼，让你的widget组合可以更加灵活百变，百变星君
 
 
     
  
  • view模块中，页面使用widget组合的方式去构造的，只传入必要的数据源和保留一些点击回调
    •  
  
  •  
    为什么用widget组合方式构造页面？
     
   
       
    
    • 非常复杂的界面，必须将页面分成一个个小模块，然后再将其组合， 每个小模块Widget内部应当对自身的的职能，能逻辑自洽的去处理；这种组合的方式呈现的代码，会非常的层次分明，不会让你的代码写着写着，突然就变成shit
      •  
   
     
    •  
  
  •  
    组合widget关键点
     
   
       
    
    • 一般来说，我们并不关注widget内部页面的实现，只需要关心的是widget需要的数据源， 以及widget对交互的反馈；例如：我点击widget后，widget回调事件，并传达一些数据给我；至于内部怎么实现， 外部并不关心，请勿将dispatch传递到封装的widget内部，这会使我们关注的事件被封装在内部
      •  
   
     
    •  
  
  • 具体请查看 玩android 项目代码
    •  
 
 
 
最后
 
 
Demo地址
 
 
     
  
  • 这片文章，说实话，花了不少精力去写的，也花了不少时间构思；主要是例子，必须要自己重写下，反复思考例子是否合理等等，头皮微凉。
    •  
  
  • 代码地址：代码demo地址 
    •  
  
  • fish_redux版-玩Android：fish_redux版-玩android 
    •  
  
  • 大家如果觉得有收获，就给我点个赞吧！你的点赞，是我码字的最大动力！
    •  
 
 
 
 
  
 
   
  
   
 
  
 
  

    img 
  
 
 
 
 
系列文章
 
 
     
  
  •  解决方案 
   
       
    
    • 改善嵌套问题：Flutter 改善套娃地狱问题（仿喜马拉雅PC页面举例） 
      •  
    
    • Dialog解决方案，墙裂推荐：一种更优雅的Flutter Dialog解决方案 
      •  
   
     
    •  
  
  •  状态管理 
   
       
    
    • 中小项目墙裂推荐：Flutter GetX使用—简洁的魅力！ 
      •  
    
    • flutter_bloc使用解析—骚年，你还在手搭bloc吗！
      •  
   
     
    •  
 
 

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(fish_redux使用详解---看完就会用！)

        

            

                
    
                    
  • 芦花鞋一四
                        许叶晗

                        
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
    
                    
    • 
                    
  • 铭刻于星（四十二）
                        随风至

                        
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
    
                    
    • 
                    
  • 想家
                        爆米花机

                        
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
    
                    
    • 
                    
  • 那个抄袭的大张伟
                        猫小努

                        
    最近一直在追《即刻电音》这个综艺，除了觉得出场节目的音乐制作人有意思之外，也觉得有两个导师挺有趣的（另外一个就忽略了吧）。孙艺兴在上一篇文章里面已经说过了，那么这篇就说说我们的大老师，大张伟吧。其实在节目刚开始大张伟出来的时候，我以为他是属于导师里面来活跃气氛负责搞笑的，毕竟孙艺兴属于卖萌卖傻卖老实的，尚雯婕一般负责装逼耍狠的，而大张伟一贯以来上综艺的形象基本上都是蹦蹦跳跳带动气氛的。谁知道，两期
    
                    
    • 
                    
  • Python中os.environ基本介绍及使用方法
                        鹤冲天Pro
#Pythonpython服务器开发语言
                        
    文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi
    
                    
    • 
                    
  • 直抒《紫罗兰永恒花园外传》
                        雷姆的黑色童话

                        
    没看过《紫罗兰永恒花园》的我莫名的看完了《紫罗兰永恒花园外传》，又莫名的被故事中的姐妹之情狠狠地感动了的一把。感动何在：困苦中相依为命的姐妹二人被迫分离，用一个人的自由换取另一个人的幸福。之后，虽相隔不知几许依旧心心念念彼此牵挂。这种深深的姐妹情谊就是令我为之动容的所在。贝拉和泰勒分别影片开始，海天之间一个孩童凭栏眺望，手中拿着折旧的信纸。镜头一转，挑灯伏案的薇尔莉特正在打字机前奋笔疾书。这些片段
    
                    
    • 
                    
  • 相信相信的力量
                        孙丽_cdb3

                        
    孙丽中级十期坚持分享第345天有一个特别有哲理的故事：有一只老鹰下了蛋，这个蛋，不知怎的就滚到了鸡窝里去了，鸡也下了一窝蛋，然后鸡妈妈把这些蛋全都浮出来了，孵出来之后等小鸡长大一点了，就觉得鹰蛋孵出来的那只小鹰怪模怪样，这些小鸡都嘲笑它，真难看，真笨，丑死了，那只小鹰觉得自己真是谁也不像，真是不好看，后来鸡妈妈也不喜欢他，我怎么生出你这样的孩子来了？真烦人，后来这群小鸡和小鹰一起生活，有一天，老鹰
    
                    
    • 
                    
  • 谁家酒器最绝唱，藏在酒厂人未知？景阳冈酒厂先秦藏品大揭秘
                        李虓酒评论

                        
    文/王赛时中国的酒器酒具历史久远，举世闻名。从北京的故宫博物院、中国国家博物馆，到世界各国的大型博物馆，都以能够收藏中国古代酒具而夸耀。但很少有人知道，在山东阳谷景阳冈酒厂，默默地收藏了两千件中国酒器。这些酒器，就封藏在景阳冈的酒道馆里。其中有一些青铜酒器，一睡就是三、四千年，堪称无声国宝，堪作无字史书！今天，我将引领诸位首先窥视一下景阳冈酒道馆的9件先秦藏品，你自己来说震撼不震撼。提示：这只是景
    
                    
    • 
                    
  • 我的黑历史
                        袖手围观有来有去

                        
    孩子同学与我们一起共进晚餐，俩孩子加我三个人。小同学是一个大方率性礼貌的小孩，我们也都非常喜欢。好了，回到正题上来让我把这个故事讲完。俩孩子都喜欢吃鱼，所以就发生了小孩子之间常会发生的事。我狠狠的盯了我家孩子，孩子表情有些狼狈。和孩子单独一起的时候，见她尚未释怀，并谴责我不该狠盯她，让她没面子。也许是她触动了我的童年往事吧。由此，一狠心，给她讲了一段埋藏心里极深的黑历史：我奶奶有四个儿子，四个儿子
    
                    
    • 
                    
  • 18-115 一切思考不能有效转化为行动，都TM是扯淡！
                        成长时间线

                        
    7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的
    
                    
    • 
                    
  • 【夜读】提升生活品质的8个建议
                        茳淮秀水

                        
    停止攀比很多人之所以感觉疲惫，部分原因是来自于跟别人攀比。殊不知，攀比得到的满足只是片刻的，过后往往会感到空虚。过分在意别人的评价，丢失的是自己原有的审美，扰乱的是自己最初的节奏。不妨活得洒脱些，自己内心丰盈了，快乐就能更持久。停止自责想改变自己，先从接纳自己开始。越是过分自责，就越难改变现状，因为如果把精力全耗在自责上，就没有精力用来改变了。遇到问题，我们要用正确的心态去面对。与其一味自责，不如
    
                    
    • 
                    
  • 蘩漪：新女性？利己主义者
                        赮_红雨

                        
    蘩漪是曹禺《雷雨》笔下的女性形象。对于她的喜爱，曹禺在之前的访谈中，就已经表达得很清楚了，蘩漪是他所倾心的女子的“代替者”。在这个女性身上有着曹禺最精心的描写，但同时她的身上又存在着一些时代的问题。图片发自App首先，繁漪是追求自由和幸福的新女性形象。她是精神悲剧的核心人物，她对周朴园的反抗，具有典型意义。她是位资产阶级家庭出身的小姐，受过五四新思潮的影响，她任性、傲慢，追求人格独立、个性自由和爱
    
                    
    • 
                    
  • 如果做到轻松在股市赚钱？只要坚持这三个原则。
                        履霜之人

                        
    大A股里向来就有七亏二平一赚的说法，能赚钱的都是少数人。否则股市就成了慈善机构，人人都有钱赚，谁还要上班？所以说亏钱是正常的，或者说是应该的。那么那些赚钱的人又是如何做到的呢？普通人能不能找到捷径去分一杯羹呢？方法是有的，但要做到需要你有极高的自律。第一，控制仓位，散户最大的问题是追涨杀跌，只要涨起来，就把钱往股票上砸，然后被套，隔天跌的受不了，又一刀切，全部割肉。来来回回间，遍体鳞伤。所以散户首
    
                    
    • 
                    
  • 高端密码学院笔记285
                        柚子_b4b4

                        
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
    
                    
    • 
                    
  • 想明白这个问题，你才能写下去
                        文自拾

                        
    春节放假的时候，又有一天梦见她，第二天她冒着漫天大雪，傻傻地跑来见我。她说，见见傻傻的我，天很冷，心很暖。她回去后，我写了一篇文章，题目叫——从此梦中只有你。我们没在一起的很长一段时间里，她都在我的心底，一次次出现在我的梦里。我对她说，在一起之前，是胆小且闷骚，在一起之后，我变得不要脸了。不要脸的——去爱你。那文章没写完，火车上，给她看了。我有点小失望，花了好几个小时写，她分分钟就看完，很希望她逐
    
                    
    • 
                    
  • git - Webhook让部署自动化
                        大猪大猪

                        
    我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
    
                    
    • 
                    
  • 走向以教育叙事为载体的教育叙事研究
                        666小飞鱼

                        
    今天我读了吴松超老师的《给教师的68条建写作建议》中的第23条《如何通过教育叙事走向研究》，吴老师在文中与我们分享了一个德育案例，这是一个反面的案例，意在告知我们在处理问题时，不能就考虑的点太窄，思考要全面。走向教育叙事研究，教师要有敏锐的“感知力”，这个感知力来自于背后专业知识的支撑，思维能力以及广阔的视野和见识等。所以对于同一件事处理方法不同，这个就是教师背后“敏锐力”的不同造成的，也就是说是
    
                    
    • 
                    
  • 2023-10-22
                        奥雷里亚诺第n

                        
    昨天在B站看到关于猫喜欢挠人的视频，视频教导说猫挠人的话就抓住它的后脖颈然后用手打打挠人的那个爪子。视频本身没什么，但评论区却炸开了锅（真是符合挑食者厌食心理）。令我印象最深刻的一个甚至上升到了关于我是谁这种终极问题。它说，猫就是畜生，它挠人就打它别惯着它，反正我六道轮回成了人就应该保持人的高贵，谁都别想来打破。我顿时汗颜，但看到下面全是类似的言论只不过后面的理由各有不同，本来想骂人的心都凉了一半
    
                    
    • 
                    
  • 人怎么才能认识自己？
                        阿尚青子自由写作人

                        
    人怎么才能认识自己？（原问题）我从不愿意上纲上线地确定偌大的话题，就直接说吧。纵使你能认识世界上的万事万物，你很难做到真实地认识自己。因为即使就这个世界，基本上每个人也很难做到客观、公正、科学地认识。对你好的人就是好吗？一件事情是否能够保持永远原来的样子？借不到钱的男友，女友想离开他就理直气壮？父母对子女有几分慷慨，又有几分是无私？工作的意义究竟是什么？是工作需要你，还是你需要工作呢？诸如此类的问
    
                    
    • 
                    
  • 2022-11-17
                        无奇君

                        
    又去了一次社康，这次是急性支气管炎……太难了。半夜就猛咳，天天咳醒，还好他戴海绵耳塞睡吵不到他，要不然对他来说也是种煎熬。一累也会猛咳，希望这次是最后一次吃药，吃完就好。又想把头发剪短了，顺便染个色。可是刚刚去看人家还没开门，不是休息日老板好佛系。理发店是个夫妻店，一年多前刚搬来的时候老板还没对象呢，当时聊天老板就说希望能找个对象一起两个人守着店都比上班强。不久后再去他已经有对象了，而且在店里帮忙
    
                    
    • 
                    
  • 穷人做什么生意最赚钱？10个适合穷人赚钱的路子？
                        氧惠爱高省

                        
    不管在什么地方，一般都是穷人占大量数，而富人只有少数，但是它们却掌握着大量的财富。对于穷人来说，想要买车、买房等奢侈品就难如登天，因为他们只能通过打工来赚取几千元的月薪。➤推荐网购返利app“氧惠”，一个领隐藏优惠券+现金返利的平台。氧惠只提供领券返利链接，下单全程都在淘宝、京东、拼多多等原平台，更支持抖音、快手电商、外卖红包返利等。（应用市场搜“氧惠”下载，邀请码:521521，全网优惠上氧惠！
    
                    
    • 
                    
  • 被带偏的家人，可气又感动
                        艾孤璟

                        
    当我还是个严肃且内敛的孩子时，爷爷也是个严谨且和蔼的人，虽然不苟言笑，但没有距离感。当我接触的人越来越多，知道怎么调动气氛，家人们就被我带偏了。家里人本来没有外号的，后来都被我给取了各种各样的名字，“骂人”时就相对应的有了暗号。村里的小孩，本来不知道怎么使用假动作“打人”，怎么给人取合适的外号，后来也被我带偏了。老人常说我，古灵精怪，好的不学非得学坏的，带着不良风气。而我对他的话总是想生气又觉得搞
    
                    
    • 
                    
  • 烟花美，但瞬间即逝的样子像极了爱情。
                        胡萝卜很甜

                        
    我见过烟花在天上绽放时绚烂的模样也目睹过爱情消逝曾经相爱的两人变冷漠的样子其实我特别喜欢烟花绽放的艳丽大年初一凌晨的烟花手机拍的没有眼睛看到的美但是烟花虽美，稍纵即逝，眼睛刚记录下它的美好，就转眼消失不见。天空又恢复一片黑。烟花的样子像极了爱情啊……不论曾经多么山盟海誓，海枯石烂。只要吵架或者分手。就变得那么冷漠，那么陌生。你甚至开始怀疑你有过爱情么？真正的爱情到底是什么样子。来的快去的也快么？对
    
                    
    • 
                    
  • Python爬虫解析工具之xpath使用详解
                        eqa11
python爬虫开发语言
                        
    文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门
    
                    
    • 
                    
  • 2018-12-29
                        枫叶红时总多离别

                        
    2018年12月29日星期六昨天老师就告诉我们，今天下午不用上课，是图书漂流活动会。我觉得很兴奋，好期待。到了下午，我帮好忙就到外面去买书，刚一出去，就有一大帮的大哥哥、大姐姐围着我问要不要买书，买一本书送一颗糖。我看到了一本《小老虎比上树》的书，问大姐姐多少钱，大姐姐说这本书原价13块，现在便宜4块钱也就是9块钱卖给你，我就把一张10块钱给她找，她找了我一块钱。我现在想想我今天只带了10块钱，现
    
                    
    • 
                    
  • Redis系列：Geo 类型赋能亿级地图位置计算
                        Ly768768
redisbootstrap数据库
                        
    1前言我们在篇深刻理解高性能Redis的本质的时候就介绍过Redis的几种基本数据结构，它是基于不同业务场景而设计的：动态字符串(REDIS_STRING)：整数(REDIS_ENCODING_INT)、字符串(REDIS_ENCODING_RAW)双端列表(REDIS_ENCODING_LINKEDLIST)压缩列表(REDIS_ENCODING_ZIPLIST)跳跃表(REDIS_ENCODI
    
                    
    • 
                    
  • Low Power概念介绍-Voltage Area
                        飞奔的大虎

                        
    随着智能手机，以及物联网的普及，芯片功耗的问题最近几年得到了越来越多的重视。为了实现集成电路的低功耗设计目标，我们需要在系统设计阶段就采用低功耗设计的方案。而且，随着设计流程的逐步推进，到了芯片后端设计阶段，降低芯片功耗的方法已经很少了，节省的功耗百分比也不断下降。芯片的功耗主要由静态功耗（staticleakagepower）和动态功耗(dynamicpower)构成。静态功耗主要是指电路处于等
    
                    
    • 
                    
  • 主题升华随机抽总结
                        木棉咕噜

                        
    昨天晚上在火山灿教练那里抽了主题升华最后一关。一共抽了两个故事，现总结如下。第一个故事是《并不是你想象的那样》。主题一：有时候，面对别人一些貌似不合常情的行为，不要轻易的指责他，也许背后有我们所不知道的原因。在这一个主题里面，刚开始的时候，我没有加上貌似二字。所以就没有改动之后这么精准。主题二：有时候我们对他人善意的行为，可能会给我们带来一些意外的回报。主题三：面对同样一件事，因为不同的人看待问题
    
                    
    • 
                    
  • 那个严厉的启蒙老师
                        小米星的天空

                        
    本文参加鹏哥教师节征文活动我的启蒙老师李老师，大概是唯一动手打过我，但是我仍然很感恩的老师吧。李老师当年四十多岁，擅长珠心算教学，算是我们乡镇小学的王牌老师。李老师很严厉，不仅要骂学生，还要动手打人，他的大眼睛一瞪，全班同学都瑟瑟发抖。在九十年代，家长不像现在这样宠溺孩子。许多家长都跟老师说，管得严一点，不听话就给我打。那时候棍棒教育是很正常的，教室里的木质米尺，常常因为被用来打调皮男生的屁股而折
    
                    
    • 
                    
  • 想家，想念家乡的四季
                        三妹杨敏

                        
    不知道，为什么，这次我回自己出生地—老家，反倒有了一种出差走亲戚的感觉。人啊，出来得久了，就生分了。就不再那么心贴着心脸对着脸了。需要时间，需要机缘，需要我们再重新把自己的思维重置一遍，你才能够转得回这个弯儿的。最好的转弯儿，不是说教，也不是余旧，都有些治标不治本。真正管用的东西，只有一样。也简单。一个字：吃。吃一顿家乡的饭，喝一口家乡的水，听一听那浓重得有些陌生的乡音，心就回来了。心回来，人才算
    
                    
    • 
                                
  • JVM StackMapTable 属性的作用及理解
                                    lijingyao8206
jvm字节码Class文件StackMapTable
                                    
      
      在Java 6版本之后JVM引入了栈图(Stack Map Table)概念。为了提高验证过程的效率，在字节码规范中添加了Stack Map Table属性，以下简称栈图，其方法的code属性中存储了局部变量和操作数的类型验证以及字节码的偏移量。也就是一个method需要且仅对应一个Stack Map Table。在Java 7版
    
                                
    • 
                                
  • 回调函数调用方法
                                    百合不是茶
java
                                    
    最近在看大神写的代码时,.发现其中使用了很多的回调 ,以前只是在学习的时候经常用到 ,现在写个笔记 记录一下 
  
代码很简单: 
    
      MainDemo  :调用方法  得到方法的返回结果 
   
     
    
                                
    • 
                                
  • [时间机器]制造时间机器需要一些材料
                                    comsci
制造
                                    
          根据我的计算和推测,要完全实现制造一台时间机器,需要某些我们这个世界不存在的物质 
    和材料... 
 
      甚至可以这样说,这种材料和物质,我们在反应堆中也无法获得...... 
 
     
    
                                
    • 
                                
  • 开口埋怨不如闭口做事
                                    邓集海
邓集海 做人 做事 工作
                                    
    “开口埋怨，不如闭口做事。”不是名人名言，而是一个普通父亲对儿子的训导。但是，因为这句训导，这位普通父亲却造就了一个名人儿子。这位普通父亲造就的名人儿子，叫张明正。 　　 　　张明正出身贫寒，读书时成绩差，常挨老师批评。高中毕业，张明正连普通大学的分数线都没上。高考成绩出来后，平时开口怨这怨那的张明正，不从自身找原因，而是不停地埋怨自己家庭条件不好、埋怨父母没有给他创造良好的学习环境。 　　 　　
    
                                
    • 
                                
  • jQuery插件开发全解析，类级别与对象级别开发
                                    IT独行者
jquery开发插件　函数
                                    
    jQuery插件的开发包括两种：   一种是类级别的插件开发，即给 
jQuery添加新的全局函数，相当于给 
jQuery类本身添加方法。 
jQuery的全局函数就是属于 
jQuery命名空间的函数，另一种是对象级别的插件开发，即给 
jQuery对象添加方法。下面就两种函数的开发做详细的说明。  
   
1 
、类级别的插件开发   类级别的插件开发最直接的理解就是给jQuer
    
                                
    • 
                                
  • Rome解析Rss
                                    413277409
Rome解析Rss
                                    
    import java.net.URL;  
import java.util.List;  
  
import org.junit.Test;  
  
import com.sun.syndication.feed.synd.SyndCategory;  
import com.sun.syndication.feed.synd.S
    
                                
    • 
                                
  • RSA加密解密
                                    无量
加密解密rsa
                                    
    RSA加密解密代码 
 
代码有待整理 
 
 
package com.tongbanjie.commons.util;


import java.security.Key;

import java.security.KeyFactory;

import java.security.KeyPair;

import java.security.KeyPairGenerat
    
                                
    • 
                                
  • linux 软件安装遇到的问题
                                    aichenglong
linux遇到的问题ftp
                                    
    1 ftp配置中遇到的问题 
   500 OOPS: cannot change directory 
  出现该问题的原因:是SELinux安装机制的问题.只要disable SELinux就可以了 
  修改方法:1 修改/etc/selinux/config 中SELINUX=disabled 
    2 source /etc
    
                                
    • 
                                
  • 面试心得
                                    alafqq
面试
                                    
    最近面试了好几家公司。记录下； 
支付宝，面试我的人胖胖的，看着人挺好的；博彦外包的职位，面试失败； 
阿里金融，面试官人也挺和善，只不过我让他吐血了。。。 
由于印象比较深，记录下； 
1，自我介绍 
2，说下八种基本类型；（算上string。楼主才答了3种，哈哈，string其实不是基本类型，是引用类型） 
3，什么是包装类，包装类的优点； 
4，平时看过什么书？NND，什么书都没看过。。照样
    
                                
    • 
                                
  • java的多态性探讨
                                    百合不是茶
java
                                    
    java的多态性是指main方法在调用属性的时候类可以对这一属性做出反应的情况 
//package 1;
class A{

    public void test(){
       System.out.println("A");
  }
}

class D extends A{

    public void test(){
       S
    
                                
    • 
                                
  • 网络编程基础篇之JavaScript-学习笔记
                                    bijian1013
JavaScript
                                    
    1.documentWrite 
<html>
<head>
    <script language="JavaScript">
         document.write("这是电脑网络学校");
         document.close();
    </script>
</h
    
                                
    • 
                                
  • 探索JUnit4扩展：深入Rule
                                    bijian1013
JUnitRule单元测试
                                    
            本文将进一步探究Rule的应用，展示如何使用Rule来替代@BeforeClass，@AfterClass，@Before和@After的功能。 
        在上一篇中提到，可以使用Rule替代现有的大部分Runner扩展，而且也不提倡对Runner中的withBefores()，withAfte
    
                                
    • 
                                
  • [CSS]CSS浮动十五条规则
                                    bit1129
css
                                    
    这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。 
  
1. 所有的页面元素都可以浮动 2. 一个元素浮动后，会成为块级元素，比如<span>,a, strong等都会变成块级元素 3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了
    
                                
    • 
                                
  • 【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景
                                    bit1129
partition
                                    
    0.Kafka服务器配置 
3个broker 
1个topic，6个partition，副本因子是2 
2个consumer，每个consumer三个线程并发读取 
  1. Producer 
package kafka.examples.multibrokers.producers;

import java.util.Properties;
import java.util.
    
                                
    • 
                                
  • zabbix_agentd.conf配置文件详解
                                    ronin47
zabbix 配置文件
                                    
    Aliaskey的别名，例如 Alias=ttlsa.userid:vfs.file.regexp[/etc/passwd,^ttlsa:.:([0-9]+),,,,\1]， 或者ttlsa的用户ID。你可以使用key：vfs.file.regexp[/etc/passwd,^ttlsa:.: ([0-9]+),,,,\1]，也可以使用ttlsa.userid。备注: 别名不能重复，但是可以有多个
    
                                
    • 
                                
  • java--19.用矩阵求Fibonacci数列的第N项
                                    bylijinnan
fibonacci
                                    
    参考了网上的思路，写了个Java版的： 
 
 



public class Fibonacci {

	final  static int[] A={1,1,1,0};
	
	
	public static void main(String[] args) {
		int n=7;
		for(int i=0;i<=n;i++){
			int f=fibonac
    
                                
    • 
                                
  • Netty源码学习-LengthFieldBasedFrameDecoder
                                    bylijinnan
javanetty
                                    
    先看看LengthFieldBasedFrameDecoder的官方API 
 
http://docs.jboss.org/netty/3.1/api/org/jboss/netty/handler/codec/frame/LengthFieldBasedFrameDecoder.html 
 
API举例说明了LengthFieldBasedFrameDecoder的解析机制，如下： 
 
实
    
                                
    • 
                                
  • AES加密解密
                                    chicony
加密解密
                                    
    AES加解密算法，使用Base64做转码以及辅助加密： 
package com.wintv.common;

import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;

import sun.misc.BASE64Decod
    
                                
    • 
                                
  • 文件编码格式转换
                                    ctrain
编码格式
                                    
    
package com.test;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

    
                                
    • 
                                
  • mysql 在linux客户端插入数据中文乱码
                                    daizj
mysql中文乱码
                                    
    1、查看系统客户端，数据库，连接层的编码 
 查看方法： http://daizj.iteye.com/blog/2174993 
进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+------
    
                                
    • 
                                
  • 好代码是廉价的代码
                                    dcj3sjt126com
程序员读书
                                    
      
长久以来我一直主张：好代码是廉价的代码。 
当我跟做开发的同事说出这话时，他们的第一反应是一种惊愕，然后是将近一个星期的嘲笑，把它当作一个笑话来讲。 当他们走近看我的表情、知道我是认真的时，才收敛一点。 
当最初的惊愕消退后，他们会用一些这样的话来反驳： “好代码不廉价，好代码是采用经过数十年计算机科学研究和积累得出的最佳实践设计模式和方法论建立起来的精心制作的程序代码。” 
我只
    
                                
    • 
                                
  • Android网络请求库——android-async-http
                                    dcj3sjt126com
android
                                    
    在iOS开发中有大名鼎鼎的ASIHttpRequest库，用来处理网络请求操作，今天要介绍的是一个在Android上同样强大的网络请求库android-async-http，目前非常火的应用Instagram和Pinterest的Android版就是用的这个网络请求库。这个网络请求库是基于Apache HttpClient库之上的一个异步网络请求处理库，网络处理均基于Android的非UI线程，通
    
                                
    • 
                                
  • ORACLE 复习笔记之SQL语句的优化
                                    eksliang
SQL优化Oracle sql语句优化SQL语句的优化
                                    
    转载请出自出处：http://eksliang.iteye.com/blog/2097999 
  SQL语句的优化总结如下 
  
sql语句的优化可以按照如下六个步骤进行： 
 
 合理使用索引 
 避免或者简化排序 
 消除对大表的扫描 
 避免复杂的通配符匹配 
 调整子查询的性能 
 EXISTS和IN运算符 
 
下面我就按照上面这六个步骤分别进行总结： 
    
                                
    • 
                                
  • 浅析：Android 嵌套滑动机制（NestedScrolling）
                                    gg163
android移动开发滑动机制嵌套
                                    
    谷歌在发布安卓 Lollipop版本之后，为了更好的用户体验，Google为Android的滑动机制提供了NestedScrolling特性 
NestedScrolling的特性可以体现在哪里呢？<!--[if !supportLineBreakNewLine]--><!--[endif]--> 
比如你使用了Toolbar，下面一个ScrollView，向上滚
    
                                
    • 
                                
  • 使用hovertree菜单作为后台导航
                                    hvt
JavaScriptjquery.nethovertreeasp.net
                                    
      
hovertree是一个jquery菜单插件，官方网址：http://keleyi.com/jq/hovertree/ ，可以登录该网址体验效果。 
0.1.3版本：http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm 
hovertree插件包含文件： 
http://keleyi.com/jq/hovertree/css
    
                                
    • 
                                
  • SVG 教程 （二）矩形
                                    天梯梦
svg
                                    
    SVG <rect>   SVG Shapes 
SVG有一些预定义的形状元素，可被开发者使用和操作： 
 
 矩形 <rect> 
 圆形 <circle> 
 椭圆 <ellipse> 
 线 <line> 
 折线 <polyline> 
 多边形 <polygon> 
 路径 <path> 
 
    
                                
    • 
                                
  • 一个简单的队列
                                    luyulong
java数据结构队列
                                    
    
public class MyQueue {
	private long[] arr;

	private int front;

	private int end;
	// 有效数据的大小
	private int elements;

	public MyQueue() {
		arr = new long[10];
		elements = 0;
		front 
    
                                
    • 
                                
  • 基础数据结构和算法九：Binary Search Tree
                                    sunwinner
Algorithm
                                    
      
A binary search tree (BST) is a binary tree where each node has a Comparable key (and an associated value) and satisfies the restriction that the key in any node is larger than the keys in all
    
                                
    • 
                                
  • 项目出现的一些问题和体会
                                    Steven-Walker
DAOWebservlet
                                    
         第一篇博客不知道要写点什么，就先来点近阶段的感悟吧。 
    这几天学了servlet和数据库等知识，就参照老方的视频写了一个简单的增删改查的，完成了最简单的一些功能，使用了三层架构。 
dao层完成的是对数据库具体的功能实现，service层调用了dao层的实现方法，具体对servlet提供支持。 
 &
    
                                
    • 
                                
  • 高手问答：Java老A带你全面提升Java单兵作战能力！
                                    ITeye管理员
java
                                    
    本期特邀《Java特种兵》作者：谢宇，CSDN论坛ID: xieyuooo 针对JAVA问题给予大家解答，欢迎网友积极提问，与专家一起讨论! 
 
 
作者简介： 
 
淘宝网资深Java工程师，CSDN超人气博主，人称“胖哥”。 
 
CSDN博客地址： 
http://blog.csdn.net/xieyuooo 
 
作者在进入大学前是一个不折不扣的计算机白痴，曾经被人笑话过不懂鼠标是什么，
    
                                
    •