Vue(day8)

继续上一篇文章的内容，本文主要内容为项目中新闻资讯模块的实现。

新闻资讯页面主要是当咱们点击这个按钮时跳转到新闻列表界面。

1、新闻资讯的路由设计

将新闻资讯的标签改成路由：(a标签改成router-link)。

home.vue

<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
    <router-link to="/home/newsList">
        <span class="mui-icon mui-icon-extra mui-icon-extra-new"></span>
        <div class="mui-media-body">News</div>
    </router-link>
</li>

而后新建一个news.vue单文件组件用于显示新闻列表，并配置到router.js文件中。

2、新闻资讯的页面设计

一、搭建Node服务器用于返回咱们须要的页面数据

如今咱们的新闻资讯页面时写死的，实际的场景应该是从后台服务器中动态获取，咱们能够本身编写一个简单的Node搭建的本地服务器用于知足咱们的基本页面数据需求。

这个Node+Express简单搭建的服务器已上传至github，可自行下载运行，运行前先npm install一下。而后就可使用了。点击这里访问

值得注意的问题：

• 因为是项目自己和服务器是两个不一样的域名，存在跨域问题。可以使用jsonp的方式进行数据传输，也能够设置header来容许跨域访问：

  res.header('Access-Control-Allow-Origin', '*');

• 使用的是vue-resource获取数据。

其余细节问题代码中均有注释，这里再也不赘述。

二、其它问题

• 全局配置Vue.http.options.root

  设置请求的根路径，可是注意请求时路径的写法，如：

  //错误的写法：若是这样写请求的根路径为当前域名
  this.$http.get('/getNewsList').then( result => {
  
  })
  //正确的写法
  this.$http.get('getNewsList/').then( result => {
  
  })

• scoped配置下的style有时候没法产生效果，就算加上!important标识也没法正常渲染，因此咱们经常再也不使用scoped属性，但这样容易污染全局样式，因此咱们须要模仿scoped属性的实现原理，手动为组件根元素命名一个类做为标识，而后样式都在改标志下进行全局渲染便可。例如新闻详情页的组件代码以下：

  //在根元素增长一个newsInfo类名做为标识
  <div class="newsInfo">
      <h3 class="title"> {{newsInfo.title}} </h3>
      <p class="subtitle">
          <span>发表时间：{{newsInfo.createTime}}</span>
          <span>浏览量：{{newsInfo.views}}</span>
      </p>
      <hr />
      <div class="content" v-html="newsInfoHtml">
          fsafs
          fasfdsdafsadf
          sadf
      </div>
  </div>

  而后咱们的css属性就能够改成全局样式而不用顾虑污染的状况。

  这里咱们可使用scss语法进行样式书写，更为清晰（须要安装scss对应的loader并配置，请参考这里）：

  <style lang="scss">
    .newsInfo{
        .title {
            text-align: center;
            color: #d02121;
        }
        .subtitle{
            color: #03A9F4;
            display: flex;
            justify-content: space-between;
            padding: 5px;
        }
        .content{
            padding: 5px;
        }
        img {
            width: 100%;
        }
        .error {
            color: #FF1313;
        }
    }
  </style>

  三、效果一览