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

資訊專欄INFORMATION COLUMN

從Nodejs腳本到vue首頁看開源始末的DemoHouse

Gemini / 2541人閱讀

摘要:最近上看見了大漠的項目,看到說準備做一個首頁,于是我的第一想法就是做一個列表頁面,文件可以很容易的生成一個文件。對于不確定的情況下,我們不表明具體的協議,使用。

最近上Github看見了大漠的DemoHouse項目,看到Issues說準備做一個首頁,于是我的第一想法就是做一個md列表頁面,md文件可以很容易的生成一個html文件。剛剛做好腳本文件,可以生成list.md。隨后提了pr。同時看到 @jerexyz 使用gulp構建工具做好了一個生成index.html的工具,我也就暫時放棄了繼續后面的工作,還好沒做,繼續做的話生成出來的也比較粗糙,還得再繼續美化修改。想象一下,如果這時我新收集了一個Demo,準備提交版本庫,我是不是還得先執行一下命令 node index.js 然后再添加暫存區,提交版本庫,推遠程。如何省略執行命令行這一句呢?

git hook (鉤子)

說到鉤子,不知道大家喜歡釣魚嗎?喜歡不喜歡應該都知道魚鉤,不知道的再看一下,魚鉤長這樣的。

這是有一期我愛發明里面介紹的,一個釣魚狂熱愛好者發明的釣魚神器,看節目似乎很有效。通常我們見到的魚鉤就只是上半部分,這里卻多了一個小鉤,其實他就是我們這里準備學習的hook。

為了達到某種效果,我們添加的一個腳本,在正常流程執行的時候觸發這個腳本(個人拙略,如有偏頗忘指出)。

git的鉤子存放在 .git/hooks 目錄下,git init 時會自動生成一些示例腳本在該目錄下,腳本都是 .simple 后綴結尾,如果需要使用的時候,重命名取消后綴即可。

這里是希望在存入版本庫之前生成列表頁,查詢文檔發現 pre_commit 是在 鍵入提交信息前運行 。

git add demo => pre_commit => git add list.md => git commit -m "add new demo and update list.md"

pre_commit 是一個腳本文件,由于nodejs寫好了一個腳本文件,于是添加了一個頭部,然后最后添加生成的list.md到暫存區間

git add demo => git commit -m "add new demo and update list.md"

實際上我們的操作流程就變成如上描述的樣子。這個就是正常流程,git commit 命名回車后先執行的是 pre_commit 腳本,再存入版本庫

自動生成list.md的工作到這里就完成了,更多的鉤子文件這里暫時不繼續擴展了。
又看到還有一個需求就是為每個demo添加一些其他信息,例如:分類/作者等信息。這樣 @jerexyz 的項目工具怎么修改實現一下呢,或者說其他方案怎么實現呢?

方案討論

參考 @jerexyz 的想法與 大漠 的思路,如果要配置多項信息我想就是在每個demo下配置一個config.json文件靠譜一些。
或者像 @jerexyz 提出的直接title添加分類,方法也行,這樣存在修改index.html文件,還有就是配置信息多或者后期再增加修改就沒有配置文件方便直觀。如果在原來的工具的基礎上修改的話就需要生成幾個也買你,把分類數據統計出來,然后再為每個分類數據生成一次頁面,最后相互調用。是不是有一種其他的方法來處理呢?恰巧最近又在學習vue,于是就準備嘗試一下。一個單頁就可以搞定,不需要每次更新前端頁面,只需要更新后端數據文件db.json即可。

vue

在vue還是版本號1打頭的時候看過文檔,沒有實際做過demo,后面自然而然還是只能對著文檔編碼。
一開始我是直接script編譯好的vue.js文件,然后實例化vue。也就是這樣子的

    # index.html 中這樣引入vue
    

    # scirpt 標簽中這樣實例化,純純的文檔風
    var vm = new Vue({
        el: "#id",
        data: {
            message: "阿彌陀佛"
        }
    })

這樣子沒毛病,沒有任何問題。但是對于招牌需求這個構建工具那個構建工具,還是要摸索學習學習。于是又決定嘗試一下也只是停留在文檔風的webpack。選擇它也是有原因的,因為我重視基礎也更風啊,哈哈哈~

前期準備工作

這里是寫在vue2.0.0RC版本

創建項目目錄(這里其實也跟風的玩了一下yarn,但是并沒太多感受理解它的優秀,不做描述)

    npm i vue-cli -g
    vue init webpack demo
    cd demo
    npm i
    npm run dev

自動啟動瀏覽器打開 http://localhost:8080 頁面,展示一個vue的初始模板頁面

列表頁組件
不會從頭到尾手寫,還不會修改嗎?由于暫時需要實現的就是一個列表,想到的就是 v-for="demo in demos"

    # 入口文件main.js中引入了app.vue組件

    # app.vue組件中包含了這里我們需要修改的list.vue

    # list.vue 
    /**
     * 組件的三個部分(html+js+css),如果描述感覺vue就簡單了好多
     * template(html或者是自定義標簽)
     * script (js)
     * style (css)
     */
    

    

    

需要注意的一點是這里的data是一個函數,組件內的data都是函數的形式,至于為什么還沒去理解,先學會第一步如何使用。其實你寫成了對象形式,在開發者工具會輸出提示。

導入數據
準備了一個數據文件db.js,修改之前生成列表的工具,把每個demo下的配置文件讀取出來追加到db.js中。

    # 以下代碼位于template中
    
{{demo.category}}
# li標簽需要修改一下,如果newDemos存在,按照newDemos的分類數據輸出
  • {{ demo.title }}
  • # 以下代碼位于script中 # 導入db.js import demos from "./db" data: function() { return { demos: demos, newDemos: "" } } # 如果要分類顯示呢 # 添加一個方法 methods: { getCategoryDemos: function(e) { var newDemos = []; this.demos.forEach(function(demo) { if(demo.category === e.target.dataset.category) { newDemos.push(demo); } }) this.newDemos = newDemos; } }

    顯示全部
    上面取巧式的把分類數據實現了,如果要顯示全部呢?即回到首頁。把newDemos的值設為空不就好了嗎?數據綁定的好處就是這里吧,監控數據的變化重新渲染。

        # 添加template    
        
    Home
    # 添加method showAll: function() { this.newDemos = ""; }

    預覽demo
    預覽demo即在列表頁面添加iframe標簽引入demo靜態頁面。默認是不顯示的,如果添加了一個判斷語句 v-if

        # template add iframe
        
    
        # script 
        # data中添加isShow 
        data: function() {
            return {
                // 新增
                isShow: false
            }
        }
    
        # method中添加showAll
        method: {
            // 新增
            showAll: function() {
                this.isShow = true;
            }
        }

    其它問題總結

    iframe https

    page是https協議,iframe的資源可能是http,也可能是https。對于不確定的情況下,我們不表明具體的協議,使用 // 。(不擴展討論其它問題)

    URI 是https協議,iframe src是http協議
    Mixed Content: The page at "https://domain.dev" was loaded over HTTPS, but requested an insecure stylesheet "http://domain.dev". This request has been blocked; the content must be served over HTTPS.

    URI 是http協議,iframe src是https協議
    均正常加載訪問,iframe請求地址是https協議。

    URI 是https協議,iframe src是https協議

    URI 是http協議,iframe src是http協議

    開源協議與開源精神
    截止昨晚22點左右,幾位國外的開發者在 漠大 的repo下開了issue,討論關于項目是否不應該存在,或者說是不是不應該拷貝其它平臺(codepen,Codrops …)上的內容在github備份一份。

    觀點一 原創
    國外:重視原創。對于原創的作品的保護或者尊重,我們是不是不應該在其它位置備份別人的作品,而沒有署名源作者的版權信息(其實這一步是準備做,或者說是還沒來得及做,但是考慮到的)。只是沒想到國外的開發者對于原創的重視,還有在Twitter上發推討論,雖然也就那么幾個人在討論,但其中不乏也有Codrops的開發者。

    國內:太多的技術類型的網站,除了作者自己主動分發。更多的還是爬蟲抓取,最后抹去源作者的信息,也不注明來源出處。最后不得不說讓源作者的原創不能得到很好的保護,還造成了很多垃圾水文的存在。

    觀點二 加源保持最新
    很多作者會一直更新自己的項目,但是我們通常只是拷貝了一份最初的版本,如果有升級更新,通常我們都不能使用到最新的內容。還會覺得怎么參考的文章有錯誤,其實不然,是被抓取出來的沒有及時更新。

    觀點三 網絡問題
    國外開發者也知道中國的問題,其實這是讓我覺得有些可悲的,網絡始終是病。當問及codepen是否能訪問的時候,我說的不能,因為這個網絡不穩定,常常是不能直接訪問的,所以我們常常收藏一些好的例子,以備不時之需,但最后卻始終是覺得國外的做的好。國內的好作品怎么搜集起來,怎么讓他能夠在trending上持續排第一,得到不止國內開發者的肯定。

    雖然我也只是一個渣渣,但是我也有夢想,希望可以更多的提升自己,參與開源,對于原創的保護以及鼓勵希望更多的人能夠重視并自律參與,對于源進行物質的鼓勵或者說行為上允許后再進行轉載。這路應該還很長…

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

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

    相關文章

    • DemoHouse

      摘要:我是屬于喜歡收集各種有意思的有吸引的。收集它們主要出于給自己增漲見識給自己做練習給創意提供儲備其實除了這些,還可以把它給有需要的同學。出于這些,花了兩年多時間收集了各式各樣的前端案例,有純的,有皮膚的,有動效的。除此之外,還有另外兩種方式。 這篇文章不是純介紹技術的文章,但其實里面的內容是有關于前端技術的。 DemoHouse是什么 或許會問DemoHouse是什么?其實它就是一個個人...

      lewinlee 評論0 收藏0
    • DemoHouse

      摘要:我是屬于喜歡收集各種有意思的有吸引的。收集它們主要出于給自己增漲見識給自己做練習給創意提供儲備其實除了這些,還可以把它給有需要的同學。出于這些,花了兩年多時間收集了各式各樣的前端案例,有純的,有皮膚的,有動效的。除此之外,還有另外兩種方式。 這篇文章不是純介紹技術的文章,但其實里面的內容是有關于前端技術的。 DemoHouse是什么 或許會問DemoHouse是什么?其實它就是一個個人...

      go4it 評論0 收藏0
    • docker 應用系列(一)--- 一步步搭建虛擬機 docker 環境 附有 vue-cli +

      摘要:為確保系統里面沒有自帶的軟件的殘留,我們要清除一下舊版本的,雖然新系統一般都不會有就是了。更新軟件包緩存。 showImg(https://segmentfault.com/img/remote/1460000015914895?w=1240&h=819); 小劇場 測試:褲襠你這頁面刷新就白屏啊,怎么了啊,而且你看這 network,怎么這些 js 這么大啊,很耗流量而且加載速度還很...

      hatlonely 評論0 收藏0
    • Iceworks 2.7.0 發布,海量圖表供你選擇

      摘要:發布,海量圖表供你選擇,豐富模板一鍵創建,提供多種垂直領域模板,快速創建項目,支持風格切換,滿足個性化需求輕松操作頁面管理,海量物料自由搭配,頁面組合可視化操作更得心應手開發調試一體化,集成運行環境零配置運行,開箱即用。 Iceworks 2.7.0 發布,海量圖表供你選擇 Iceworks,豐富模板一鍵創建,提供多種垂直領域模板,快速創建項目,支持風格切換,滿足個性化需求;輕松操作頁...

      gitmilk 評論0 收藏0

    發表評論

    0條評論

    Gemini

    |高級講師

    TA的文章

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