国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

利用vue-cli配合vue-router搭建一個完整的spa流程(一)

cgh1999520 / 2748人閱讀

摘要:利用配合搭建一個完整的流程二前言所用的一些基本操作。全局安裝創建一個基于的模板創建過程中,為必須,其他語法檢測,單元測試等按需求安裝。為入口文件,的實例在這里書寫。掛載在中的標簽上。定時器的作用是模擬數據請求延時。

2017/5/9 更新!
GitHubpages搞了下,PC可以瀏覽。↓

https://15901233752.github.io...


demo源碼:https://github.com/1590123375...

demo未安裝依賴,下載完成,npm install后再npm run dev運行。

利用vue-cli配合vue-router搭建一個完整的spa流程(二)

前言
Ⅰ. demo所用vue-router的一些基本操作。vue-router中文文檔,快速瀏覽一遍即可 http://router.vuejs.org/zh-cn/
Ⅱ. 整個demo所用到的技術棧 vueJS(2.0) vue-cli vue-resource es6
Ⅲ. 所需構建工具 nodeJS Git

第一步:安裝

OK,正題開始,首先保證nodeJS,Git,webpack已安裝完畢。打開項目文件夾,安裝vue-cli。

全局安裝 vue-cli
$ npm install --global vue-cli

創建一個基于webpack的模板
vue init webpack my-project
創建過程中,vue-router為必須,其他語法檢測,單元測試等按需求安裝。

創建完成后進入項目文件夾,安裝依賴
$ npm install

安裝到此結束,運行如下代碼,顯示為圖片所示,則安裝成功。
$ npm run dev

第二步:項目文件及運行流程 Ⅰ: 項目文件

打開已經創建好的模板

如圖所示,只會用到,src,static,index.html這三個文件。首先解釋一下三個文件的作用:
Ⅰ: src 存放路由JS,模板.vue文件,入口JS,以及一個入口.vue文件
Ⅱ: static 存放靜態文件
Ⅲ: index 入口html文件

這里解釋一下xxx.vue文件是什么,官網叫其為單文件組件,通過webpack源碼轉換,會全部轉換為對應的文件。
說白了就是一個包裹,里邊含有三部分 一部分模板template,一部分樣式style,一部分JSjavascript,他們封裝在一起。
如下圖所示:

Ⅱ: 運行流程

寫起來比較麻煩,做了一張圖,直截了當。

第三步:搭建基本路由框架

項目文件明了之后,我們開始搭建一個簡單的SPA路由構架:
Ⅰ: 頁面中有倆個及倆個以上的分類
Ⅱ: 每個分類中可以點擊進入到詳情頁面
Ⅲ: URL輸入錯誤后展示404頁面
Ⅳ: 在頁面中刷新,根據URL重新獲取數據,渲染頁面

根據基礎框架創建對應的文件。

文件詳解:
Ⅰ: src中components文件夾里新建三個xxx.vue文件,
①error.vue 此為404頁面
②showone.vue 此為第一個分類頁面
③showtwo.vue 此為第二個分類頁面

Ⅱ: src中zjapp.vue這是路由入口文件

Ⅲ: static中img為詳情頁面大圖,thumbnail為分類頁面縮略圖

Ⅳ: 倆個JSON文件,分別代表分類一和分類二的數據來源

Ⅴ: bootstrap.css 樣式CSS

到此路由的基本框架搭建完成,后面開始代碼的填充。

第四步:主頁面代碼編寫 Ⅰ: index.html

作為頁面入口文件,先引入Bootstrap.CSS,如果是本地文件放在static文件夾里。可以使用CDN或者npm安裝。
為了方便后面閱讀將id="app"更改為id="index"。當然,也可以不更改,main.js中有多個為app的名字,避免混淆。



  
    
    <span class="undefined">spa-vue-demo</span>
    
  
  
    
Ⅱ: main.js

main.js為入口JS文件,Vue的實例在這里書寫。el 掛載在 index.html 中 id="index" 的標簽上。

import Vue from "vue"
import App from "./zjapp"
import router from "./router"

Vue.config.productionTip = false

new Vue({
  el: "#index",
  router,
  template: "",
  components: { App }
})

Vue 開始渲染時,加載 components: { App } 組件替換生成在 id="index" 內的 標簽,那么{ App }來自哪里呢?

答案在 import App from "./zjapp" 這里是ES6語法,引入zjapp.vue模塊中暴露出來的接口,后綴可以不寫。

Vue 實例中的 router 屬性也是ES6中對象的字面量寫法,等于router:router。同理 import router from "./router" 這里引入router。

因為,router中index.js暴露接口時沒有署名,這里也可以改一個名字,比如:

import Vue from "vue"
import App from "./zjapp"

//修改名字一樣可以。
import changeES6 from "./router"

Vue.config.productionTip = false

new Vue({
  el: "#index",

  //修改在這里
  router:changeES6,

  template: "",
  components: { App }
})

最后,可能有人會問 Vue.config.productionTip = false 是做什么用的,其實這里是關閉了生產模式即部署到服務器后給出的提示。

Ⅲ: zjapp.vue

這個文件是 Vue 一開始渲染組件時的文件,首先貼出全部代碼,很多,但是會全部講解作用,含義。



Ⅰ: HTML部分(即template)

大體分為三部個分

第一部分:

 
      
 

第一部分為頁面中內容路由入口,其中:
v-bind:router-data="allData" 是對模板中傳輸數據用的
v-bind:key="change" 是頁面切換動畫綁定的變值,用來使頁面被復用時觸發切換動畫

第二部分:


    

第二部分為頁面中上一頁,下一頁按鈕部分,其中:
v-show="allData.mainShow" 是控制倆個按鈕顯示,隱藏(詳情頁隱藏)
v-show="back==0?false:true" 是控制單個按鈕顯示,隱藏(最后一頁時,下一頁按鈕隱藏)
v-on:click="dosom("back")" 是綁定的點擊事件

第三部分:

第三部分為頁面中內容更新數據時loading畫面,其中:
v-show="loading" 是用來顯示,隱藏 loading 動畫

好了,到此主要的HTML模塊已經布局完畢,現在開始JS功能的開發

Ⅱ: javascript

JS這里的整體流程:watch router.path的變化,從URL中讀取數據,從新獲取數據。(因為本地JSON文件,獲取JSON后對JSON進行剪切)

import router from "./router" ES6語法,引入router模塊下暴露的接口,這里引入router實例為后續編寫編程式導航鋪墊。

data(){ 
    return{
        allData:{
            showData:null,
            detailedData:{},
            num:0,
            mainShow:true
        },
        loading:false,
        change:true,
        back:0,
        next:1,
    }
}

showData 為當前頁面渲染數據,即router-view被替換為showone.vue模板中的數據來源,每次點擊下一頁等操作導致router.path變化時,此數據更新對應的子模板中(showone.vue)數據也更新。(后面講到路由頁面時會解釋)

detailedData 為詳情頁面渲染數據,即router-view被替換為showtwo.vue模板中的數據來源,同上。

num 這個是用來每次打開或者刷新頁面時讀取當前為第幾頁的number,因為這個數值用了很多次,故將它放到了初始化函數里

mainShow 控制倆個按鈕(下一頁,上一頁)總體顯示,隱藏

loading 控制loading動畫的顯示,隱藏

change 頁面復用時的Key值

back 返回按鈕的number,因為按鈕的判斷為v-show="back==0?false:true"當為0是隱藏

next 同上

以上為這個demo中數據的含義,下面是方法的解釋,從methods開始說起:

buttonToggle(){
    var nowNum=this.allData.num;
    this.back=nowNum;
    this.next=2-nowNum;
}

這是倆個按鈕的控制函數,因為JSON數據不多,一個分類中只有2頁數據,所以 this.next=2-nowNum; 最后一頁時隱藏。

dosom(str){
    str=="next"?this.allData.num++:this.allData.num--;
    this.buttonToggle();

//  http://localhost:8080/#/user/0/1
//  http://localhost:8080/#/user/0/this.allData.num
    router.push(this.$route.path.slice(0,8)+this.allData.num);
}

這是按鈕點擊時觸發的方法,點擊后判斷是上一頁,還是下一頁,因為會動態的隱藏按鈕所以不用關注++或者--的上下界。隨后進行url的更改(url更改后會觸發watch,watch中執行的函數為 routePath() ,下一個說到)

routePath(){
    if(this.$route.fullPath=="/"){
        router.push("/user/0/0");
        this.load();
    }
    else if(this.$route.fullPath.length==9 || this.$route.fullPath.length==20){
        this.load();
    }
    else{
        router.push("/user/error");
        this.back=0;
        this.next=0;
    }
}

this.$route.fullPath 返回的是全部 url 字符串,這是當前url判斷函數:

當讀取到的url為“/”時,此為第一次打開頁面,跳轉到首頁也就是 http://localhost:8080/#/user/0/0 然后 執行load()方法,load() 方法下一個說到。

當讀取到this.$route.fullPath.length==9 || this.$route.fullPath.length==20,其實就是 this.$route.fullPath/user/x/x 的主頁面中,或者為 /user/x/x/con?type=x 的詳情頁面中,此時直接進行 load() 方法更新數據即可

最后其他任何 url 都被認為是錯誤的 http 請求,返回404頁面,當然倆個翻頁按鈕隱藏。

load(){
    var numData=null,
    listData=null;    
        
//  /user/lisData/numData
    listData=this.$route.path.slice(6,7);
    numData=this.$route.path.slice(8,9);    
        
//  初始化num值
    this.allData.num=numData;
    this.buttonToggle();
//  頁面復用時Key值
    this.change=!this.change;
    if(this.$route.path.indexOf("con")>0){

//      獲取list中第幾個
        var typeData=this.$route.query.type;
        this.$nextTick(e=>{
            this.$http.get("static/data-"+listData+".json").then(rea=>{
                this.loading=true;
                setTimeout(e=>{
                                    
                    //vue-resource加載數據存在于data.body中
                    var listNum=rea.body.allData.slice(numData*6,numData*6+6);
                                
                    //詳細顯示頁面數據來源
                    this.allData.detailedData=listNum.slice(typeData,typeData+1)[0];
                                
                    this.loading=false;
                },700);
            });                
        });
        this.allData.mainShow=false;
    }else{
        this.$nextTick(e=>{
            this.loading=true;
                setTimeout(e=>{
                    this.$http.get("static/data-"+listData+".json").then(rea=>{
                        this.allData.showData=rea.body.allData.slice(numData*6,numData*6+6);
                        this.loading=false;
                    });
                },700);
            });
        this.allData.mainShow=true;
    }
}

這個方法的作用是交互數據,demo 有倆個分類,首頁,和第一頁,所以對應的數據也是倆個JSON。定時器的作用是模擬數據請求延時。

以上就是 methods 方法里全部函數,下面解釋一下Vue實例里其他的方法。

created(){
    this.routePath();
}

這是一個生命周期鉤子代表Vue實例被創建好了,創建好之后進行url解析,這是初始化的步驟,第一次打開這個demo執行的函數。官方文檔:Vue生命周期

watch:{
    "$route"(to){
        this.routePath();
    }
}

說到 watch 了這是監控url變化時觸發的函數,說白了就是執行 router.path("/user/x/x")
之后Vue會檢測到變化,從而進行回調函數,這里執行 routerPath() 分析 url 是屬于哪個頁面從而進行數據更新。

好了,javascript的編寫到此結束,主要部分還是在 routerPath() 這個函數,再通過 url 重新獲取數據。

style 部分就不說了,簡單的css3動畫

后續部分寫在 利用vue-cli配合vue-router搭建一個完整的spa流程(二)上。順便求一波關注吧(ˉ▽ˉ;)...

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82659.html

相關文章

  • 利用vue-cli配合vue-router搭建完整spa流程(二)

    摘要:利用配合搭建一個完整的流程一在一中寫到了主要頁面的編寫,現在開始三個路由頁面的編寫。每個列表綁定跳轉到詳情頁的函數。整體思想通過監控的變化,變化后執行函數,隨后重新獲取數據。 上篇文章太長了,編寫時拖動太麻煩,重開一篇。利用vue-cli配合vue-router搭建一個完整的spa流程(一) 在(一)中寫到了主要頁面的編寫,現在開始三個路由頁面的編寫。 第一步: 路由實例inde...

    mcterry 評論0 收藏0
  • webpack配合vue.js實現完整單頁面demo

    摘要:本篇文章主要是我在開發前研究了的單頁面應用,因為需要用到的,所以確保安裝了,建議官網安裝最新的穩定版本。本文章只是和大家探討怎么利用配合做一個單頁面應用,具體關于里面的內容怎么寫并不在本篇文章的介紹范圍。 本篇文章主要是我在開發前研究了webpack+vue.js的單頁面應用,因為需要用到node的npm,所以確保安裝了node,建議官網安裝最新的穩定版本。并且在項目中需要加載一些np...

    2450184176 評論0 收藏0
  • vue.js使用vue-cli搭建SPA項目

    摘要:之所以寫這篇如何運用腳手架自動化構建出一個項目的大架構,主要是面向想入門的小伙伴。之前,我第一次接觸,一直摸不著頭腦,想在網上搜個接地氣的教程都找不到。 WHY 之所以寫這篇如何運用腳手架自動化構建出一個項目的大架構,主要是面向想入門vue的小伙伴。之前,我第一次接觸vue,一直摸不著頭腦,想在網上搜個接地氣的教程都找不到。SO,我以如何搭建結構為開始,向想入門vue的童鞋們把我僅有的...

    CrazyCodes 評論0 收藏0
  • vue.js使用vue-cli搭建SPA項目

    摘要:之所以寫這篇如何運用腳手架自動化構建出一個項目的大架構,主要是面向想入門的小伙伴。之前,我第一次接觸,一直摸不著頭腦,想在網上搜個接地氣的教程都找不到。 WHY 之所以寫這篇如何運用腳手架自動化構建出一個項目的大架構,主要是面向想入門vue的小伙伴。之前,我第一次接觸vue,一直摸不著頭腦,想在網上搜個接地氣的教程都找不到。SO,我以如何搭建結構為開始,向想入門vue的童鞋們把我僅有的...

    B0B0 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<