• 核心技术

1.里面是两个ajax请求，获得内容和获得图片
2.获得url里面的id参数this.imgid = this.$route.params.imgid;，可以直接拿过来用,这个还可以通过props传递给子组件
3.中间图片实现点击某张图片的时候预览它（vue-preview）
 重点学习的是：vue-preview组件的使用(https://github.com/LS1231/vue-preview)
    使用的要求：
    1、要求我们将vue-preview组件特殊的扩展名配置到webpack.config.js中利用bable去解析es6语法
    {
        test: /vue-preview.src.*?js$/,
        loader: 'babel'
    }    
    2、这个组件中使用了 svg这种文件，那么在build/webpack.config.js中
    的url-loader配置位置，要在test后面的正则表达式中，增加svg的扩展名
    3、img标签上的class不能去掉
    4、插件目前仅支持vue2.0以上版本
    步骤：
    1、安装 vue-preview   npm i vue-preview --save
    2、在api请求回来的数据基础上，增加 h,w 属性
        item.w=300;
        item.h=300;
    3、在 img标签上
        ![](thumimg.src)
        v-for="(thumimg,index) in thums" ,遍历的时候要加上index
        其中$preview 对象就是打开预览的组件对象
        并且open方法的两个参数的意义：
        1、index：当前图片的索引
        2、thums：表示要预览的图片数组
4.在 imageshow.vue 要使用comment.vue组件步骤：
    1、导入comment.vue组件
    2、在imageshow.vue VM对象中增加components:{comment}
    3、在imageshow.vue 的template中使用<comment artid="?"></comment>

• imgshow组件

<template>  
    <div class="tmpl">
        <!-- 1.0 实现标题 -->
        <div class="twarp">
            <h2 v-text="imgInfo.title"></h2>
            <span class="desc">
                {{imgInfo.add_time  | datefmt}}  
                {{imgInfo.click}}次浏览
                 分类:民生
            </span>
        </div>

        <!-- 2.0 9宫格缩略图 -->
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li v-for="(thumimg,index) in thums" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a>
                    ![](thumimg.src)
                   </a>
               </li>
                
            </ul> 
        </div>

        <!-- 3.0 图片详情 -->
        <div class="content" v-html="imgInfo.content"></div>

        <!-- 4.0 评论组件 -->
        <comment :artid="imgid"></comment>
    </div>
</template>
<script>
import common from '../../kits/common.js'
import comment from '../subcom/comment.vue'
    export default{
        components:{comment},
        data(){
            return {
                imgInfo:{},
                imgid:0,
                thums:[]
            }
        },
        methods:{
            getimgInfo(){
                var url = common.apiDomain+'/api/getimageInfo/'+this.imgid;

                this.$http.get(url).then(res=>{
                    this.imgInfo = res.body.message[0];
                });
            },
            getthums(){
                var url = common.apiDomain+'/api/getthumimages/'+this.imgid;
                // http://ofv795nmp.bkt.clouddn.com//upload/201504/18/thumb_201504181230437111.jpg
                
                this.$http.get(url).then(res=>{
                    // 注意点：由于服务器返回的src属性中的值是一个图片的路径，所以要添加上图片的域名
                     res.body.message.forEach(item=>{
                        item.src = common.imgDomain + item.src;
                        item.w=300;
                        item.h=300;
                     });

                    this.thums = res.body.message;
                });
            }
        },
        created(){
            this.imgid = this.$route.params.imgid;

            this.getimgInfo();
            this.getthums();
        }
    }
</script>
<style scoped>
    .twarp h2{
        color:#0094ff;
        font-size:16px;
    }
    .twarp .desc{
        color:rgba(0,0,0,0.4);
        
    }
    .twarp{
        padding:10px;
        border-bottom: 1px solid rgba(0,0,0,0.4); 
    }
    .content{
        padding:5px;
    }
    .mui-icon-home:before,
.mui-icon-email:before,
.mui-icon-chatbubble:before,
.mui-icon-location:before,
.mui-icon-search:before,
.mui-icon-phone:before{
    content: ''
}
.mui-content ul{
        background-color: #fff;
    }
    .preview-img{
        height: 100px;
        width: 100px;
    }
</style>