摘要：知識點部分簡單的說一下我這個城市選擇組件和其中的一下知識點后臺我用起了一個后臺服務，使用的框架，完成滿足了我的需求。還有倆個基礎組件，分別是滾動組件和城市組件。子組件模板必須包含至少一個插口，否則父組件的內容將會被丟棄。

　　借用了兩個已經久經考驗的輪子：fastClick和better-scroll，介意可以就此打住。本文絕對原創，手打，思路清晰，知識不難，不適合大佬觀看，謝謝。

　　首先說一下，我不是阿里的人，也沒去阿里面試過，這是某微信群里的一個小伙伴給的，不是面試題不是面試題不是面試題，我現在的能力達不到阿里的要求。不過人沒夢想還不如咸魚，有能力的話還是想去嘗試一下。本文如有不足，請勿嘲諷，指出不足即可，謝謝。碼字不易，且看且珍惜，轉載請注明出處。原創博客，若侵犯貴司的利益，請私信我刪除。若覺得不錯，求個贊和github的star。

　　題目如下：

　　大概就是這樣吧，分析一下就是做一個城市選擇組件，實現的功能或者要求呢就是可以定位當前的城市、用localstorage存儲上次定位的城市和最近選擇過的城市、可以按照輸入的字母或者文字篩選出想找的城市、將數據帶到頁面也就是一個父子傳參的問題吧、頁面使用flex布局。
我在下班閑暇時間簡單的做了一下， 如下:

　　我僅僅做了這個組件，向頁面傳參的功能還沒做，可以用父子組件傳參完成。

　　簡單的說一下我這個城市選擇組件和其中的一下知識點：

　　我用node.js起了一個后臺服務，使用的express框架，完成滿足了我的需求。我的數據來源是爬取的某網站的城市地址(若侵權請聯系我刪除)，數據是這樣的：

    {
      "id": 151,
      "name": "鞍山",
      "pinyin": "anshan",
      "acronym": "as",
      "rank": "C",
      "firstChar": "A"
    }

　　我在node端調用了某浪的一個定位接口作為我的定位服務，并將數據返回，當這個接口有問題或者沒獲取到的時候會返回定位在北京。具體代碼為：

// 獲取城市數據，city為我爬取的信息
app.get("/", function (req, res) {
    res.send(city);
    res.end()
});
// 調用新浪的接口返回定位
app.get("/nowcity", function (req, res) {
    let getIpInfo = function (cb) {
        var url = "http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json";
        http.get(url, function (res) {
            var code = res.statusCode;
            if (code == 200) {
                res.on("data", function (data) {
                    try {
                        cb(JSON.parse(data));
                    } catch (err) {
                        console.log(err)
                    }
                });
            }
        }).on("error",function(e){
            cb({
                city: "北京",
                country: "中國",
                province: "北京",
            })
        })
    };
    getIpInfo(function (msg) {
        let nowcity = msg
        res.send(nowcity)
        res.end()
    })
});

　　本次組件基于vue框架，我使用vue-cli腳手架搭建的，這一塊知識很多博客已經講解到，不多做描述。

　　本次我使用了css預處理程序——stylus。在vue-cli中使用stylus首先要安裝依賴：npm install stylus --save-dev、npm install stylus-loader --save-dev。然后再文件中使用