基于Vue+Vuex+Vue-Router+Axios+Mint-ui+Node+Express+MySQL+Element-ui的移动端项目

第一步:安装Node

1、打开NodeJS的官网,下载和自己系统相配的NodeJS的安装程序,包括32位还是64位一定要选择好,否则会出现安装问题。

下载地址:https://nodejs.org/en/download/


我选择的是Window版本64位的安装程序,也有MAC平台的安装程序。

    下载完成,如图:


2、接下来就是安装了,安装很简单,直接下一步下一步就可以,但是我也把流程记录下来,给第一次看本教程的人有一个大概的了解。

  双击安装文件,如图:


3、点击下一步,选择同意协议,否则无法继续安装。如图:


4、这一步选择安装的目录,可以使用默认目录【C:\Program Files\nodejs\】,也可以根据需要改变目录,我选择安装在D盘:


6、最后一步就是安装和完成了。如图:


完成效果:


安装完成后,在cmd窗口下执行 node -v 命令,看到版本信息,则说明安装成功:


参考链接:https://www.cnblogs.com/zhouyu2017/p/6485265.html

第二步:配置淘宝npm镜像

由于需要通过npm下载各种模块,默认npm是从国处服务器下载,对于网络条件一般的用户可能很难下载成功,所以需要配置成淘宝的镜像。

打开命令行,输入:npm config set registry https://registry.npm.taobao.org

以后下载模块会自动从淘宝地址进行下载。

第三步:安装webpack

打开命令行,输入npm install webpack -g。安装完成后输入webpack -v,如果显示版本号,则说明安装成功。

第四步:安装vue-cli

打开命令行,输入npm install vue-cli -g。安装完成后输入vue -V查看版本事情,现在应该是三点几的版本了,不过我的项目是用的2.9.6版本。

第五步:通过vue-cli初始化项目

打开命令行,进入指定的目录,输入vue init webpack 项目名,确认创建项目后,后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等,详见上图。安装顺利执行后会,生成如下文件目录。


如果不是很习惯ESLint规范代码,建议新手选择No,如果你的编辑器安装了ESLint插件,但你的代码写的又不规范,所以会一直报错,尽管不影响项目的运行,但还是会一直出现讨厌的红色。

前面简单的介绍了怎么搭建Vue项目以及Node环境,下面切入正题:

先说一下三零九在线药品销售系统    前台的项目配置信息,跟上图所示的其实也差不多吧,只是文件夹下的没再依次展示了。

|-- build // 项目构建(webpack)相关代码

| |-- build.js // 生产环境构建代码

| |-- check-version.js // 检查node、npm等版本

| |-- utils.js // 构建工具相关

| |-- webpack.base.conf.js // webpack基础配置

| |-- webpack.dev.conf.js // webpack开发环境配置

| |-- webpack.prod.conf.js // webpack生产环境配置

|-- config // 项目开发环境配置

| |-- dev.env.js // 开发环境变量

| |-- index.js // 项目一些配置变量

| |-- prod.env.js // 生产环境变量

|-- src // 源码目录

| |-- assets // 图片样式文件

| |-- components // vue公共组件

| |-- pages // 页面 (里面有很多页面,就不依次详细展开了)

| |-- router // 路由文件

| |-- store // vuex的状态管理

| |-- util // 公共js文件

| |-- App.vue // 页面入口文件

| |-- main.js // 程序入口文件,加载各种公共组件

|-- static // 静态文件,比如一些图片,json数据等

|-- .babelrc // ES6语法编译配置

|-- .editorconfig // 定义代码格式

|-- .gitignore // git上传需要忽略的文件格式

|-- README.md // 项目说明

|-- favicon.ico // logo图标

|-- index.html // 入口页面

|-- package.json // 项目基本信息

他主要用到的技术有(Vue+Vuex+Vue-router+Axios+Mint-ui+Element-ui+Webpack)等等。

还是先看一下Mobile端的演示效果吧:









只列出了部分功能,像九九包邮,健康资讯,当季必备,关于我们等等没有列出来。像购物车动画,同步刷新购物车中商品数量,以及实时刷新个人中心各个订单状态的数量。其中弹出框主要是用的Mint-ui中的Message和饿了么组件的MessqgeBox和alert框。

入口文件main.js部分代码:



其中基于ES6中的Promise的HTTP库的Axios,关于它的响应拦截请求,以及各种请求方法  请 查看它的官方社区Api中文文档,地址如下:https://www.kancloud.cn/yunye/axios/234845

再来看一下三零九在线药品销售系统    后台的项目配置信息,其实跟前台的目录结构差不多,毕竟都是用Vue-cli脚手架生成的。

后台管理系统主要用到Vue+Vuex+Vue-router+AxiosElement-ui+Webpack技术等等。

|-- build // 项目构建(webpack)相关代码

| |-- build.js // 生产环境构建代码

| |-- check-version.js // 检查node、npm等版本

| |-- utils.js // 构建工具相关

| |-- webpack.base.conf.js // webpack基础配置

| |-- webpack.dev.conf.js // webpack开发环境配置

| |-- webpack.prod.conf.js // webpack生产环境配置

|-- config // 项目开发环境配置

| |-- dev.env.js // 开发环境变量

| |-- index.js // 项目一些配置变量

| |-- prod.env.js // 生产环境变量

|-- src // 源码目录

| |-- assets // 图片样式文件

| |-- components // vue公共组件

| |-- pages // 页面 (里面有很多页面,就不依次详细展开了)

| |-- router // 路由文件

| |-- store // vuex的状态管理

| |-- util // 公共js文件

| |-- App.vue // 页面入口文件

| |-- main.js // 程序入口文件,加载各种公共组件

|-- static // 静态文件,比如一些图片,json数据等

|-- .babelrc // ES6语法编译配置

|-- .editorconfig // 定义代码格式

|-- .gitignore // git上传需要忽略的文件格式

|-- README.md // 项目说明

|-- favicon.ico // logo图标

|-- index.html // 入口页面

|-- package.json // 项目基本信息

前后台 都有用到  缓解首屏加载时间过长的一个 过度 页面(可以这么说吧,其实就是怕一次性加载的数据过大导致白屏时间太长),效果如下:


只是在index.html根页面下加了如下代码:

              三零九笙尘药膳坊后台管理系统            html,

    body,

    #app {

      height: 100%;

      margin: 0px;

      padding: 0px;

    }

    .chromeframe {

      margin: 0.2em0;

      background: #ccc;

      color: #000;

      padding: 0.2em0;

    }

    #loader-wrapper {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      z-index:999999;

    }

    #loader {

      display: block;

      position: relative;

      left: 50%;

      top: 50%;

      width: 150px;

      height: 150px;

      margin: -75px00-75px;

      border-radius:50%;

      border: 3px solid transparent;

      /* COLOR 1 */      border-top-color: #FFF;

      -webkit-animation: spin 2s linear infinite;

      /* Chrome, Opera 15+, Safari 5+ */-ms-animation: spin 2s linear infinite;

      /* Chrome, Opera 15+, Safari 5+ */-moz-animation: spin 2s linear infinite;

      /* Chrome, Opera 15+, Safari 5+ */-o-animation: spin 2s linear infinite;

      /* Chrome, Opera 15+, Safari 5+ */      animation: spin 2s linear infinite;

      /* Chrome, Firefox 16+, IE 10+, Opera */      z-index:1001;

    }

    #loader:before {

      content: "";

      position: absolute;

      top: 5px;

      left: 5px;

      right: 5px;

      bottom: 5px;

      border-radius:50%;

      border: 3px solid transparent;

      /* COLOR 2 */      border-top-color: #FFF;

      -webkit-animation: spin 3s linear infinite;

      /* Chrome, Opera 15+, Safari 5+ */-moz-animation: spin 3s linear infinite;

      /* Chrome, Opera 15+, Safari 5+ */-o-animation: spin 3s linear infinite;

      /* Chrome, Opera 15+, Safari 5+ */-ms-animation: spin 3s linear infinite;

      /* Chrome, Opera 15+, Safari 5+ */      animation: spin 3s linear infinite;

      /* Chrome, Firefox 16+, IE 10+, Opera */    }

    #loader:after {

      content: "";

      position: absolute;

      top: 15px;

      left: 15px;

      right: 15px;

      bottom: 15px;

      border-radius:50%;

      border: 3px solid transparent;

      border-top-color: #FFF;

      /* COLOR 3 */-moz-animation: spin1.5s linear infinite;

      /* Chrome, Opera 15+, Safari 5+ */-o-animation: spin1.5s linear infinite;

      /* Chrome, Opera 15+, Safari 5+ */-ms-animation: spin1.5s linear infinite;

      /* Chrome, Opera 15+, Safari 5+ */-webkit-animation: spin1.5s linear infinite;

      /* Chrome, Opera 15+, Safari 5+ */      animation: spin 1.5s linear infinite;

      /* Chrome, Firefox 16+, IE 10+, Opera */    }

    @-webkit-keyframes spin {

      0% {

        -webkit-transform: rotate(0deg);

        /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(0deg);

        /* IE 9 */        transform: rotate(0deg);

        /* Firefox 16+, IE 10+, Opera */      }

      100% {

        -webkit-transform: rotate(360deg);

        /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(360deg);

        /* IE 9 */        transform: rotate(360deg);

        /* Firefox 16+, IE 10+, Opera */      }

    }

    @keyframes spin {

      0% {

        -webkit-transform: rotate(0deg);

        /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(0deg);

        /* IE 9 */        transform: rotate(0deg);

        /* Firefox 16+, IE 10+, Opera */      }

      100% {

        -webkit-transform: rotate(360deg);

        /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(360deg);

        /* IE 9 */        transform: rotate(360deg);

        /* Firefox 16+, IE 10+, Opera */      }

    }

    #loader-wrapper .loader-section {

      position: fixed;

      top: 0;

      width: 51%;

      height: 100%;

      background: #7171C6;

      /* Old browsers */      z-index:1000;

      -webkit-transform: translateX(0);

      /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: translateX(0);

      /* IE 9 */      transform: translateX(0);

      /* Firefox 16+, IE 10+, Opera */    }

    #loader-wrapper .loader-section.section-left {

      left: 0;

    }

    #loader-wrapper .loader-section.section-right {

      right: 0;

    }

    /* Loaded */    .loaded #loader-wrapper .loader-section.section-left {

      -webkit-transform: translateX(-100%);

      /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: translateX(-100%);

      /* IE 9 */      transform: translateX(-100%);

      /* Firefox 16+, IE 10+, Opera */-webkit-transition: all0.7s0.3s cubic-bezier(0.645,0.045,0.355,1.000);

      transition: all 0.7s0.3s cubic-bezier(0.645,0.045,0.355,1.000);

    }

    .loaded #loader-wrapper .loader-section.section-right {

      -webkit-transform: translateX(100%);

      /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: translateX(100%);

      /* IE 9 */      transform: translateX(100%);

      /* Firefox 16+, IE 10+, Opera */-webkit-transition: all0.7s0.3s cubic-bezier(0.645,0.045,0.355,1.000);

      transition: all 0.7s0.3s cubic-bezier(0.645,0.045,0.355,1.000);

    }

    .loaded #loader {

      opacity: 0;

      -webkit-transition: all0.3s ease-out;

      transition: all 0.3s ease-out;

    }

    .loaded #loader-wrapper {

      visibility: hidden;

      -webkit-transform: translateY(-100%);

      /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: translateY(-100%);

      /* IE 9 */      transform: translateY(-100%);

      /* Firefox 16+, IE 10+, Opera */-webkit-transition: all0.3s 1s ease-out;

      transition: all 0.3s 1s ease-out;

    }

    /* JavaScript Turned Off */    .no-js #loader-wrapper {

      display: none;

    }

    .no-js h1 {

      color: #222222;

    }

    #loader-wrapper .load_title {

      font-family:'Open Sans';

      color: #FFF;

      font-size: 19px;

      width: 100%;

      text-align: center;

      z-index:9999999999999;

      position: absolute;

      top: 60%;

      opacity: 1;

      line-height: 30px;

    }

    #loader-wrapper .load_title span {

      font-weight: normal;

      font-style: italic;

      font-size: 13px;

      color: #FFF;

      opacity: 0.5;

    }



     

     


      正在加载309-admin,请耐心等待

       
        master-tzy             

然后看一下后台管理系统的效果图吧!!!!!!❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤

登录页面如下:


运行Mobile端的商城和PC端的管理系统时,前提必须是先打开Node+express的本地服务器(后面会说到),不然会报以下错误:


首页效果如下:

首页布局其实也是参考了饿了么的Contain布局吧,但又不全是,所以我没有加动态的Tag标签页了,其实也可以实现吧,不过自己用的面包屑也凑合着吧,就懒得换了,当时答辩的前一天晚上,同组的Mr Yang都把代码发给我了,我也没来得及去加,因为当时要加的功能真的还有几个,比如后台没有考虑周到的大多是没有对数据进行查询,还有对订单没有进行分页,以及订单的按时间查找等等。后来肝到凌晨2点多实在不行了,所以一直没有将面包屑换掉,所以也凑合着用吧。

在这里再链接一个专门用到了饿了么组件中的Tag的动态标签页的小例子吧,虽然很简单,但还是根据自身需要来决定是否要用到Tag标签页吧。

链接地址 :https://github.com/tzy13755126023/Vue-elementui-demo-Tag


这里用到了视图化数据的Echarts中的柱形图和折线图来展示数据,关于Echarts怎么使用这里 也不做详细介绍了吧,直接把官方Api文档地址放这里了,地址如下: https://www.echartsjs.com/api.html#echarts。请自行查看。

我只贴出关于Echarts组件的部分代码。

        // 引入 ECharts 主模块varecharts = require('echarts/lib/echarts');// 引入柱状图require('echarts/lib/chart/bar');

require("echarts/lib/component/dataset");// 引入提示框和标题组件require('echarts/lib/component/tooltip');

require('echarts/lib/component/title');

require("echarts/lib/component/legendScroll");

require("echarts/lib/component/axisPointer");

require("echarts/lib/component/markLine");

export default{

  name:'Echarts1',

  data(){

        return{

        }

  },

  mounted(){

      varmyChart = echarts.init(document.querySelector('.ECharts1'))

      myChart.setOption({

        title: {

          text: '2018-2019年各类药物月交易额',

          textStyle:{                  //文字样式color:'#000',//颜色fontWeight:700,//粗细fontSize:30,             

            // textBorderColor:'black',  //文字本身的描边颜色。textShadowColor:'rgba(255,0,0,.2)',//文字本身的阴影颜色。

            // textShadowBlur :5,      //文字本身的阴影长度。

            // textShadowOffsetX:8,    //文字本身的阴影 X 偏移。

            // textShadowOffsetY:5,      //文字本身的阴影 Y 偏移。          }

        },

        tooltip : {                //提示框组件。trigger:'axis',//触发类型。

          // 可选: 'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。

          //        'axis'  坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。axisPointer : {// 坐标轴指示器,坐标轴触发有效type :'shadow'// 默认为直线,可选为:'line' | 'shadow'        }

    },

    legend: {  //  图例组件data:['中西药品','养生保健','医疗器械','计生用品','中药饮品','美容护肤'],

        right:25,

        top:70,

        // orient:'vertica'  图例列表的布局朝向。可选:'horizontal'    'vertical'itemWidth:30,// 图例的宽度itemHeight:20,// 图例的高度        textStyle:{

          fontSize:16        }

    },

    grid: {    //  直角坐标系内绘图网格top:150, 

        left: '3%',

        right: '4.5%',

        bottom: '3%',

        containLabel: true    },

    xAxis : [    // grid 中的 x 轴        { 

            type : 'category',//类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据            data : [

            {

                value: '2018年11月',

                textStyle: {

                    fontSize: 16,

                }

            },

            {

                value: '2018年12月',

                textStyle: {

                    fontSize: 16,

                }

            },

            {

                value: '2019年1月',

                textStyle: {

                    fontSize: 16,

                }

            },

            {

                value: '2019年2月',

                textStyle: {

                    fontSize: 16,

                }

            },

            {

                value: '2019年3月',

                textStyle: {

                    fontSize: 16,

                }

            },

            {

                value: '2019年4月',

                textStyle: {

                    fontSize: 16,

                }

            },

            {

                value: '2019年5月',

                textStyle: {

                    fontSize: 16,

                }

            },]

        }

    ],

    yAxis : [    // grid 中的 Y 轴        {

            name:'单位(千元)',

            // categorytype :'value',

            nameTextStyle:{

                fontSize: 16,

            }

        },

    ],

    series : [

        {

            name:'中西药品',

            type:'bar',

            data:[260,332,301,334,390,330,320]

        },

        {

            name:'养生保健',

            type:'bar',

            stack: '广告',

            data:[120,132,101,134,90,230,210]

        },

        {

            name:'医疗器械',

            type:'bar',

            stack: '广告',

            data:[220,182,191,234,290,330,310]

        },

        {

            name:'计生用品',

            type:'bar',

            stack: '广告',

            data:[150,232,201,154,190,330,410],

        },

        {

            name:'中药饮品',

            type:'bar',

            data:[862,1018,964,1026,1679,1600,1570],

            markLine : {

                lineStyle: {

                    normal: {

                        type: 'dashed'                    }

                },

                data : [

                    [{type : 'min'}, {type :'max'}]

                ]

            }

        },

        {

            name:'美容护肤',

            type:'bar',

            barWidth : 5,

            stack: '中药饮品',

            data:[620,732,701,734,1090,1130,1120],

            markLine : {

                lineStyle: {

                    normal: {

                        type: 'dashed'                    }

                },

                data : [

                    [{type : 'min'}, {type :'max'}]

                ]

            }

        },

    ]

    });

    },

}.ECharts1{

  margin:2%0;

  width: 50%;

  height: 600px;

  float: left;

  /*background-color: red;*/}


平台用户管理效果如下:


模糊查询是当时在老师指出后临时加的。效果如下:


这里的输入框中数据发生变化,则会自动更新获取的数据,每次都会进行分页,分页有两种形式,一种是后台进行分页再传到前台,一种是后台传过来所有的数据交给前台去进行分页,这里用的是第一种,所以配合饿了么组件的Pagination,当时自己觉得写得麻烦,pagination中的total总数和分页加载的数据每次都要请求两次,所以如果用第二种方法进行分页的话,则只需请求一次就可以将数据分页展示出来了。(当时自己也没考虑这么多吧,后期可能会进行改进。)

查看待审核商家(这里说明一下,因为Mobile端没有贴申请商家入驻的图,所以这里的待审核的商家数实际上是用户提交的申请数):


查看已审核商家(通过审核的,可以查看当前商家所有上架的商品,以及发布新的商品):


查看唐志远大药房商家的所有上架的商品:


发布新的商品:


查看用户反馈消息(用户提交的反馈信息将在这个模块中展示):


订单管理(二级路由,默认跳转到的是商家代发货页面,并展示当前待发货的数据):


查看健康资讯文章(点进去可以看到详细内容):


发布健康资讯(后台发布的健康资讯,会在Mobile端展示出来,展示给用户看):


当季必备:



查看登录日志:


关于后台管理这块,权限方面没有做完,因为预想是后台设计两个角色,一个管理员身份,另一个则是商家的身份,虽然大同小异,但是实际上获取的菜单项却差别很大,商家则只能获取三个,第一,自身的商家信息管理,第二,该商家的订单管理,在你家买的东西肯定要你来完成发货了(如果是代理的话,当然可以不用自己发货,我们组另外一个同学Ms yong 就是做的跟代理有关的,用户即代理其实也没错,符合当下的这种微商模式),第三就是对自己店内的商品进行管理了。这里只写了admin管理员的身份,暂时没有写商家的身份,后期有时间可能会完善。

最后一个就是服务器项目了,用Node+Express+mysql搭的本地服务器。

Express是Node.js上最流行的Web开发框架,我们可以通过应用生成器工具快速创建一个应用的骨架。

先去了解node下express初始化项目骨架的知识,算了在这里写一下吧,写在这里总觉得会好一点(图片用的CSDN的,我没有自己在建项目了~~~~~)。

参考链接:http://www.expressjs.com.cn/starter/generator.html

$ npm install express-generator -g      全局安装 express-generator


在当前目录下创建一个命名为myapp的应用(express  你的项目名)

注意:这里express myapp命令默认会使用jade模板引擎,建议使用ejs模板引擎,则应将命令改为express -e myapp


然后进入到你创建的项目目录下,安装所有依赖包


启动这个应用(Windows平台)


然后在浏览器输入localhost:3000/网址就可以看到这个应用了

通过Express应用生成器创建的应用一般具有如下的目录结构


解释:

app.js                        启动文件,入口文件

package.json        存储工程的信息及模块依赖,当添加依赖模块时,运行npm install,npm会检查当前目录下的package.json,并自动安装所有指定的模块

node_modules      存放package.json中安装的模块

public                      存放image、css、js文件

routes                    存放路由文件

views                      存放视图文件,或者说是模板文件

bin                          存放可执行文件

当然本项目中多了两个Floder,一个是MySQL,其中放了sql脚本,还有mysqlConfig数据库配置信息等等。

另一个是Api ,其中是关于Client和Admin的 Api接口方法。

服务器项目目录如下图所示:


部分Sql脚本如下所示:


309药膳坊-Mobile商城              项目地址:https://github.com/tzy13755126023/309-Client

309药膳坊-Admin后台管理      项目地址:https://github.com/tzy13755126023/309-Admin

309药膳坊-Server服务器端      项目地址:https://github.com/tzy13755126023/309-server

Clone到本地后,走下面这个流程吧!!

npm install(npm网速可能比较慢,建议安装淘宝镜像cnpm install)

安装所有的包之后呢,就npm start吧,或者npm run dev 都可以,这个在package.json中的script可以自行设置。但是如果改动了config目录下的配置文件,比如进行代理跨域,或者改变运行端口,则需要重新启动项目。

在运行309药膳坊-Mobile商城 和309药膳坊-Admin后台管理 之前,记得先打开本地服务器。 

数据库数据就不放出来了,如果需要数据。

欢迎Star  ❤

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容