Fork me on GitHub

window.print 自定义页眉页脚 

<style>
  .header,
  .header-space,
  .footer,
  .footer-space {
    height: 100px;
  }
  .header {
    position: fixed;
    top: 0;
  }
  .footer {
    position: fixed;
    bottom: 0;
  }
</style>

<table>
  <thead>
    <tr>
      <td>
        <div class="header-space">&nbsp;</div>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="content">...</div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <div class="footer-space">&nbsp;</div>
      </td>
    </tr>
  </tfoot>
</table>
<div class="header">...</div>
<div class="footer">...</div>
more >>

展开全文 >>

flutter抓包、查看网络请求

由于 flutter 的 http 请求代理不走系统，所以只能在代码中设置代理 ip, 使我们的抓包工具能获取到 http 的请求

flutter 使用 Charles 代理爬虫

class MyHttpOverrides extends HttpOverrides {
  bool _badCertificateCallback(X509Certificate cert, String host, int port) {
    return true;
  }

  @override
  HttpClient createHttpClient(SecurityContext? context) {
    return super.createHttpClient(context)
      ..badCertificateCallback = _badCertificateCallback
      ..findProxy = (uri) {
        return 'PROXY 192.168.1.193:8888;DIRECT;';//192.168.1.193:8888是代理ip端口

     }
    ;
  }
}
more >>

展开全文 >>

flutter安装包切换国内源

在学习Flutter，发现无法安装，控制台提示

Got TLS error trying to find package flutter_inappwebview at https://pub.dev.

经过网上查找资料，发现：

如果在中国安装 flutter，配置国内镜像是很好的解决办法。 到此，解决方法找到。

配置本地环境方法

对于 Linux 和 MacOS 来说，添加如下两条环境变量即可：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

对于 Window

创建上述两个系统变量即可

name: PUB_HOSTED_URL;
value: https://pub.flutter-io.cn

name: FLUTTER_STORAGE_BASE_URL;
value: https://storage.flutter-io.cn

展开全文 >>

什么是iconfont

iconfont 是什么：

顾名思义，IconFont 就是字体图标。严格地说，就是一种字体，但是，它们不包含字母或数字，而是包含符号和字形。您可以使用 CSS 设置样式，就像设置常规文本一样，这使得 IconFont 成为 Web 开发时图标的热门选择。

IconFont 的使用方式和 传统的 WebFont 如出一辙，又把大量的图标变成了一个字体文件，减少了请求数，而且有效减小请求体积。当一个网页有自己的图标字体库之后，可以复用在很多地方，减少很多二次开发成本。因此现代网页多会使用 IconFont 来展示图标，那么如何使用并且生成 IconFont 也就变成了前端开发人员必知必会的能力。

more >>

展开全文 >>

angular依赖注入

掘金上看到一篇讲 angular 依赖注入 的文章，非常的细致，记录一下

依赖注入是前端开发者也是 Angular 开发者一道很难迈过去的坎，依赖注入到底是啥？为什么要依赖注入？Angular 的依赖注入怎么有那么多概念，看了官方文档一遍后感觉是懂了，但是过一段时间发现又不懂了，这是前端开发者普遍遇到的问题，我司的前端也一样，那么这篇文章尝试用更容易理解的语言全面解析一下 Angular 的依赖注入，内容有点多，可以先收藏观看。

Angular 官方文档关于依赖注入介绍的其实挺详细的，但是组织的语言过于官方，不易理解，其次就是文档太过分散，没有把依赖注入聚合在一起，有些核心的概念可能在示例中出现了解读，你很难在一个地方找到所有依赖注入的讲解。
在开始之前，我简单列了一些关于 Angular 依赖注入的问题，如果你每个问题都非常了解可以划过这篇文章了。

more >>

展开全文 >>

angular缓存页面、实现keepAlive效果

场景：当在某个页面筛选了一些条件，然后需要跳到详情页面，此时返回原来的列表页，需要保持原来的筛选状态

Angular RouteReuseStrategy 路由复用策略

abstract class RouteReuseStrategy {
  /* 是否允许复用路由 */
  abstract shouldDetach(route: ActivatedRouteSnapshot): boolean;
  /* 当路由离开时会触发，存储路由 */
  abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void;
  /* 是否允许还原路由 */
  abstract shouldAttach(route: ActivatedRouteSnapshot): boolean;
  /* 获取存储路由 */
  abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null;
  /* 进入路由触发，是否同一路由时复用路由 */
  abstract shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;
}
more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

前端攻城狮
记录分享自己工作、学习中学到的知识