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

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

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

　　題目如下：

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

　　我僅僅做了這個(gè)組件，向頁面?zhèn)鲄⒌墓δ苓€沒做，可以用父子組件傳參完成。

　　簡單的說一下我這個(gè)城市選擇組件和其中的一下知識點(diǎn)：

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

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

　　我在node端調(diào)用了某浪的一個(gè)定位接口作為我的定位服務(wù)，并將數(shù)據(jù)返回，當(dāng)這個(gè)接口有問題或者沒獲取到的時(shí)候會返回定位在北京。具體代碼為：

// 獲取城市數(shù)據(jù)，city為我爬取的信息
app.get("/", function (req, res) {
    res.send(city);
    res.end()
});
// 調(diào)用新浪的接口返回定位
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腳手架搭建的，這一塊知識很多博客已經(jīng)講解到，不多做描述。

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