基於Vue的WebApp項目開發（五）

本文轉載自查看原文 2017-12-25 10:30 2124 vue.js

實現圖片分享列表

步驟一：新增圖片列表文件photolist.vue

<template>
  <div id="tml">
    圖片分享頁面
  </div>
</template>

<script>
</script>

<style>

</style>

View Code

步驟二：配置入口文件main.js的路由規則

//導入vue核心包
import Vue from 'vue';

//導入vue-router
import vueRouter from 'vue-router';
//將vueRouter對象綁定到Vue對象上
Vue.use(vueRouter);

//將vue-resource在vue中綁定，自動在vue對象實例上注入一個$http對象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//導入App.vue的vue對象
import App from './App.vue';

//導入路由規則對應的組件對象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import news from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';

//定義路由規則
var router1 = new vueRouter({
  //改變路由激活時的class名稱
  linkActiveClass: 'mui-active',
  routes: [{
      path: '/',
      component: home
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    }, {
      path: '/news/newlist',
      component: news
    },{
      path: '/news/newsinfo/:id',
      component: newsinfo
    },{
      path: '/photo/photolist',
      component: photolist
    }
  ]
});

//導入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//導入mint-ui組件對象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注冊mui的css樣式
import '../statics/mui/css/mui.css';

//導入一個當前系統的全局基本樣式
import '../statics/css/site.css';

//定義一個全局過濾器實現日期的格式化
import moment from 'moment';
Vue.filter('datefmt',function(input,fmtstring){
    //使用momentjs這個日期格式化類庫實現日期的格式化功能
    //input代表左值（原始時間格式），fmtstring代表右值括號內的規則
    return moment(input).format(fmtstring);
});

//利用Vue對象進行解析渲染
new Vue({
  el: '#app',
  //使用路由對象實例
  router: router1,
  render: c => c(App)
})

View Code

實現圖片分類樣式

步驟一：創建phototitle.json文件，存儲相關數據信息

{
  "status": 0,
  "message": [
    {
      "title": "火影忍者",
      "id": 1
    }, {
      "title": "海賊王",
      "id": 2
    }, {
      "title": "犬夜叉",
      "id": 3
    }, {
      "title": "進擊的巨人",
      "id": 4
    }, {
      "title": "全職獵人",
      "id": 5
    }, {
      "title": "光能使者",
      "id": 6
    }, {
      "title": "哆啦A夢",
      "id": 7
    }
  ]
}

View Code

步驟二：修改photolist.vue文件

<template>
  <div id="tml">
    <!--圖片分類-->
    <div id="cate">
      <ul v-bind="{style:'width:'+ulWidth+'px'}">
        <li>全部</li>
        <li v-for="item in cates">{{item.title}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        ulWidth: 320,
        cates: []
      }
    },
    created() {
      this.getcates();
    },
    methods: {
      getcates() {
        //1.0確定url
        var url = '../../../statics/json/phototitle.json';
        // 2.0調用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0獲取響應報文體數據
          var data = response.body;
          //4.0判斷響應報文體中的狀態值
          //如果非0,則將服務器響應回來的錯誤消息提示給用戶
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服務器返回數據正常，則賦值給list
          this.cates = data.message;
          //6.0實現當前分類數據所在的ul的總寬度
          var w = 62;
          var count = data.message.length + 1;
          this.ulWidth = w * count;
        })
      }
    }
  }
</script>

<style>
  /*圖片分類*/  
  #cate {
    width: 375px;
    max-width: 375px;
    overflow-x: auto;
  }
  #cate ul {
    margin: 0px;
    padding-left: 10px;
  }
  #cate li {
    list-style: none;
    display: inline-block;
    color: #0094FF;
    font-size: 14px;
    padding-left: 6px;
  }
</style>

View Code

項目結構：

使用mint-ui實現圖片的懶加載

步驟一：創建photolist.json文件,存儲相關信息

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "《海賊王》",
      "img_url": "../../statics/imgs/photo/photo01.jpg",
      "zhaiyao": "該動漫是日本漫畫家尾田榮一郎作畫的少年漫畫作品，在\"周刊少年Jump\"1997年34號開始連載。"
    }, {
      "id": 2,
      "title": "《火影忍者》",
      "img_url": "../../statics/imgs/photo/photo02.jpg",
      "zhaiyao": "該動漫是日本漫畫家岸本齊史的代表作，作品於1999年開始在《周刊少年JUMP》上連載。"
    }, {
      "id": 3,
      "title": "《全職獵人》",
      "img_url": "../../statics/imgs/photo/photo03.jpg",
      "zhaiyao": "該動漫是日本漫畫家富堅義博的一部漫畫作品。作於1998年起在日本漫畫雜志\"周刊少年Jump\"不定期連載."
    }, {
      "id": 4,
      "title": "《犬夜叉》",
      "img_url": "../../statics/imgs/photo/photo04.jpg",
      "zhaiyao": "該動漫是日本漫畫家高橋留美子於1996年開始在\"周刊少年Sunday\"雜志上連載，以描寫戰國童話故事為題材的長篇漫畫"
    }, {
      "id": 5,
      "title": "《進擊的巨人》",
      "img_url": "../../statics/imgs/photo/photo05.jpg",
      "zhaiyao": "該動漫是日本漫畫家諫山創創作的少年漫畫作品，於2009年在講談社旗下的漫畫雜志\"別冊少年Magazine\"上開始連載。"
    }
  ]
}

View Code

步驟二：修改photolist.vue文件

<template>
  <div id="tml">
    <!--圖片分類-->
    <div id="cate">
      <ul v-bind="{style:'width:'+ulWidth+'px'}">
        <li>全部</li>
        <li v-for="item in cates">{{item.title}}</li>
      </ul>
    </div>

    <!--圖片列表 利用mint-ui框架實現懶加載-->
    <div id="imglist">
      <ul>
        <li v-for="item in list">
          <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
            <img v-lazy="item.img_url">
            <div id="desc">
              <h5 v-text="item.title"></h5>
              <p v-text="item.zhaiyao"></p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        ulWidth: 320,
        cates: [],
        list: []
      }
    },
    created() {
      this.getcates();
      this.getimages();
    },
    methods: {
      getimages() {
        //1.0確定url
        var url = '../../../statics/json/photolist.json';
        // 2.0調用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0獲取響應報文體數據
          var data = response.body;
          //4.0判斷響應報文體中的狀態值
          //如果非0,則將服務器響應回來的錯誤消息提示給用戶
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服務器返回數據正常，則賦值給list
          this.list = data.message;
        })
      },
      getcates() {
        //1.0確定url
        var url = '../../../statics/json/phototitle.json';
        // 2.0調用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0獲取響應報文體數據
          var data = response.body;
          //4.0判斷響應報文體中的狀態值
          //如果非0,則將服務器響應回來的錯誤消息提示給用戶
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服務器返回數據正常，則賦值給list
          this.cates = data.message;
          //6.0實現當前分類數據所在的ul的總寬度
          var w = 62;
          var count = data.message.length + 1;
          this.ulWidth = w * count;
        })
      }
    }
  }
</script>

<style>
  /*圖片分類*/ 
  #cate {
    width: 375px;
    max-width: 375px;
    overflow-x: auto;
  }
  #cate ul {
    margin: 0px;
    padding-left: 10px;
  }
  #cate li {
    list-style: none;
    display: inline-block;
    color: #0094FF;
    font-size: 14px;
    padding-left: 6px;
  }
  /*實現圖片列表樣式*/  
  #imglist {}
  #imglist ul {
    padding: 0;
  }
  #imglist li {
    list-style: none;
    position: relative;
  }
  #imglist img {
    width: 100%;
    height: 200px;
  }
  #desc {
    width: 100%;
    height: auto;
    background-color: #272020;
    opacity: 0.6;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #desc h5 {
    color: #F0F0F0;
    font-weight: bold;
  }
  #desc p {
    color: #fff;
  }
</style>

View Code

增加圖片的詳情頁

步驟一：創建photoinfo.json文件

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "海賊王",
      "click": 13,
      "add_time": "2017-12-25",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;擁有財富、名聲、權力，這世界上的一切的男人 “海賊王”哥爾·D·羅傑，在被行刑受死之前說了一句話，讓全世界的人都涌向了大海。“想要我的寶藏嗎？如果想要的話，那就到海上去找吧，我全部都放在那里。”，世界開始迎接“大海賊時代”的來臨。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;時值“大海賊時代”，為了尋找傳說中海賊王羅傑所留下的大秘寶“ONE PIECE”，無數海賊揚起旗幟，互相爭斗。有一個夢想成為海盜的少年叫路飛，他因誤食“惡魔果實”而成為了橡皮人，在獲得超人能力的同時付出了一輩子無法游泳的代價。十年后，路飛為實現與因救他而斷臂的香克斯的約定而出海，他在旅途中不斷尋找志同道合的伙伴，開始了以成為海賊王為目標的偉大的冒險旅程。"
    }, {
      "id": 2,
      "title": "火影忍者",
      "click": 33,
      "add_time": "2017-12-15",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;作品設定在一個忍者的世界，故事從主人公漩渦鳴人的孤兒生活開始，四代火影為了保護村子，將攻擊村子九尾妖狐封印到了他體內，鳴人因此受盡了村人的冷落，只是拼命用各種惡作劇試圖吸引大家的注意力。好在還是有伊魯卡老師的關心，鳴人的性格才沒有變得扭曲，他總是干勁十足、非常樂觀。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;為了讓更多的人認可自己，鳴人的目標是成為火影。整個故事就圍繞鳴人的奮斗、成長，鳴人的伙伴們，以及這個忍者世界的各種爭斗和陰謀展開。"
    }, {
      "id": 3,
      "title": "全職獵人",
      "click": 23,
      "add_time": "2017-10-18",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;主人公傑·富力士從小在鯨魚島長大，與米特阿姨和阿婆相依為伴。性格開朗的他，有着能與動物溝通的靈性。因為無父無母，傑將米特阿姨當成自己的生母愛着。直到9歲那一年，傑在森林里被一位青年男子搭救。從他口中傑得知自己的父親還活着而且職業是獵人。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;在說服米特阿姨之后，傑獨自踏上了尋父的征程。於是，傑決定成為獵人，從這里開始找尋他父親的蹤跡。靠這樣一種信念開始了冒險旅途，並在旅途當中結交好友，不斷成長，從而引發了后面的所有故事，引出獵人的精彩世界。"
    }, {
      "id": 4,
      "title": "犬夜叉",
      "click": 44,
      "add_time": "2017-10-10",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;大妖怪犬大將斗牙王與人類公主十六夜的兒子---犬夜叉，因為自己半妖的身份受到人類與妖怪的排斥，為了成為真正的妖怪而想得到四魂之玉；而巫女桔梗為了保護和凈化四魂之玉，運用靈力不斷與前來搶奪四魂之玉的妖怪戰斗而犬夜叉也看到了渴望過平凡生活的巫女桔梗。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;在不斷的相互了解中，兩人相愛了，並最終約定利用四魂之玉的力量，把犬夜叉變成人類，守護使命結束的桔梗也可以回歸到平凡生活。但是，在約定的日子里，發生了難以預料的變故。被假犬夜叉襲擊而受到重傷的桔梗在背叛的憤怒中，用盡力氣把犬夜叉封印在御神木上，然后帶着四魂之玉在火焰中死去。悲劇就此拉開序幕……"
    }, {
      "id": 5,
      "title": "進擊的巨人",
      "click": 44,
      "add_time": "2017-04-18",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;107年前（743年），世界上突然出現了人類的天敵“巨人”。面臨着生存危機而殘存下來的人類逃到了一個地方，蓋起了三重巨大的城牆。人們在這隔絕的環境里享受了一百多年的和平，直到艾倫·耶格爾十歲那年，60米高的“超大型巨人”突然出現，以壓倒性的力量破壞城門，其后瞬間消失，凶殘的巨人們成群的沖進牆內捕食人類。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;艾倫親眼看着人們以及自己的母親被巨人吞食，懷着對巨人無法形容的憎恨和痛恨，誓言殺死所有巨人。城牆崩壞的兩年后，艾倫加入104期訓練兵團學習和巨人戰斗的技術。在訓練兵團的三年，艾倫在同期訓練兵里有着其他人無法比擬的強悍精神力。即使親眼見過地獄也依然勇敢地向巨人挑戰的艾倫，如願以償加入了向往已久的調查兵團。"
    }
  ]
}

View Code

步驟二：修改photolist.vue

<template>
  <div id="tml">
    <!--圖片分類-->
    <div id="cate">
      <ul v-bind="{style:'width:'+ulWidth+'px'}">
        <li>全部</li>
        <li v-for="item in cates">{{item.title}}</li>
      </ul>
    </div>

    <!--圖片列表 利用mint-ui框架實現懶加載-->
    <div id="imglist">
      <ul>
        <li v-for="item in list">
          <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
            <img v-lazy="item.img_url">
            <div id="desc">
              <h5 v-text="item.title"></h5>
              <p v-text="item.zhaiyao"></p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        ulWidth: 320,
        cates: [],
        list: []
      }
    },
    created() {
      this.getcates();
      this.getimages();
    },
    methods: {
      getimages() {
        //1.0確定url
        var url = '../../../statics/json/photolist.json';
        // 2.0調用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0獲取響應報文體數據
          var data = response.body;
          //4.0判斷響應報文體中的狀態值
          //如果非0,則將服務器響應回來的錯誤消息提示給用戶
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服務器返回數據正常，則賦值給list
          this.list = data.message;
        })
      },
      getcates() {
        //1.0確定url
        var url = '../../../statics/json/phototitle.json';
        // 2.0調用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0獲取響應報文體數據
          var data = response.body;
          //4.0判斷響應報文體中的狀態值
          //如果非0,則將服務器響應回來的錯誤消息提示給用戶
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服務器返回數據正常，則賦值給list
          this.cates = data.message;
          //6.0實現當前分類數據所在的ul的總寬度
          var w = 62;
          var count = data.message.length + 1;
          this.ulWidth = w * count;
        })
      }
    }
  }
</script>

<style scoped>
  /*圖片分類*/ 
  #cate {
    width: 375px;
    max-width: 375px;
    overflow-x: auto;
  }
  #cate ul {
    margin: 0px;
    padding-left: 10px;
  }
  #cate li {
    list-style: none;
    display: inline-block;
    color: #0094FF;
    font-size: 14px;
    padding-left: 6px;
  }
  /*實現圖片列表樣式*/  
  #imglist {}
  #imglist ul {
    padding: 0;
  }
  #imglist li {
    list-style: none;
    position: relative;
  }
  #imglist img {
    width: 100%;
    height: 200px;
  }
  #desc {
    width: 100%;
    height: auto;
    background-color: #272020;
    opacity: 0.6;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #desc h5 {
    color: #F0F0F0;
    font-weight: bold;
  }
  #desc p {
    color: #fff;
  }
</style>

View Code

步驟三：創建photoinfo.vue

<template>
  <div id="tml">
    <!--實現的是圖片詳情和縮略圖-->
    <div id="desc">
      <!--圖片詳情- 標題部分-->
      <div class="title">
        <h4>{{photoinfo.title}}</h4>
        <p>
          {{photoinfo.add_time | datefmt('YYYY-MM-DD')}} {{photoinfo.click}}次瀏覽
        </p>
        <p class="line"></p>
      </div>

      <!--縮略圖-->
      <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
              <img src="../../../statics/imgs/home/home02.jpg" style="width: 100%;"/>
            </a>
          </li>
        </ul>
      </div>

      <!--圖片詳情- 摘要部分-->
      <p v-html="photoinfo.content"></p>
    </div>

    <!--集成評論組件-->
    <div id="comment">
      <comment></comment>
    </div>
  </div>
</template>

<script>
  //導入評論組件
  import comment from '../subcom/comment.vue';
  import { Toast } from 'mint-ui';
  export default {
    components: {
      comment //注冊評論組件
    },
    data() {
      return {
        id: 0, //圖片的id
        photoinfo: {} //圖片的詳情描述數據對象
      }
    },
    created() {
      this.id = this.$route.params.id;
      //ajax請求圖片的詳情數據
      this.getinfo();
    },
    methods: {
      //1.0  獲取圖片想起描述數據
      getinfo() {
        var url = '../../../statics/json/photoinfo.json';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.message);
            return;
          }

          for (var i = 0; i < body.message.length; i++) {
            if (this.id == body.message[i].id) {
              this.photoinfo = body.message[i];
            }
          }
        });
      }
    }
  }
</script>

<style scoped>
  /*圖片詳情樣式*/  
  #desc {
    padding: 10px;
  }
  #desc .title h4 {
    color: #0094ff;
  }
  #desc .title p {
    color: rgba(0, 0, 0, 0.4);
    margin-top: 10px;
  }
  #desc .title .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  }
  .mui-content,
  .mui-content ul {
    background-color: #fff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border-right: 0px;
    border-bottom: 0px;
  }
  .mui-grid-view.mui-grid-9 {
    border-top: 0px;
    border-left: 0px;
  }
</style>

View Code

步驟四：配置入口文件main.js

//導入vue核心包
import Vue from 'vue';

//導入vue-router
import vueRouter from 'vue-router';
//將vueRouter對象綁定到Vue對象上
Vue.use(vueRouter);

//將vue-resource在vue中綁定，自動在vue對象實例上注入一個$http對象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//導入App.vue的vue對象
import App from './App.vue';

//導入路由規則對應的組件對象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import news from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';
import photoinfo from './components/photo/photoinfo.vue';

//定義路由規則
var router1 = new vueRouter({
  //改變路由激活時的class名稱
  linkActiveClass: 'mui-active',
  routes: [{
      path: '/',
      component: home
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    }, {
      path: '/news/newlist',
      component: news
    },{
      path: '/news/newsinfo/:id',
      component: newsinfo
    },{
      path: '/photo/photolist',
      component: photolist
    },{
      path: '/photo/photoinfo/:id',
      component: photoinfo
    }
  ]
});

//導入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//導入mint-ui組件對象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注冊mui的css樣式
import '../statics/mui/css/mui.css';

//導入一個當前系統的全局基本樣式
import '../statics/css/site.css';

//定義一個全局過濾器實現日期的格式化
import moment from 'moment';
Vue.filter('datefmt',function(input,fmtstring){
    //使用momentjs這個日期格式化類庫實現日期的格式化功能
    //input代表左值（原始時間格式），fmtstring代表右值括號內的規則
    return moment(input).format(fmtstring);
});

//利用Vue對象進行解析渲染
new Vue({
  el: '#app',
  //使用路由對象實例
  router: router1,
  render: c => c(App)
})

View Code

實現縮略圖九宮格和使用預覽圖片vue-preview插件

步驟一：安裝vue-preview

步驟二：配置webpack.config.js文件

var htmlwp = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', 
  output: {
    path: __dirname + '/dist', 
    filename: 'build.js' 
  },
  module: {
    loaders: [{
        test: /\.css$/, 
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.scss$/, 
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/, 
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.(png|jpg|gif|ttf|svg)$/, 
        loader: 'url-loader?limit=40000'
      },
      {
        test: /\.js$/, 
        loader: 'babel-loader?presets[]=es2015',
        //node_modules中的所有.js文件不去轉換，提高打包性能
        exclude: /node_modules/
      },
      {
        test: /\.vue$/, 
        loader: 'vue-loader'
      },
      {
         //vue-preivew組件專用
        test: /vue-preview.src.*?js$/,
        loader: 'babel-loader'
      }
    ]
  },

  plugins: [
    new htmlwp({
      title: '首頁',
      filename: 'index.html',
      template: 'index.html'
    })
  ]
}

View Code

步驟三：配置入口文件main.js

//導入vue核心包
import Vue from 'vue';

//導入App.vue的vue對象
import App from './App.vue';

//導入vue-router
import vueRouter from 'vue-router';

//將vueRouter對象綁定到Vue對象上
Vue.use(vueRouter);

//導入路由規則對應的組件對象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import newslist from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';
import photoinfo from './components/photo/photoinfo.vue';

//定義路由規則
var router1 = new vueRouter({
    //改變路由激活時的class名稱
  linkActiveClass: 'mui-active', 
  routes: [{
      path: '/',
      component: home 
    }, {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    },
    {
      path: '/news/newslist',
      component: newslist
    },
    {
      path: '/news/newsinfo/:id',
      component: newsinfo
    },
    {
      path: '/photo/photolist',
      component: photolist
    },
    {
      path: '/photo/photoinfo/:id',
      component: photoinfo
    }
  ]
});

//導入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//導入mint-ui組件對象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注冊mui的css樣式
import '../statics/mui/css/mui.css';

//導入一個當前系統的全局基本樣式
import '../statics/css/site.css';

//將vue-resource在vue中綁定，自動在vue對象實例上注入一個$http對象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//定義一個全局過濾器實現日期的格式化
import moment from 'moment';
Vue.filter('datefmt', function(input, fmtstring) {
  //使用momentjs這個日期格式化類庫實現日期的格式化功能
  //input代表左值（原始時間格式），fmtstring代表右值括號內的規則
  return moment(input).format(fmtstring);
});

//使用圖片預覽組件vue-preview
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

//利用Vue對象進行解析渲染
new Vue({
  el: '#app',
  //使用路由對象實例
  router: router1,
  render: c => c(App) //es6寫法
})

View Code

步驟四：修改photoinfo.vue文件

<template>
  <div id="tml">
    <!--實現的是圖片詳情和縮略圖-->
    <div id="desc">
      <!--圖片詳情- 標題部分-->
      <div class="title">
        <h4>{{photoinfo.title}}</h4>
        <p>
          {{photoinfo.add_time | datefmt('YYYY-MM-DD')}} {{photoinfo.click}}次瀏覽
        </p>
        <p class="line"></p>
      </div>

      <!--縮略圖使用到mui和vue-preview-->
      <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
          <li v-for="(item,index) in list" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, list)">
          </li>
        </ul>
      </div>

      <!--圖片詳情- 摘要部分-->
      <p v-html="photoinfo.content"></p>
    </div>

    <!--集成評論組件-->
    <div id="comment">
      <comment :id="id"></comment>
    </div>
  </div>
</template>

<script>
  //導入評論組件
  import comment from '../subcom/comment.vue';
  import { Toast } from 'mint-ui';
  export default {
    components: {
      comment //注冊評論組件
    },
    data() {
      return {
        //圖片的id
        id: 0,
        //圖片的詳情描述數據對象
        photoinfo: {},
        list: []
      }
    },
    created() {
      this.id = this.$route.params.id;
      //ajax請求圖片的詳情數據
      this.getinfo();
      this.getimgs();
    },
    methods: {
      //獲取圖片詳細描述數據
      getinfo() {
        var url = '../../../statics/json/photoinfo.json';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.message);
            return;
          }

          //將正常的邏輯數據賦值給this.photoinfo對象
          for (var i = 0; i < body.message.length; i++) {
            if (this.id == body.message[i].id) {
              this.photoinfo = body.message[i];
            }
          }
        });
      },
      getimgs() {
        var url = '../../../statics/json/imginfo' + this.id + '.json';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.message);
            return;
          }
          this.list = body.message;
        });
      }
    }

  }
</script>

<style scoped>
  /*圖片詳情樣式*/
  
  #desc {
    padding: 10px;
  }
  #desc .title h4 {
    color: #0094ff;
  }
  #desc .title p {
    color: rgba(0, 0, 0, 0.4);
    margin-top: 10px;
  }
  #desc .title .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  }
  .mui-content,
  .mui-content ul {
    background-color: #fff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border-right: 0px;
    border-bottom: 0px;
  }
  .mui-grid-view.mui-grid-9 {
    border-top: 0px;
    border-left: 0px;
  }
</style>

View Code

步驟五：創建imginfo1.json和imginfo2.json

imginfo1.json

{
  "status": 0,
  "message": [
    {
      "src": "../../statics/imgs/imginfo/haizei01.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/haizei02.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/haizei03.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/haizei04.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/haizei05.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/haizei06.jpg",
      "h": 230,
      "w": 300
    }
  ]
}

View Code

imginfo2.json

{
  "status": 0,
  "message": [
    {
      "src": "../../statics/imgs/imginfo/huoying01.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/huoying02.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/huoying03.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/huoying04.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/huoying05.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/huoying06.jpg",
      "h": 230,
      "w": 300
    }
  ]
}

View Code

項目結構圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 基於Vue的WebApp項目開發（四）基於Vue的WebApp項目開發（一）基於Vue的WebApp項目開發（二）基於Vue的WebApp項目開發（三）基於Vue的WebApp項目開發（六）通過cordova將vue項目打包為webapp 利用HBuilder打包Vue開發的webapp為app Vue.js開發去哪兒網WebApp Vue2.0+Vux搭建一個完整的移動webApp項目 Vue2.0 開發移動端音樂webApp 筆記