axios获取header中的信息_前端项目007 Vue 信息分享系统 新闻、图文

頔言頔语：进步，一定要进步，进步是跟收入持平的本钱。

今天需要处理的是：新闻列表，新闻详情以及图文页面

01. 新闻列表

01.01 将默认的router-link 修改成click事件

首先，最上面的部分，我们仍然是选择使用mint-ui当中的组件完成。mint-ui的引入在本文章不再详细讲述，有兴趣的同学请参考005文章

我们使用mt-header组件，返回功能默认返回到项目的首页，但是我们不想这么做。所以将默认的router-link 修改成click事件

 <router-link to= '/'>返回 </router-link>

<div @click="goback" slot="left">
 <mt-button icon="back">返回</mt-button>
 </div>


goback(){this.$router.go(-1);}

当我们点击的时候，使用编程导航根据位置记录进行返回

01.02 动态的title，通过组件封装，父使用的时候，传递到子组件使用并显示

新闻列表这个标题，我们也不写死，而是使用动态绑定的方式实现

<mt-header :title="title">

这部分代码需要在多个页面中反复使用，我们将其封装成一个公共组件NavBar，以后使用的时候只需要传进来title即可

title的传递我们使用父传子的方法，子组件使用prop接收数据。

为了和首页的mt-header区别，我们给本组件加上类名tmpl

01.03 Created 事件函数当中发起请求，渲染列表

在005当中，BaseURL配置已经完成了，所以在请求的时候只需要填入getnewslist'即可

当我们拿到数据之后，我们把拿到的数据数组存放在data当中的newsList[]当中

created() {
 this.$axios.get('getnewslist')
            .then(res=>{
 this.newsList = res.data.message;
            })
            .catch(err=>console.log(err));
        }

下面我们进行内容的动态填写，在<li v-for="(news,index) in newsList" :key="index">当中遍历newsList数组，并且将内容进行分发

<li v-for="(news,index) in newsList" :key="index">
   <router-link :to="{ name:'NewsDetail',params:{id:news.id} }">        
       <div >
          内容....
       </div>
     </router-link>
</li>

01.04 将App的底部内容设置为在底部固定

列表渲染完成之后，我们下滑列表会发现，底部的footer也会跟着滑动，所以我们将其设置为固定在底部。

App组件当中加上如下代码：

.mint-tabbar {
 position: fixed;
 bottom: 0;
}

问题2:我们将APP当中的footer设置在底部，当中间的内容过多的时候，会有部分被遮住

01.05 事件转换过滤器

import Moment from 'moment';
Vue.filter('convertTime',function(data,formatStr){
 return Moment(data).format(formatStr);
});

我们引入Moment进行时间转换，将时间数据还有想要的格式作为参数传进来

在新闻列表当中的add-time上使用这个过滤器，将想要的格式传过来

 <p>发表时间:{{news.add_time | convertTime('YYYY年MM月DD日')}}</p>

02 新闻详情部分

0201 路由配置+详情数据

当我们点击列表的时候，会跳转到新闻详情页面

所以将这部分渲染的内容需要使用router-link标签而不是传统的div标签。点击之后到NewsDetail组件当中，使用params:{id:news.id} 的方式来确定到底是进入哪一个新闻详情

我们进行路由信息的配置

{path:'/news/detail/:id',
 name:'NewsDetail',
 component:NewsDetail}

在NewsDetail当中的created()当中进行数据的获取

 created() {
 // 1: 获取路由参数
 let { id } = this.$route.params;
 // 2: 拼接后台url发起请求
 let url = 'getnew/' + id;
 this.$axios.get(url)
 .then(res=>{
 // 3: 响应的数据渲染到页面上，通过一个详情对象
 this.newsInfo = res.data.message[0];
            })
.catch(err=> console.log(err)); 
}

使用this.$route.params可以获取到链接的数据，数据显示是 id：xx

console.log(this.$route.params)  //13

然后拼接后台url并且发起请求

let url ='getnew/'+ id;

因为详情只有一个数据，我们只取message数组中的第一个数据就好，将其赋值给data中声明的newsInfo对象

然后将获取到的newsInfo动态渲染到页面当中

值得注意的是，我们获取到content的内容是带有html标签的，所以我们不能简单的使用

{{newsInfo.content}}

而是使用vue当中提供的 v-html进行渲染

<div class="news-content" v-html="newsInfo.content"></div>

0202 内容当中有图片的坑 scoped的编译是早于v-html的

当我们拿到的newsInfo.content当中有图片的时候，我们会发现图片的大小时候不适配的

我们使用

.news-content img{width: 100%;}

这样的方式没有办法修改

但是当我们去掉组件当中的<style scoped>scoped的时候，发现样式回归正常。出现这种现象的原因是因为scoped的编译是早于v-html的

所以我们需要将.news-content img{width: 100%;}放在global.css当中

03 图文分享

0301路由信息的配置如下：

  title:'图文分享',className:'back-pic',route:{name:'PhotoList',query:{categoryId:0} }

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

0302 数据的请求和分发

在这个组件当中我们需要请求两部分数据，第一部分是分类标题，第二部分是图片信息

分类标题：

图片信息：

然后我们获取分类id，发起请求并且进行数据的渲染

获取分类信息：

this.$axios.get('getimgcategory')
.then(res=>{
 this.categories = res.data.message;
 // 加入全部到数组的顶部
 this.categories.unshift({id:0,title:'全部'}) })

获取分类信息的时候需要将{id:0,title:'全部'}’全部‘这个分类加入到分类的列表当中，所以我们定义categories存贮得到的分类数据，然后将{id:0,title:'全部'}这个对象放到数组当中。

图片部分：

请求数据时，url的拼接如下

this.$axios.get('getimages/' + categoryId)

得到数据之后，将其放在ims当中然后进行渲染

0303 点击不同的分类显示对应的图片

我们给分类加上click事件，传进来不同的id值

 <a href="javascript:;" @click="navigateToCateById(category.id)">{{category.title}}</a>

这部分所做的事情就是请求图片数据所做的事情，所以我们将请求图片数据的代码拿过来封装成方法

loadImgsById(categoryId) {
 // 2: 发起请求
 this.$axios.get('getimages/' + categoryId)
                .then(res=>{
 // 3: 渲染数据
 this.imgs = res.data.message;
                })
                .catch(console.log)
            }

在created()当中请求图片的时候，我们也只需要调用这个方法即可

let { categoryId } = this.$route.query;
 this.loadImgsById(categoryId);

0304 解决/foo/1 和 /foo/2 跳转问题

在vue当中对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， 由于会渲染同样的 Foo 组件，组件实例会被复用

 // 在当前路由改变，但是该组件被复用时调用
 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
 // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
 // 可以访问组件实例 `this`
beforeRouteUpdate (to, from, next) {
 let { categoryId } = to.query;
 // 发请求更改页面数据
 this.loadImgsById(categoryId);
 next();
  },

0305 解决点击分类图片切换但是路由名称不变的问题

我们将资源的加载放在beforeRouteUpdate当中

所以在进行点击图片的时候只需要做路由的切换即可，不需要进行资源的申请了

我们将click事件绑定为 @click="navigateToCateById(category.id)

这个方法进行编程导航$router.push，跳转的仍然是PhotoList但是查询参数是新传递进来的id

navigateToCateById(id) {
 this.$router.push({
 name:'PhotoList',
 query:{ categoryId:id }
  });
}

0306 填坑： APP 当中footer在点击的时候无法跳转到主页

当我在新闻详情页面的时候，在点击首页，我是没有办法切回到首页原本的页面的。这是因为我们使用的是watch监听的方式，但是我们仍然处于Home组件当中selected的值并没有发生改变，所以我们在点击首页的时候不会触发监听机制。

 watch:{
 //  不能使用箭头函数，因为this会向上级绑定
 selected:function(newV,oldV) {
 console.log(newV); // 页面的改变
 this.$router.push({name:newV});
}

这个时候我们回到编程导航进行事件监听的本质，他就是click事件。

所以我们给footer的每一个item添加一个点击事件，点击的时候触发change（），传进来对应的导航名

为了防止mt-tab-item 本身不接受click事件我们包裹一层div,在div当中触发点击事件

 <mt-tab-item id="Home"> 
 <div @click="change('Home')">
 <img slot="icon" src="../static/img/index.png">
           首页
 </div>
 </mt-tab-item>

change(val){
 // this.selected = val;
 this.$router.push({name:val });
 }

关于这个项目的首页，这是我想分享给你们的

我的知识和文字不成熟，项目也不成熟，但是我在进步！

若有意见，欢迎留言指正 ！！！