Angular 4.0

一.课程简介 (注意:这里的AngularJS指的是2.0以下的版本)
AngularJS的优点:
  • 模板功能强大丰富
  • 比较完善的前端MVC框架
  • 引入了Java的一些概念:比如,依赖注入,单元测试等
AngularJS的一些问题:
  • 性能
  • 路由
  • 作用域
  • 表单验证
  • JavaScript语言本身问题
  • 学习成本高
Angular(指的4.0版本)新特性
  • 全新的命令行工具 AngularCLI: 比如,生成一个新项目的骨架,或者生成我们需要的组件的基础代码;或者作为一个开发服务器供我们调试、编译、构建、部署代码、运行自动化的单元测试,等等.
  • 服务器端渲染: 他可以使一个原本需要10s才能加载玩的单页应用,在1s之内呈现在用户面前,他可以使一个单页应用针对每一个视图去做seo优化.
  • 移动和桌面兼容: 可以使用Ionic,React-Native之类的框架
    AngularJS架构

    Angular架构
Angular与其他流行前端框架的比较
  • React优点
    • 速度快: 虚拟dom (Angular也采用了类似的算法,现在速度与react不相上下了)
    • FLUX架构 (Angular现在也已具备)
    • 服务器渲染 (Angular现在也已具备)
  • Vue对比 之 优点
    • 简单
    • 灵活
    • 性能:(大小只有十几kb,Angular得有50多kb)
  • Vue缺点
    • 个人主导
    • 只关注web
    • 只能依靠第三方框架来实现服务器渲染
Angular 继承了AngularJS原有的优点,并且吸收了React以及其他框架的优点,祛除了他们的缺点,形成了一套全新的框架.
Angular
二. 开始Angular开发
  • Angular程序架构
Angular程序架构
  • 搭建环境
    • 安装node.js node.js官网
    • 安装 angular-cli sudo cnpm install -g @angular/cli >>>>由于npm总是安装不成功,故使用了淘宝的镜像
    • 检查 angular-cli 是否安装成功 ng -v
      angular/cli 安装成功
    • 创建项目ng new xxx项目名字
    • 创建带路由的项目 ng new xxx --routing
    • 启动项目 ng serve --open
    • 创建组件 ng g component xxx组件
    • 创建一个文件夹并创建组件 ng g component stock/stockManage
      在stock文件夹下生成一个stockManage组件
项目目录
项目目录
component组件组成的必备元素
组件的必备元素
其他笔记
  • 声明的数组,在push之前要初始化下
export class StarsComponent implements OnInit {
  // 外面注入进来的
  @Input()
  rating: number = 0;
  stars: boolean[];
  constructor() {
  }
  ngOnInit() {
    // 数组要初始化一下
    this.stars = [];
    for (let i = 1; i <= 5; i++) {
      this.stars.push(i > this.rating);
    }
  }

}
三.使用Angular Route导航
  • 路由的基础知识
    新建一个导航的项目:ng new router --routing
  • 在路由时传递参数

    • 在查询参数中传递数据

      <a routerLink="/stock" [queryParams]="{id:1}">股票详情</a>

      当点击时,导航栏地址中就带上了id参数

      在路由时传递参数

      在跳转到组件中接收这个参数

      export class StockComponent implements OnInit {

  private stockId: number;

  constructor(private routeInfo: ActivatedRoute) {

  }

  ngOnInit() {
    this.stockId = this.routeInfo.snapshot.queryParams['id'];
  }

}

      在html中调用

      <p>
  这里是股票信息组件
</p>
<p>
  股票ID是{{stockId}}
</p>
      执行结果

    • 在路由路径中传递参数
      ①. 在路由中进行配置

      // 路由配置
const routes: Routes = [
  {
    path:'',
    component: HomeComponent
  },
  {
    path:'stock/:id',
    component: StockComponent
  },
  // 注意: 通配符路由的配置一定要放在最下面
  {
    path:'**',// **(通配符)表示任何路径都可以来匹配
    component: Code404Component
  }
];

      ②.修改路由连接

      <a [routerLink]="['/stock',1]">股票详情</a>

      ③.修改要跳珠组件的ts文件

       export class StockComponent implements OnInit {

   private stockId: number;

    constructor(private routeInfo: ActivatedRoute) {

    }

  ngOnInit() {
      this.stockId = this.routeInfo.snapshot.params['id'];
  }

}

      ④.显示效果


      在路由路径中传递参数
      注意:当两个跳转到的组件一样时,会因为路由快照的原因,导致路由传递的参数在组件内部不能显示出来;
      解决办法:在该组件的ts文件中
      export class StockComponent implements OnInit {

  private stockId: number;

  constructor(private routeInfo: ActivatedRoute) {

  }

  ngOnInit() {
    //解决路由快照的问题
    //每当参数改变时,下面的方法都会被调用一次
    this.routeInfo.params.subscribe((params: Params)=> this.stockId = params['id']);
    this.stockId = this.routeInfo.snapshot.params['id'];
  }

}

    • 在路由配置中传递参数
      ①.在路由配置中设置静态数据

       const routes: Routes = [
 {
   path: '',
   component: HomeComponent
 },
 {
   path: 'stock/:id',
   component: StockComponent,
   // 配置一些静态数据
   data: [{
     isPro: true
   }]
 }
]

      ②.在要跳转到的组件ts文件中

      export class StockComponent implements OnInit {

  private stockId: number;
  private isPro: boolean;

  constructor(private routeInfo: ActivatedRoute) {

  }

  ngOnInit() {
    //解决路由快照的问题
    //每当参数改变时,下面的方法都会被调用一次
    this.routeInfo.params.subscribe((params: Params) => this.stockId = params['id']);
    this.stockId = this.routeInfo.snapshot.params['id'];
    this.isPro = this.routeInfo.snapshot.data[0]['isPro'];
  }

}

      ③.html文件中

      <p>
  这里是股票信息组件
</p>
<p>
  股票ID是{{stockId}}
</p>
<p>
  isPro是{{isPro}}
</p>

      ④.显示效果


      在路由配置中传递参数
  • 重定向路由
    在用户访问一个特定的地址时,将其重定向到另一个指定的地址.
    比如:将http://localhost:4200重定向到http://localhost:4200/home 
    const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'  // pathMatch: full，路由器将应用重定向，当且仅当导航到“/”。
  },
  {
    path: 'home',
    component: HomeComponent
  }
]
  • 子路由
    ①.在路由配置中,在children中配置子路由 
    {
  path: 'stock/:id',
  component: StockComponent,
  // 配置一些静态数据
  data: [{
    isPro: true
  }],
  children:[
    {
      path:'',
      component:BuyerListComponent
    },
    {
      path:'seller/:id', // 传递参数
      component:SellerListComponent
    }
  ]
},
    ②. 在子路的上一级路由的组件中,设置routerLink和插槽 
    <!-- ./ : 在当前路由下面去找 -->
<a [routerLink]="['./']">买家列表</a>
<a [routerLink]="['./seller', 100]">卖家列表</a>
<!--插座-->
<router-outlet></router-outlet>

    ③.显示效果


    子路由
  • 辅助路由
    具体参考路由demo
  • 路由守卫

    • CanActivate: 处理导航到某路由的情况.
      使用场景:是否有权限进入到某个路由组件
      ①.路由配置

      {
  path: 'stock/:id',
  component: StockComponent,
  // 路由守卫
  canActivate: [PermissionGuard]
},

      ②.在permission.guard.ts文件中,配置权限

      import {CanActivate} from "@angular/router";

export class PermissionGuard implements CanActivate {

   canActivate() {
    var hasPermission: boolean = Math.random() < 0.5;
    if (!hasPermission){
      console.log("用户无权限访问此股票详情");
    }
    return hasPermission; // true 可以进入, false不可以进入
  }
}

      当hasPermission为true时,可以跳转到stock路由,为false时,被拦截,不可以进入!

    • CanDeactivate: 处理从当前路由离开的情况.
      具体参考路由demo.

    • Resolve: 在路由激活之前获取路由数据.
      具体参考路由router2.

四. 依赖注入
  • 什么是依赖注入模式及使用依赖注入的好处

    依赖注入: Dependency Injection 简称 DI 。
    控制反转: Inversion of Control 简称 IOC 。

    使用依赖注入的好处 : 依赖注入会帮你以一种松耦合的方式编写代码,使代码可测性和重用性更高!

  • 介绍Angular的依赖注入实现:注入器和提供器
  • 注入器的层级关系

  • <app-stars [rating]="stock?.rating"></app-stars> // stock?.rating => 当stock存在时,才去访问rating属性

五. 数据绑定、响应式编程和管道。

  • 数据绑定


    数据绑定

    • 事件绑定


      事件绑定
    HTML属性和DOM属性的关系
    • 少量 HTML 属性 和 DOM 属性 之间有着 1：1的映射，如 id。
    • 有些 HTML 属性 没有对应的 DOM 属性， 如 colspan。
    • 有些 DOM 属性 没有对应的 HTML 属性，如 textContent。
    • 就算名字相同， HTML 属性 和 DOM属性 也不是同一样东西。
    • HTML 属性的值指定了初始值；DOM属性的值表示当前值。
      DOM 属性 的值可以改变；HTML 属性的值不能改变。
    • 模板绑定是通过 DOM属性 和事件来工作的，而不是 HTML 属性。
    HTML属性绑定

    • 基本Html属性绑定：


      基本Html属性绑定.png

    • CSS类绑定：


      CSS类绑定

    • 样式绑定


      样式绑定

  • 双向绑定[(ngModel)]="name" [()] 盒子里面装香蕉

 <input [(ngModel)]="name">
  • 响应式编程 : 异步数据流编程
    • 观察者模式与Rxjs
    Observable ： 被观察者
    响应式编程

先导入

import {Observable} from "rxjs";

  //被观察者 
  Observable.from([1, 2, 3, 4])
    .filter(e => e % 2 === 0)
    .map(e => e * e)
    //订阅 (观察者)
    .subscribe(
      //观察者
      e => console.log(e),  // 4 ,  6
      err => console.error(err),
      () => console.log('结束了') // 结束了
    );

观察者后两个回调方法是可选的

err => console.log(err),
() => console.log('结束了') // 结束了
  • 模板本地变量 #xxxx 用#来声明
    <input #myField (keyup)="onKey(myField.value)">

ts中代码
onKey(value) {
  console.log(value);
}

    等同下面的传统方式

    //$event 事件对象  keyup键盘点击
<input (keyup)="onkey2($event)">

ts中代码
onkey2(event) {
  console.log(`我是来打怪兽的==${event.target.value}`);
}

  • 响应式编程栗子
    html文件中

    <input [formControl]="searchInput">  // 绑定formControl属性

    在app.module.ts中引入ReactiveFormsModule

    imports: [
    BrowserModule,
    ReactiveFormsModule
],

    ts文件中
    先导入

    import {Observable} from "rxjs";
import {FormControl} from "@angular/forms";
import 'rxjs/Rx';

    具体实现

    export class BindComponent implements OnInit {

  searchInput: FormControl = new FormControl();

  constructor() {
    this.searchInput.valueChanges
       // 500ms没有收到新的事件,才往下执行
      .debounceTime(500)
      .subscribe(stockCode => this.getStockInfo(stockCode));
  }

  ngOnInit() {
  }

  getStockInfo(value) {
    console.log(value);
  }

}

    实现总结:当用户在搜索框中一直输入内容,此时输入框不会触发搜索功能,当用户输入停下来,超过500ms才会执行搜索功能!

  • 管道 : 负责处理原始值到显示值的转换.比如(GMT时间转换)

    管道符号: |

    Angular4中常用管道 摘抄参考文章

    • ①. 大小写转换管道
      uppercase: 将字符串转换为大写
      lowercase: 将字符串转换为小写

      <p>将字符串转换为大写{{str | uppercase}}</p>

      str:string = 'hello'

      页面上会显示
      将字符串转换为大写HELLO

    • ②. 日期管道
      date。日期管道符可以接受参数，用来规定输出日期的格式。

      <p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>

      today:Date = new Date();

      页面上会显示现在的时间是2017年12月05日14时57分53秒

    • ③. 小数管道
      number管道用来将数字处理为我们需要的小数格式
      接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
      其中最少整数位数默认为1
      最少小数位数默认为0
      最多小数位数默认为3
      当小数位数少于规定的{最少小数位数}时，会自动补0
      当小数位数多于规定的{最多小数位数}时，会四舍五入

      <p>圆周率是{{pi | number:'2.2-4'}}</p>

      pi:number = 3.14159;

      页面上会显示
      圆周率是03.1416

    • ④. async 管道:处理异步流

    • ⑤. 自定义管道
      执行命令ng g pipe pipe/xxx 创建xxx管道
      在xxx.pipe.ts文件中:

      import {Pipe, PipeTransform} from '@angular/core';

// Pipe 管道装饰器
@Pipe({
  name: 'multiple' // 管道的名字,可以任意定义
})
export class MultiplePipe implements PipeTransform {

  transform(value: number, args?: number): any {
    // value: 管道输入进来的原始的值
    // args 可选参数,管道后面跟的 date:'yyyy-MM-dd HH:mm:ss'等
    // 返回 原始值 乘以 参数值

    if (!args) {
      args = 1;
    }
    return value * args;
  }
}

      在html中调用

      <p>自定义管道{{size | multiple:'4'}}</p>

      执行结果为: 28

  • indexOf() 包含

    return list.filter(item => {
    const itemFieldValue = item[field].toLowerCase();
    return itemFieldValue.indexOf(keyword) >= 0; // indexOf()包含
});
六.组件间通讯

  • 组件的输入输出属性

    • 输入属性 : 适用于父传子
      需要使用@Input() 修饰 
      export class StockSearchComponent implements OnInit {

  // @Input() 修饰 keyWord 属性是个输入属性
  @Input()
  private keyWord: string;
  constructor() {
  }
  ngOnInit() {
    setInterval(() => {
      this.keyWord = 'xxxx';
    }, 3000);
  }
}
      这样在父子组件嵌套的情况下,父组件给子组件传值 
      <div>
  <input placeholder="请输入搜索关键字" [(ngModel)]="search">
  <app-stock-search [keyWord]="search" ></app-stock-search>
</div>
    • 输出属性: 适用于子传父
      在子组件中先引入 
      import { EventEmitter } from '@angular/core';
      声明属性 
      @Output() // 装饰器没有名字
searchResult: EventEmitter<StockInfo> = new EventEmitter();

@Output('lastPrice') // 也可以给装饰器起名字
searchResult: EventEmitter<StockInfo> = new EventEmitter();
      发射事件 
      this.searchResult.emit(stockInfo);
      在父组件中 事件绑定(lastPrice)="xxx($event)" 
      如果装饰器没有名字
<app-stock-search  (searchResult)="searchResultHandle($event)"></app-stock-search>

装饰器有名字 lastPrice
<app-stock-search (lastPrice)="searchResultHandle($event)"></app-stock-search>
      在父组件ts文件中实现 
      searchResultHandle(stockInfo: StockInfo) {
  this.currentPrice = stockInfo.price;
}
      在父组件中显示 
      <div>
     当前价格是{{currentPrice | number:'2.2-2'}}
</div>

  • 使用中间人模式传递数据
    两兄弟间的数据传递,由这两个兄弟所在的父组件充当中间人的角色

    中间人模式

    如上图,son1的一个事件想把值传递到兄弟组件son2中,
    现在son1组件中声明事件属性

    @Output()
addCart: EventEmitter<StockInfo> = new EventEmitter();

    然后发送事件

    buyStock() {
    this.addCart.emit(new StockInfo(this.keyWord, this.price));
}

    在父组件father中,调用该组件,并实现addCartHandler方法

    <son1 (addCart)="addCartHandler($event)"></son1 >

    private stockInfo: StockInfo;
addCartHandler(stockInfo: StockInfo) {
  this.stockInfo = stockInfo;
}

    father组件再将数据传递给son2

    <son2 [stockInfo]="stockInfo"></son2 >

    以上就是中间人模式

  • 组件生命周期以及angular的变化发现机制


    生命周期: 红色部分只会被调用一次

  • 生命周期的执行顺序


    生命周期的执行顺序

  • ngOnChanges钩子: 输入属性发生变化的时候调用;
    当组件有@Input()属性时,该属性的初始化是在ngOnChanges中执行的.所以当组件依赖外部输入进来的属性时,它的初始化最好在ngOnInit钩子里面,而不要写在构造函数里面.

在父组件中调用子组件的方法

  • 方法一

在父组件中 ,声明一个模板变量

<app-child #child1></app-child>

在父组件ts文件中,使用@ViewChild()装饰器

export class AppComponent implements OnInit {
  /**
   * 在父组件 AppComponent 里面,获得子组件的引用
   */
  @ViewChild('child1') // 通过模板变量的名字child1,找到了对应的子组件,并将child1赋值给了下面的child1变量
  child1: ChildComponent;

  ngOnInit(): void {
    // 调用子组件的方法
    this.child1.greeting('Tom');
  }
}
  • 方法二

在父组件的模板上调用子组件的方法

<!-- 先声明模板变量-->
<app-child #child2></app-child>
<!--在父组件的模板上调用子组件的方法-->
<button (click)="child2.greeting('Jerry')">调用child2的greeting方法</button>

  • ngAfterViewInit() 和 ngAfterViewChecked()钩子
    ngAfterViewInit() 和 ngAfterViewChecked() 生命周期是在组件的视图被组装完毕以后调用的;
    如果组件有子组件, 那么只有当所有子组件的视图组装完毕以后,父组件的这两个方法才会被调用;
    不要在这两个方法里改变视图中绑定的东西.如果想改他,也要写在一个定时器(setTimeout)里面,不然会抛出异常;
    ngAfterViewInit() 先调用, ngAfterViewChecked()后调用

  • ng-content 投影

    类似于Vue的插槽
    在子组件定义一个投影

    <div style="border:1px solid red">
  <!--使用 ng-content 组件标记投影点-->
  <ng-content></ng-content>
</div>

    当其父组件调用该子组件时,可以往投影上传递任意内容

    <app-red-border>
  <div>
    我是投影里的内容
  </div>
</app-red-border>
    当然也传递多个投影,并指定每个投影的位置

    在父组件调用子组件时,给投影设置class

    <app-red-border>
  <div class="red">
    我是红框里面的内容
  </div>
  <div class="green">
    我是绿框里面的内容
  </div>
</app-red-border>

    子组件中给设置多个投影位置,并给ng-content设置select属性为父组件中投影的class,

     <div style="border:1px solid red">
  <!--使用 ng-content 组件标记投影点-->
  <ng-content select=".red"></ng-content>
 </div>

 <div style="border:1px solid green">
   <ng-content select=".green"></ng-content>
 </div>

  • ngAfterContentInit() 和 ngAfterContentChecked()钩子
    这两个钩子针对的是视图中父组件投影进来的那部分内容的;
    ngAfterContentInit():投影进来的内容初始化完毕调用;
    ngAfterContentChecked():专门针对投影进来的内容,做变更检测的;

  • ngOnDestroy 组件销毁
    当切换路由时,会调用该组件销毁钩子;

  • 小结:
    ①.父子组件之间应该避免直接访问彼此的内部,而应该通过输入输出属性来通讯;
    ②.组件可以通过输出属性发射自定义事件,这些事件可以携带任何你想携带的数据;
    ③.在没有父子关系的组件之间,尽量使用中间人模式进行通讯;
    ④.父组件可以在运行时投影一个或多个模板片段到子组件中;
    每个Angular组件都提供了一组生命周期钩子,供你在某些特定的事件发生时执行相应的逻辑;
    ⑤.Angular的变更检测机制会监控组件属性的变化并自动更新视图.这个检测非常频繁并且默认是针对整个组件树的,所以实现相关钩子时要慎重;
    ⑥.你可以标记你的组件树中的一个分支,使其被排除在变更检测机制之外.

七. 表单处理

  • 模板式表单 (需要引入:FormsModule)
    表单的数据模型是通过组件模板的相关指令来定义的,因为使用这种方式定义表单的数据模型时,我们会受限于HTML的语法,所以,模板驱动方式只适用于一些简单的场景.

  • 响应式表单 (需要引入:ReactiveFormsModule)
    使用响应式表单时,你通过编写TypeScript代码而不是Html代码来创建一个底层的数据模型,在这个模型定义好以后,你使用一些特定的指令,将模板上的html元素与底层的数据模型连接在一起.

  • 响应式表单 和 模板式表单的不同点

    • 不管是哪种表单,都有一个对应的数据模型来存储表单的数据. 在模板式表单中,数据模型是由angular基于你组件模板中的指令隐式创建的. 而在响应式表单中,你通过编码明确的创建数据模型,然后将模板上的html元素与底层的数据模型连接在一起.
    • 数据模型并不是一个任意的对象, 它是一个由angular/forms模块中的一些特定类,如:FormControl, FormGroup, FormArray等组成的. 在模板式表单中, 你是不能直接访问到这些类的.
    • 响应式表单并不会替你生成HTML, 模板仍然需要你自己来编写.

  • 模板式表单例子
    模板式表单的指令都是ng开头的,如:ngForm,ngModel

<form #myForm="ngForm" (ngSubmit)="createUser(myForm.value)">
  <div>用户名:<input #myNickName="ngModel" ngModel name="nickname" type="text" pattern="[a-zA-Z0-9]+"></div>
  <div>邮箱:<input ngModel name="email" type="email"></div>
  <div>手机号:<input ngModel name="mobile" type="number"></div>
  <div ngModelGroup="passwordInfo">
    <div>密码:<input ngModel name="password" type="password"></div>
    <div>确认密码:<input ngModel name="passwordConfirm" type="password"></div>
  </div>

  <button type="submit">注册</button>
</form>

<br>
<hr>
<br>

<div>
  {{myForm.value | json}}
</div>
<br>
<div>
  昵称的值是{{myNickName.value}}
</div>
模板式表单栗子
  • 响应式表单
    响应式表单的指令都是form开头的,如:formGroup,formControl
    html中代码
<!--
与后台的formModel绑定;
createUser() 不用传值;
-->
<form [formGroup]="formModel" (submit)="createUser()">
  <div>昵称:<input formControlName="nickname" type="text" pattern="[a-zA-Z0-9]+"></div>
  <div>邮箱:
    <ul formArrayName="emails">
      <li *ngFor="let email of formModel.get('emails').controls;let i = index">
        <input [formControlName]="I">
      </li>
    </ul>
    <input type="button" (click)="addEmail()" value="添加Email">
  </div>
  <div>手机号:<input formControlName="mobile" type="number"></div>
  <!--与后台的passwordInfo绑定-->
  <div formGroupName="passwordInfo">
    <div>密码:<input formControlName="password" type="password"></div>
    <div>确认密码:<input formControlName="passwordConfirm" type="password"></div>
  </div>

  <button type="submit">注册</button>
</form>

ts中代码

import {Component, OnInit} from '@angular/core';
import {FormArray, FormControl, FormGroup} from "@angular/forms";

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {

  // 整个表单所有数据
  private formModel: FormGroup;

  constructor() {
    this.formModel = new FormGroup({
      nickname: new FormControl(),
      emails: new FormArray([
        new FormControl()
      ]),
      mobile: new FormControl(),
      passwordInfo: new FormGroup({
        password: new FormControl(),
        passwordConfirm: new FormControl()
      })
    });
  }

  addEmail() {
    const emails = this.formModel.get('emails') as FormArray;
    emails.push(new FormControl());
  }
  createUser() {
    console.log(this.formModel.value);
  }
}
响应式表单

打印结果:


响应式表单打印结果
使用FormBuilder可简化上面ts文件中大代码
import {Component, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup} from "@angular/forms";

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {

  // 整个表单所有数据
  private formModel: FormGroup;

  private fb: FormBuilder = new FormBuilder();

  constructor() {
    this.formModel = this.fb.group({
      nickname: ['xxx'],
      emails: this.fb.array([
        ['']
      ]),
      mobile: [''],
      passwordInfo: this.fb.group({
        password: [''],
        passwordConfirm: ['']
      })
    });
  }

  addEmail() {
    const emails = this.formModel.get('emails') as FormArray;
    emails.push(new FormControl());
  }

  createUser() {
    console.log(this.formModel.value);
  }

  ngOnInit() {
  }

}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 157,198评论 4赞 359
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,663评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 106,985评论 0赞 237
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,673评论 0赞 202
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 51,994评论 3赞 285
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,399评论 1赞 211
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,717评论 2赞 310
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,407评论 0赞 194
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,112评论 1赞 239
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2赞 241
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1赞 256
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,255评论 2赞 250
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,881评论 3赞 233
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0赞 192
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2赞 269
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2赞 260

推荐阅读更多精彩内容