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>

  三、效果一覽