您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

vue项目第三天

发布时间：2020-05-04 23:44:30编辑：雪饮阅读（）

 

目标1：为axios请求时及请求结束加上loading和关闭loading效果

只需要在src/main.js中加入请求及响应拦截器即可

//定义axios全局拦截器
//请求拦截器
Axios.interceptors.request.use(function(config){
  MintUi.Indicator.open({text:'玩命加载中...',spinnerType:"fading-circle"});
  console.log(config);
  return config;
})
//响应拦截器
Axios.interceptors.response.use(function(response){
  console.log(response);
  MintUi.Indicator.close();
  return response;
});

目标2：图文分享详情页

当进入这个目标时候发现我博客原来有图集模型，不用像昨天一样从文章中提取那么麻烦了，那么就重新调整了下昨天的接口并写了今天的图文分享详情页的两个接口。

详情需要一个图集中图片列表，发现帝国cms这是够坑（应对我这个需求，人家可能有其它优良打算我不知道吧），竟然把图片列表没有建立新表存储也没有存储为json格式而是一个存储为同一图片条目按大小图拆分用“::::::”按，不同图片条目按“\r\n”拆分。。。，当然这种涉及个人猜测是为了后面模板标签做准备的。

然后为了解决图文分享详情页图片宫格布局时候宽被可视区域均分，但高却太随意了，这里应该是每个图片的宽和高相等才是，于是想着用less，发现less应对这种场景还是比较麻烦，最后直接用flex布局加上宽高按最常见手机尺寸宽375为依据进行计算了。

紧接着要处理下图文分享列表页，这个页面当摘要比较长的时候没有省略号处理，本来想用css感觉css还是麻烦，干脆封装到过滤器了。

涉及到的图文分享详情代码

<template>
   <div class="tmpl">
     <nav-bar title="图文详情"/>
     <div class="photo-title">
       <p>{{photoInfo.title}}</p>
       <span>发起日期:{{photoInfo.add_time | convertTime('YYYY-MM-DD')}}</span>
       <span>{{photoInfo.click}}</span>
       <span>分类:{{photoInfo.category}}</span>
     </div>
     <div class="imgBox">
       <my-ul>
         <my-li v-for="(img,index) in imgs" :key="index">
           <img :src="img.src">
         </my-li>
       </my-ul>
     </div>
 
     <div class="photo-desc">
       <p v-html="photoInfo.content"></p>
     </div>
   </div>
 </template>
 
 <script>
   export default {
     name: 'PhotoDetail',
     data(){
       return {
         photoInfo:{},
         imgs:[]
       }
 
     },
     created () {
       let pid=this.$route.params.id;
       //获取详情信息
       this.$axios.get(`/api/getimageInfo/${pid}`)
         .then(res=>{
           this.photoInfo=res.data.message[0];
         })
       .catch(res=>{
         console.log(res);
       });
       //获取图片缩略图信息
       this.$axios.get(`/api/getthumimages/${pid}`)
       .then(res=>{
         this.imgs=res.data.message;
       })
       .catch(res=>{
         console.log(res);
       });
     }
   }
 </script>
 
 <style scoped>
   .tmpl{
     margin-top:80px;
     margin-bottom: 80px;
   }
   .imgBox{
     display: flex;
     justify-content: center;
   }
   li{
     list-style: none;
     float: none;
     width: 125px;
     height: 125px;
   }
   li img{
     width:100%;
     height: 100%;
   }
   ul{
     margin:0;
     padding:0;
     display: flex;
   }
   .photo-title{
     overflow: hidden;
   }
   .photo-title,.photo-desc{
     border-bottom:1px solid rgba(0,0,0,0.2);
     padding-bottom: 5px;
     margin-bottom: 5px;
     padding-left: 5px;
   }
   .photo-title p{
     color: #13c2f7;
     font-size: 20px;
     font-weight: bold;
   }
   .photo-title span{
     margin-right: 20px;
   }
   .photo-desc p{
     font-size: 18px;
   }
 </style>

涉及到图文分享列表的改变

<router-link :to="{name:'PhotoDetail',params:{id:img.id}}">
     <img v-lazy="img.img_url">
     <p>
         <span>{{img.title}}</span>
         <br>
         <span>{{img.zhaiyao | subtextEllipsis(100,"...")}}</span>
     </p>
 </router-link>

主要就是标红处的过滤器，其它都是接口的修改

那么对应的src/main.js也有新增

Vue.filter('convertTime',function(data,formatStr){
   return Moment(data).format(formatStr);
 });
 Vue.filter('subtextEllipsis',function(val,len,word){
   if (val && val.length > len) {
     if (word) {
       var vs = val.substr(0, len - 1)
       var i = Math.max(vs.lastIndexOf(' '), vs.lastIndexOf('.'), vs.lastIndexOf('!'), vs.lastIndexOf('?'))
       if ( i !== -1 && i >= (len-15) ) {
         return vs.substr(0, i) + '...'
       }
     }
     return val.substr(0, len) + '...'
   }
 });

目标3：便捷启动

在项目根目录建立如“start.cmd”的文件

npm run dev

则下次可以在该目录直接双击该文件就可以快速打开该项目并自动打开浏览器，前提你不是用ide打开，大多数ide会直接打开编辑界面，而不是运行这个脚本。