Weiye's Blog

Flutter状态管理之路（三）

2022-03-30T02:13:30.000Z

接上一篇 Flutter状态管理之路（二），
此篇主要介绍Flutter_Bloc

Flutter_Bloc

版本：bloc 3.0.0 flutter_bloc 3.0.0

全称为 Business Logic Component,表示为业务逻辑组件,简称 BLoC

概念

对象	说明
Event	表示触发某个状态改变的事件
State	状态值
Stream	用于传输各个时刻的状态值的流
Bloc	“Bussiness Logic Component”即业务逻辑组件，响应Action、作出处理、通过stream输出新的状态
BlocBuilder	flutter组件，封装Bloc和组件响应State变化更新UI的逻辑
BlocProvider	利用DI注入使得子孙组件可以获取其绑定的Bloc

使用例子

依然是计数器例子，官方Demo : CounterPage

counter_bloc.dart

enum CounterEvent { increment, decrement }  /// 1. 定义事件

class CounterBloc extends Bloc {   /// 2. 定义Bloc
  @override
  int get initialState => 0;

  @override
  Stream mapEventToState(CounterEvent event) async* {
  /// 3. 定义根据Event作出的状态改变响应
    switch (event) { 
      case CounterEvent.decrement:
        yield state - 1;
        break;
      case CounterEvent.increment:
        yield state + 1;
        break;
    }
  }
}

ps : async* yield 异步生成器语法，用于生成异步序列：Stream

counter_page.dart

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final CounterBloc counterBloc = BlocProvider.of(context); 4. 子Widget获取

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: BlocBuilder(   5. 用BlocBuilder完成状态绑定
        builder: (context, count) {
          return Center(
            child: Text(
              '$count',
              style: TextStyle(fontSize: 24.0),
            ),
          );
        },
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                counterBloc.add(CounterEvent.increment);
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.remove),
              onPressed: () {
                counterBloc.add(CounterEvent.decrement);  /// 6.发出事件
              },
            ),
          ),
        ],
      ),
    );
  }
}

app.dart

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
            title: 'Flutter Demo',
            home: BlocProvider(     /// 7. 注入Bloc实例
              create: (context) => CounterBloc(),
              child: CounterPage(),
            ),
            theme: theme,
          );
  }
}

图示

架构思想:

bloc_architecture.png

原理：

bloc图示1.png

关键对象

Bloc

“Bussiness Logic Component”即业务逻辑组件，响应Action、作出处理、通过stream输出新的状态

构造方法如下

abstract class Bloc extends Stream implements Sink {
  final PublishSubject _eventSubject = PublishSubject();
  BehaviorSubject _stateSubject;
  ...
  Bloc() {
    _stateSubject = BehaviorSubject.seeded(initialState);  /// 初始化状态订阅器
    _bindStateSubject();
  }
  ...
  
}

_bindStateSubject方法实现事件流通道处理Event并转接到状态流的过程

Stream transformStates(Stream states) => states;

Stream transformEvents(
    Stream events,
    Stream Function(Event) next,
  ) {
    return events.asyncExpand(next);  /// 将events流通道的元素一个个调用next方法并返回State的流
}
  
void _bindStateSubject() {
    Event currentEvent;

    transformStates(transformEvents(_eventSubject, (Event event) {
      currentEvent = event;
      return mapEventToState(currentEvent).handleError(_handleError);
    })).forEach(
      (State nextState) {
        if (state == nextState || _stateSubject.isClosed) return;
...
          _stateSubject.add(nextState);  /// 往State流通道加入新的状态元素并触发对应的观察者
        ...
      },
    );
  }

其余关键方法

@override
 StreamSubscription listen(    /// 监听状态流
   void Function(State) onData, {
   Function onError,
   void Function() onDone,
   bool cancelOnError,
 }) {
   return _stateSubject.listen(
     onData,
     onError: onError,
     onDone: onDone,
     cancelOnError: cancelOnError,
   );
 }
 
 Future close() async {
   await _eventSubject.close();
   await _stateSubject.close();
 }
 
  @override
 void add(Event event) {
   ...
     _eventSubject.sink.add(event);   /// 往事件流里输入
...
 }

BlocBuilder

class BlocBuilder, S> extends BlocBuilderBase {

  final BlocWidgetBuilder builder;

  const BlocBuilder({
    Key key,
    @required this.builder,
    B bloc,
    BlocBuilderCondition condition,
  })  : assert(builder != null),
        super(key: key, bloc: bloc, condition: condition);

  @override
  Widget build(BuildContext context, S state) => builder(context, state);
}

abstract class BlocBuilderBase, S>
    extends StatefulWidget {
    
const BlocBuilderBase({Key key, this.bloc, this.condition}) : super(key: key);

Widget build(BuildContext context, S state);

    @override
    State> createState() => _BlocBuilderBaseState();
}

class _BlocBuilderBaseState, S>
    extends State> {
  StreamSubscription _subscription;
  S _previousState;
  S _state;
  B _bloc;

  @override
  void initState() {
    super.initState();
    _bloc = widget.bloc ?? BlocProvider.of(context);
    _previousState = _bloc?.state;
    _state = _bloc?.state;
    /// 订阅
    _subscribe();
  }
...

  @override
  Widget build(BuildContext context) => widget.build(context, _state);

  @override
  void dispose() {
  /// 取消订阅
    _unsubscribe();
    super.dispose();
  }

  void _subscribe() {
    if (_bloc != null) {
      _subscription = _bloc.skip(1).listen((S state) {
        if (widget.condition?.call(_previousState, state) ?? true) {  /// 此处condition可作性能优化判断状态改变是否需要出发build
          setState(() {
            _state = state;
          });
        }
        _previousState = state;
      });
    }
  }

  void _unsubscribe() {
    if (_subscription != null) {
      _subscription.cancel();
      _subscription = null;
    }
  }
}

BlocProvider

BlocProvider实际是利用了Provider库的DI注入功能，并完成bloc生命周期的管理

class BlocProvider>
    extends SingleChildStatelessWidget {
 ...
  BlocProvider({
    Key key,
    @required Create create,
    Widget child,
    bool lazy,
  }) : this._(
          key: key,
          create: create,
          dispose: (_, bloc) => bloc?.close(),
          child: child,
          lazy: lazy,
        );
        
   BlocProvider.value({
    Key key,
    @required T value,
    Widget child,
  }) : this._(
          key: key,
          create: (_) => value,
          child: child,
        );

  BlocProvider._({
    Key key,
    @required Create create,
    Dispose dispose,
    this.child,
    this.lazy,
  })  : _create = create,
        _dispose = dispose,
        super(key: key, child: child);

  static T of>(BuildContext context) {
...
      return Provider.of(context, listen: false);
  ...
  }

  @override
  Widget buildWithChild(BuildContext context, Widget child) {
    return InheritedProvider(   /// 使用Provider库完成DI注入
      create: _create,
      dispose: _dispose,
      child: child,
      lazy: lazy,
    );
  }
}

进阶

bloc还提供一系列的辅助方法让我们更好地控制数据流

Transition

在bloc里的回调，在往状态流通道加入数据前调用，可以获取状态的改变情况

abstract class Bloc extends Stream implements Sink {
...
void onTransition(Transition transition) => null;
...
}

class Transition {
  final State currentState;
  final Event event;
  final State nextState;

  const Transition({
    @required this.currentState,  /// 当前状态
    @required this.event,/// 触发此次状态转换的事件
    @required this.nextState,/// 将要改变成的状态
  });
  ...
}

BlocDelegate

bloc的全局代理对象，可继承它并覆写相应的回调方法，如下

class SimpleBlocDelegate extends BlocDelegate {
  @override
  void onEvent(Bloc bloc, Object event) => null;  /// 事件监听
  
  @override
  void onTransition(Bloc bloc, Transition transition) => null;/// 状态改变
  
  @override
  void onError(Bloc bloc, Object error, StackTrace stacktrace) => null; /// 错误捕捉
  
}

然后注册

void main() {
  BlocSupervisor.delegate = SimpleBlocDelegate();  /// BlocSupervisor全局单例
...
}

MultiBlocProvider

用来将嵌套的BlocProvider给扁平化(使用了库 nested )，如：

BlocProvider(
  create: (BuildContext context) => BlocA(),
  child: BlocProvider(
    create: (BuildContext context) => BlocB(),
    child: BlocProvider(
      create: (BuildContext context) => BlocC(),
      child: ChildA(),
    )
  )
)

变为:

MultiBlocProvider(
  providers: [
    BlocProvider(
      create: (BuildContext context) => BlocA(),
    ),
    BlocProvider(
      create: (BuildContext context) => BlocB(),
    ),
    BlocProvider(
      create: (BuildContext context) => BlocC(),
    ),
  ],
  child: ChildA(),
)

BlocListener

实际是 BlocBuilder的另一种实现变化，应用缓存child的方式，每次setState只触发listener而不重新生成child，可用于拦截状态弹Toast，导航等等操作

class BlocListener, S>
    extends BlocListenerBase {
  final Widget child;

  const BlocListener({
    Key key,
    @required BlocWidgetListener listener,/// 作用同
    B bloc,/// 关注的bloc，不提供则会自动用泛型of往上找
    BlocListenerCondition condition,     /// 同BlocBuilder里的作用
    this.child,/// 应用缓存child的方式，每次build只触发listener而用同一个child
  })  : super(
          key: key,
          child: child,
          listener: listener,
          bloc: bloc,
          condition: condition,
        );
}

总结

优点：

事件通道处理事件转换状态，串联状态通道通知外部订阅对象
可实现局部按需刷新
状态源各自Bloc管理，实现分治，同时也可以利用Delegate实现全局的事件管理

缺点：

相较于redux，更集中在”分治”的焦点上，但是bloc组件之间缺少有效的通信机制
缺少Middleware(AOP)模式的有效支持
如果父组件发生更新，子组件绑定的数据源并未发生变化，仍会导致子的rebuild(可利用缓存child解决)

Flutter状态管理之路（二）

2022-03-30T02:13:30.000Z

接上一篇 Flutter状态管理之路（一），主要针对一些三方库来继续聊聊解决方案，介绍scope_model、provider、flutter_redux

ScopedModel

版本：1.0.1

这个库封装的比较简易，看例子就直接上关键源码吧

使用

如下例子来自官方demo

class CounterModel extends Model {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    // First, increment the counter
    _counter++;
    
    // Then notify all the listeners.
    notifyListeners();
  }
}

//在入口处也需要将根组件抱在ScopedModel中，这样就可以正常工作了。
class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new ScopedModel(
      model: new CounterModel(),
      child: new Column(children: [
        new ScopedModelDescendant(
          builder: (context, child, model) => new Text('${model.counter}'),
        ),
        new Text("Another widget that doesn't depend on the CounterModel")
      ])
    );
  }
}

关键对象

Model

abstract class Model extends Listenable {
  final Set _listeners = Set();  /// 注册观察者函数句柄
  int _version = 0;
  int _microtaskVersion = 0;

  @override
  void addListener(VoidCallback listener) { /// 添加观察者
    _listeners.add(listener);
  }


  @override
  void removeListener(VoidCallback listener) {  /// 去除观察者
    _listeners.remove(listener);
  }

  int get listenerCount => _listeners.length;

  @protected
  void notifyListeners() { /// 遍历通知观察者
    if (_microtaskVersion == _version) {
      _microtaskVersion++;
      scheduleMicrotask(() {
        _version++;
        _microtaskVersion = _version;

        _listeners.toList().forEach((VoidCallback listener) => listener());
      });
    }
  }
}

如上，其实就是观察者模式，在子类的setter方法里调用下notify通知订阅的Widget

ScopedModelDescendant

用来向上搜索从ScopedModel（继承InheritedWidget）中获取状态，由于InheritedWidget

class ScopedModelDescendant extends StatelessWidget {
  final ScopedModelDescendantBuilder builder;

  final Widget child;

  final bool rebuildOnChange;

  ScopedModelDescendant({
    @required this.builder,
    this.child,
    this.rebuildOnChange = true,
  });

  @override
  Widget build(BuildContext context) {
    return builder(
      context,
      child,  /// 缓存child机制
      ScopedModel.of(context, rebuildOnChange: rebuildOnChange),  /// 向上获取InheritedWidget来获取状态
    );
  }
}

ScopedModel

主要利用AnimatedBuilder和Listenable配合实现通知订阅，里面还使用了自定义的InheritedWidget(即_InheritedModel)来存储Model，向下暴露

class ScopedModel extends StatelessWidget {
  final T model;

  final Widget child;

  ScopedModel({@required this.model, @required this.child})
      : assert(model != null),
        assert(child != null);

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: model,
      builder: (context, _) => _InheritedModel(model: model, child: child),
    );
  }

总结

优点：

自动订阅
可跨组件传递状态
简单易用，对前端开发者来说学习成本几乎为零

缺点：

无法分离视图逻辑和业务逻辑
ScopedModel其实只是将InheritedWidget简单的封装了一下，局限性较大

Provider

版本：4.0.1

一个DI依赖注入和状态管理的框架

使用

来自官方计数器Demo

void main() => runApp(MyApp());

/// 1.定义状态Model
class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter()), /// 2. 在树根注入状态
      ],
      child: MaterialApp(
            home: Consumer(/// 3. 利用Consumer组件自动获取counter
            builder: (context, counter, _) {
              return MaterialApp(
                home: const MyHomePage(),
              );
            },
          ),
          )
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("")),
      body: const Center(child: CounterLabel()),
      floatingActionButton: const IncrementCounterButton(),
    );
  }
}

class IncrementCounterButton extends StatelessWidget {
  const IncrementCounterButton({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        Provider.of(context, listen: false).increment();  /// 4. 获取使用(不加入监听)
      },
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    );
  }
}

class CounterLabel extends StatelessWidget {
  const CounterLabel({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final counter = Provider.of(context);/// 5. 获取使用(加入监听)
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '${counter.count}',
        ),
      ],
    );
  }
}

流程图

provider流程.png

核心实现

关于Provider的源码实现，这里推荐阅读跨组件状态共享（Provider），文章将主要的内容都剥离出来带着实现了一遍

总结

优点：

利用child缓存机制优化了InheritedWidget的全量build缺点
我们的业务代码更关注数据了，只要更新Model，则UI会自动更新，而不用在状态改变后再去手动调用setState()来显式更新页面。
数据改变的消息传递被屏蔽了，我们无需手动去处理状态改变事件的发布和订阅了，这一切都被封装在Provider中了；不用像eventbus一样自己去定义事件和注册、解注册等
在大型复杂应用中，尤其是需要全局共享的状态非常多时，使用Provider将会大大简化我们的代码逻辑，降低出错的概率，提高开发效率。

缺点：

没有有效解决逻辑和视图解耦的问题
对于状态的集中和分治管理没有提供有效的方式

Redux

版本：flutter_redux 0.6.0、redux 4.0.0

库：flutter_redux

Redux 是一个用来做可预测、易调试的数据管理的框架。所有对数据的增删改查等操作都由 Redux 来集中负责。

在了解Redux前，先介绍下Stream

Stream

创建方式

通过构造函数
Stream.fromFuture:从Future创建新的单订阅流,当future完成时将触发一个data或者error，然后使用Down事件关闭这个流。
Stream.fromFutures:从一组Future创建一个单订阅流，每个future都有自己的data或者error事件，当整个Futures完成后，流将会关闭。如果Futures为空，流将会立刻关闭。
Stream.fromIterable:创建从一个集合中获取其数据的单订阅流
1
Stream.fromIntreable([1,2,3]);
监听一个流最常见的方法就是listen。当有事件发出时，流将会通知listener。Listen方法提供了这几种触发事件：
- onData(必填)：收到数据时触发
- onError：收到Error时触发
- onDone：结束时触发
- unsubscribeOnError：遇到第一个Error时是否取消订阅，默认为false

使用StreamController

//任意类型的流
StreamController controller = StreamController();
controller.sink.add(123);
controller.sink.add("xyz");
controller.sink.add(Anything);

//创建一条处理int类型的流
StreamController numController = StreamController();
numController.sink.add(123);

种类

“Single-subscription” streams 单订阅流
1
2
3
4
5
6
StreamController controller = StreamController();

controller.stream.listen((data)=> print(data));
controller.stream.listen((data)=> print(data));

controller.sink.add(123);
输出： Bad state: Stream has already been listened to. 单订阅流不能有多个收听者
只能有一个监听，并且取消后也不能加入新的；流的发送是在增加监听之后才触发的，所以不会错过事件，如io流

“broadcast” streams 多订阅流

可以增加多个监听，监听器只能监听到添加之后发出的事件，正在和之前发出的均不会收到

从Stream继承的广播流必须重写isBroadcast 才能返回true

StreamController controller = StreamController();
//将单订阅流转化为广播流
Stream stream = controller.stream.asBroadcastStream();

stream.listen((data)=> print(data));
stream.listen((data)=> print(data));

controller.sink.add(123);
/// 输出： 123 123

转换方法

流提供了众多操作符map()，where()，expand()，和take()方法，能够轻松将已有的流转化为新的流

stream.where((event){...})

StreamController controller = StreamController();

final transformer = StreamTransformer.fromHandlers(
    handleData:(value, sink){
  if(value==100){
      sink.add("你猜对了");
    }
else{ sink.addError('还没猜中，再试一次吧');
    }
  });
  
  controller.stream
            .transform(transformer)
            .listen(
                (data) => print(data),
                onError:(err) => print(err));
    
    controller.sink.add(23);

三项原则

可信任的单一数据源
整个应用的状态应该都被存储在一颗状态对象树中(store)
状态只读
每个状态对象都是普通dart对象，并且是Imutation；状态对外只读，要改变state只能通过发出action经由相应的reducer里修改
状态只由纯函数更改
这里的纯函数指的是reducer，接收前一个状态值和action，这里根据上述2个变量生成新的状态值

概念

对象	说明	所属库
Store	状态的载体(仓库)，持有Reducer、State、Middleware	redux包
Reducer	对State进行改变操作的地方，其他地方不能改变，因为State 都是Imutaion的	redux包
Action	行为的抽象，标识一种对State改变的行为	redux包
State	影响View树的状态值	redux包
StoreProvider	继承自InheritedWidget，主要用于Store的DI注入	Flutter_redux包
StoreConnector	关联Store，利用Stream和StreamBuilder实现局部刷新，可利用Stream丰富的API进行功能的添加	Flutter_redux包
Middleware	中间件，用于在reducer执行前拦截进行一些操作，调用next则执行下一个中间件直到Reducer	redux包

使用例子

官方Demo: Counter

enum Actions { Increment }  /// 1. 定义Action

int counterReducer(int state, dynamic action) {
  if (action == Actions.Increment) {  /// 2. 创建Reducer
    return state + 1;
  }

  return state;
}

void main() {
  final store = Store(counterReducer, initialState: 0);   /// 3. 初始化store

  runApp(FlutterReduxApp(
    title: 'Flutter Redux Demo',
    store: store,
  ));
}

class FlutterReduxApp extends StatelessWidget {
  final Store store;
  final String title;

  FlutterReduxApp({Key key, this.store, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreProvider(    /// 4. 在根Widget注入store
      store: store,
      child: MaterialApp(
        title: title,
        home: Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'You have pushed the button this many times:',
                ),
               
                StoreConnector(      /// 5. 连接Store和子树
                  converter: (store) => store.state.toString(),   /// 6. 从store中 取出转换成需要的state
                  builder: (context, count) {                     /// 7. 构建子widget树
                    return Text(
                      count,
                      style: Theme.of(context).textTheme.display1,
                    );
                  },
                )
              ],
            ),
          ),
         
          floatingActionButton: StoreConnector(
            converter: (store) {
              return () => store.dispatch(Actions.Increment);   /// 8. 获取dispatch
            },
            builder: (context, callback) {
              return FloatingActionButton(
                onPressed: callback,                         /// 9. 发送"加数"的Action
                tooltip: 'asdasdasd',
                child: Icon(Icons.add),
              );
            },
          ),
        ),
      ),
    );
  }
}

图示

redux图示1.png

关键对象

Store

主要实现

中间件及状态改变(reducer)功能
利用streamBroadcast 实现订阅功能

class Store {
  Reducer reducer;

  final StreamController _changeController;
  State _state;
  List _dispatchers;

  Store(
    this.reducer, {
    State initialState,
    List> middleware = const [],
    bool syncStream = false,
    bool distinct = false,
  }) : _changeController = StreamController.broadcast(sync: syncStream) {
    _state = initialState;
    _dispatchers = _createDispatchers(  /// 创建链式中间件和Reducer的链式结构
      middleware,
      _createReduceAndNotify(distinct),/// 用NextDispatcher包装reducer
    );
  }
  ...
}

/// NextDispatcher定义如下：
typedef dynamic NextDispatcher(dynamic action);

创建链式结构

将Reducer包装成NextDispatcher，实际利用了闭包来访问reducer

NextDispatcher _createReduceAndNotify(bool distinct) {    return (dynamic action) {      final state = reducer(_state, action);      if (distinct && state == _state) return;      _state = state;      _changeController.add(state);  /// 往stream添加事件，会触发流的监听    };  }

闭包将reducer和middleware处理后生成一个链式的NextDispatcher结构

List _createDispatchers(    List> middleware,    NextDispatcher reduceAndNotify,  ) {    final dispatchers = []..add(reduceAndNotify);    // Convert each [Middleware] into a [NextDispatcher]    for (var nextMiddleware in middleware.reversed) {      final next = dispatchers.last;    /// 每次取NextDispatcher集合末尾的元素      dispatchers.add(        (dynamic action) => nextMiddleware(this, action, next),  /// 往集合尾部追加中间件的封装函数(NextDispatcher)      );    }    return dispatchers.reversed.toList();        /// 最后将集合逆序，即先按顺序执行中间件，最后执行Reducer  }

Store里有一个dispatch方法，用于发出改变状态的行为
1
2
3
dynamic dispatch(dynamic action) {
return _dispatchers[0](action);
}
如上，dispatch时，实际上就是从链头开始走NextDispatcher方法，中间经过middleware和reducer的处理

Reducer

接收当前状态值和Action，处理后返回一个新的State用于替换当前State

1	typedef State Reducer(State state, dynamic action);

StoreProvider

主要实现：

Store的DI注入

class StoreProvider extends InheritedWidget {
  final Store _store;
  ...
  static Store of(BuildContext context, {bool listen = true}) {
    final type = _typeOf>();
    final provider = (listen
        ? context.inheritFromWidgetOfExactType(type)  /// 从树结构获取Widget并且将context加入监听集合
        : context
            .ancestorInheritedElementForWidgetOfExactType(type)/// 只获取 不加入监听
            ?.widget) as StoreProvider;

    if (provider == null) throw StoreProviderError(type);

    return provider._store;
  }
  ...
}

StoreConnector

主要实现：

从父层级获取Store
利用Stream和StreamBuilder实现局部刷新，可利用Stream丰富的API进行功能的添加

class StoreConnector extends StatelessWidget {
...
@override
  Widget build(BuildContext context) {
    return _StoreStreamListener(
      store: StoreProvider.of(context),   /// 沿树往上搜索Store
      builder: builder,/// 利用ViewModel构建Widget
      converter: converter,/// 将获取的State转为ViewModel
      distinct: distinct,/// 性能优化开关，决定当ViewModel改变时是否利用==去比较以决定是否rebuild
      onInit: onInit,
      onDispose: onDispose,
      rebuildOnChange: rebuildOnChange,
      ignoreChange: ignoreChange,
      onWillChange: onWillChange,
      onDidChange: onDidChange,
      onInitialBuild: onInitialBuild,
    );
  }
...  
}

class _StoreStreamListener extends StatefulWidget {
...
 @override
  State createState() {
    return _StoreStreamListenerState();
  }
...
}

class _StoreStreamListenerState
    extends State<_StoreStreamListener> {
...
    @override
  void initState() {
...
    latestValue = widget.converter(widget.store);  /// 将state转换成ViewModel
    _createStream();/// 创建监听流
...
  }
  
   void _createStream() {
    stream = widget.store.onChange  /// 取出Store的流
        .where(_ignoreChange)
        .map(_mapConverter)/// 这里执行传进来的convert方法进行转换
        .where(_whereDistinct)/// 性能优化，与distinct相关,
        .transform(StreamTransformer.fromHandlers(handleData: _handleChange)); ///生成ViewModel的流
  }
  
  /// 这里实际就是将State转为ViewModel流的地方
   void _handleChange(ViewModel vm, EventSink sink) {
    if (widget.onWillChange != null) {
      widget.onWillChange(latestValue, vm);
    }

    latestValue = vm;

    if (widget.onDidChange != null) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        widget.onDidChange(latestValue);
      });
    }

    sink.add(vm);
  }
  
   @override
  void didUpdateWidget(_StoreStreamListener oldWidget) {
  /// InheritedWidget 的依赖情况改变时会调用，判断是否需要重新关联新的流
    latestValue = widget.converter(widget.store);

    if (widget.store != oldWidget.store) {
      _createStream();
    }

    super.didUpdateWidget(oldWidget);
  }
  
   @override
  Widget build(BuildContext context) {
  /// 使用官方StreamBuilder组件来监听转换后ViewModel流
    return widget.rebuildOnChange
        ? StreamBuilder(
            stream: stream,
            builder: (context, snapshot) => widget.builder(
              context,
              latestValue,
            ),
          )
        : widget.builder(context, latestValue);
  }
}

注意：

上述Build方法里的rebuildOnChange：true 则会启用流监听，否则只是普通的widget构建，更新只在InheritedWidget依赖改变或者上层build时才触发rebuild
因为整个State是一个stream出来的，每次store的state改变均会发出事件，widget.distinct，这个开启后，便可实现某个单独的Connector只有在依赖的ViewModel改变时才会重新build

实际上利用InherityWidget实现Store的DI注入，

工具方法

在redux包里有一个工具方法集合位于：src/utils.dart

combineReducers，用来合并Reducer

/// 利用闭包 包装多个Reducer为一个Reducer
Reducer combineReducers(Iterable> reducers) {
  return (State state, dynamic action) {
    for (final reducer in reducers) {
      state = reducer(state, action);
    }
    return state;
  };
}

TypedMiddleware ，用来根据action过滤执行指定的中间件

final todosReducer = combineReducers>([
  TypedReducer, AddTodoAction>(_addTodo),
  TypedReducer, DeleteTodoAction>(_deleteTodo),
  ...
]);

TypedReducer ，用来根据action过滤执行指定的reducer

[
    TypedMiddleware(loadTodos),
    TypedMiddleware(saveTodos),
    ...
  ];

总结

优点

一颗状态树对应用状态进去集权统一管理，方便对状态改变log、序列化、持久化、测试、撤销重做、时光轴回放
状态均为immutation，每次的改变均生成一个新的，防止副作用产生
状态的改变不管从view还是网络均必须通过发出action，在reducer里修改，保证了无竞争问题
追踪问题方便，可打印某一时刻的状态树，直观分析出异常状态节点
支持面向切面AOP编程的中间件，中间件定义是可插拔，可叠加，但不会改变事件流程

缺点

Redux 的集中和 Component 的分治之间的矛盾
Redux 的 Reducer 需要一层层手动组装，带来的繁琐性和易错性
代码结构侵入性较大
如果父组件发生更新，子组件绑定的数据源并未发生变化，仍会导致子的rebuild(可利用缓存child解决)

辅助库

redux_thunk
通过定义中间件拦截指定的 Function，以实现异步操作然后dispatch改变state的action去刷新
flutter_redux_dev_tools : Time Travel UI，可和React.js一样实现时间旅行

参考

Todo app

Flutter状态管理之路（五）

2022-03-30T02:13:30.000Z

接上一篇Flutter状态管理之路（四）
此篇主要介绍flutter_mobx

Fish Redux

版本：0.2.7

库地址：https://github.com/alibaba/fish-redux/

演进过程

闲鱼fish_redux演进过程1.png

闲鱼fish_redux演进过程2.png

概念

对象	说明	所属库
Action	表示一种意图,包含两个字段 type,payload
Connector	表达了如何从一个大数据中读取小数据，同时对小数据的修改如何同步给大数据，这样的数据连接关系
Reducer	一个上下文无关的 pure function
State	状态值
Middleware	中间件，以AOP面向切面形式注入逻辑
Component	对视图展现和逻辑功能的封装
Effect	处理Action的副作用
Dependent	表达了小组件\	小适配器是如何连接到大的Component 的
Page	继承Component，针对页面级的抽象，内置一个Store（子Component共享）

使用

例子来源官方 Todos

入口路由配置

/// 创建应用的根 Widget
/// 1. 创建一个简单的路由，并注册页面
/// 2. 对所需的页面进行和 AppStore 的连接
/// 3. 对所需的页面进行 AOP 的增强
Widget createApp() {
  final AbstractRoutes routes = PageRoutes(
    pages: {
      /// 注册TodoList主页面
      'todo_list': ToDoListPage(),

    },
    visitor: (String path, Page page) {
      /// 只有特定的范围的 Page 才需要建立和 AppStore 的连接关系
      /// 满足 Page ，T 是 GlobalBaseState 的子类
      if (page.isTypeof()) {
        /// 建立 AppStore 驱动 PageStore 的单向数据连接
        /// 1. 参数1 AppStore
        /// 2. 参数2 当 AppStore.state 变化时, PageStore.state 该如何变化
        page.connectExtraStore(GlobalStore.store,
            (Object pagestate, GlobalState appState) {
          /// 根据appState变化pagestate
          return pagestate;
        });
      }

      /// AOP
      /// 页面可以有一些私有的 AOP 的增强， 但往往会有一些 AOP 是整个应用下，所有页面都会有的。
      /// 这些公共的通用 AOP ，通过遍历路由页面的形式统一加入。
      page.enhancer.append(
        ...

        /// Store AOP
        middleware: >[
          logMiddleware(tag: page.runtimeType.toString()),
        ],
      );
    },
  );

  return MaterialApp(
    title: 'Fluro',
    home: routes.buildPage('todo_list', null),
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute(builder: (BuildContext context) {
        return routes.buildPage(settings.name, settings.arguments);
      });
    },
  );
}

新建Page

class ToDoListPage extends Page> {
  ToDoListPage()
      : super(
          initState: initState,
          effect: buildEffect(),
          reducer: buildReducer(),
          view: buildView,
        );
}

定义state

class PageState extends MutableSource
    implements GlobalBaseState, Cloneable {
  List toDos;

  @override
  Color themeColor;

  @override
  PageState clone() {
    return PageState()
      ..toDos = toDos
      ..themeColor = themeColor;
  }

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

  @override
  String getItemType(int index) => 'toDo';

  @override
  int get itemCount => toDos?.length ?? 0;

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

PageState initState(Map args) {
  //just demo, do nothing here...
  return PageState();
}

定义Action

enum PageAction { initToDos, onAdd }

class PageActionCreator {
  static Action initToDosAction(List toDos) {
    return Action(PageAction.initToDos, payload: toDos);
  }

  static Action onAddAction() {
    return const Action(PageAction.onAdd);
  }
}

定义Reducer

Reducer buildReducer() {
  return asReducer(
    >{PageAction.initToDos: _initToDosReducer},
  );
}

PageState _initToDosReducer(PageState state, Action action) {
  final List toDos = action.payload ?? [];
  final PageState newState = state.clone();
  newState.toDos = toDos;
  return newState;
}

定义Effect

Effect buildEffect() {
  return combineEffects(>{
    Lifecycle.initState: _init,
    PageAction.onAdd: _onAdd,
  });
}

void _init(Action action, Context ctx) {
  final List initToDos = [];
  /// 可作网络/IO等耗时操作
  ctx.dispatch(PageActionCreator.initToDosAction(initToDos));
}

void _onAdd(Action action, Context ctx) {
  Navigator.of(ctx.context)
      .pushNamed('todo_edit', arguments: null)
      .then((dynamic toDo) {
    if (toDo != null &&
        (toDo.title?.isNotEmpty == true || toDo.desc?.isNotEmpty == true)) {
      ctx.dispatch(list_action.ToDoListActionCreator.add(toDo));
    }
  });
}

定义View视图

Widget buildView(PageState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: state.themeColor,  /// 获取state状态
      title: const Text('ToDoList'),
    ),
    body: Container(
      child: Column(
        children: [
        
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () => dispatch(PageActionCreator.onAddAction()),  /// 发出意图改变状态
      tooltip: 'Add',
      child: const Icon(Icons.add),
    ),
  );
}

组装子Component

定义state

class ReportState implements Cloneable {
  int total;
  int done;

  ReportState({this.total = 0, this.done = 0});

  @override
  ReportState clone() {
    return ReportState()
      ..total = total
      ..done = done;
  }

}

定义Component

class ReportComponent extends Component {
  ReportComponent()
      : super(
          view: buildView,
        );
}

定义视图

Widget buildView(
  ReportState state,
  Dispatch dispatch,
  ViewService viewService,
) {
  return Container(
      margin: const EdgeInsets.all(8.0),
      padding: const EdgeInsets.all(8.0),
      color: Colors.blue,
      child: Row(
        children: [
          Container(
            child: const Icon(Icons.report),
            margin: const EdgeInsets.only(right: 8.0),
          ),
          Text(
            'Total ${state.total} tasks, ${state.done} done.',
            style: const TextStyle(fontSize: 18.0, color: Colors.white),
          )
        ],
      ));
}

定义Connector来连接父子Component

class ReportConnector extends ConnOp
    with ReselectMixin {
  @override
  ReportState computed(PageState state) {
    return ReportState()
      ..done = state.toDos.where((ToDoState tds) => tds.isDone).length
      ..total = state.toDos.length;
  }

  @override
  void set(PageState state, ReportState subState) {
    throw Exception('Unexcepted to set PageState from ReportState');
  }
}

page中使用，改造page如下

class ToDoListPage extends Page> {
  ToDoListPage()
      : super(
          initState: initState,
          effect: buildEffect(),
          reducer: buildReducer(),
          view: buildView,
          dependencies: Dependencies(
              slots: >{
                'report': ReportConnector() + ReportComponent()
              }),
        );
}

page的buildView改造如下

Widget buildView(PageState state, Dispatch dispatch, ViewService viewService) {
  final ListAdapter adapter = viewService.buildAdapter();
  return Scaffold(
    appBar: AppBar(
      backgroundColor: state.themeColor,
      title: const Text('ToDoList'),
    ),
    body: Container(
      child: Column(
        children: [
          viewService.buildComponent('report'),   /// 加载子Component
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () => dispatch(PageActionCreator.onAddAction()),
      tooltip: 'Add',
      child: const Icon(Icons.add),
    ),
  );
}

关键对象

Middleware

StoreMiddleware，实际是对Store的dispatch函数进行加强

store_middleware.png

/// fish-redux-master/lib/src/redux/apply_middleware.dart
StoreEnhancer applyMiddleware(List> middleware) {
  return middleware == null || middleware.isEmpty
      ? null
      : (StoreCreator creator) => (T initState, Reducer reducer) {
            final Store store = creator(initState, reducer);
            final Dispatch initialValue = store.dispatch;   /// 原始的dispatch
            store.dispatch = middleware
                .map((Middleware middleware) => middleware(   /// 执行middleware最外层函数返回Composable，此函数在这里用于对dispatch包装
                      dispatch: (Action action) => store.dispatch(action),
                      getState: store.getState,
                    ))
                .fold(
                  initialValue,
                  (Dispatch previousValue,
                          Dispatch Function(Dispatch) element) =>
                      element(previousValue),/// 每次将上一个dispatch传入，返回一个新的dispatch，利用闭包,新的dispatch持有了上一个dispatch的引用
                );

            return store;
          };
}

其中某一个Middleware示例如下：

Middleware logMiddleware({
  String tag = 'redux',
  String Function(T) monitor,
}) {
  return ({Dispatch dispatch, Get getState}) {
    return (Dispatch next) {   /// 此方法在上一个示意代码段里，是fold方法里的element
      return isDebug()
          ? (Action action) {   /// 返回包装的Dispatch
              print('---------- [$tag] ----------');
              print('[$tag] ${action.type} ${action.payload}');

              final T prevState = getState();
              if (monitor != null) {
                print('[$tag] prev-state: ${monitor(prevState)}');
              }

              next(action);

              final T nextState = getState();
              if (monitor != null) {
                print('[$tag] next-state: ${monitor(nextState)}');
              }
            }
          : next;
    };
  };
}

全局Store

fish_redux_全局store时序图.png

page.connectExtraStore(GlobalStore.store,
           (Object pagestate, GlobalState appState) {
         final GlobalBaseState p = pagestate;
         if (p.themeColor != appState.themeColor) {
           if (pagestate is Cloneable) {
             final Object copy = pagestate.clone();
             final GlobalBaseState newState = copy;
             newState.themeColor = appState.themeColor;
             return newState;
           }
         }
         return pagestate;
       });

Connector

fish_redux_connector_reducer.png

abstract class MutableConn implements AbstractConnector {
  const MutableConn();

  void set(T state, P subState);

  @override
  SubReducer subReducer(Reducer reducer) {
  /// 将本Component的reducer包装成新的reducer给父的store注入
    return (T state, Action action, bool isStateCopied) {
      final P props = get(state);
      if (props == null) {
        return state;
      }
      final P newProps = reducer(props, action);  /// 调用本Component的reducer，返回子的state
      final bool hasChanged = newProps != props;
      final T copy = (hasChanged && !isStateCopied) ? _clone(state) : state;
      if (hasChanged) {
        set(copy, newProps);  /// 通知父Component同步状态
      }
      return copy;
    };
  }
}

其余详见官方文档:https://github.com/alibaba/fish-redux/blob/master/doc/README-cn.md

总结

优点：

每个Page一个Store,子Component共享其Store，单个Component仍拥有redux的特性以实现分治
子的reducer自动合并，与page的store自动进行数据同步
利用eventbus 建立page之间的联系，通过broadcast effect来分发page自身不关心的Action给其它page
可以全局共享状态，定义一个全局Store在用page.connectExtraStore关联

缺点：

概念较多，学习曲线较高
需要定义的各类对象多、文件多
对项目规模把握不到位容易引入不必要的复杂度
代码结构侵入性较大

未完待续

fish_redux框架定义的概念很多，还需要继续深入…

参考

Flutter状态管理之路（四）

2022-03-30T02:13:30.000Z

接上一篇Flutter状态管理之路（三）
此篇主要介绍flutter_mobx

flutter_mobx

版本：

dependencies:
mobx: ^0.4.0
flutter_mobx: ^0.3.4

dev_dependencies:
build_runner: ^1.3.1
mobx_codegen: ^0.3.11

文档：https://mobx.pub/

概念

对象	说明
Observables	代表响应式状态，可以是普通dart对象，也可以是一颗状态树，变化会触发reaction
Computed	计算属性，根据多个Observables来源计算出其应该输出的值，有缓存，不使用会清空，源改变会触发重新计算，变化也会触发reaction
Actions	响应改变Observables的地方
Reactions	对Action、Observable、Computed三元素响应的地方，可以是Widget/函数
Observer	上述Reaction的一个具体实现，用于Flutter中包裹需要响应 Observable的子树

概念图(来自mobx.pub):

图来自mobx.pub

使用例子

来自官网计数器Demo

定义Store，新建counter.dart



// Include generated file
part 'counter.g.dart';   /// 利用注解解析生成代码

// This is the class used by rest of your codebase
class Counter = _Counter with _$Counter;

// The store-class
abstract class _Counter with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}

main.dart

final counter = Counter(); // 1. 初始化Store

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MobX',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MobX Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            // Wrapping in the Observer will automatically re-render on changes to counter.value
            Observer(   /// 2. 用Observer包裹 使用counter  会自动建立订阅关系
              builder: (_) => Text(
                '${counter.value}',
                style: Theme.of(context).textTheme.display1,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,   /// 3. 调用Observer的setter方法 通知更新
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

图示

flutter_mobx主流程图1.png

关键对象

以上述计数器例子来分析下源码中关键对象

_$Counter

该对象由代码生成器生成，主要实现扩展自定义的dart object的Observable的能力

mixin _$Counter on _Counter, Store { 
  /// Store只是起标识作用的mixin
  /// _Counter是我们自定义的状态对象
  
  final _$valueAtom = Atom(name: '_Counter.value'); /// 根据@observable标识的变量，生成的对应的Atom对象，用于与Reactions实现观察者模式

  @override
  int get value {
  /// 属性value的getter  根据@observable生成
    _$valueAtom.context.enforceReadPolicy(_$valueAtom); /// 用于限制此方法是否能在非Actions和Reactions里调用，默认允许，否则抛出assert异常
    _$valueAtom.reportObserved();/// 注册观察者(Reaction)
    return super.value;/// 返回值
  }

  @override
  set value(int value) {
    _$valueAtom.context.conditionallyRunInAction(() {
    /// conditionallyRunInAction 用于判断写入的安全策略和是否包含action的追踪
      super.value = value;  /// 赋值的地方
      _$valueAtom.reportChanged();  /// 通知注册在valueAtom里的Observer刷新数据
    }, _$valueAtom, name: '${_$valueAtom.name}_set');
  }

  final _$_CounterActionController = ActionController(name: '_Counter');/// 根据@action生成，用于记录action调用情况

  @override
  void increment() {
    final _$actionInfo = _$_CounterActionController.startAction(); /// 记录开始
    try {
      return super.increment();/// 真正执行定义的increment方法
    } finally {
      _$_CounterActionController.endAction(_$actionInfo); /// 记录完成
    }
  }
}

上述代码片段里的_$valueAtom.context是每个Atom里默认取的全局的MainContext，看Atom构造：

class Atom {
  factory Atom(
          {String name,
          Function() onObserved,
          Function() onUnobserved,
          ReactiveContext context}) =>
      Atom._(context ?? mainContext,   /// 注意此处，参数不传会使用mainContext
          name: name, onObserved: onObserved, onUnobserved: onUnobserved);
...
}

看下几个重点方法：

_$valueAtom.context.conditionallyRunInAction

void conditionallyRunInAction(void Function() fn, Atom atom,
      {String name, ActionController actionController}) {
    if (isWithinBatch) {
    /// 当在action、reaction里执行时，直接进入此处
      enforceWritePolicy(atom);  /// 检查写入权限，如是否可在非action外进行写入等
      fn();/// 执行真正赋值的地方
    } else {
    /// 非 action or transaction 里执行走这
      final controller = actionController ??
          ActionController(
              context: this, name: name ?? nameFor('conditionallyRunInAction'));
      final runInfo = controller.startAction();  /// 记录action开始

      try {
        enforceWritePolicy(atom);
        fn();
      } finally {
        controller.endAction(runInfo);   ///  记录action结束
      }
    }
  }

_$valueAtom.reportObserved()

/// Atom
void reportObserved() {
 _context._reportObserved(this);
  }
/// ReactiveContext
  void _reportObserved(Atom atom) {
    final derivation = _state.trackingDerivation;  /// 取出当前正在执行的reactions or computeds

    if (derivation != null) {
      derivation._newObservables.add(atom);  /// 将当前atom绑进derivation里
      if (!atom._isBeingObserved) {
      /// 如果atom之前并没有被加入观察，则执行此处
        atom
          .._isBeingObserved = true
          .._notifyOnBecomeObserved();/// 通知Observable 的所有listener - 其变为被观察状态
      }
    }
  }

上面可以看出，atom被加入到当前reaction(derivation)的监听集合里,即reaction持有了atom，但是atom改变时是需要通知到reaction的，继续看下面

_$valueAtom.reportChanged()

/// Atom
void reportChanged() {
   _context
     ..startBatch()   /// batch计数+1 ，记录当前batch的深度，用来追踪如action执行的深度
     ..propagateChanged(this)/// 通知注册在atom里的observer（即Derivation）数据改变
     ..endBatch();  /// 执行完毕，batch计数-1并检查batch执行深度是否归0，此处是做了层优化
 }
 
 /// ReactiveContext
 void propagateChanged(Atom atom) {
  ...
   atom._lowestObserverState = DerivationState.stale;

   for (final observer in atom._observers) {
     if (observer._dependenciesState == DerivationState.upToDate) {
       observer._onBecomeStale();  /// 通知所有注册的即Derivation数据改变
     }
     observer._dependenciesState = DerivationState.stale;
   }
 }
 
 void endBatch() {
   if (--_state.batch == 0) { /// 优化：当前执行改变的层次没回归0时，跳过最终的reaction响应，只有全部执行完毕才走下面的逻辑 (个人理解:因为是单线程，此处考虑的应该是递归情况，如action里再调用action)
     runReactions(); 
     /// 通知挂起的reactions 数据改变
     ///  List pendingReactions = [];
       /// The reactions that must be triggered at the end of a `transaction` or an `action`

     for (var i = 0; i < _state.pendingUnobservations.length; i++) {
     /// 这里处理断开连接的observations 如dispose掉
       final ob = _state.pendingUnobservations[i]
         .._isPendingUnobservation = false;

       if (ob._observers.isEmpty) {
         if (ob._isBeingObserved) {
           // if this observable had reactive observers, trigger the hooks
           ob
             .._isBeingObserved = false
             .._notifyOnBecomeUnobserved();
         }

         if (ob is Computed) {
           ob._suspend();
         }
       }
     }

     _state.pendingUnobservations = [];
   }
 }

基本上，_$Counter就是对@observable注解的变量扩展getter、setter方法，getter里将变量对应的atom绑进当前执行的derivation里去；在setter里去通知atom里的_observers集合。

@action注解的方法，则会被包含进_$_CounterActionController控制里，记录action执行情况

但是atom._observers里的元素是什么时候注册的，按照mobx的理念是在reaction里引用过Observable，则自动tracking，所以接下来看Observer

Observer

flutter中作为UI的响应式组件，简单看下类图

mobx_observer.png

如上图，StatelessObserverWidget extends StatelessWidget，框架主要通过ObserverWidgetMixin和ObserverElementMixin来扩展功能

ObserverWidgetMixin

mixin ObserverWidgetMixin on Widget {
  String getName();

  ReactiveContext getContext() => mainContext;

  Reaction createReaction(
    Function() onInvalidate, {
    Function(Object, Reaction) onError,
  }) =>
      ReactionImpl(
        getContext(),
        onInvalidate,
        name: getName(),
        onError: onError,
      );
}

基本上就是扩展了 1) 创建Reaction 2) 获取mainContext 全局响应式上下文

ObserverElementMixin

mixin ObserverElementMixin on ComponentElement {
  ReactionImpl get reaction => _reaction;
  ReactionImpl _reaction;  /// 包裹的响应类

  ObserverWidgetMixin get _widget => widget as ObserverWidgetMixin;

  @override
  void mount(Element parent, dynamic newSlot) {
  /// 挂载Element 时 创建Reaction
    _reaction = _widget.createReaction(invalidate, onError: (e, _) {
      FlutterError.reportError(FlutterErrorDetails(
        library: 'flutter_mobx',
        exception: e,
        stack: e is Error ? e.stackTrace : null,
      ));
    }) as ReactionImpl;
    super.mount(parent, newSlot);
  }

  void invalidate() => markNeedsBuild();/// Observable改变时会通知到这里 标脏

  @override
  Widget build() {
    Widget built;

    reaction.track(() {  /// 每次挂载上Element树上会启动reaction的track，在这里面建立在传入的build方法里(即Observer的build属性) 获取过的Observable的关联
      built = super.build();/// 调用外部传入的build方法 建立Widget子树
    });
...
    return built;
  }

  @override
  void unmount() {
  /// 卸载Element 时 卸载Reaction
    reaction.dispose();
    super.unmount();
  }
}

接下来重点看reaction.track

/// ReactionImpl
  void track(void Function() fn) {
    _context.startBatch();  /// batch次数+1

    _isRunning = true;
    _context.trackDerivation(this, fn);  /// 开始追踪这个derivation即此时的reaction
    _isRunning = false;

    if (_isDisposed) {
      _context._clearObservables(this);   /// dispose的话 清理
    }

    if (_context._hasCaughtException(this)) {
      _reportException(_errorValue._exception);  
    }

    _context.endBatch();  /// 此处理操作完成
  }

进入_context.trackDerivation方法

/// ReactiveContext 
  T trackDerivation(Derivation d, T Function() fn) {
    final prevDerivation = _startTracking(d);  /// 让mainContext开始追踪传入的derivation
    T result;

    if (config.disableErrorBoundaries == true) {
      result = fn();
    } else {
      try {
        result = fn();  /// 这里调用Observer里传入的build函数，里面会调用Observable的getter方法，上面提到的derivation就是这个d，所以atom会注册到这个d里面去
        d._errorValue = null;
      } on Object catch (e) {
        d._errorValue = MobXCaughtException(e);
      }
    }

    _endTracking(d, prevDerivation);  /// 结束追踪
    return result;
  }

进入_startTracking(d)

/// ReactiveContext 
Derivation _startTracking(Derivation derivation) {
  final prevDerivation = _state.trackingDerivation;  
  _state.trackingDerivation = derivation;  /// 将传入的derivation赋值为当前正在追踪的，所以从这之后调用的Observable的getter方法里拿到的都是它

  _resetDerivationState(derivation); /// 重置derivation状态
  derivation._newObservables = {};/// 清空，方便之后的atom加入

  return prevDerivation;
}

进入_endTracking(d, prevDerivation)

void _endTracking(Derivation currentDerivation, Derivation prevDerivation) {
  _state.trackingDerivation = prevDerivation;
  _bindDependencies(currentDerivation);  /// 绑定derivation依赖的Observables
}

进入_bindDependencies(currentDerivation)

void _bindDependencies(Derivation derivation) {
   final staleObservables =
       derivation._observables.difference(derivation._newObservables);  /// 取出不一致的observable集合
   final newObservables =
       derivation._newObservables.difference(derivation._observables); /// 取出新的observable集合
   var lowestNewDerivationState = DerivationState.upToDate;

   // Add newly found observables
   for (final observable in newObservables) {
     observable._addObserver(derivation);   /// 关键点1 这里将此derivation添加到Observable的_observers集合里，即在这里实现了atom持有derivation

     // Computed = Observable + Derivation
     if (observable is Computed) {
       if (observable._dependenciesState.index >
           lowestNewDerivationState.index) {
         lowestNewDerivationState = observable._dependenciesState;
       }
     }
   }

   // Remove previous observables
   for (final ob in staleObservables) {
     ob._removeObserver(derivation);
   }

   if (lowestNewDerivationState != DerivationState.upToDate) {
     derivation
       .._dependenciesState = lowestNewDerivationState
       .._onBecomeStale();
   }

   derivation
     .._observables = derivation._newObservables
     .._newObservables = {}; // No need for newObservables beyond this point
 }

如上关键点1，将derivation里关联的observable拿到，并将derivation注入到每个observable里，这里为止实现了observable和derivation的双向绑定

Computed

该对象由@computed生成，充当Atom和Derivation的双重身份，即作为Atom给Observer等Reaction来观察，作为Derivation其方法里调用了其他的Atom，会监听其他的Atom的变化来触发自身的改变

看下自己定义的类

abstract class _Counter with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }

  @computed
  int get testCmp => value + 1;
}

生成的counter.g.dart

mixin _$Counter on _Counter, Store {
  Computed _$testCmpComputed;

  @override
  int get testCmp =>
      (_$testCmpComputed ??= Computed(() => super.testCmp)).value;
  ...    
 }

可以看出，实际就是生成了一个Computed来包裹我们定义的testCmp getter方法，下面看Computed的实现

class Computed extends Atom implements Derivation, ObservableValue {
factory Computed(T Function() fn, {String name, ReactiveContext context}) =>
      Computed._(context ?? mainContext, fn, name: name);

  Computed._(ReactiveContext context, this._fn, {String name})
      : super._(context, name: name ?? context.nameFor('Computed'));
      ...
}

可以看出，具备了Atom和Derivation的特性，构造函数里比Atom多持有了外部的传入的(即我们自己定义的)方法

class Computed extends Atom implements Derivation, ObservableValue {
...
  T _value;  /// 缓存的value
  
 @override
  T get value {
...
    if (!_context.isWithinBatch && _observers.isEmpty) {
    /// 如果没在action or transaction里执行 并且 被其作为atom _observers内无观察者时
      if (_context._shouldCompute(this)) {  /// 判断其是否需要重新计算新的值，因为涉及到以及缓存
        _context.startBatch();
        _value = computeValue(track: false);  /// 计算新的值 且不将自己作为derivation利用mainContext进行追踪
        _context.endBatch();
      }
    } else {
      reportObserved();/// 自己作为atom 被reaction调用时，上报自己给derivation监听
      if (_context._shouldCompute(this)) {
        if (_trackAndCompute()) {/// 开启reaction的追踪并计算新值
          _context._propagateChangeConfirmed(this);/// 标记其持有的_observers 的依赖状态为脏
        }
      }
    }
...

    return _value;
  }
  
   @override
  void _suspend() {
    _context._clearObservables(this);
    _value = null;  /// 挂起时清除_value缓存值
  }
...
}

以上代码片段重点三个方法：_context._shouldCompute、computeValue(track: false)、_trackAndCompute()

_context._shouldCompute

bool _shouldCompute(Derivation derivation) {
    switch (derivation._dependenciesState) {
      case DerivationState.upToDate:
        return false;

      case DerivationState.notTracking:
      case DerivationState.stale:
        return true;

      case DerivationState.possiblyStale:
        return untracked(() {
          for (final obs in derivation._observables) {  /// 遍历其使用过的Atom
            if (obs is Computed) {  /// 判断依赖的atom是否也是Computed，是的话需要处罚依赖去计算新的值
              // Force a computation
              if (config.disableErrorBoundaries == true) {
                obs.value;  /// 触发计算新的值
              } else {
                try {
                  obs.value;
                } on Object catch (_) {
                  return true;
                }
              }

              if (derivation._dependenciesState == DerivationState.stale) {
                return true;
              }
            }
          }

          _resetDerivationState(derivation);   
          return false;
        });
    }

    return false;
  }

computeValue(track: false)

T computeValue({bool track}) {
    _isComputing = true;
...

    T value;
    if (track) {
      value = _context.trackDerivation(this, _fn); /// 让computed作为derivation身份，调用_fn前利用ReactiveContext开启tracking模式
    } else {
...
        value = _fn();  /// 计算获取新的值
...
    }
...
    _isComputing = false;

    return value;
  }

_trackAndCompute()

bool _trackAndCompute() {
    final oldValue = _value;
    final wasSuspended = _dependenciesState == DerivationState.notTracking;

    final newValue = computeValue(track: true);  /// 计算新值通知开启ReactiveContext的追踪

    final changed = wasSuspended ||
        _context._hasCaughtException(this) ||
        !_isEqual(oldValue, newValue);

    if (changed) {
      _value = newValue;  /// 赋新值
    }

    return changed;
  }

总结

优点：

observer的组件真正实现按需更新，只有监听的数据发生变化，它才会re-render
具备Computer计算属性机制，无引用时会自动回收
使用注解省去了notify等模板代码，简洁
mobx耦合性更低

缺点：

store过多导致无法统一数据源，管理是个问题
没有时间回溯能力，因为数据只有一份引用
缺乏中间件机制有效支持

Flutter状态管理之路（一）

2022-03-28T02:13:30.000Z

博客地址：https://www.jianshu.com/p/10a1a16dfff7

背景

原生提供了StatefulWidget这个有状态组件来管理状态，对于多组件的状态交互可以选择由父组件进行统一管理分发，但是当业务一旦复杂，组件树的分支足够多，会出现状态下沉过深入，状态传递复杂的问题。

简单情况是这样的：

随着功能的增加，你的应用程序将会有几十个甚至上百个状态。这个时候你的应用应该会是这样：

状态管理背景2.png

上述实际就是多个页面需要共享状态和传递信息场景下出现的，直接的做法是：

通过父widget来分发通知，有嵌套层级深的问题，父层级的setState导致不必要build问题
通过回调传递，同样存在传递深的问题，回调也会出现漏调用的问题

面临的问题

如何获取数据源
如何更新数据源
如何通知组件数据源更新
跨组件数据源如何共享

数据流概念

状态管理里会出现基于单向数据流的情况，这里先介绍下数据流的概念

单向数据流

单向数据流.png

state：驱动应用的数据源。
view：以声明方式将 state 映射到视图。
actions：响应在 view 上的用户输入导致的状态变化

单向数据流的状态管理：通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护

特点：
（1）所有状态的改变可记录、可跟踪，源头易追溯;
（2）所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性;
（3）一旦数据变化，就去更新页面(data->页面)，但是没有(页面->data);
（4）如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中

双向数据流

双向数据流.png

双向数据绑定，带来双向数据流，数据（state）和视图（View）之间的双向绑定。

ng 里的 ng-model 和 vue 里的 v-model，以及Android的DataBinding

说到底就是（value 的单向绑定 + onChange 事件侦听）的一个语法糖

特点：
（1）无论数据改变，或是用户操作，都能带来互相的变动，自动更新。适用于项目细节，如：UI控件中(通常是类表单操作)。
（2）状态的改变不可控

解决方案

StatefulWidget

官方自带有状态组件，其组件里的各种状态可以由自身管理，也可由父组件管理，哪个管理合适，一般遵循以下原则：

如果状态是用户数据，如复选框的选中状态、滑块的位置，则该状态最好由父Widget管理。
如果状态是有关界面外观效果的，例如颜色、动画，那么状态最好由Widget本身来管理。
如果某一个状态是不同Widget共享的则最好由它们共同的父Widget管理。

一般来说，在Widget内部管理状态封装性会好一些，而在父Widget中管理会比较灵活，如果不知道是不是该由widget自身管理，则优先设计为由父widget管理并将其设计为StatelessWidget

问题：

功能单一，复杂多页面情况下，状态下沉过于深入，状态传递复杂，rebuild的范围过大等

InherityWidget

功能型组件，提供了一种数据在widget树中从上到下传递、共享的机制

比如在根Widget通过一个InherityWidget共享了一个状态，那么便可以在任意子widget中获取它，Theme,Navigator等都是通过这种机制来共享给整个应用的，它省去了逐级传递的麻烦

使用

用于存储共享数据的父Widget，该widget继承InheritedWidget

class FatherWidget extends InheritedWidget {
  final int data;

  FatherWidget({@required this.data, Widget child}) : super(child: child);

  //子树通过该方法获取共享数据
  static FatherWidget of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(FatherWidget);
  }

  //该回调决定当data发生变化时，是否通知子树中依赖data的widget
  @override
  bool updateShouldNotify(FatherWidget oldWidget) {
    return oldWidget.data != data;
  }
}

子widget，获取状态和处理依赖发生变化时的响应

class ChildWidget extends StatefulWidget {
  @override
  _ChildWidgetState createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State {
  @override
  Widget build(BuildContext context) {
    return new Text(FatherWidget.of(context).data.toString());
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    //父或祖先widget中的InheritedWidget改变（updateShouldNotify返回true）时会被调用
    //如果build中没有依赖InheritedWidget,则此回调不会被调用
    print("didChangeDependencies = " +
        FatherWidget.of(context).data.toString());
  }
}

整合

class ContainerWidget extends StatefulWidget {
  @override
  _ContainerWidgetState createState() => _ContainerWidgetState();
}

class _ContainerWidgetState extends State {
  int _data = 0;
  
  void _incrementCounter() {
    setState(() {               
      _data++;                  /// 改变状态
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return FatherWidget(
      data: widget.data,
      child: ChildWidget(),
    );
  }

}

图示

如何实现子树获取InheritedWidget

InheritedWidget机制1.png

InheritedWidget和用of获取过它的子Widget如何建立联系的

InheritedWidget机制2.png

关键点

“didChangeDependencies”：

State里的生命周期函数之一，表示依赖发生变化时由Framework调用通知，这里的依赖指的是子widget是否使用了InherityWidget的数据

另外，此回调紧跟initState执行，这里可以直接.context获取来使用

源码

如何实现子树直接获取InheritedWidget

新建build InheritedWidget时，对应的Element会调用如下_updateInheritance方法，从父Element复制 _inheritedWidgets并将此InheritedElement注册进 _inheritedWidgets里

class InheritedElement extends ProxyElement {
final Map _dependents = HashMap();
...
  @override
  void _updateInheritance() {
  ...
    final Map incomingWidgets = _parent?._inheritedWidgets;
    if (incomingWidgets != null)
      _inheritedWidgets = HashMap.from(incomingWidgets);
    else
      _inheritedWidgets = HashMap();
    _inheritedWidgets[widget.runtimeType] = this;
  }
  ...
}

获取过程，如下

/// 调用of方法
static ThemeData of(BuildContext context, { bool shadowThemeOnly = false }) {
    final _InheritedTheme inheritedTheme = context.inheritFromWidgetOfExactType(_InheritedTheme);
   ...
  }
  
///  Element class
 @override
  InheritedWidget inheritFromWidgetOfExactType(Type targetType, { Object aspect }) {
  ...
    final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[targetType];   /// 根据类型 取出InheritedElement
    if (ancestor != null) {
      assert(ancestor is InheritedElement);
      return inheritFromElement(ancestor, aspect: aspect);  /// 此处建立子Element和InheritedElement的关系并返回InheritedWidget
    }
    _hadUnsatisfiedDependencies = true;
    return null;
  }
  
  @override
  InheritedWidget inheritFromElement(InheritedElement ancestor, { Object aspect }) {
...
    _dependencies ??= HashSet();
    _dependencies.add(ancestor);
    ancestor.updateDependencies(this, aspect);
    return ancestor.widget;
  }

注意：还有个方法是只取InheritedElement而不注册依赖关系的

/// Element class
@override
  InheritedElement ancestorInheritedElementForWidgetOfExactType(Type targetType) {
...
    final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[targetType];
    return ancestor;
  }

总结

优点：

自动订阅
可跨组件获取状态

缺点：

每次促使inheritedWidget build重建事实上都会触发所有子树的build，所以需要封装一个StatefulWidget来配合实现缓存加载
没有有效分离视图逻辑和业务逻辑。
无法定向通知/指向性通知。事实上依赖InheriteWidget的子Widget，在调用State的didChangeDependencies前，在Element这一级会调用markNeedsBuild，所以都会rebuild一下

参考

单向数据流和双向数据流

Android轻量级网页风格分页器

2019-05-15T09:17:30.000Z

Android轻量级网页风格分页器

轻量级仿网页风格分页器，和RecycleView封装一起配合使用，也可单独使用，喜欢就star、fork下吧～谢谢

功能介绍

支持延迟加载分页
支持单独分页器组件使用；同时封装了RecycleView，可以配合使用
支持加载状态改变提示
支持自定义数字指示器数量、选中和未选中等样式

效果图

pic1.png

pic2.png

Screenshots

pagination.gif

如何引入

Gradle引入

step 1

Add the JitPack repository to your build file

allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}

Step 2

Add the dependency

1
2
3

dependencies {
         implementation 'com.github.itlwy:PaginationExample:0.0.20'
}

简单使用

组合RecycleView使用

此时使用的是PaginationRecycleView类

activity_main.xml

...
<com.lwy.paginationlib.PaginationRecycleView
        android:id="@+id/pagination_rcv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="8dp"
        app:number_tip_count="5"
        app:rect_size="30dp"
        app:selected_color="@color/indicator_rect_selected"
        app:text_size="14sp"
        app:unselected_color="@color/indicator_rect_unselected"
        />
...

MainActivity.java

 ...
  @Override
    protected void onCreate(Bundle savedInstanceState) {
mPaginationRcv = findViewById(R.id.pagination_rcv);
        mAdapter = new CustomAdapter(this, 99);
        mPaginationRcv.setAdapter(mAdapter);
//        mPaginationRcv.setPerPageCountChoices(perPageCountChoices);
        GridLayoutManager layoutManager = new GridLayoutManager(this, 3);
        mPaginationRcv.setLayoutManager(layoutManager);
        mPaginationRcv.setListener(new PaginationRecycleView.Listener() {
            @Override
            public void loadMore(int currentPagePosition, int nextPagePosition, int perPageCount, int dataTotalCount) {
         // nextPagePosition为将要加载的页码，即需要加载数据的页
         // perPageCount 每页展示的数量
               //TODO : 此处进行异步数据加载
               //TODO : 完成加载后通知分页控件(注意此处应该是在主线程运行)，如下
                mAdapter.setDatas(nextPagePosition, data);
                mPaginationRcv.setState(PaginationRecycleView.SUCCESS);
                
            }

            @Override
            public void onPerPageCountChanged(int perPageCount) {
// "x条/每页"Spinner选中值改变时触发
            }
        });
        mAdapter.setOnItemClickListener(this);
 }
         @Override
    public void onItemClick(View view, RecyclerView.ViewHolder holder, int position) {
        JSONObject item = mAdapter.getCurrentPageItem(position);  // 此处position返回的是recycleview的位置，所以取当前页显示列表的项
        Toast.makeText(this, item.optString("name"), Toast.LENGTH_LONG).show();
    }
...

CustomAdapter

class CustomAdapter extends PaginationRecycleView.Adapter<JSONObject, ViewHolder> {


        private Context mContext;

        public CustomAdapter(Context context, int dataTotalCount) {
            super(dataTotalCount);
            mContext = context;
        }


        @Override
        public void bindViewHolder(ViewHolder viewholder, JSONObject data) {
            viewholder.setText(R.id.text, data.optString("name"));
        }

        @Override
        public ViewHolder createViewHolder(@NonNull ViewGroup parent, int viewTypea) {
            return ViewHolder.createViewHolder(mContext, parent, R.layout.item_list);
        }
    }

布局文件中的属性说明:

app:number_tip_count="5"   // 数字指示器显示的数量，默认是5
app:rect_size="30dp"// 圆角矩形的大小(正方形)
app:selected_color="@color/indicator_rect_selected"  // 选中的颜色(包含框和字体)
app:text_size="14sp"  // 字体大小
app:unselected_color="@color/indicator_rect_unselected" 未选中的颜色(包含框和字体)

单独使用

此时使用的是PaginationIndicator类，布局如下：

...
<com.lwy.paginationlib.PaginationIndicator
    android:id="@+id/indicator"
    android:layout_width="match_parent"
    app:number_tip_count="5"
    app:rect_size="30dp"
    app:selected_color="@color/indicator_rect_selected"
    app:text_size="14sp"
    app:unselected_color="@color/indicator_rect_unselected"
    android:layout_height="wrap_content">
...

说明如上述代码如下：

... 
private int[] perPageCountChoices = {10, 20, 30, 50};
... 
mIndicatorView = (PaginationIndicator) findViewById(R.id.indicator);
        mIndicatorView.setTotalCount(99);  // 设置数据源总数量即可
        mIndicatorView.setPerPageCountChoices(perPageCountChoices); // 选填
        mIndicatorView.setListener(new PaginationIndicator.OnChangedListener() {
            @Override
            public void onPageSelectedChanged(int currentPapePos, int lastPagePos, int totalPageCount, int total) {
                Toast.makeText(MainActivity.this, "选中" + currentPapePos + "页", Toast.LENGTH_LONG).show();
            }

            @Override
            public void onPerPageCountChanged(int perPageCount) {
// x条/页 选项改变时触发
            }
        });
...

相关说明已在代码里注释，详细可参考demo，谢谢

依赖

recyclerview : com.android.support:recyclerview-v7:28.0.0

github地址

源码github
如果觉得对你有所帮助，就喜欢star一下表示下支持呗，谢啦各位看官～

Android自动更新,支持增量更新

2018-09-04T12:00:30.000Z

APP自动增量更新

github：https://github.com/itlwy/AppSmartUpdate

抽取的Android自动更新库,目的是几行代码引入更新功能,含服务端代码,欢迎Star，欢迎Fork，谢谢～

功能介绍

支持全量更新apk,直接升级到最新版本
支持增量更新,只下载补丁包升级
设置仅在wifi环境下更新
支持外部注入网络框架(库默认使用okhttp)
支持前台和后台自动更新
支持强制更新
支持对外定制更新提示和更新进度界面
记忆下载
含发布功能后台服务端github (Node.js实现)

流程图

效果图与示例apk

示例1

示例2

点击下载 smart-update.apk

如何引入

Gradle引入

step 1

Add the JitPack repository to your build file

allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}

Step 2

Add the dependency

1
2
3

dependencies {
          implementation 'com.github.itlwy:AppSmartUpdate:v1.0.6'
}

更新清单文件

该清单放置在静态服务器以供App访问，主要用于判断最新的版本，及要更新的版本资源信息等(示例见仓库根目录下的resources目录或直接访问后台代码 github)，清单由服务端程序发布apk时生成，详见后台示例:github

{
  "minVersion": 100, // app最低支持的版本代码(包含),低于此数值的app将强制更新
  "minAllowPatchVersion": 100, // 最低支持的差分版本(包含),低于此数值的app将采取全量更新,否则采用差量
  "newVersion": 101, // 当前最新版本代码
  "tip": "test update",// 更新提示
  "size": 1956631,// 最新apk文件大小
  "apkURL": "https://raw.githubusercontent.com/itlwy/AppSmartUpdate/master/resources/app/smart-update.apk", // 最新apk 绝对url地址，也可用相对地址，如下方的"patchURL"字段
  "hash": "ea97c8efa490a2eaf7d10b37e63dab0e", // 最新apk文件的md5值
  "patchInfo": {  // 差分包信息
    "v100": { // v100表示-版本代码100的apk需要下载的差分包
      "patchURL": "v100/100to101.patch", //差分包地址，相对此UpdateManifest.json文件的地址,也可用绝对地址
      "tip": "101 version", // 提示
      "hash": "ea97c8efa490a2eaf7d10b37e63dab0e", // 合成后apk(即版本代码101)的文件md5值
      "size": 1114810 // 差分包大小
    }
  }
}

简单使用

1.初始化

public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        //推荐在Application中初始化
        Config config = new Config.Builder()
                .isDebug(true)
                .build(this);
        UpdateManager.getInstance().init(config);
    }
}

2.调用

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
 private Button mUpdateBtn;
    private String manifestJsonUrl = "https://raw.githubusercontent.com/itlwy/AppSmartUpdate/master/resources/UpdateManifest.json";
    private IUpdateCallback mCallback;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mUpdateBtn = (Button) findViewById(R.id.update_btn);
        mUpdateBtn.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.update_btn:
                UpdateManager.getInstance().update(this, manifestJsonUrl, null);
                break;

        }
    }
}

详细说明

注册通知回调

其他activity界面需要获知后台更新情况

public void register(IUpdateCallback callback) {...}

public void unRegister(IUpdateCallback callback) {...}

public interface IUpdateCallback {

    /**
     * 通知无新版本需要更新,运行在主线程
     */
    void noNewApp();

    /**
     * 自动更新准备开始时回调,运行在主线程，可做一些提示等
     */
    void beforeUpdate();

    /**
     * 自动更新的进度回调（分增量和全量更新）,运行在主线程
     *
     * @param percent     当前总进度百分比
     * @param totalLength 更新总大小(全量为apk大小,增量为全部补丁大小和)
     * @param patchIndex  当前更新的补丁索引(从1开始)
     * @param patchCount  需要更新的总补丁数(当为0时表示是增量更新)
     */
    void onProgress(int percent, long totalLength, int patchIndex, int patchCount);

    /**
     * 下载完成，准备更新,运行在主线程
     */
    void onCompleted();

    /**
     * 异常回调,运行在主线程
     *
     * @param error 异常信息
     */
    void onError(String error);

    /**
     * 用户取消了询问更新对话框
     */
    void onCancelUpdate();

    /**
     * 取消了更新进度对话框,压入后台自动更新,此时由通知栏通知进度
     */
    void onBackgroundTrigger();
}

网络框架注入

默认使用okhttp，也可由外部注入,只需实现如下的IHttpManager接口,然后通过new Config.Builder().httpManager(new OkhttpManager())注入即可

public interface IHttpManager {


    IResponse syncGet(@NonNull String url, @NonNull Map params) throws IOException;

    /**
     * 异步get
     *
     * @param url      get请求地址
     * @param params   get参数
     * @param callBack 回调
     */
    void asyncGet(@NonNull String url, @NonNull Map params, @NonNull Callback callBack);


    /**
     * 异步post
     *
     * @param url      post请求地址
     * @param params   post请求参数
     * @param callBack 回调
     */
    void asyncPost(@NonNull String url, @NonNull Map params, @NonNull Callback callBack);

    /**
     * 下载
     *
     * @param url      下载地址
     * @param path     文件保存路径
     * @param fileName 文件名称
     * @param callback 回调
     */
    void download(@NonNull String url, @NonNull String path, @NonNull String fileName, @NonNull FileCallback callback);
}

定制更新交互界面

每个应用的风格都可能是不一样的，因此这里也支持自定义弹出的提示框和进度框，详细见如下代码示例：

初始化config时需要将内部默认的弹框屏蔽掉

 public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
         Config config = new Config.Builder()
                .isShowInternalDialog(false)
                .build(this);
        UpdateManager.getInstance().init(config);
    }
}

自定义对话框，如下(详细代码在MainActivity.java里)：

public void registerUpdateCallbak() {
       mCallback = new IUpdateCallback() {
           @Override
           public void noNewApp() {
               Toast.makeText(MainActivity.this, "当前已是最新版本!", Toast.LENGTH_LONG).show();
           }

           @Override
           public void hasNewApp(AppUpdateModel appUpdateModel, UpdateManager updateManager, final int updateMethod) {
               AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
               mDialog = builder.setTitle("自动更新提示")
                       .setMessage(appUpdateModel.getTip())
                       .setPositiveButton("更新", new DialogInterface.OnClickListener() {
                           @Override
                           public void onClick(DialogInterface dialog, int which) {
                               UpdateManager.getInstance().startUpdate(updateMethod);
                           }
                       })
                       .setNegativeButton("取消", new DialogInterface.OnClickListener() {
                           @Override
                           public void onClick(DialogInterface dialog, int which) {

                           }
                       }).create();
               mDialog.show();
           }

           @Override
           public void beforeUpdate() {
               // 更新开始
               mProgressDialog = new ProgressDialog(MainActivity.this);
               mProgressDialog.setTitle("更新中...");
               mProgressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
               mProgressDialog.setMessage("正在玩命更新中...");
               mProgressDialog.setMax(100);
               mProgressDialog.setProgress(0);
               mProgressDialog.setOnCancelListener(new DialogInterface.OnCancelListener() {
                   @Override
                   public void onCancel(DialogInterface dialog) {
                       // 退到后台自动更新，进度由通知栏显示
                       if (UpdateManager.getInstance().isRunning()) {
                           UpdateManager.getInstance().onBackgroundTrigger();
                       }
                   }
               });
               mProgressDialog.show();
           }

           @Override
           public void onProgress(int percent, long totalLength, int patchIndex, int patchCount) {
               String tip;
               if (patchCount > 0) {
                   tip = String.format("正在下载补丁%d/%d", patchIndex, patchCount);
               } else {
                   tip = "正在下载更新中...";
               }
               mProgressDialog.setProgress(percent);
               mProgressDialog.setMessage(tip);
           }

           @Override
           public void onCompleted() {
               mProgressDialog.dismiss();
           }

           @Override
           public void onError(String error) {
               Toast.makeText(MainActivity.this, error, Toast.LENGTH_LONG).show();
               mProgressDialog.dismiss();
           }

           @Override
           public void onCancelUpdate() {

           }

           @Override
           public void onBackgroundTrigger() {
               Toast.makeText(MainActivity.this, "转为后台更新，进度由通知栏提示!", Toast.LENGTH_LONG).show();
           }
       };
       UpdateManager.getInstance().register(mCallback);
   }

差分包合成(jni)

此部分采用的差分工具为开源bsdiff，用于生成.patch补丁文件，采用jni方式封装一个.so库供java调用，详见”smartupdate”库里的main/cpp目录源码，过程比较简单，就是写个jni的方法来直接调用bsdiff库，目录结构如下：

main

-cpp    -bzip2    -CMakeLists.txt    -patchUtils.c    -patchUtils.h    -update-lib.cpp

因为bsdiff还依赖了bzip2，所以这里涉及多个源文件编译链接问题，需要在CMakeLists.txt稍作修改：

# 将当前 "./src/main/cpp" 目录下的所有源文件保存到 "NATIVE_SRC" 中，然后在 add_library 方法调用。
aux_source_directory( . NATIVE_SRC )
# 将 "./src/main/cpp/bzip2" 目录下的子目录bzip2保存到 "BZIP2_BASE" 中，然后在 add_library 方法调用。
aux_source_directory( ./bzip2 BZIP2_BASE )
# 将 BZIP2_BASE 增加到 NATIVE_SRC 中，这样目录的源文件也加入了编译列表中，当然也可以不加到 NATIVE_SRC，直接调用add_library。
list(APPEND NATIVE_SRC ${BZIP2_BASE})

add_library( # Sets the name of the library.
        update-lib
        # Sets the library as a shared library.
        SHARED
        # Provides a relative path to your source file(s).
        ${NATIVE_SRC})

差分包生成

服务端见github ，使用时将manifestJsonUrl改成部署的服务器地址即可，如下示例代码片段的注释处

public class MainActivity extends AppCompatActivity {
    private String manifestJsonUrl = "https://raw.githubusercontent.com/itlwy/AppSmartUpdate/master/resources/UpdateManifest.json";
//    private String manifestJsonUrl = "http://192.168.2.107:8000/app/UpdateManifest.json";
    ...
}

依赖

okhttp : com.squareup.okhttp3:okhttp:3.11.0
gson : com.google.code.gson:gson:2.8.0
numberprogressbar : com.daimajia.numberprogressbar:library:1.4@aar

License

   Copyright 2018 lwyLicensed under the Apache License, Version 2.0 (the "License");you may not use this file except in compliance with the License.You may obtain a copy of the License at   http://www.apache.org/licenses/LICENSE-2.0Unless required by applicable law or agreed to in writing, softwaredistributed under the License is distributed on an "AS IS" BASIS,WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions andlimitations under the License.

基于DataBinding的基础View绑定库

2018-08-24T12:00:30.000Z

github地址：https://github.com/itlwy/DBindingView

1. 写在前面

2. 缩略图

3. 如何引入
- 3.1. step1
- 3.2. step2

4. 如何使用
- 4.1. 一般控件
  - 4.1.1. 涉及到的类
  - 4.1.2. 属性
- 4.2. RecycleView
  - 4.2.1. 属性
  - 4.2.2. 代码说明

5. 参考

6. License

写在前面

一个对databinding的常用封装库,包含基础控件及recycleview等。不了解databinding的可以先阅读相关网上的资料,这里推荐
Android DataBinding介绍

缩略图

normalWidget

recycleview

如何引入

step1

Add the JitPack repository to your build file

allprojects {                        repositories {                                ...                                maven { url 'https://jitpack.io' }                        }                }

step2

Add the dependency

dependencies {                compile 'com.github.itlwy:DBindingView:v1.1.14'        }

如何使用

一般控件

如上面的动态图,目前展示了基本控件的进行一些初始化的封装,目的是将一些繁琐的初始化操作自动化掉。注意,这里用到的属性均是自定义属性,前缀请用app:

涉及到的类

类名	包名	说明
KeyValue	com.lwy.dbindingview.data	存储key(Integer)-value(String),主要用于spinner、checkbox、radiogroup等,实现数据源的key-label模式
BindingSpinner	com.lwy.dbindingview.bindingadapter.spinner	封装的双向绑定自定义Spinner
DataBindingRadioGroup	com.lwy.dbindingview.bindingadapter.radiogroup	封装的双向绑定自定义RadioGroup
DataBindingRadioButton	com.lwy.dbindingview.bindingadapter.radiogroup	封装的双向绑定自定义RadioButton
BindingCheckGroup	com.lwy.dbindingview.bindingadapter.checkbox	封装的双向绑定自定义LinearLayout,用作BindingCheckBox容器
BindingCheckBox	com.lwy.dbindingview.bindingadapter.checkbox	封装的双向绑定自定义CheckBox
BindingEditText	com.lwy.dbindingview.bindingadapter.edittext.BindingEditText	让EditText支持绑定数值类型,eg:Integer、Double…

属性

控件	自定义属性	值类型	值	说明
BindingSpinner	selectedValue	KeyValue		绑定选中的值
	spinneritems	List		spinner的适配器数据源
DataBindingRadioGroup	selectedValue	KeyValue		绑定RadioGroup选中的值
	items	List		设置该属性可动态渲染子view
	childViewFactory	DBCustomViewFactory		当设置了items属性时,可通过此属性传入继承自DataBindingRadioButton的自定义view,不设则用默认类
DataBindingRadioButton	value	KeyValue		初始化RadioButton的值
BindingCheckGroup	selectedValues	List		存储checkbox选中的值,默认用,分割
	items	List		设置该属性可动态渲染子view
	childViewFactory	DBCustomViewFactory		当设置了items属性时,可通过此属性传入继承自BindingCheckBox的自定义view,不设则用默认类
BindingCheckBox	value	KeyValue		设置值
ImageView	uri	String or ObservableField		图片的url,用的加载框架是glide
	placeholderImageRes	int	eg:R.mipmap.ic_launcher	占位图
	request_width、request_width	int		设置图片的大小,不设置默认用view的大小,2个属性必修同时设置才有效
View	clickCommand	ReplyCommand		点击事件触发的命令
	display	boolean		控制view的Visibility
BindingEdittext	textDouble、textInt、textFloat、textLong	Double、Float、Integer、Long		绑定数值类型
	regularExpression			正则表达式校验输入值

具体使用很简单,直接看demo–>com.lwy.dbindingview.base_widget.WidgeActivity

这里说明下DataBindingRadioGroup和BindingCheckGroup,

这里的app:items属性,让其根据sexList动态渲染子view(DataBindingRadioButton),也可以选择在布局里直接写子View，如：

BindingCheckGroup同理

RecycleView

属性

属性	值类型	说明
itemBinding	ItemBinding	必填,item的布局和变量的绑定关系包装类
items	List	必填,数据源
adapter	BindingRecyclerViewAdapter	选填,可继承BindingRecyclerViewAdapter自定义适配器
itemIds	BindingRecyclerViewAdapter.ItemIds	选填,不设置则默认使用position
viewHolder	BindingRecyclerViewAdapter.ViewHolderFactory	选填,可继承以实现自定义ViewHolder
onItemClick	BindingRecyclerViewAdapter.OnItemClickListener	item点击事件
layoutManager	LayoutManagers.LayoutManagerFactory	必填,布局方式,如线性:LayoutManagers.linear()

代码说明

单个布局的简单列表代码片段

1、定义viewmodel

public class ItemVM extends BaseObservable {    public final boolean checkable; // for now,it's useless    @Bindable    private int index;    @Bindable    private boolean checked;    public ItemVM(int index, boolean checkable) {        this.index = index;        this.checkable = checkable;    }    public int getIndex() {        return index;    }    public boolean isChecked() {        return checked;    }    public boolean onToggleChecked(View v) {        if (!checkable) {            return false;        }        checked = !checked;//        notifyPropertyChanged(com.lwy.dbindingview.BR.checked);        return true;    }}

2、定义Item布局文件R.layout.item

3、创建layout和viewmodel变量的绑定关系包装类

public final ItemBinding singleItem = ItemBinding.of(com.lwy.dbindingview.BR.item, R.layout.item);

4、创建数据源

public final ObservableList items = new ObservableArrayList<>();

5、设置RecycleView的属性

...  ...

复杂布局代码片段

1、定义viewmodel(同上)

2、定义Item布局文件R.layout.item(同上)

3、创建footer的viewmodel

public class FooterVM extends RcVFooterVM {    public final ReplyCommand clickCommand = new ReplyCommand(new Action0() {        @Override        public void call() {            if (!getIsFooterLoading().get()) {                switchLoading(true);                callback.execute();            }        }    });    private ReplyCommand callback;

        public final ObservableField noMoreTip = new ObservableField<>();        /*            state : 0 loading            state : 1 idle         */        public final ObservableField state = new ObservableField<>();        public FooterVM(ReplyCommand callback) {            super();            this.callback = callback;            switchLoading(false);            noMoreTip.set("暂无更多");        }        @Override        protected ReplyCommand geneOnLoadMoreCommand() {            return new ReplyCommand<>(new Action1() {                @Override                public void call(Integer integer) {                    FooterVM.this.callback.execute();    //                switchLoading(true);                }            });        }        @Override        public void switchLoading(boolean flag) {            if (flag) {                state.set(0);            } else {                state.set(1);            }            super.switchLoading(flag);        }    }4、创建footer的布局文件R.layout.default_loading                                                                                                                                                5、创建layout和viewmodel变量的绑定关系包装类    // 这里根据class类型来控制不同的item    public final ItemBinding multipleItems = ItemBinding.of(new OnItemBindClass<>()                .map(FooterVM.class, BR.footerVM, R.layout.default_loading)                .map(String.class, com.lwy.dbindingview.BR.item, R.layout.item_header_footer)                .map(ItemVM.class, com.lwy.dbindingview.BR.item, R.layout.item));6、创建数据源    public final FooterVM footerVM = new FooterVM(new ReplyCommand(new Action1() {            @Override            public void call(Integer integer) {                // 异步执行加载数据 完了需要调用 "footerVM.switchLoading(false)" 取消加载状态            }        }));    public final ObservableList items = new ObservableArrayList<>();    public final MergeObservableList headerFooterItems = new MergeObservableList<>()                .insertItem("Header")                .insertList(items)                .insertItem(footerVM);5、设置RecycleView的属性    ...        ...

参考

binding-collection-adapter

nginx折腾记

2018-07-15T02:13:30.000Z

博客地址：https://blog.csdn.net/Weiye__Lee/article/details/79700730

写在前面

　　对nginx的折腾做个汇总记录,部分内容参考出处见文章末尾.

nginx概述

nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器；同时也是一个IMAP、POP3、SMTP代理服务器；nginx可以作为一个HTTP服务器进行网站的发布处理，另外nginx可以作为反向代理进行负载均衡的实现。

正向代理

正向代理是一般意义上的代理。在如今的网络环境下，我们如果由于技术需要要去访问国外的某些网站，此时你会发现位于国外的某网站我们通过浏览器是没有办法访问的，此时大家可能都会用一个操作FQ进行访问，FQ的方式主要是找到一个可以访问国外网站的代理服务器，我们将请求发送给代理服务器，代理服务器去访问国外的网站，然后将访问到的数据传递给我们
上述这样的代理模式称为正向代理，正向代理最大的特点是客户端非常明确要访问的服务器地址；服务器只清楚请求来自哪个代理服务器，而不清楚来自哪个具体的客户端；正向代理模式屏蔽或者隐藏了真实客户端信息。

这里写图片描述

反向代理

反向代理多用于分布式部署；也就是通过部署多台服务器来解决访问并发问题。

这里写图片描述

通过上述的图解大家就可以看清楚了，多个客户端给服务器发送的请求，nginx服务器接收到之后，按照一定的规则分发给了后端的业务处理服务器进行处理了。此时，请求的来源也就是客户端是明确的，但是请求具体由哪台服务器处理的并不明确了，nginx扮演的就是一个反向代理角色
反向代理，主要用于服务器集群分布式部署的情况下，反向代理隐藏了服务器的信息。对于反向这个词，刚开始接触的时候没理解为啥叫反向,这里的抽取出来注明下：

正向代理
　　代理服务器实现对被代理服务端隐藏客户端信息,对客户端的请求进行转发处理.此时,客户端是明确知道被代理的服务端信息的,而被代理服务端是不知道客户端信息的
反向代理
　　代理服务器实现对客户端的被代理服务器信息的隐藏,对客户端的请求进行转发处理.此时,客户端是不知道被代理服务端的信息的,而被代理服务端是知道客户端信息的，注意到了吧,后半句两边整好反过来

安装

ubantu包管理器安装

使用包管理器直接安装是最快捷方便的,但是缺点也明显,想自由装对应的版本就困难了。anyway,在terminal里敲如下命令:

$ sudo apt-get install nginx

安装完成即可，在/usr/sbin/目录下是nginx命令所在目录，在/etc/nginx/目录下是nginx所有的配置文件，用于配置nginx服务器以及负载均衡等信息

查看nginx进程是否启动:
```
$ ps -ef | grep nginx
```
启动nginx服务器,直接执行nginx会按照默认的配置文件进行服务器的启动
```
$ nginx # 启动$ nginx -s stop  停止$ nginx -s quit  停止
```

ubantu源码安装

 #安装gcc g++的依赖库$ apt-get install build-essential                                     $ apt-get install libtool         # 安装pcre依赖库$ sudo apt-get install libpcre3 libpcre3-dev #安装 zlib依赖库$ sudo apt-get install zlib1g-dev # 安装 ssl依赖库$ sudo apt-get install openssl #下载nginx最新版本：参考用nginx-1.10.3/$ wget http://nginx.org/download/nginx-1.11.3.tar.gz #解压：$ tar -zxvf nginx-1.11.3.tar.gz#进入解压目录：$ cd nginx-1.11.3#配置：$ ./configure --prefix=/usr/local/nginx #编辑nginx：$ make#安装nginx：$ sudo make install#启动nginx：$ sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf注意：-c 指定配置文件的路径，不加的话，nginx会自动加载默认路径的配置文件，可以通过 -h查看帮助命令。#查看nginx进程：$ ps -ef|grep nginx#检查配置文件是否正确$ sudo /usr/local/nginx/sbin/nginx -t-----$ /usr/local/nginx/sbin/nginx -s reload # Nginx重新加载配置$ /usr/local/nginx/sbin/nginx -s stop #停止

nginx配置

nginx.conf

修改部署目录下conf子目录的nginx.conf文件（如上面源码安装的/usr/local/nginx/conf/nginx.conf）内容

main                                # 全局配置events {                            # nginx工作模式配置}http {                                # http设置    ....    server {                        # 服务器主机配置        ....        location {                    # 路由配置            ....        }        location path {            ....        }        location otherpath {            ....        }    }    server {        ....        location {            ....        }    }    upstream name {                    # 负载均衡配置        ....    }}

如上述配置文件所示，主要由6个部分组成：

main：用于进行nginx全局信息的配置
events：用于nginx工作模式的配置
http：用于进行http协议信息的一些配置
server：用于进行服务器访问信息的配置
location：用于进行访问路由的配置
upstream：用于进行负载均衡的配置

main模块

# user nobody nobody;worker_processes 2;# error_log logs/error.log# error_log logs/error.log notice# error_log logs/error.log info# pid logs/nginx.pidworker_rlimit_nofile 1024;

上述配置都是放在main全局配置模块中的配置项

user 用来指定进程运行的用户及用户组,默认为nobody
work_processes 用来指定nginx开启的子进程数量,数量通常是cpu内核的2倍,官方宣称一般开1个就可以了
error_log 定义错误日志文件的位置及输出级别[debug/info/notice/warn/error/crit]
pid 用来指定进程pid的存储文件的位置
worker_rlimit_nofile 指定一个进程可以打开的最多文件描述符数量

event 模块

event {    worker_connections 1024;    # 并发总数是 worker_processes 和 worker_connections 的乘积    # 即 max_clients = worker_processes * worker_connections    # 在设置了反向代理的情况下，max_clients = worker_processes * worker_connections / 4  为什么    # 为什么上面反向代理要除以4，应该说是一个经验值    # 根据以上条件，正常情况下的Nginx Server可以应付的最大连接数为：4 * 8000 = 32000    # worker_connections 值的设置跟物理内存大小有关    # 因为并发受IO约束，max_clients的值须小于系统可以打开的最大文件数    # 而系统可以打开的最大文件数和内存大小成正比，一般1GB内存的机器上可以打开的文件数大约是10万左右    # 我们来看看360M内存的VPS可以打开的文件句柄数是多少：    # $ cat /proc/sys/fs/file-max    # 输出 34336    # 32000 < 34336，即并发连接总数小于系统可以打开的文件句柄总数，这样就在操作系统可以承受的范围之内    # 所以，worker_connections 的值需根据 worker_processes 进程数目和系统可以打开的最大文件总数进行适当地进行设置    # 使得并发总数小于操作系统可以打开的最大文件数目    # 其实质也就是根据主机的物理CPU和内存进行配置    # 当然，理论上的并发总数可能会和实际有所偏差，因为主机还有其他的工作进程需要消耗系统资源。    # ulimit -SHn 65535    multi_accept on;    use epoll;}

worker_connections 指定单个进程最大可以接收的连接数量.注意,nginx最大连接数和worker_processes、worker_connections、能打开的文件描述符数量、系统资源等因素共同决定
multi_accept 指定nginx在收到一个新连接通知后,尽可能多的接收更多的l连接
use epoll 指定线程轮询的方法,如果是linux2.6+,使用epoll。如果是BSD如mac,请使用Kqueue

http 模块

作为web服务器，http模块是nginx最核心的一个模块，配置项也是比较多的，项目中会设置到很多的实际业务场景，需要根据硬件信息进行适当的配置，常规情况下，使用默认配置即可

server模块

srever模块配置是http模块中的一个子模块，用来定义一个虚拟访问主机，也就是一个虚拟服务器的配置信息

server {    listen        80;    server_name localhost    192.168.1.100;    root        /nginx/www;    index        index.php index.html index.html;    charset        utf-8;    access_log    logs/access.log;    error_log    logs/error.log;    ......}

核心配置信息如下：

server：一个虚拟主机的配置，一个http中可以配置多个server
server_name：指定ip地址或者域名，多个配置之间用空格分隔
root：表示整个server虚拟主机内的根目录，所有当前主机中web项目的根目录
index：用户访问web网站时的全局首页
charset：用于设置www/路径中配置的网页的默认编码格式
access_log：用于指定该虚拟主机服务器中的访问记录日志存放路径
error_log：用于指定该虚拟主机服务器中访问错误日志的存放路径

location 模块

location模块是nginx配置中出现最多的一个配置，主要用于配置路由访问信息
在路由访问信息配置中关联到负载均衡、url重写等等各项功能，所以location模块也是一个非常重要的配置模块,而其中匹配模式则是玩转转发的秘籍
匹配语法

location [ = | ~ | ~* | ^~ ] uri { ... }location @name { ... }

没错，就这么多，实际写在loacation中大概是这样的

location = / {}-----location  [指令模式] url匹配模式 {}

指令模式指用于匹配的方式，即精确匹配,前缀匹配还是正则匹配，当然这个是可选的，如果不写，则退化成正常匹配或者全匹配。url匹配模式则需要匹配的url，可以看成是web开发中的路由

匹配模式

精确匹配
= 指令用于精确字符匹配(模式),不能使用正则,区分大小写,为了直观的观察匹配命中的location，使用rewrite指令，用于转发。目前只要理解命中了就重定向到rewrite后面的url即可
```
location = /demo {        rewrite ^ http://google.com;}
```
上述的配置表示只有访问 http://host:port/demo 这样的url，才能跳转到google的页面。除此之外的任何地址都无法访问，那怕是访问http://host:port/demo/ 这个地址也不行。因为url匹配模式是/demo
前缀匹配
^~指令用于字符前缀匹配，和=精确匹配一样，也是用于字符确定的匹配，不能使用正则且区分大小写。和=不同的在于，^~指令下，访问的url无需url匹配模式一模一样，只需要其开头前缀和url匹配模式一样即可
```
location ^~ /demo {        rewrite ^ http://google.com;}
```
对于该模式（/demo）,访问下列的地址都能匹配:
只需要以/demo为前缀开头的url都能匹配。与该模式后的是否大小写无关。
^~不支持正则。模式/demo$中的$并不代表字符模式结束，而是一个是实实在在的$，只有访问/demo$开头的url才能匹配，http://host:port/demo 则不再匹配。前缀匹配通常用于匹配文件夹，如配置静态文件。
正则匹配
众所周知，nginx的url功能强大，配置灵活。字符匹配中，支持正则和不支持正则完全是两个境界。前面的两种方式都不能使用正则，未免让人觉得nginx有点虚夸。
实际上，nginx支持正则匹配。所使用的指令是~和~*，前者表示使用正则，区分大小写，后者表示使用正则，不区分大小写。与前缀匹配一样，正则匹配也是只需匹配以url模式开头的即可。
```
location ~ /[0-9]emo {        rewrite ^ http://google.com;}
```
对于上述的模式，可以匹配的url如下：
使用~*则不区分大小写
```
location ~ /[0-9]EmO {        rewrite ^ http://google.com;}
```
下面的都能匹配
正常匹配
正常匹配的指令为空，即没有指定匹配指令的即为正常匹配。其形式类似 /XXX/YYY.ZZZ正常匹配中的url匹配模式可以使用正则，不区分大小写。
```
location /demo {        rewrite ^ http://google.com;}
```
上述模式指的是匹配/demo的url，下面的都能匹配
正常匹配和前缀匹配的差别在于优先级。前缀的优先级高于正常匹配
全匹配
全匹配与正常匹配一样，没有匹配指令，匹配的url模式仅一个斜杠/
```
location / {        rewrite ^ http://google.com;}
```
全匹配也可以配合精确匹配和正则匹配一些指令，只不过这样的设定意义不大。通过都会有一个默认的location，这个就是全匹配

命名匹配

命名匹配指的是使用@绑定一个模式，类似变量替换的用法。

error_page 404 = @not_foundlocation @not_found {          rewrite http://google.com;}

上述的作用是如果访问没有匹配的url会触发404指令，然后就匹配到@not_found 这个 location上。

反向代理配置示例:
主要修改的节点为http节点,

http {    omitted...    upstream backend_6001{             #ip_hash;                                                                                       server 192.168.1.207:6001;             server 192.168.1.207:6002;    }server {    listen       5000;    server_name  lwy.com;

}}

匹配优先级

nginx的匹配优先级遵循一个大原则和两个小细节。
大原则是关于匹配模式的优先级：

精确匹配  >  前缀匹配  >  正则匹配  > 正常匹配  > 全匹配

小细节则是同一优先级中：

细节一：正则匹配成功之后停止匹配，非正则匹配成功还会接着匹配。
细节二：在所有匹配成功的url中，选取匹配度最大的url字符地址。

反向代理配置

location / {        #设置主机头和客户端真实地址，以便服务器获取客户端真实IP             proxy_set_header Host $host;             proxy_set_header X-Real-IP $remote_addr;        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;              #禁用缓存             proxy_buffering off;             #设置反向代理的地址 可设为下面介绍的upstream模块             proxy_pass http://192.168.1.1;             }

proxy_redirect

proxy_redirect指定修改被代理服务器返回的响应头中的location头域

location / {            proxy_pass http://192.168.1.207:6001;            proxy_redirect http://192.168.1.207:([1-9][0-9]*)/   http://lwy.cn:5000/lwy$1/;                                                                       }

上面proxy_redirect配置将被代理服务器的重定向端口全部映射为/lwy$1/路由上了。然后,可以根据浏览器重定向进来的特殊路由url进行相应的配置,即配置多个location

location ~ /conwin([1-9][0-9]*)/ {                 remainder omitted...        }

在指令中可以使用一些变量：

proxy_redirect http://localhost:8000/ http://$host:$server_port/;

proxy_pass

在nginx中配置proxy_pass代理转发时，如果在proxy_pass后面的url加/，表示绝对根路径；如果没有/，表示相对路径，把匹配的路径部分也给代理走。

假设下面四种情况分别用 http://192.168.1.1/proxy/test.html 进行访问。

第一种：
location proxy {
proxy_pass http://127.0.0.1/;
}
代理到URL：http://127.0.0.1/test.html

第二种（相对于第一种，最后少一个 / ）
location proxy {
proxy_pass http://127.0.0.1;
}
代理到URL：http://127.0.0.1/proxy/test.html

第三种：
location proxy {
proxy_pass http://127.0.0.1/aaa/;
}
代理到URL：http://127.0.0.1/aaa/test.html

第四种（相对于第三种，最后少一个 / ）
location proxy {
proxy_pass http://127.0.0.1/aaa;
}
代理到URL：http://127.0.0.1/aaatest.html

upstream模块

upstream模块主要负责负载均衡的配置，通过默认的轮询调度方式来分发请求到后端服务器

upstream backend {    ip_hash;    server 192.168.1.100:8000;    server 192.168.1.100:8001 down;    server 192.168.1.100:8002 max_fails=3;    server 192.168.1.100:8003 fail_timeout=20s;    server 192.168.1.100:8004 max_fails=3 fail_timeout=20s;} location / {             #反向代理的地址             proxy_pass http://backend;             }

核心配置信息如下

ip_hash：指定请求调度算法，默认是weight权重轮询调度，可以指定
server host:port：分发服务器的列表配置
– down：表示该主机暂停服务
– max_fails：表示失败最大次数，超过失败最大次数暂停服务
– fail_timeout：表示如果请求受理失败，暂停指定的时间之后重新发起请求

其中,nginx支持的负载均衡调度算法方式如下:

weight轮询（默认）：接收到的请求按照顺序逐一分配到不同的后端服务器，即使在使用过程中，某一台后端服务器宕机，nginx会自动将该服务器剔除出队列，请求受理情况不会受到任何影响。这种方式下，可以给不同的后端服务器设置一个权重值（weight），用于调整不同的服务器上请求的分配率；权重数据越大，被分配到请求的几率越大；该权重值，主要是针对实际工作环境中不同的后端服务器硬件配置进行调整的。
ip_hash：每个请求按照发起客户端的ip的hash结果进行匹配，这样的算法下一个固定ip地址的客户端总会访问到同一个后端服务器，这也在一定程度上解决了集群部署环境下session共享的问题。
fair：智能调整调度算法，动态的根据后端服务器的请求处理到响应的时间进行均衡分配，响应时间短处理效率高的服务器分配到请求的概率高，响应时间长处理效率低的服务器分配到的请求少；结合了前两者的优点的一种调度算法。但是需要注意的是nginx默认不支持fair算法，如果要使用这种调度算法，请安装upstream_fair模块
url_hash：按照访问的url的hash结果分配请求，每个请求的url会指向后端固定的某个服务器，可以在nginx作为静态服务器的情况下提高缓存效率。同样要注意nginx默认不支持这种调度算法，要使用的话需要安装nginx的hash软件包

遇到的问题

遇到301、302这种重定向的http状态码,浏览器被重定向到其他服务器地址或端口(如内网)。

　　这种问题通常出现在被代理的服务端不知道代理服务器的存在，直接返回302重定向到另外一个服务器或端口(server2),nginx如果不做处理则浏览器会直接取访问server2，这样便绕过了nginx,如果是内网地址,呵呵,就访问失败了.这时候可以使用location匹配下的proxy_redirect来拦截节点被代理服务器的重定向信息

本文由Weiye Lee原创，转载请注明来源,谢谢:
http://blog.csdn.net/Weiye__Lee/article/details/79472815

参考

Nginx安装及配置详解:https://www.cnblogs.com/zhouxinfei/p/7862285.html

Nginx高级应用之Location Url 配置:https://www.linuxidc.com/Linux/2017-03/141910.htm

Android离线身份证等图片文字识别

2018-07-10T02:13:30.000Z

博客：https://blog.csdn.net/Weiye__Lee/article/details/80952724

个人主页：http://liweiye.top

写在前面

　　最近因为业务需要，要在Android端实现个扫描身份证识别其中文字的功能，网上溜达了一圈。

　　Android比较推荐的是:

　　GitHub：https://github.com/rmtheis/tess-two

　当然也有第三方提供的解决方案,比如百度提供的文字识别：http://ai.baidu.com/tech/ocr。
　　咱做技术的还是先折腾折腾，特此记录下过程，也希望能帮助到同样折腾的人

效果图(名字打了马赛克)

拍照](https://github.com/itlwy/TextOcrExample/blob/master/pic/recResult.png?raw=true) ![识别

过程

先理下要实现这样的效果，我们需要做些什么

在Android端需要自定义个含取景框的自定义相机
对拍摄的图片进行灰度化、二值化处理
引入tess-two 库,调用相应api将步骤2处理后的图片传入处理

1、自定义相机

　　这一步主要是写个布局，使用Camera和SurfaceView做个自定义相机，具体实现可看demo代码,里面有个取景框是专门用来截取出我们关心的区域的

2、图片处理

　　机器视觉分为三个阶段 : 图像转化、图像分析、图像理解。若要将一幅图像转化为方便分析理解的格式，有一个很关键的过程就是“图像二值化”。一幅图像能否分析理解的准确很大程度上来说取决于二值化(非黑即白)效果的好坏。而在二值化之前，有一个重要步骤，那便是“图像灰度化”

　　所以，先将图片灰度化，这里有个公式：f(x) = R0.3+G0.51+B*0.11，实际需要做的就是将图片的每个像素(这里假定android里用ARGB表示一个像素点)的red、green、blue取出并代入此公式算出每个点的灰度值，这样便实现了灰度化

　　

　　再来看看二值化，二值化的原理就是取一个阈值，然后将每个像素点的灰度值和这个阈值进行比较，如果大于阈值则定为白色，反之为黑色(这里假定要识别的图像是白底黑字)，如此一来便实现了二值化。可以看到，最重要的是这个阈值，该怎么取值才合理，最简单的阈值取定便是取整幅图画的均值了：

　　
　　

　　效果看上去还不错，实际上用到身份证识别或文字识别上，受阴影等因素的影响，效果就差很多了，因此，优化算法还是很有必要的，网上流传着多种二值化算阈值的算法，这里目前尝试了以下几种：　　　

阈值迭代算法(效果不理想，字体的笔画容易站在一起，阴影影响大)
　　https://www.cnblogs.com/gxclmx/p/6916515.html　　
基于Otsu阈值二值化(跟上面的迭代算法效果差不多，阴影影响大)
　　https://blog.csdn.net/mao0514/article/details/47041597　　
矩阵二值化算法
　　https://blog.csdn.net/lj501886285/article/details/52425157
　　这个算法的阈值是自适应的，对于每个像素点都构造了一个小矩阵来衡量阈值的取值，也就是说每个点都跟它周围的细节相关，这样比起用单一的整体阈值去衡量每个点，显然更具说服力。而事实证明，这个算法应用后的二值化测试效果确实杠杠的　　
3、tess-two api识别
　　这一步就比较简单了，直接上步骤：

引入依赖

1
2
3

dependencies {
    implementation 'com.rmtheis:tess-two:9.0.0'
}

调用api识别

TessBaseAPI tessBaseAPI = new TessBaseAPI();
tessBaseAPI.init(DATAPATH, "chi_sim");//传入训练文件目录和训练文件
tessBaseAPI.setImage(bitmap);
String text = tessBaseAPI.getUTF8Text();

　　就这样短短4行代码便可识别出文字了，这里有个坑要注意，看下tessBaseAPI.init这个方法源码:

1
2
3

public boolean init(String datapath, String language) {
        return init(datapath, language, OEM_DEFAULT);
    }

可以看到又调用了另一个init方法

public boolean init(String datapath, String language, @OcrEngineMode int ocrEngineMode) {
       if (datapath == null)
           throw new IllegalArgumentException("Data path must not be null!");
       if (!datapath.endsWith(File.separator))
           datapath += File.separator;

       File datapathFile = new File(datapath);
       if (!datapathFile.exists())
           throw new IllegalArgumentException("Data path does not exist!");

       File tessdata = new File(datapath + "tessdata");
       if (!tessdata.exists() || !tessdata.isDirectory())
           throw new IllegalArgumentException("Data path must contain subfolder tessdata!");

       //noinspection deprecation
       if (ocrEngineMode != OEM_CUBE_ONLY) {
           for (String languageCode : language.split("\\+")) {
               if (!languageCode.startsWith("~")) {
                   File datafile = new File(tessdata + File.separator + 
                           languageCode + ".traineddata");
                   if (!datafile.exists())
                       throw new IllegalArgumentException("Data file not found at " + datafile);

                   // Catch some common problematic initialization cases.
                   if (languageCode.equals("ara") || (languageCode.equals("hin") &&
                           ocrEngineMode == OEM_DEFAULT)) {
                       boolean sampleCubeFileExists = new File(tessdata +
                               File.separator + languageCode + ".cube.params").exists();
                       if (!sampleCubeFileExists) {
                           throw new IllegalArgumentException("Cube data files not found." +
                                   " See https://github.com/rmtheis/tess-two/issues/239");
                       }
                   }
               }
           }
       }

       boolean success = nativeInitOem(mNativeData, datapath, language, ocrEngineMode);

       if (success) {
           mRecycled = false;
       }

       return success;
   }

这里注意下面这一段代码，api要求DATAPATH目录下，必须有tessdata这样一个子目录，也就是说，训练文件必须放在这个子目录下

1
2
3

File tessdata = new File(datapath + "tessdata");
        if (!tessdata.exists() || !tessdata.isDirectory())
            throw new IllegalArgumentException("Data path must contain subfolder tessdata!");

　　一个文字识别的demo就此完成了，稍后会传上demo到github，demo做的是身份证，所以对图片的截取处理是针对身份证的，当然也可应用到其他营业执照啥的了。
　　最后，在查资料的时候发现一个身份证识别demo：IdCardReconition，处理效果挺快，效果也蛮不错的，但是查看代码后发现处理都是在so文件里并且处理貌似只针对身份证，也不清楚是怎么做的，有了解的望告知

附上github：TextOcrExample

待完善

图像处理的算法是有待完善的，特别是速度上
tess-two api识别的速度上，也可考虑针对特定场景定制训练文件，这样速度上也会有所提升

PS：对于速度上的要求，个人觉得可以在网络畅通的情况下，采用上传图片到服务器去处理，然后再反馈回给客户端。在服务端可做的事就多了，单台服务器计算资源就好过手机太多，况且我们还可以做分布式并发处理呢？速度相信是杠杠的，像百度这些第三方一般也是提供服务上传图片来识别的，速度那是相当快。最后感谢阅读，如果有什么不对的望大神指正，喜欢就star一下呗，谢谢！

参考

License

Copyright 2018 lwyLicensed under the Apache License, Version 2.0 (the "License");you may not use this file except in compliance with the License.You may obtain a copy of the License at   http://www.apache.org/licenses/LICENSE-2.0Unless required by applicable law or agreed to in writing, softwaredistributed under the License is distributed on an "AS IS" BASIS,WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions andlimitations under the License.

仿QQ右上角的弹出菜单框

2018-03-07T08:30:30.000Z

Screenshots

Alt text

How to Use

step 1

Add the JitPack repository to your build file

allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}

Step 2

Add the dependency

1
2
3

dependencies {
        compile 'com.github.itlwy:LPopupMenu:v1.1'
}

step 3

　　使用方法见如下：

  List menuItems = new ArrayList<>();
                menuItems.add(new MenuItem(R.mipmap.multichat, "发起多人聊天", 100));
                menuItems.add(new MenuItem(R.mipmap.addmember, "加好友", 3));
                menuItems.add(new MenuItem(R.mipmap.qr_scan, "扫一扫"));
                menuItems.add(new MenuItem(R.mipmap.facetoface, "面对面快传"));
                menuItems.add(new MenuItem(R.mipmap.pay, "付款"));
                if (mRightTopMenu == null) {
                    mRightTopMenu = new RightTopMenu.Builder(MainActivity.this)
//                            .windowHeight(480)     //当菜单数量大于3个时，为wrap_content,反之取默认高度320
//                        .windowWidth(320)      //默认宽度wrap_content
                            .dimBackground(true)           //背景变暗，默认为true
                            .needAnimationStyle(true)   //显示动画，默认为true
                            .animationStyle(R.style.RTM_ANIM_STYLE)  //默认为R.style.RTM_ANIM_STYLE
                            .menuItems(menuItems)
                            .onMenuItemClickListener(new RightTopMenu.OnMenuItemClickListener() {
                                @Override
                                public void onMenuItemClick(int position) {
                                    Toast.makeText(MainActivity.this, "点击菜单:" + position, Toast.LENGTH_SHORT).show();
                                }
                            }).build();
                }
                mRightTopMenu.showAsDropDown(mMenuIV, 0, 0);

　　觉得合适就拿去用吧~

Otherthing

　　项目依赖了

1 2	com.android.support:recyclerview-v7:26.1.0 com.android.support:appcompat-v7:26.1.0

当你的项目里已有这些依赖时，按照gradle的编译特性，会取最新版本的。所以，可能会报错咯，解决办法可参考gradle提供的依赖冲突解决方案.下面是给出示例解决方案(build.gradle文件)：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "26.0.2"

  ......
  
//configurations.all {
//    resolutionStrategy {
//        force 'com.android.support:appcompat-v7:23.2.1'  // 这里可以采用设置强制版本
//    }
//}
dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:23.2.1'
    compile "com.android.support:recyclerview-v7:23.4.0"
    compile 'com.android.support:design:23.2.1'
    compile ("com.github.itlwy:LPopupMenu:v1.0"){
        exclude group: 'com.android.support',module: 'appcompat-v7'
        exclude group: 'com.android.support',module: 'recyclerview-v7'
    }
    testCompile 'junit:junit:4.12'
}

By the way

　　关于数量的提示角标，是用shape画的圆(要改颜色的话方便~)。但是当大于99时，直接撑大显示不好看，改成和qq那边的效果类似（两边半圆，中间矩形）；由于水平有限，暂时没找到代码的简单实现，直接用图片代替了，这方面有待改进（查了下网上的实现，大部分是用.9图代替的，但是要动态改变圈的颜色效果什么的就不好弄了）

本文由Weiye Lee原创，转载请注明来源：http://blog.csdn.net/Weiye__Lee/article/details/79472815

linux用ssh做反向代理

2018-02-20T05:31:57.000Z

　　在部署服务器的时候，经常会是这样一种情况:生产的服务器部署在一个安全的局域网环境中，不对外暴露端口的话，无法从外网访问到它。这时候，我们可以通过一台外网可访问的服务器做跳转，间接访问到服务器A。

ssh反向代理示意图

　　如上图，客户端C无法直接访问到服务器A，那么我们先在局域网内访问服务器A,在服务器A上建立与服务器B的反向代理通道。此时，客户端C可通过访问服务器B，再经由服务器B这个代理，访问到服务器

step1.设置免密码登录

在内网服务器A上生产公钥和私钥，并把公钥内容拷到服务器B的~/.ssh/authorized_keys里

$ ssh-keygen -t rsa
...(一直按Enter，最后在~/.ssh/下生成密钥)
$ ssh-copy-id -i ~/.ssh/id_rsa.pub user@hostB
把本机的公钥追到hostB的 ~/.ssh/authorized_keys 里

于是服务器 A上的用户就可以用ssh以用户B的身份无需密码登陆到服务器 B上了。如:

1	ssh -l userB serverB。

step2.用ssh建立反向链接

在内网服务器A上执行

1	$ ssh -NfR 1234:localhost:22 userB@123.123.123.123 -p 22

　　上面命令中,-N表示不执行远程命令,-f表示后台运行,-R则针对后面的绑定参数进行端口映射。整体意思是：将本机（服务器A）的22与远程服务器的1234端口进行绑定，相当于远程端口映射(Remote Port Forwarding)。
　　这时在服务器B上sshd会listen本地1234端口

$ ss -ant

State      Recv-Q Send-Q        Local Address:Port          Peer Address:Port
LISTEN     0      128               127.0.0.1:1234                     *:*

客户端C通过如下步骤可访问到服务器A:

1.通过ssh连接到服务器B

1	$ ssh userB@服务器B地址

2.通过刚刚建立的反向通道，连接到服务器A

1	$ ssh localhost -p 1234

　　搞定完上面的步骤，已经可以从外网连接到服务器A了，但是这种方式还存在问题，服务器A->服务器B的链路是不稳定的，随时可能会断开，这时候可以用autossh这个命令，它可以帮助监听链路的连接情况，断开时可帮我们自动重连。

1	autossh -M 5678 -NR 1234:localhost:22 userB@123.123.123.123 -p 22

　　比之前的命令添加的一个-M 5678参数，负责通过5678端口监视连接状态，连接有问题时就会自动重连，去掉了一个-f参数，因为autossh本身就会在background运行
　　最后，还有一种情况就是机器重启了，这时候需要将该命令加入到自启动命令列表里。有多种方式，这里采用在/etc/rc.local文件里追加内容，将以下内容加入到文件里即可

1	/usr/bin/sudo -u conwin /usr/bin/autossh -M 5678 -NR 1234:localhost:22 userB@123.123.123.123 -p 22

ubantu源码安装postgresql

2018-02-18T07:30:30.000Z

最近学习postgresql数据库,直接用服务器的包管理器，版本选择处理起来很麻烦，所以查了下资料，选择用源码安装，这里做个笔记记录下(本文基于Ubantu 14.04.5)，方便自己和他人，由于本人很菜，有不对的地方还往大神批评指正，谢谢!
ps：由于刚开始写博客,目前是对以前学习的只是进行一个总结性的记录，可能会涉及到一些和大神作品雷同的内容,如有,请告诉我，谢谢！

step1-安装前准备

安装依赖包

1
2
3

sudo apt-get install libreadline6-dev
sudo apt-get install zlib1g-dev
sudo apt-get install libssl-dev

下载源码

源码下载链接可以到官网上找就行了,
eg:https://www.postgresql.org/ftp/source/
下载后解压，安装就行了，如下:

1
2
3

sudo tar xf postgresql-9.5.2.tar.gz
cd postgresql-9.5.2
./configure --prefix=/usr/local/pgsql --with-pgport=5432 --with-openssl

step2-开始安装和配置

编译安装

1	make && sudo make install

安装contrib

1
2
3

cd contrib
make
sudo make install

添加用户和组

建立一个超级用户用于管理数据库

1.添加用户

1	sudo adduser postgres

2.建立数据库数据目录并授权

1
2
3

sudo mkdir /usr/local/pgsql/data
sudo chown -R postgres:postgres /usr/local/pgsql/data
su postgres

3.初始化数据库并启动数据库

1 2	/usr/local/pgsql/bin/initdb -D /usr/local/pgsql/data/ /usr/local/pgsql/bin/postgres -D /usr/local/pgsql/data >logfile 2>&1 &

4.将启动脚本加入到系统服务

1 2	sudo cp /usr/local/src/postgresql-9.5.2/contrib/start-scripts/linux /etc/init.d/postgresql sudo chmod +x /etc/init.d/postgresql

5.设置为开机启动
sudo update-rc.d postgresql defaults

经过以上步骤，数据库已经安装配置完成,可以通过命令查看其运行状态