摘要：前言在上一篇文章，已經(jīng)搭建好所需要的開發(fā)環(huán)境了接下來讓開發(fā)一個(gè)簡單的項(xiàng)目吧。檢測路由變化獲取數(shù)據(jù)這三個(gè)方法都是改變地址欄然后通過檢測地址欄變化去請求數(shù)據(jù)。項(xiàng)目結(jié)構(gòu)最后如果有什么想跟我討論的話，請私信。

在 上一篇文章 ，已經(jīng)搭建好所需要的開發(fā)環(huán)境了,接下來讓開發(fā)一個(gè)簡單的項(xiàng)目吧。
關(guān)于 less 我就不貼代碼了。

源碼地址

先對默認(rèn)的文件進(jìn)行改造一下。
刪除了默認(rèn)的 App.vue、Hello.vue。
然后加了一個(gè) list.vue。
修改一下main.js
然后看到頁面打印出一個(gè) “列表頁” 三個(gè)字的時(shí)候，就表示成功了。

先弄個(gè)最簡單的實(shí)例看看是不是能跑起來。

so easy。

接下來弄個(gè)有動態(tài)數(shù)據(jù)的列表，就是這篇文章的主菜，
大概效果長這樣。
1.上一頁
2.下一頁
3.分類

先裝上我們需要的東西。

cnpm i mint-ui -D
cnpm i vue-router -D
cnpm i less less-loader -S
cnpm i jquery -S

mint-ui => 組件庫，暫時(shí)只用到了其中的loading
vue-router => 路由
less => css的預(yù)處理器
jquery => 老朋友

路由（vue-router）：現(xiàn)在只有一個(gè)列表頁，那就只寫一個(gè)列表頁的路徑，配置 文件放在跟 main.js 同級的地方。

{
    path: "/list",
    name: "list",
    component: List
}

關(guān)于 vue-router 更多的信息，點(diǎn)這里

如果有更多頁面需要配置的地方，比如編輯頁，詳情頁之類的在這里添加就對了。

入口（main.js）: 函數(shù)入口，改了一下之前的配置。

頁面分為了三層，所以對應(yīng)的頁面也有三層。

分類

    

        
{{type.text}}
    

循環(huán)列表，展示內(nèi)容。

    

        {{(i + 1) > 9999 ? "..." : (i + 1)}}
        
            
        
        {{item.tab | tab}}
        {{item.title}}
    

分頁

    上一頁
    下一頁

mounted 做了三件事：
1.從路由獲取數(shù)據(jù)，也就是從地址欄里面獲取 分類 和 頁數(shù)。
2.請求列表數(shù)據(jù)
3.設(shè)置 分類 的數(shù)據(jù)

之所以在mounted里面設(shè)置 分類 的數(shù)據(jù)，是因?yàn)椴幌雂ata里面數(shù)據(jù)太亂。 如果把 請求數(shù)據(jù)那一段話注釋掉的話，就可以看到 分類 的數(shù)據(jù)了。

mounted() {
    // 設(shè)置默認(rèn)頁數(shù)
    this.page = parseInt(this.$route.query.page) || 1;
    // 設(shè)置默認(rèn)分類
    this.tab = this.$route.query.tab;
    // 請求數(shù)據(jù)
    this.getData();
    // 設(shè)置默認(rèn)頭部分類
    this.types = [{
        text: "全部",
        value: ""
    }, {
        text: "精華",
        value: "good"
    }, {
        text: "分享",
        value: "share"
    }, {
        text: "招聘",
        value: "job"
    }, {
        text: "回答",
        value: "ask"
    }];
}

methods 里面添加 getData() 方法，將 ajax 請求回來的數(shù)據(jù)保存到 list 數(shù)據(jù)，然后把頁面滾到頂層，這樣子就能夠看到數(shù)據(jù)了。
至于 common.ajaxGet() 方法，我吧所有的 ajax 請求進(jìn)行了封裝到公共方法里面了。

getData() {
    // 打開loading
    Indicator.open();
    // 請求數(shù)據(jù)
    common.ajaxGet(common.api + "/topics", {
        page: this.page, // 頁數(shù)
        tab: this.tab // 分類
    }).then(data => {
        if (data.success) {
            // 填充數(shù)據(jù)
            this.list = data.data;
            // 移動到頂層
            $(".list").animate({
                scrollTop: 0
            }, 200);
        }
        // 關(guān)閉loading
        Indicator.close();
    });
}

新建一個(gè)文件 src/lib/common.js，這個(gè)文件主要放公共的方法，現(xiàn)在暫時(shí)只用到里面的 ajaxGet() 這個(gè)方法，ajaxGet() 用了個(gè) promise 包裝了一下。

import $ from "jquery";
let common = {
    api: " https://cnodejs.org/api/v1",
    isPhone() {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android終端
        let isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
        return isAndroid || isiOS;
    },
    getType(value) {
        let result = value;
        switch (value) {
            case "job":
                result = "招聘";
                break;
            case "good":
                result = "精華";
                break;
            case "share":
                result = "分享";
                break;
            case "ask":
                result = "問答";
                break;
            default:
                result = "全部"
                break;
        }
        return result;
    },
    ajaxGet(url, data) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                data: data || {},
                success: data => {
                    resolve(data);
                },
                error: data => {
                    reject();
                    console.error("數(shù)據(jù)請求失敗");
                }
            })
        });
    }
}
export default common;

data里面加上幾個(gè)使用的參數(shù)就OK了。

data() {
    return {
        list: [],
        types: [],
        tab: "",
        page: 1
    }
}

使用 getType() 方法，對數(shù)據(jù)過濾一下。

filters: {
    tab(value) {
        return common.getType(value);
    }
}

加上css的話，上面幾個(gè)步驟應(yīng)該就可以看到頁面效果了。

這里 分頁 還有 分類 其實(shí)都是請求同一個(gè)接口，為了在地址欄直接改變 分類 和 分頁 有效，所以只要監(jiān)控地址欄的變化，然后動態(tài)的改數(shù)據(jù)就ok了，不必再寫重復(fù)的請求接口了。

watch: {
    $route() {
        // 檢測路由變化
        this.page = this.$route.query.page || 1;
        this.tab = this.$route.query.tab;

        // 獲取數(shù)據(jù)
        this.getData();
    }
}

這三個(gè)方法都是改變地址欄然后通過 wacth 檢測地址欄變化去請求數(shù)據(jù)。

prev() {
    this.page--;

    // 改變路由
    let query = {
        page: this.page
    }
    if (this.tab) {
        query.tab = this.tab;
    }
    this.$router.push({
        path: "list",
        query: query
    })
},
next() {
    // 改變當(dāng)前頁數(shù)
    this.page++;

    // 改變路由
    let query = {
        page: this.page
    }
    if (this.tab) {
        query.tab = this.tab;
    }
    this.$router.push({
        path: "list",
        query: query
    })
},
onTabSelect(value) {
    // 改變當(dāng)前分類
    this.tab = value;
    this.page = 1;

    // 改變路由
    let query = {
        page: this.page
    }
    if (this.tab) {
        query.tab = this.tab;
    }
    this.$router.push({
        path: "list",
        query: query
    })
}

輸入 http://localhost:8080/list?pa... 看看頁面是不是就會跳到對應(yīng)的頁面了呢，這樣子把鏈接分享出去的話，也能定位到當(dāng)時(shí)的狀態(tài)。

項(xiàng)目結(jié)構(gòu)

如果有什么想跟我討論的話，請私信。