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

Vue项目第二天总结

发布时间：2020-05-04 00:38:26编辑：雪饮阅读（）

 

目标1：我要直接在localhost上搭建一个比较标准一点的项目而且有比较标准的数据

本来想用laravel，当时比较烦躁急于求成，知道laravel安装要先安装composer，安装了composer还要指定php版本，然后正式安装laravel时可能还要突破一些网络问题，一系列问题。。。所以选择用thinkphp，找了thinkphp3系列的终极版，当时发现好久没有碰这个东西了，竟然差点不会玩，瞎折腾了几分钟又找回了自信，因为前端vue项目请求路径是/api/xxx这样的路径又涉及到传参，然后又去折腾thinkphp的pathinkinfo及隐藏index.php这些活，后来在弄传参时候记得thinkphp有个什么router的东西，但是又没有找到了，具体忘了怎么配置了，经过心里的一些小纠结再加上比较浮躁的情况下最后又换成laravel了。。。，然后再laravel上又折腾了差不多的时间或许比thinkphp更多，不多唠叨了，都是一些琐碎的事情。

后端搞定后前端config/index.js中又要牺牲下(就是改点代码)

proxyTable: {
  '/api': {
    target: 'http://localhost:80/',
    changeOrigin:true,
    pathRewrite: {
      '^/api': 'api'
    }
  }
},

目标2：完成文章详情页

首先文章列表看着不爽，也重新调整了一下

<template>
   <div>
     <nav-bar :title="title"/>
     <div class="demo">
       <ul>
 
           <li v-for="(news,index) in newsList" :key="index">
             <router-link :to="{ name:'NewsDetail',params:{id:news.id} }">
               <img class="" v-lazy="news.img_url" />
               <div>
                 <span>{{news.title}}</span>
                 <div class="news-desc">
                   <p>点击数:{{news.click}}</p>
                   <p>发表时间:{{news.add_time | convertTime('YYYY-MM-DD')}}</p>
                 </div>
               </div>
             </router-link>
           <div class="line"></div>
           </li>
 
 
 
       </ul>
     </div>
   </div>
 
 </template>
 
 <script>
     export default {
         name: "NewsList",
       data(){
           return {
             title:'新闻列表',
             newsList:[]
           }
       },
       created() {
           this.$axios.get("/api/getnewslist").then(res=>{
             this.newsList=res.data.message;
           }).catch(err=>console.log(err));
       }
     }
 </script>
 
 <style scoped>
   .demo{
     margin-top:80px;
   }
   .demo ul,.demo li{
     list-style: none;
   }
   .demo a{
     display: block;
     height: 44px;
     color: #000;
     padding: 10px 15px;
   }
   .demo img{
     float: left;
     width:42px;
     height:42px;
     margin-right: 20px;
   }
   .demo a div{
     float: left;
     margin-right: 20px;
   }
 .demo span{
   display: block;
   width: 100%;
   font-size: 17px;
   line-height: 21px;
 }
   .demo a p{
     float: left;
     color: #0bb0f5;
     font-size: 14px;
     line-height: 21px;
     margin-right: 10px;
   }
   .demo p:nth-child(2){
     float: right;
   }
   .line{
     margin-left: 16px;
     transform: scaleY(.5);
     border-bottom:1px solid #c8c7cc;
     clear: both;
   }
 </style>

主要涉及这两个标红的地方，第一个是跳转到详情页，第二个是加了一个图片懒加载，这样就解决了之前只要一打开这个新闻列表就会把所有新闻的图片都加载，而现在是滚动到哪里就加载哪里所需的新闻图片，在精度上略显粗糙，不过这个影响不大。

另外就是这个懒加载插件有点瑕疵，既然又v-lazy就应该还要再来一个如v-lazy-error的属性定义下加载失败时所用的图片路径，而它的api中虽然又error但不适合这种场景，而且这里使用过滤器也不方便，反正我是没有找到使用的方法，于是我只能在接口中对于空图片填充一个默认图片了。

那么接下来就是详情页了。

新建详情页组件，当然router/index.js上要导入哦

<template>
   <div class="tmpl">
     <nav-bar title="新闻详情" />
     <div class="news-title">
       <p>{{newsInfo.title}}</p>
       <div>
         <span>{{newsInfo.click}}次点击</span>
         <span>分类:{{newsInfo.category}}</span>
         <span>添加时间:{{newsInfo.add_time | convertTime('YYYY-MM-DD')}}</span>
       </div>
     </div>
     <div class="news-content" v-html="newsInfo.content"></div>
   </div>
 </template>
 <script>
   export default {
     data() {
       return {
         newsInfo:{}, // 新闻详情数据
       }
     },
     created() {
       // console.log(this.$route.params)
       // 1: 获取路由参数
       let { id } = this.$route.params;
       // 2: 拼接后台url发起请求
       let url = '/api/getnew/' + id;
       this.$axios.get(url)
         .then(res=>{
           // 3: 响应的数据渲染到页面上，通过一个详情对象
           this.newsInfo = res.data.message[0];
         })
         .catch(err=> console.log(err));
 
 
     }
   }
 </script>
 <style scoped>
   .tmpl{
     margin-top:80px;
     margin-bottom: 80px;
   }
   .news-title p {
     color: #0a87f8;
     font-size: 20px;
     font-weight: bold;
   }
 
   .news-title span {
     margin-right: 30px;
   }
 
   .news-title {
     margin-top: 5px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   }
 
 
   /*主体文章的左右距离*/
 
   .news-content {
     padding: 10 5;
   }
 
 </style>

这里要注意下标红地方，这个标红的地方是解析html内容的，因为新闻内容就是html的

目标3：完成图文分享列表

该目录由于我的博客中并没有该模块，那么我的解决办法是从文章列表中提取出文章封面不为空的所有文章，那么这里的分类也是同样的道理。

那么src/router/index.js中路由条目要再增加一条

{
   path: '/photo/PhotoList',
   name: 'PhotoList',
   component: PhotoList
 },

同时home组件中图文分享也要链接至该路由，那么该图文分享列表组件如：

<template>
     <div class="tmpl">
 
         <nav-bar title="图文分享"/>
 
 
         <!-- 引入返回导航 -->
         <div class="photo-header">
             <ul>
                 <li v-for="category in categories" :key="category.id">
                     <a href="javascript:;" @click="navigateToCateById(category.id)">{{category.title}}</a>
                 </li>
 
             </ul>
         </div>
         <div class="photo-list">
             <ul>
                 <li v-for="(img,index) in imgs" :key="index">
                     <a>
                         <img v-lazy="img.img_url">
                         <p>
                             <span>{{img.title}}</span>
                             <br>
                             <span>{{img.zhaiyao}}</span>
                         </p>
                     </a>
                 </li>
             </ul>
         </div>
     </div>
 </template>
 <script>
     export default {
         data() {
             return {
                 imgs:[],// 图片数据
                 categories:[],// 分类信息
             }
         },
         beforeRouteUpdate (to, from, next) {
             // console.log(to);
             // console.log(from);
             let { categoryId } = to.query;
             // 发请求更改页面数据
             this.loadImgsById(categoryId);
 
             next();
             // 在当前路由改变，但是该组件被复用时调用
             // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
             // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
             // 可以访问组件实例 `this`
           },
         methods:{
             navigateToCateById(id) {
                 this.$router.push({
                     name:'PhotoList',
                     query:{ categoryId:id }
                 });
             },
             loadImgsById(categoryId) {
              // 2: 发起请求
                 this.$axios.get('/api/getimages/' + categoryId)
                 .then(res=>{
                     // 3: 渲染数据
                     this.imgs = res.data.message;
                 })
                 .catch(console.log)
             },
         },
         created() {
             console.log(this.$route.query.categoryId)
             // 1: 获取分类id
             let { categoryId } = this.$route.query;
             this.loadImgsById(categoryId);
 
             // 获取分类信息
             this.$axios.get('/api/getimgcategory')
             .then(res=>{
                 this.categories = res.data.message;
                 // 加入全部到数组的顶部
                 this.categories.unshift({id:0,title:'全部'})
             })
             .catch(console.log);
 
         }
     }
 
 
 </script>
 <style scoped>
   .tmpl{
     margin-top:80px;
     margin-bottom: 80px;
   }
 .photo-header li {
     list-style: none;
     display: inline-block;
     margin-left: 10px;
     height: 30px;
 }
 
 .photo-header ul {
     /*强制不换行*/
     white-space: nowrap;
     overflow-x: auto;
     padding-left: 0px;
     margin: 5;
   display: flex;
   justify-content: space-between;
 }
 
 
 /*下面的图片*/
 
 .photo-list li {
     list-style: none;
     position: relative;
 }
 
 .photo-list li img {
     width: 100%;
     height: 230px;
     vertical-align: top;
 }
 
 .photo-list ul {
     padding-left: 0px;
     margin: 0;
 }
 
 .photo-list p {
     position: absolute;
     bottom: 0px;
     color: white;
     background-color: rgba(0, 0, 0, 0.3);
     margin-bottom: 0px;
 }
 
 .photo-list p span:nth-child(1) {
     font-weight: bold;
     font-size: 16px;
 }
 
 
 image[lazy=loading] {
   width: 40px;
   height: 300px;
   margin: auto;
 }
 
 </style>