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

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

源碼地址

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

先弄個最簡單的實例看看是不是能跑起來。

so easy。

接下來弄個有動態(tài)數據的列表，就是這篇文章的主菜，
大概效果長這樣。
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 => 組件庫，暫時只用到了其中的loading
vue-router => 路由
less => css的預處理器
jquery => 老朋友

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

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

關于 vue-router 更多的信息，點這里

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

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

頁面分為了三層，所以對應的頁面也有三層。

分類

    

        
{{type.text}}
    

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

    

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

分頁

    上一頁
    下一頁

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

之所以在mounted里面設置 分類 的數據，是因為不想data里面數據太亂。 如果把 請求數據那一段話注釋掉的話，就可以看到 分類 的數據了。

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

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

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

新建一個文件 src/lib/common.js，這個文件主要放公共的方法，現在暫時只用到里面的 ajaxGet() 這個方法，ajaxGet() 用了個 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("數據請求失敗");
                }
            })
        });
    }
}
export default common;

data里面加上幾個使用的參數就OK了。

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

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

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

加上css的話，上面幾個步驟應該就可以看到頁面效果了。

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

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

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

這三個方法都是改變地址欄然后通過 wacth 檢測地址欄變化去請求數據。

prev() {
    this.page--;

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

    // 改變路由
    let query = {
        page: this.page
    }
    if (this.tab) {
        query.tab = this.tab;
    }
    this.$router.push({
        path: "list",
        query: query
    })
},
onTabSelect(value) {
    // 改變當前分類
    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... 看看頁面是不是就會跳到對應的頁面了呢，這樣子把鏈接分享出去的話，也能定位到當時的狀態(tài)。

項目結構

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