[經典案例]使用Vue-cli實現路由間的跳轉與呼叫介面完成前端頁面資料的渲染與顯示-文章列表專案

這名字帥吧發表於2020-10-21

Vue路由前端

前端vue 的老師飛快的講了如何使用Vue完成前端頁面資料的渲染，聽的懵懵懂懂，回頭細心琢磨了一下，寫了筆記加深一下印象，有興趣的小夥伴也可以看一下學習一下；文章最後附帶專案原始碼。

文章目錄

前言

廢話不多說，先上效果圖。

在這裡插入圖片描述

在這裡插入圖片描述
主頁面分為三個板塊，
分別為頂部文章管理、文章列表，中部的文章列表資料渲染頁面，還有底部固定的footer導航。

最後還有點選返回跳轉到主頁面的主功能。

開始做記錄專案吧。

一、首先建立components元件。

示例：pandas 是基於NumPy 的一種工具，該工具是為了解決資料分析任務而建立的。

二、其次配置路由。

1.建立專案在router資料夾下的index.js檔案中配置路由。

在這裡插入圖片描述

程式碼如下（示例）：

這裡需要注意的是二級路由children ，因為jinengHome這個元件是主頁面，jinnegDetail.vue 是二級頁面，jinnegList.vue與主頁面是同級的元件。

import jinengDetail from '@/components/jinengDetail.vue'
import jinengList from '@/components/jinengList.vue'
import jinengHome from '@/components/jinengHome.vue'


// 路由配置程式碼：這裡需要注意的是二級路由children ，因為jinengHome這個元件是主頁面，jinnegDetail.vue 是二級頁面	，jinnegList.vue與主頁面是同級的元件。
 routes: [{
            path: '/jinengHome',
            name: 'jinengHome',
            component: jinengHome,
            children: [

                {
                    path: '/jinengDetail',
                    name: 'jinengDetail',
                    component: jinengDetail
                },

                {
                    path: '/',
                    name: 'jinengList',
                    component: jinengList
                },
            ]
        },
]

2.引入圖片資原始檔

：
在這裡插入圖片描述

3.之後開始寫主頁面jinengHome元件的程式碼

需要注意的是每一個元件裡面必須要有<template /template>
而且模板裡面必須包裹一個 div

<template>  // 模板
  <div class="container">
    <div class="page-title" :style="{ 'justify-content': currentPath === '/jinengList' ? 'center' : 'space-between',
      }">
 // :style  動態繫結樣式， 冒號代表 v-bind  繫結樣式。
 <router-link id="goBack"
  v-show="currentPath === '/jinengDetail'" to="/">返回</router-link>
  // 給返回按鈕新增一個v-show 指令，讓他停留在主頁面的時候隱藏，到詳情頁的時候顯示。
      <span>文章管理</span>
      // 為儲存按鈕新增跳轉時顯示隱藏的效果
      <router-link id="save"  v-show="currentPath === '/jinengDetail'" to="/jinengList">儲存</router-link>
    </div>
	// 頭部的文章標籤欄切換的效果，為li 繫結類名並同時新增 @click 點選事件，選中狀態變紅色，未選中為預設狀態。
    <ul class="page-tab">
      <li
        :class="{ active: currentItem === item }"
        @click="changeItem(item)"
        v-for="(item, index) in arr"
        :key="index"
      >
      // 與此同時，臺為li 新增了 v-for 指令來遍歷 arr 這個陣列，陣列裡面存放-文章列表, 文章編寫, 文章分類，三個條目。對應js 的 return 下的arr：[]程式碼。
        {{ item }}  // 為陣列item編寫模板語法，讓其顯示到頁面上面
      </li>
    </ul>
  // 最後配置路由容器
    <router-view></router-view>
//底部文章管理的模組
    <ul class="footer">
      <li>
        <div class="icon"></div>
        <div>文章管理</div>
      </li>
      <li>
        <div class="icon"></div>
        <div>文章管理</div>
      </li>
      <li>
        <div class="icon"></div>
        <div>文章管理</div>
      </li>
    </ul>
  </div>
</template>

接下來為元素和標籤配置樣式編寫css程式碼

<style  scoped>
.container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 20px;
  bottom: 0;
  padding-top: 100px;
  padding-bottom: 60px;
}

.container .page-title {
  /* display: flex; */
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(100, 108, 252);
  color: #ffffff;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  z-index: 1;
  padding: 0 10px;
  box-sizing: border-box;
}

.container .page-title #goBack {
  color: #ffffff;
  border: 2px solid #aaa;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}

.container .page-title #save {
  color: #ffffff;
  border: 2px solid #aaa;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}

.container .page-title {
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(100, 108, 252);
  color: #ffffff;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  z-index: 1;
}

.container .page-tab {
  position: fixed;
  top: 40px;
  left: 20px;
  width: 80%;
  padding: 0 10px;
  display: flex;
  /* justify-content: space-between; */
  /* align-items: center; */
  background: #ffffff;
  border-bottom: 1px solid blue;
  z-index: 1;
}

.container .page-tab li {
  flex: 1;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}

.container .page-tab li.active {
  color: #ffffff;
  background: red;
}

.container .page-tab li:nth-child(2) {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.container .footer {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 60px;
  background: rgb(100, 108, 252);
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
}

.container .footer li {
  flex: 1;
  display: flex;
  margin-right: 80px;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.container .footer li .icon {
  width: 25px;
  height: 25px;
  background: #aaaaaa;
  border-radius: 50%;
}

.container .footer li:first-child .icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-image: url(../assets/icons-36-black.png);
  background-position: -867px -5px;
}

.container .footer li:nth-child(2) .icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-image: url(../assets/icons-36-black.png);
  background-position: -939px -5px;
}

.container .footer li:last-child .icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-image: url(../assets/icons-36-white.png);
  background-position: -580.5px -5px;
}
</style>

緊接著編寫js 為他執行動作- 程式碼

<script>
export default {
  data() {
    return {
      arr: ["文章列表", "文章編寫", "文章分類"], // 這裡對應上述的 <li v-for = "(item,index) in arr" :key=index >
      currentItem: "文章列表",
      btnVisible: false,
    };
  },
  mounted() {
    console.log(this.$route); // 在這裡用控制檯輸入當前路由路徑。
  },
  computed: {
    currentPath() {
      return this.$route.path;
    },// 計算屬性，對應上述的v-show="currentPath === '/jinengDetail'" ，判斷當前的路由路徑。 
    
  },
  methods: {
    changeItem(item) {
      this.currentItem = item;
    },
    //  methods對應上述的  @click="changeItem(item)" 點選條目的事件，更換item顏色與選中狀態。
    toList() {
      this.$router.push({ path: "/jinenglist" });
    },
  },
  watch: {
    // $route (value) {
    //     console.log('監聽router', value)
    //     if (value.path === '/jinengList') {
    //         this.btnVisible = false
    //     } else {
    //         this.btnVisible = true
    //     }
    // }
  },
};
</script>

到此頁面的顯示效果為：
在這裡插入圖片描述

4.編寫中部列表資料程式碼

HTML程式碼
<template>
  <div class="list-container">
    <div class="search-box">
      <div class="input-icon"></div>
      <input type="text" />
    </div>
    <ul class="content-box">
      <li v-for="(item, index) in arr" :key="index" @click="toDetail(item)">
        <div class="title">{{ item.title }}</div>
        <div>{{ item.userName }} 釋出於：{{ item.updateTime }}</div>
        <div class="item-icon"></div>
      </li>
    </ul>
    <!-- <router-view /> -->
  </div>
</template>

css程式碼：

<style  scoped>
.list-container {
  position: relative;
  flex: 1;
}

.list-container .search-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-left: 10px;
  height: 40px;
  background: #aaaaaa;
}

.list-container .search-box .input-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 25px;
  height: 25px;
  margin-top: -12.5px;
  background: #ddd;
  border-radius: 50%;
  background-image: url("../assets/icons-36-white.png"); 
	/* 這裡的 background-image 語句後面的路徑 需要注意的是 ../ 表示 上一級的目錄。*/
  background-position: -1225px -5px;
}

.list-container .search-box input {
  box-sizing: border-box;
  width: 100%;
  height: 35px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  outline: none;
  border: 2px solid #333333;
  padding-left: 40px;
}

.list-container .content-box {
  width: 100%;
  flex: 1;
  overflow: auto;
}

.list-container .content-box li {
  position: relative;
  width: 90%;
  height: 80px;
  border-bottom: 1px solid #ddd;
  padding: 0 0px;
  box-sizing: border-box;
}

.list-container .content-box li .item-icon {
  position: absolute;
  top: 50%;
  right: 0px;
  width: 25px;
  height: 25px;
  margin-top: -12.5px;
  background: #aaaaaa;
  border-radius: 50%;
  background-image: url("../assets/icons-36-white.png");
  background-position: -220px -5px;
}

.list-container .content-box li .title {
  font-weight: bold;
  height: 40px;
  line-height: 40px;
}
</style>

js程式碼：這裡需要注意的是引入jQuery檔案需要在專案中配置，
配置語句跳出控制檯輸入：npm install jquery --save 即可引入 jQuery，然後在頁面中的script下輸入 import $ from “jquery” 即可使用jQuery的一些語法和程式碼。

npm install jquery --save

<script>
import $ from "jquery";// 這裡需要注意的是 引入jQuery檔案需要在專案中配置，
//配置語句 跳出控制檯輸入：npm install jquery --save 即可引入 jQuery。
//然後在頁面中的script下輸入    即可使用jQuery的一些語法和程式碼。
import $ from "jquery"
export default {
  data() {
    return {
      arr: [], // 這裡用於顯示呼叫介面成功後傳回來的資料。
    };
  },
  mounted() {
  // 在vue中寫jQuery程式碼需要在 mounted中編寫。
    $.ajax({    
      url: "http://192.168.3.77:3000/api/demo/getList", //請求地址，這裡是老師給的伺服器預設地址，這個介面已經有資料了。
      method: "get",// 請求方式 為get請求
      data: {}, // 這裡的data是用來顯示請求成功後取回來的資料用於顯示。
      dataType: "json", // 請求的資料型別為 json，json解析。
      success: (res) => {  // 請求成功後，把請求的資料 res 作為引數傳入 。
        console.log(res);// 在控制檯中輸出調取成功後的資料。
        this.arr = res;// 把請求成功後的資料獲取到後，顯示到  data(){} 中 return下的arr陣列當中。 
      },
    });
  },
  methods: {
    toDetail(data) {
      console.log(data);
      this.$router.push({ path: "/jinengDetail", query: data });
    },
  },
};
</script>

至此，列表文章的模組就有資料了。執行效果圖：
在這裡插入圖片描述

5.編寫詳情頁的程式碼

html

<template>
  <div class="wrapper">
    <ul class="content-box">
      <li>
        <div>作者:</div>
        <input id="auther" v-model="detailObj.userName" type="text" />
      </li>
      <!-- v-model 表示雙向繫結，用於在輸入框中顯示主頁面點選後傳回來的資料顯示。 -->
      <li>
        <div>標題:</div>
        <input id="detailTitle" v-model="detailObj.title" type="text" />
      </li>
      <li>
        <div>內容:</div>
        <textarea
          v-model="detailObj.detailInfo"
          id="remark"
          name=""
          cols="30"
          rows="10"
        ></textarea>
      </li>
    </ul>
    <router-view />
  </div>
</template>

國際慣例，配置css程式碼，只要有html程式碼要設定樣式的話就要寫 css程式碼：

<style  scoped>
.content-box {
  padding: 10px;
}

.content-box li {
  display: flex;
  flex-direction: column;
}

.content-box li > div {
  height: 40px;
  line-height: 40px;
  color: #333333;
}

.content-box li input {
  flex: 1;
  height: 40px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.content-box li textarea {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  outline: none;
  /* box-shadow: blue 5px; */
}
</style>

配置完css程式碼後的效果為：
在這裡插入圖片描述
最後是js程式碼：
這裡需要注意的是 url 地址的老師提供的預設地址，需要自己去找介面資料呼叫。

<script>
import $ from "jquery";

export default {
  data() {
    return {
      detailObj: {}, // 此處用於input框中顯示獲取到的資料。
    };
  },
  mounted() {
    console.log(window.location.href);// 顯示當前瀏覽器的訪問路徑 window.location.href。
    console.log(this.$route.query); // 控制檯輸出並獲取到當前的路由傳過來的資料。
    $.ajax({
      url: "http://192.168.3.77:3000/api/demo/detail",
      method: "get",
      data: { id: this.$route.query.id },  // data屬性： 獲取到id 當前的路由資料的id。
      dataType: "json",
      success: (res) => {
        console.log("detailData", res);
        this.detailObj = res;// 把資料傳給detailObj，返回資料。
      },
    });
  },
};
</script>

三、最後的最後不要忘記

在App.vue 根元件中寫路由容器程式碼 <router-view //>
否則頁面沒有任何資料！在這裡插入圖片描述

總結

1.二級路由children ，因為jinengHome這個元件是主頁面，jinnegDetail.vue 是二級頁面，jinnegList.vue與主頁面是同級的元件。

2.引入jQuery檔案需要在專案中配置，配置語句跳出控制檯輸入：npm install jquery --save 即可引入 jQuery，然後在頁面中的script下輸入 import $ from “jquery” 即可使用jQuery的一些語法和程式碼。

3 url: “http://192.168.3.77:3000/api/demo/getList”, 的請求地址，這裡是老師給的伺服器預設地址，這個介面已經有資料了。method: 請求方式要為get請求。

4： success: (res) => { 是使用的箭頭函式來獲取資料，請求成功後，把請求的資料 res 作為引數傳入 this.arr = res;程式碼是把請求成功後的資料獲取到後，顯示到 data(){} 中 return下的arr陣列當中。

5：路由配置檔案path 為路徑，將其設定為 “/” 的話為跳轉到當前主頁面。

專案原始碼：連結：https://pan.baidu.com/s/1Jfz7DmgH9di1uua-bUl_qw
提取碼：pykn

最困難之時，就是我們離成功不遠之日。——凱撒

Flutter 基礎（十二）路由（頁面跳轉）與資料傳遞
2019-08-05
Flutter路由
Flutter基礎（十二）路由（頁面跳轉）與資料傳遞
2019-07-29
Flutter路由
Vue 小案例導航路由跳轉頁面
2019-01-31
Vue路由
織夢DedeCMS列表頁第一篇文章顯示樣式與其他文章不同的實現方法
2020-06-16
uni-APP 新增頁面實現路由跳轉
2020-11-25
APP路由
從列表頁跳轉到詳情頁，返回列表頁時列表頁與之前的狀態相同
2019-12-03
Flutter頁面跳轉到IOS原生介面如何實現？
2019-07-12
FlutteriOS
PHP中實現頁面跳轉
2021-09-09
PHP
Flutter與Native的混合開發之--Andriod專案呼叫Flutter專案頁面-初探
2019-07-19
Flutter
vue-cli 跳轉到頁面指定位置
2024-10-25
Vue
java servlet 與jsp幾種頁面跳轉的方法
2018-03-16
JavaServletJS
Django實現圖片上傳並前端頁面顯示
2020-06-26
Django前端
vue路由切換滑動效果 vue頁面跳轉互動 vue實現動畫跳轉
2024-04-24
Vue路由動畫
前端頁面渲染markDown檔案
2018-06-01
前端
Django實踐（二）——使用模型類定義資料表，實現表單頁面跳轉
2020-12-12
Django模型
將經典頁面轉換成現代客戶端頁面
2018-08-06
客戶端
說說如何使用 vue-router 實現頁面跳轉
2019-04-05
Vue
SpringMVC---02---實現頁面的跳轉轉向與重定向
2020-10-14
SpringMVC
教你如何實現頁面間的資料通訊
2021-07-05
ExpandableListView實現二級列表的顯示
2018-04-22
View
Halo 開源專案學習（四）：釋出文章與頁面
2022-04-26
淘寶API介面呼叫：案例分析與實踐
2024-01-27
API
React 小案例路由跳轉
2019-01-14
React路由
製作首頁的顯示列表
2020-04-04
面試之一個頁面從輸入url到頁面載入顯示完成，中間都經歷了什麼
2018-08-13
面試
帝國CMS列表頁面list.var分別呼叫年月日，顯示個性時間日期
2020-06-10
js頁面跳轉的問題(跳轉到父頁面、最外層頁面、本頁面)
2020-12-01
JS
Android頁面跳轉與返回機制詳解
2024-09-28
Android
RN與原生互動（一）——基本頁面跳轉
2018-06-13
用weexplus從0到1寫一個app(2)-頁面跳轉和文章列表及文章詳情的編寫
2019-05-07
APP
面試官：說一說前端路由，後端路由客戶端渲染與服務端渲染
2021-10-28
面試前端路由後端客戶端服務端
flutter混合(iOS)開發第一步使用(Flutter_Boost)完成頁面之間的跳轉傳值
2020-06-18
FlutteriOS
todolist案例--父子元件協調進行資料傳遞、方法呼叫、列表渲染
2024-10-11
元件
PbootCMS 模板前端文章從列表第2條或者第任意條開始呼叫顯示程式碼
2024-11-16
boot前端
Flutter 入門與實戰（二十七）：使用 GetIt 同步不同頁面間資料
2021-07-12
Flutter
Android路由框架AnnoRouter：使用Java介面來定義路由跳轉
2018-07-25
Android路由框架Java
asyUI分頁中，如何實現頁面跳轉，再返回時，...
2020-01-08
UI
flutter混合(iOS)開發第一步使用(Flutter_Boost)完成頁面之間的跳轉傳值(二)
2020-06-19
FlutteriOS