[前端史萊姆與Vue的三十天時光冒險]Day19 閒不下來的史萊姆(二)：網站基本資料統整與footer元件實作

資料整理好，以後維護的時候才(比較不會？)會懷疑人生

相信跟我一樣在切版的大家都有跟我同樣的經驗，總是會有那麼幾次要改前人留下來的專案。但是那個程式碼一打開看，心也累了。

然後就完全放棄找前人的規則，用自己知道的方法修改專案，於是乎整個專案變成越來越大包的怪獸。

在切版最初時就撇開強者自己做網站前台+後台的可能性，大膽假設店家是委外製作網站。如此一來就會牽涉到「店家自行管理後台」的方便性這件事。

趁這這次微調將網站資料全部統整在一個物件內，方便以後整個專案的管理(我自己覺得啦XD)

data物件統整

未調整前的data物件如下

headerSetion: {
    headerImg: {
        bannerBg: '/static/images/bg_01.png',
        siteLogo: '/static/images/logo.svg',
    },
    siteTitle: "I don't want to work",
    logoTxt: '<span>不 想</span> <span>上 班</span>',
}

調整後的data物件如下

siteInfos: {
    siteImgs: {
        bannerBg: "/static/images/bg_01.png",
        siteLogo: "/static/images/logo.svg",
        footerLogo: "/static/images/logo_white.svg",
    },
    siteName: "不 想 │ 上 班",
    siteTitle: "I don't want to work",
    sitePhone: "07-536-0000",
    siteAdd: "香港銅鑼灣興發街1號",
    siteIg: "I_dont_wank_to_work",
}

一日元件化，終身元件化(威

另外也將footer製作成元件的方式，同樣使用Vue.component的做法，只是這次直接將HTML元件寫入Vue.component函式中。其中icon的部分偷懶直接採用Font Awesome

<footer-component :site-phone="siteInfos.sitePhone" :site-logo="siteInfos.siteImgs.footerLogo"
            :site-ig="siteInfos.siteIg" :site-add="siteInfos.siteAdd">
        </footer-component>

如同上面所說，我將所有網站基本資訊統整在new Vue的data屬性中，所以<foot-component>要讀出網站資訊的話，就必須使用props來輔助，JS程式碼如下：

Vue.component("footer-component", {
    props: ['siteLogo', 'sitePhone', 'siteAdd', 'siteIg'],
    template:
        `<div id="footer" class="row justify-content-end">
            <div class="col-12 col-xl-4 d-flex justify-content-end align-items-center p-3 mr-5">
                <div class="f-logo pr-5 mr-5"><img :src="siteLogo" alt="" srcset=""></div>
                <ul>
                    <li><i class="fas fa-phone"></i>{{sitePhone}}</li>
                    <li><i class="fas fa-map-marker-alt"></i>{{siteAdd}}</li>
                    <li><i class="fab fa-instagram"></i>{{siteIg}}</li>
                </ul>
            </div>
        </div>`,
});

到目前為止順利地完成整個網站資料統整以及元件製作的部分，明天我們繼續來聊聊Scroll Down按鈕的實作唷！

你有更多的問題嗎？你有什麼建議呢？
歡迎在下方留言，或加入我的臉書粉絲頁一起討論！

【免費支持】如果你幫我拍手5下，我有機會得到內容創作的酬勞🙂