项目总结

项目介绍
一、pc端静态页面制作
1.小米官网静态页面制作
2.博雅互动静态页面制作
二、基础实例项目
1.花瓣网实例
1)思路:
a. 页面布局,浮动布局
b. 获取后台数据,赋值数组,创建不同的li和img,img通过该数组设置随机的imgsrc,高度也随机设置一个范围值;
c. 设置图片懒加载,对每个图片的宽高和浏览器的宽高进行比较,设置懒加载;
2)知识点:
a. 图片懒加载:
1)创建li和img标签,img标签不设置src,设置自定义属性realImg存储图片地址;设置li随机高度;
2)lazyLoad()函数,对img上的图片地址进行筛选,地址格式无误,赋值将realImg属性赋值img,然后将图片高度赋值给该parentNode父级节点;
3)图片正常加载条件;遍历所有的img,
判断条件: 该视图的总高度+视图卷去的高度+指定数值 > img元素到body元素的顶部距离(定值)
b. 页面累加
1)先创建50个li数据,当页面满足条件后,页面继续创建50个;
2)条件:视图总高度+视图卷去的高度+指定数值 > body元素的总高度
c. 回到顶部按钮的显示和隐藏
1)效果:页面在滚动超过一屏后,显示回到顶部按钮;小于一屏时,隐藏回到顶部按钮;
2)条件:视图的卷去高度scrollTop > 视图的总高度offsetHeight
d. 回到顶部按钮的点击效果
1)效果1:点击按钮,页面滚动回到顶部;
实现:创建定时器,创建运动规则,获取总长度,规定时间,计算出速率,计算出实时长度,然后赋值scrollTop值,达到位置实时更新,页面滚动效果;
注意点:边界值判断;
2)效果2:在回到顶部期间,滑动滚轮,立刻停下;
实现:创建开关bok,初始值为true,在onScroll事件函数中,给bok赋值true,并在开始条件判断,当bok为true时,停止toTop事件函数中的定时器;而在toTop事件函数中,每次触发就给bok赋值false;
2.fullpage全屏页面滚动项目
1)效果:分屏显示,导航栏点击跳转到某一页
2)知识点:jquery fullpage插件
3)fullpage知识点:
a.整个项目中,最重要的是active类名的设置使用;页面滚动到某一页码:导航,页码,右侧导航都会添加一个active类名;
4)思路
a.屏幕效果:过渡效果,前提必须添加定位,才能过渡变化;
过渡变化需要有初始位置和终点位置
初始位置:设置在每个元素身上;
终点位置:在session添加active的情况下,设置上终点位置;
过渡效果:设置在终点位置元素上,transition
触发:屏幕在滚动后,会默认给session设置上active类名,删除其他session的active类名;
b.默认跳转到第一屏:window.location.hash='firstPage'也能默认加载第一页;
c.导航下面滑块效果知识:
事件绑定:mouseover mouseleave click
mouseover:通过事件委托,利用事件的冒泡思想,来获取事件源,进而进行设置;
mouseleave:与mouseout区别,在于会将子元素作为一个整体
d.afterLoad和onLeave区别:
onLeave:进入下一页前进行的操作;
afterLoad:进入下一页之后,进行的操作;
3.微金所网站项目
1)项目介绍:基于bootStrap和jquery构建的响应式页面
2)知识点:
css样式:
.pull-left .pull-right 左右浮动
.clearfix类名 清除浮动影响
.visible-xs-block .visible-xs-inline .hidden-xs 响应式显示和隐藏
padding的设置代替行高和高度的设置;更加的灵活和响应式
letter-spacing: 设置字与字之间的间距;
js插件:
标签页:制作导航和页面分屏显示;
collapse:折叠菜单,应用在汉堡图制作中;
tooltip:工具提示框
html标签:
session:标签可作为页面内容分块;作为外部容器使用
事件:
resize:拉伸事件,代码:$(window).on("resize",resizeTo).trigger("resize") trigger作用是页面加载后触发resize事件;
作用:页面拉伸和页面开始加载时,获取不同的页面可视区域的宽度,进而设置不同代码;
媒体查询设置css样式
代码:@media (min-width: 768px){ xxxxx } 屏幕可视宽度大于等于768px时,执行的css样式;
移动端轮播图左右滑动切换事件
touchstart事件:触摸开始时触发,通过e.targetTouches[0].clientX获取触摸点起始位置
touchmove事件:触摸过程中触发,通过e.targetTouches[0].clientX获取实时的触摸点位置
touchend事件:触摸结束时触发,start和move中两个位置点差值绝对值,与设定的距离进行比较,决定是否触发轮播图;
通过判断正负值,来JS设置轮播图的向前向后移动;
touchEvent事件对象:targetTouches和touches属性,属性值为数组,数组长度为1,数组元素为对象,对象中有属性clientX,clientY,pageX,pageY
栅格系统知识点:
col必须设置在.row中,.row设置在.container中;
col-md-6中存在左右padding,可以利用此padding,作为两个栅格之间的距离;
印章的制作知识点:
利用伪类before,设置定位,基本样式,transform(rotate)旋转;设置content文字,通过letter-spacing设置字间距;
meta标签的三个作用:
1)字符编码格式utf-8设置:<meta charset="urf-8">
2)viewport设置 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">设置屏幕宽度为设备宽度,禁止用户手动调整缩放,初始比例为1.0
3)浏览器兼容模式:<meta http-equiv="X-UA-Compatible" content="IE=edge"> 告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。
favicon.ico图片的设置:
代码:<link rel="shorcut icon" href="icon图片地址” type="image/x-icon"/>
想在一个较小屏幕下展示一个超宽的图片,并让图片居中显示
1)两种方法:
换用背景图的方式:设置background-position:center center;
将img元素绝对定位:设置left: 50%,margin-left=-width/2 居中显示;

  1. QQ音乐移动端项目
    1)项目介绍
    2)项目依赖
    3)项目知识点
    a. less知识:
    @import:导入less文件, 效果呈现必须引入less.min.js文件;
    @:定义变量
    混合使用: 设置类名,定义样式,在其他的元素中,直接调用类名使用;
    带参数使用:可以设置默认参数,使用时可设置实参;
    @arguments: 定义参数时,有多个参数,可以在里面通过@arguments来获取所有的参数进行赋值,一般用于padding,margin等复合值设置时使用;
    导引表达式: 通过when来对参数进行判断,若满足条件则设置指定类型;
    嵌套:一级一级编辑层叠样式表,&代表上一级元素;
    运算:变量间的运算,中间必须加空格;
    b.单位px em rem 三者差别和应用场景
    三者差别:
    1) px 浏览器默认字体大小为16px;
    不足之处:值固定,没有为视障读者的扩展,以适应移动设备
    2) em 为相对长度单位;相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,国外使用比较多
    不足之处:em是继承父元素的字体大小,可是当父元素字体大小改变时,又得重新计算了,这不怎么方便
    3)rem: CSS3新增的一个相对长度单位,只相对根目录即HTML元素
    css:配合媒体查询,根据屏幕尺寸的不同来给html设置不同的字体大小;
    JS:根据不同屏幕的大小,按比例变化,可通过JS代码进行设置;
    规定指定屏幕大小下的字体大小值,获取当前设置的屏幕尺寸,按比例计算出字体大小,再获取html根标签,设置字体大小;则完成按比例缩放的效果;
    应用场景:px和em应用在PC端,rem应用在移动端;
    4)项目思路:
    a. 移动端必须设置meta标签,设置viewport属性;
    b. html字体设置:使用rem单位,js获取屏幕宽度,进而计算出字体缩放比例,然后重新设置html根标签的字体大小;达到响应式页面效果;
    标准值:屏幕宽度640px 对应的fontSize为100px;
    事件:window绑定resize事件,实时获取屏幕宽度设置计算后的字体值,并设置trigger,页面加载就触发;
    边界值:屏幕宽度在大于640px后,停止放大;
    c. 静态页面的制作
    css3属性:
    模糊度:filter: blur(10px)
    d. 歌词区域
    1)歌词向上运动的前提:
    main容器添加相对定位,子容器lyc添加绝对定位,通过改变top值,来实现上移的效果;
    main容器的高度为定位,设置overflow:hidden,子容器lyc高度被歌词内容撑开,高度为auto;
    header和footer区域高度为定值,通过JS计算出main的高度;
    2)歌词插入
    ajax: 发送请求,获取后台歌词数据;
    数据切割拼接成字符串,插入到DOM结构中,注意:jQuery中获取元素必须在插入后,再获取;
    e. 底部区域
    1)进度条的静态页面设置
    设置两个形状相同的矩形条,一个代表总长度,一个通过定位浮在上面,宽度不设置,通过音乐的播放时长,计算出宽度每秒增加的长度,就会呈现出,随着时间的增加,进度条不断增加;
    f: audio对象
    1)属性:
    currentTime: 获取当前播放的时间;
    duration: 音频的总长度;
    2)方法:
    play():播放音乐;
    pause():暂停音乐;
    load():重新加载音乐;
    g. 效果
    1)歌词更新效果:
    歌词点亮:通过jquery上的filter属性,定时器中分割当前时间,然后过滤所有的p只要满足条件,则设置active类名;
    筛选代码:$('.lyc').children('p').filter([data-sumdate="${cutTime}"])
    歌词移动:通过获取p的索引值,来设置top的偏移量,并在运动容器中设置transition过渡效果;
    2)进度条的效果
    获取总的duration值,计算出每秒宽度变化的长度,定时器内设置;
    5)待解决问题:
    a. onloadstart,oncanpaly不能绑定使用;不能获取duration值;
    b. 页面刚一加载,不能自动播放;待细致了解audio的使用
    c. jquery中的订阅发布待复习;
    二、Node项目
  2. 论坛网站项目
    1)项目依赖:
    a. 前端:jquery bootstrap ejs
    b. 后台:express
    c. 数据库: mongodb
    d. 插件:express-session formidable gm silly-datetime
    f. node系统模块: path fs
    e. 自己封装库:db.js md5.js cutImg.js
    1. 项目知识点:
      a. 项目目录架构
      M:modles 存储与后台进行交互的文件,如封装的mongodb的库:db.js dbsetting.js 密码加密:md5.js
      V: views 存储页面文件ejs模板文件;用于渲染视图的文件
      C: controllers 连接M和app.js之间的介质 router.js
      public: 静态资源目录
      avatar: 存储裁切后的头像
      uploads: formidable上传的头像的文件夹;
      app.js: 服务器
      mongoDB: 本地数据库
      package.json: 项目依赖
      readme.txt: 项目说明文档
      b. 文件角色
      1)app.js:
      express三步创建服务器构架
      设置ejs模板引擎: 通过res.render(xxx),渲染ejs文件;
      设置静态资源目录: 加载静态资源
      设置路由请求:根据不同的路由请求,加载不同的页面
      引入express-session,设置其中间件,引入session作为路由间传递参数的介质;
      引入controllers中的router.js文件;
      2)router.js:
      作用:构建app.js中路由的函数体;与models中的文件进行交流
      引入db.js md5.js等自定义文件,进而操作本地mongodb数据库;
      引入formidable,silly-datetime,gm等第三方模块,接收post请求数据并上传文件,转化时间格式,裁图等;
      3)db.js dbsetting.js.md5.js:
      作用:封装的js库,用于连接本地mongodb数据库,进行存储和获取数据;md5.js对密码进行加密;
      c. 项目结构
      1)ejs不同页面的呈现:
      if条件判断:通过ejs文件在render时,传入的参数进行控制,ejs文件中添加if条件判断,不同的布尔值,显示指定的页面代码;
      for循环:通过<% %>花式赋值,进行for循环加载页面;用vue的效果;
      <%if(userAry.length>0){%> <%for(var i=0; i<userAry.length; i++){%> <div class="pane"> <div class="imgcon col-xs-1"><img src="/<%= userAry[i].imgSrc%>" alt="tu"></div> <div class="usercon col-xs-11"><%= userAry[i].name%></div> </div> <%}%> <%}%>
      2)session的设置:登录成功后,设置session,内容为对象,
      对象属性:
      login: 判断登录状态,进而呈现不同的页面;
      user: 用户名;
      imgsrc: 当前用户头像地址;
      3)页面跳转
      前端界面中跳转:window.location.href="/forum"
      服务器端页面跳转:res.redirect("/forum")
      4)next():
      作用:跳过,继续向下查找;也可以起到阻止程序执行的目的;
      实例:此项目中我的说说界面的渲染,在登录状态下,页面加载,在未登录状态下,next();去加载404页面;
      5)404页面:
      作用:设置use请求/,作为接盘侠,当页面地址不正确时,加载404页面;
      配合:每个请求中,发现err后,均设置为next(),则会加载404页面;
      6)上传头像
      前端发送请求方法:两种
      1)form表单提交,不能对响应的文件进行操作;
      标签设置:action method enctype属性
      enctype属性值:multipart/form-data
      通过submit提交按钮,自动提交;
      2).ajax提交,可对响应的文件进行操作; 新建formData对象:`var formData=new FormData();` 获取files表单数据插入到对象中:`formData.append('myfile',('#myimg')[0].files[0])ajax中data属性值,赋值formData; 服务器端处理上传的文件:服务端formidable接收,修改上传后的文件路径和文件名: 1)fs.rename(oldpath,newpath,callback)2) newpath包括:文件的路径+源文件名的名字+时间戳+随机数+源文件的后缀名 源文件的名和后缀:fs.parse(name)` => obj obj.ext 后缀名 obj.name 文件名
      时间戳:silly-datetime
      随机数:Math.random()
      7)裁切图像
      1)引用封装的cutImg库,进行裁切功能;
      2)与图片上传功能配合使用;
      3)依赖:gm formidable fs path silly-datetime 前提需下载软件GraphicsMagick
      4)uploads文件夹作为图片上传后的文件夹,avatar文件夹作为图片裁切后的文件夹
    2. 项目具体
      a. 头部导航栏:通过session中设置的login布尔值,配合ejs模板中的条件判断,进而决定什么时候显示什么;
      b. 留言区域:页面加载,发送请求,获取后台数据,显示界面;
      4)注意点:
      a. 设置静态资源目录时,最好设置上特定请求,不要只设置斜杠,如 app.use('/avater',express.static('./avater')) 引入时,在路径前添加'/avater';即可加载此目录下的文件;

三、Vue项目
移动端项目:信息管理系统
1.涉及到的技术栈:
1)vue vue-router构建基本构架
2)webpack压缩打包 webpack-dev-server开发环境测试
3)axios 前端与后台间的数据交互
4)mui mint-ui移动端页面构建 其中mui引入的静态资源 mint-ui下载插件引入
5)其他插件知识:moment转化日期 vue-preview图片预览功能
6)设置后台服务器的插件:
express:构建基本服务器框架
cors:跨域请求设置插件;
formidable:post请求获取数据 图片上传功能;
mongodb:本地数据库存储;
2.项目思路总结
1)顶部通栏 mint-ui
九宫格 mui
底部选项卡 mui =>引入自定义图标iconfont 阿里巴巴矢量图标库
轮播图:mint-ui
2)路由知识:
重定向redirect
路由跳转
params设置
路由嵌套
多视图
3.项目中的知识点
1)底部选项卡点亮效果:设置router-link中的默认点亮类名,配合mui-active使用,完成效果;
2)拦截器interceptor,Axios设置,拦截请求和响应时,设置页面加载效果;
3)过滤器filter,Vue类设置,过滤获取的时间数据,通过moment转化为指定格式的时间;也可以使用silly-datetime
4)mint-ui中的lazy load,图片懒加载设置;只需设置v-lazy绑定变量图片地址;
5)vue-preview移动端图片预览插件的使用;
6)封装两个js文件,一个为子组件传递父组件参数的vue实例,一个为封装的localStorage的操作对象;
7)localStorage本地存储的知识;
8)路由跳转中的钩子函数beforeRouteEnter,在路由跳转前后,进行操作,通过在next()中操作实例
9)给router-view添加过渡动画效果,通过transition包裹,设置样式,但需设置mode参数,规定两个过渡效果发生的先后顺序;
10)购物车总计部分的制作:使用计算属性,遍历整个数据,判断isPicked的布尔值,进行累加,实时更新;
11)图片懒加载功能实现;mui中是在图文列表时,进行的图片懒加载; mint-ui中是在大的图片时使用;

四、React项目
项目:视频管理系统
1、涉及的技术栈
1)react,react-dom,react-router 构建基本骨架
2)webpack压缩打包 webpack-dev-server开发环境测试
3)material-ui Ant Design构建前端页面
material-ui组件:
栅格布局:Grid
应用栏:AppBar
纸张:Paper
下滑线:Divder
菜单栏:Menus
卡片:Cards
Ant Design组件:
栅格:Grid
布局:Layout
导航菜单:Menu
按钮:Button
图标:Icon
4)expresss构建后台服务器,连接mongodb本地数据库,存储数据;
5)封装fetch方法,发送请求,获取和提交数据
6)登录注册功能中localStorage的设置;服务端session的设置;
7)react-addons-css-transition-group插件设置css3的运动效果
8)阿里巴巴矢量图标库iconfont的自定义引入;

项目简结
项目简介
一、前端页面项目
1.花瓣网站项目
1)项目介绍:本网站主要是一个图片展示网站,将图片以瀑布流的样式展现;
2)项目知识:原生封装工具库的使用,页面布局,浮动布局,图片懒加载,js盒子模型,滚动事件,定时器
3)项目效果:通过滚动页面,展示不同的图片,图片懒加载,当点击回到顶部按钮,页面滚动回到顶部,当回到顶部过程中,滑动滚轮,滚动立刻停止;
2.fullpage全屏滚动页面项目
1)项目介绍:依赖jquey的插件fullpage.js开发的全屏页面滚动网站
2)项目依赖:jquery fullpage.js
3) 项目知识:
a. fullpage.js的基本架构和常见问题解决 onLeave和afterLoad参数设置;
b. 过渡效果transition,变形transform,配合实现动画效果;
c. 事件:
事件委托,冒泡原理;事件对象,事件源;
mouseover、mouseleave、mouseout、mouseenter四者之间的差别和应用场景;
3.微金所网站项目
1)项目介绍:依赖jquery和bootstrap开发的响应式网站页面;(pc端和移动端)
2)项目依赖:jquery bootstrap
3)项目知识:
a. bootstrap构造页面响应式架构,导航栏nav,轮播图carousel,汉堡图collapse;
b. meta属性设置及含义;
c. jquery中trigger事件绑定resize事件;获取可视区域client宽度;
d. 媒体查询css样式设置,设置不同屏幕可视宽度下的css样式呈现;
e. 移动端touchEvent事件;事件touchstart,touchmove,touchend绑定,制作移动端轮播图的左右滑动效果;
f. 伪类before设计印章效果;利用transform(rotate)旋转和content属性创建;
4.QQ音乐移动端项目
1)项目介绍:移动端的音乐播放界面,与qq音乐界面相似;
2)项目依赖:zepto.js html5 css3 less
3)项目知识:
a. 移动端的响应式界面:meta rem的使用;
b. 音乐播放与歌词部分的同步运动
c. 歌词部分的后台数据获取,切割插入DOM结构
d. audio对象属性currentTime,duration 方法:paly() pause() load()
e. css3过渡transition animate filter属性;
二、Node项目

  1. 论坛网站项目
    1)项目介绍:论坛网站,登录注册,留言板,上传本地图片,裁剪图片, 本地数据库存储
    2)项目依赖:
    a. 前端:jquery bootstrap ejs
    b. 后台:express
    c. 数据库: mongodb
    d. 插件:path fs crypto express-session formidable gm silly-datetime
    f:自己封装库:db.js md5.js cutImg.js
    3)项目知识结构:
    a. 项目目录架构:
    M:modles 存储与后台进行交互的文件,如封装的mongodb的库:db.js dbsetting.js 密码加密:md5.js
    V: views 存储页面文件ejs模板文件;用于渲染视图的文件
    C: controllers 连接M和app.js之间的介质 router.js
    public: 静态资源目录
    avatar: 存储裁切后的头像
    uploads: formidable上传的头像的文件夹;
    app.js: 服务器
    mongoDB: 本地数据库
    package.json: 项目依赖
    readme.txt: 项目说明文档
    b. 项目涵盖知识点:
    1)bootstrap前端页面构建
    2)express构件服务器,静态资源目录设置,跨域设置,ejs模板引擎设置;
    3)mongodb数据库操作JS封装,操作数据库中的数据;
    4)views视图中ejs模板,ejs使用,服务器端渲染ejs页面;
    5)前端:jquery中ajax发送请求,上传本地文件;服务器端:formidable接收上传文件,并修改路径文件名;
    6)node模块crypto,封装md5.js文件,用于密码的md5加密;
    7)session知识,express-session模块设置session,用于服务器端路由间的数据传递;
    8)上传头像后,对头像进行裁切,使用封装的cutImg.js文件;依赖gm模块;
    9)get,post,use三个请求的差别和使用;
    三、Vue项目
    1.移动端信息管理系统
    1)项目介绍:
    3)项目内容:
    1.vue vue-router构建基本构架;vue-router:路由跳转,重定向,路由嵌套,多视图,route和router运用;
    2.webpack压缩打包 webpack-dev-server开发环境测试;
    3.axios 前端与后台间的数据交互;拦截器interceptor,拦截请求和响应;
    4.mui与mint-ui配合构建移动端页面
    5.vue-preview图片预览插件的使用;
    6.vue过渡动画效果;
    7.mint-ui下拉组件loadmore的使用;
    7.mui图片懒加载;
    8.自定义icon图标引入;
    四、React项目
  2. 视频管理系统
    1)项目介绍:具有视频搜索,视频存储功能的个人管理系统网站
    2)项目依赖:react react-dom react-router webpack material-ui antd express mongodb
    3)项目知识:
    1)react,react-dom,react-router 构建基本骨架
    2)webpack压缩打包 webpack-dev-server开发环境测试
    3)material-ui Ant Design构建前端页面
    4)expresss构建后台服务器,连接mongodb本地数据库,存储数据;
    5)封装fetch方法,发送请求,获取和提交数据
    6)登录注册功能中localStorage的设置;服务端session的设置;
    7)react-addons-css-transition-group插件设置css3的运动效果
    8)阿里巴巴矢量图标库iconfont的自定义引入;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341