全部文章

<p>背景:公司 A 使用 GitHub 企业版,账户 b@demo.com 属于 组织 A</p> <pre><code>The `xxx' organization has enabled or enforced SAML SSO. To access</code></pre> <p>解决方案:</p> <ol> <li>进入 <a href="https://github.com/settings/tokens">https://github.com/settings/tokens</a> 然后生成 <code>Personal Access Token</code>。</li> <li>在命令行工具,<code>git clone [你的git项目]</code>。</li> <li>此时会弹出 <code>github login</code> 对话框,要求你输入github 账户和密码,关掉此对话框。</li> <li>关掉后,命令行会提示<code>Logon failed...</code>,然后要求输入 github 用户名<code>Username for https://github.com/</code>, 输入你的 github 用户名然后 <code>enter</code>。</li> <li>此时会弹出<code>Open SSH</code> 对话框,要求输入密码,输入<code>1</code> 生成的 <code>Personal Access Token</code>。</li> <li>复制红框的URL到浏览器并访问。</li> <li>再次 <code>git clone [你的 git 项目]</code>。</li> </ol> <p>如果再不行,按顺序重新执行一次。祝你好运。</p>
详情
<p>新建项目 <code>ionic new educationIonic blank</code> 然后进入该项目根目录执行</p> <pre><code>git init git add * git add .* git commit -m "初始化项目" git remote add origin git@gitee.com:payton/education-ionic.git git branch --set-upstream-to origin/master master git pull --allow-unrelated-histories</code></pre>
详情
<h2>在 Angular 2 的组件中如何插入带行内样式的 html</h2> <p>想必大家都知道出于安全的考虑,angular 会把所有输入变量的内容视为不安全的,也就是所有输入变量的内容会被过滤;</p> <p>带 js, css 都是视为不安全的,angular 会自动把视为不安全的字符串过滤掉。</p> <p>如果想想插入带样式的 HTML ,那么必须要告诉 angular 我传给你的字符串是安全。</p> <p>闲话少说,直接上代码。</p> <p>插入html 使用 输入属性 <code>[innerHtml]="htmlContent"</code></p> <p>app.component.ts</p> <pre><code class="language-typescript">import { Component } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less'] }) export class AppComponent { html: any; constructor(private sanitizer: DomSanitizer) { this.html = sanitizer.bypassSecurityTrustHtml(`<span style=\"color:red;\">1234</span>`); } }</code></pre> <p>app.component.html</p> <pre><code class="language-html"><div [innerHtml]="html"></div></code></pre>
详情
<h2>Windows 常用命令,你记得几个?</h2> <p>以下是我在工作中,经常会用到的 windows 命令</p> <pre><code>// 切换盘符,切换到D盘 d: // 列出当前目录下所有文件 dir // 进入指定文件夹,例如进入 web 文件夹 cd web // 查找特定进程,例如查找nginx.exe tasklist /fi "imagename eq nginx.exe" // 清屏 cls // 查看 ip ipconfig // 刷新 DNS ipconfig /flushdns </code></pre> <h2>Windows 快捷键,你又记得几个?</h2> <pre><code>// 最小化或还原所有窗口 WINDOWS + D // 选中一个文件,然后修改文件名 F2 // 在文件夹中或者是浏览器中快速弹出搜索框 Ctrl + F</code></pre>
详情
<h3>需求:左右两边是按钮或者图标,贴在边缘,中间是字符串加上一个label,label紧贴在字符串最后,如果中间区域太窄,label不变,过长的字符串自动显示为省略号 <code>...</code></h3> <h3>实现</h3> <pre><code class="language-html"><!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <title>HTML测试文档</title> <style> .item { display: flex; align-items: center; width: 500px; margin: 4px 0; border: 1px solid red; } .item .severity-icon { width: 7px; height: 7px; border-radius: 3.5px; background-color: red; flex: 0 0 7px; } .item h4 { display: flex; align-items: center; flex: 1 1 auto; /*关键点一*/ margin: 0 5px; width: 80%; /*关键点二,这个值一定要比它实际占用的宽度小,如果设置为100%,就会超出item这个框*/ border: 1px solid blue; } .item h4 span { overflow: hidden; margin-right: 4px; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; } .item h4 i { flex: 0 0 auto; padding: 2px 4px; font-size: 10px; color: #fff; font-weight: normal; font-style: normal; background-color: #1d1d1d; } .item .btn-remove { flex: 0 0 16px; padding: 0 4px; cursor: pointer; text-align: center; font-style: normal; vertical-align: middle; background-color: gray; } </style> </head> <body> <div class="item"> <i class="severity-icon"></i> <h4> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span> <i>Node.js</i> </h4> <i class="btn-remove">✕</i> </div> </body> </html></code></pre>
详情
<h2>枚举</h2> <pre><code>export enum DIRECTIONS = { UP = 1, RIGHT = 2, DOWN = 3, LEFT = 4 }</code></pre> <h2>类型别名和接口</h2> <pre><code>// 类型别名 type Animal = { type: string; }; type Dog = Animal & { bark: Function; }; const dog: Dog = { type: "dog", bark: () => {}, }; // 接口 interface Animal { type: string; } interface Dog extends Animal { bark: Function; } const a: Dog = { type: 'dog', bark: () => { } }</code></pre> <h2>泛型</h2> <pre><code>const a: Array<string> = ['a', 'b']; function get<T>(url: string): Promise<T> { return fetch(url, { method: "get", headers: new Headers({ Accept: "application/json", }), }).then((response) => response.json()); }</code></pre>
详情
<h2>PHP 日期及时间处理包使用</h2> <h3>Carbon计算两个日期相差天数</h3> <p>我的需求是,借书用户n天内要还的书,借书记录还书过期时间(timestamp);用到的函数就是 <code>diffInDays</code></p> <p>代码片段如下:</p> <pre><code class="language-php">$now = Carbon::now(); $expire = Carbon::createFromTimestamp($item->expire_at); // expire_at是时间戳 $dd = $now->diffInDays($expire, false); if ($dd > 0 && $dd <= 3) { $string = "你借的图书《{$item->book->title}》还有 {$dd} 天到期,请于 {$expire->toDateTimeString()} 前还书。"; $this->sendMail($string, 'test@qq.com'); }</code></pre> <p>Carbon GitHub地址:<a href="https://github.com/briannesbitt/carbon">https://github.com/briannesbitt/carbon</a></p> <h3>Carbon计算两个日期相差天数(关键点)</h3> <pre><code class="language-php">$day1 = Carbon::now(); $day2 = Carbon::now()->addDays(5); $dd = $day1->diffInDays($day2, false); // 如果$dd > 0, 则$day1 < $day2; 如果$dd < 0,$day1 > $day2</code></pre>
详情
<p>以前只知道有三种布局方式: <code>标准文档流</code>、<code>浮动布局</code> 和 <code>定位布局</code>。</p> <p>如今迎来新的布局方式: <code>Flex</code> (<code>流式布局</code>),让人眼前一亮,什么垂直居中,水平居中,平均分布,几行css搞定,心情愉悦。</p> <h3>推荐两篇好文:</h3> <p>阮一峰写的 <a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html">Flex 布局教程:语法篇</a></p> <p>另一篇 <a href="https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb">一劳永逸的搞定 flex 布局</a></p>
详情
<p>最近在做一个项目,图书借阅系统。</p> <p>在图书详情页面有两部分内容,一是图书详情;二是图书借阅记录列表。</p> <p>两部分数据是通过图书 id 从 api 获取,现在的需求是:两部分数据全部从 api 返回才显示页面,其中有一部分的数据还没从 api 返回,页面显示的是 loading 状态。</p> <p>api 请求数据代码如下:</p> <pre><code class="language-typescript">ngOnInit() { this.loaded = false; let bookStream = this.bookService.getBook(1); let bookLogsStream = this.bookLogService.getLogs(1); let mergedStream = bookStream.merge(bookLogsStream); mergedStream.subscribe(bookOrBookLogs => { console.log(bookOrBookLogs); }, e => { // handle error here }, () => { // complete handler console.log('complete'); this.loaded = true; }); }</code></pre> <p>无论是 <code>bookStream</code> 的数据先回来还是 <code>bookLogsStream</code> 的数据先回来都是执行 <code>observer</code> 的 <code>next</code>方法,在这里就是 <code>function(bookOrBookLogs) { console.log(bookOrBookLogs); }</code> 两部分的数据返回后,就会执行 <code>complete</code> 方法;</p> <p>RxJS 教程,可参考:<a href="http://www.oschina.net/translate/rxjs-streams">RxJS教程</a></p>
详情
<p>近期在做公司的项目,梳理了另一个同事写的 wiget 基础组件,两个 widget 中间的间距他用的是 border 来达到视觉效果,但我总感觉这个盒子很奇怪,于是把 widget 重新梳理了一遍。</p> <p>重新回顾和梳理一下盒子模型。</p> <blockquote> <p>在一个文档中,每个元素都被表示为一个矩形的盒子。</p> </blockquote> <p><img src="https://developer.mozilla.org/files/72/boxmodel%20(1).png" alt="" /> </p> <p>两个 widget 是平级的,它们的之间的间距理应用 margin 来隔开。</p> <p><strong>外边距区域</strong> <strong>用空白区域扩展边框区域,以分开相邻的元素。</strong></p>
详情
<pre><code><html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> html { margin: 0; padding: 0; } body { margin: 0; padding: 0; font-size: 14px; } .wrapper { display: flex; min-height: 100vh; flex-direction: column; text-align: center; vertical-align: middle; } .wrapper header { font-size: 1.1428em; flex: 0 0 5.428em; line-height: 5.428em; background-color: #666; } .wrapper .content { display: flex; flex: 1; } .wrapper .content nav { flex: 0 0 21.428em; background-color: #77bbdd; } .wrapper .content main { flex: 1; background-color: #d6d6d6; } .wrapper .content aside { flex: 0 0 12em; background-color: #ff6633; } .wrapper footer { flex: 0 0 3.571em; line-height: 3.571em; background-color: #666; } </style> </head> <body> <div class="wrapper"> <header>Come and fine me</header> <div class="content"> <nav>#Left</nav> <main>#Center</main> <aside>#Right</aside> </div> <footer>To be or not to be.</footer> </div> </body> </html></code></pre> <p><a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html">参考文章</a></p>
详情
<p>花了一个晚上弄出了发送邮件功能。Lumen 5.3 Mail</p> <h3>安装</h3> <p>在 <code>composer.json</code> 文件的 <code>require</code> 段添加 "illuminate/mail": "5.3.*",然后执行 <code>composer update</code></p> <h3>添加邮件配置</h3> <p>一个是在/config新增文件 <code>mail.php</code>, 文件内容参考:<a href="https://github.com/laravel/laravel/blob/master/config/mail.php"><a href="https://github.com/laravel/laravel/blob/master/config/mail.php">https://github.com/laravel/laravel/blob/master/config/mail.php</a></a></p> <h3>载入服务</h3> <p>在 <code>/bootstrap/app.php</code> 中添加 <code>$app->configure('mail');</code> 和注册服务提供者:<code>$app->register(Illuminate\\Mail\\MailServiceProvider::class);</code></p> <h3>测试</h3> <pre><code>use Illuminate\\Support\\Facades\\Mail; Mail::raw('邮件正文内容', function($message){ $message->to('test@qq.com', '我')->subject('邮件标题'); });</code></pre>
详情