學習腳手架--組件之間跳轉與參數(組件之間參數)

1、學習腳手架--組件之間跳轉與參數(組件之間參數)

     組件之間跳轉主要(組件1->跳->組件2)

     (1)標籤方式跳轉(優先選)

       <router-link  to="組件路徑">

         .....

       <router-link>

       示例:Home.vue -> NewsList.vue

       <router-link to="/NewsList">

       </router-link>

     (2)編程序方式跳轉

       this.$router.push("組件路徑");

       示例:

       <img src="1.jpg"  @click="jump"/>

       jump(){

         this.$router.push("/NewsList");

       }

       示例:

       Exam01.vue -> NewsList.vue

       <h1 @click="jump">跳轉NewsList.vue 組件</h1>

       jump(){

         this.$router.push("/NewsList")

       }

      (3)組件之間跳轉須要傳遞參數

       Exam01.vue ->NewsList.vue

       ?nid=6

       -傳遞參數 Exam01.vue   

        this.$router.push("/NewsList?nid=6")

       -接收參數 NewsList.vue

        var id = this.$route.query.nid;

        #一般狀況接收參數 created()

      #$router  屬性負責組件之間跳轉 

      #$route   屬性負責接收參數

   

  2.2:新聞列表/新聞詳細

   -建立空組件 src/components/home/NewsInfo.vue

   -添加組件訪問路徑  /NewsInfo

   -檢查 NewsList.vue 新聞列表

   標籤跳轉

    <router-link  :to="'/NewsInfo?nid='+item.id">

    </router-link>

   編程方式 ?nid=變量

   -建立ajax 請求獲取新聞詳細信息

   -node.js   /findNewsInfo   

     參數:id

     驗證參數是否合法:  /^\d{1,}$/

     sql: SELECT id,title,content,ctime,img_url FROM xz_news WHERE id=?

     json:{code:1,data:[]}

   -保存當前 data:{info:{}}

 

  2.3:新聞詳細

  -添加 mui card.html 卡片佈局

  -添加 新聞 標題 內容 時間

  -發送ajax請求獲取數據並顯示

  練習:定義過濾器 2019-01-20

 

 2.4:新聞評論

  -建立表 xz_comment[id;content;ctime;nid]

  -建立服務器程序 /getComment

   參數:nid 新聞id

   sql:SELECT id,content,ctime,nid FROM xz_comment WHERE nid=?

   json:{code:1,data:[]}

  -建立空子組件 src/components/sub/comment.vue

  -在新聞組件中添加評論子組件

   (1)在父組件引入子組件

   import comment from "../sub/comment.vue"

   (2)在父組件註冊子組件而且指定子組件標籤名稱

   components:{

      "子組件名稱": comment

    }

   (3)在父組件中調用子組件

   <子組件名稱></子組件名稱>

 

  常見錯誤

  1:亂碼 ???

  亂碼緣由只有一種:{編碼不統一}

  mysql utf8/db utf8/table utf8/nodes.js utf8/vue utf8

  編碼方式: gbk/utf-8/latin-1[iso-8859-1]

  mysql命令: status 查看編碼

  解決方案:99%

  -若是有中文sql語句不要複製粘貼

  -打開 xampp ->mysql [Admin] 點擊->phpmyadmin

  -點擊xz庫-> 點 sql標籤 ->粘貼->[執行]