《從零構(gòu)建前后分離的web項(xiàng)目》前端完善 - 手把手教你快速構(gòu)建網(wǎng)站布局

時(shí)間：2023-05-29 01:27:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-29 01:27:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

《從零構(gòu)建前后分離的web項(xiàng)目》前端完善 - 手把手教你快速構(gòu)建網(wǎng)站布局：

添磚加瓦-快速完成自己的項(xiàng)目

本文為方便講述重構(gòu)去除了 Element、vux 庫(kù)，用了最近比較火的 bulma 輕量、快捷、易讀。

項(xiàng)目截屏

Layout and Components

Layout

首先，似上圖，我們思考把一個(gè)小型網(wǎng)站拆成三部分：頁(yè)頭(Header)、內(nèi)容(Content)、頁(yè)腳(Footer) 這幾乎每個(gè)網(wǎng)站內(nèi)都必須有的，通常把萬(wàn)年不變的：頁(yè)頭(Header)、頁(yè)腳(Footer) 制作成 Layout 方便通用。

Components

再把內(nèi)容(Content)根據(jù)業(yè)務(wù)進(jìn)行拆分成 組件(Components)







如上圖：Header 和 Content ：Header其實(shí)沒(méi)有拆分的必要，沒(méi)有可以重用的組件，而 Conntent 是必須要拆分的布局元素。因?yàn)閯?dòng)態(tài)網(wǎng)站 Conntent 隨著內(nèi)容的變化而變化，內(nèi)容多，可重用的東西的概率越高，需要把能重用的東西提煉出來(lái)

1、節(jié)省代碼、提高代碼閱讀性

2、便于修改 （比如更新廣告）

開(kāi)始寫(xiě)代碼

接著我們的 第二章上傳的源碼 開(kāi)始，基于它繼續(xù)完善小網(wǎng)站布局和組件化。

值得一提的是：本系列教程一章跟隨一章并且每一章可以獨(dú)立運(yùn)行，章與章之間完美銜接，沒(méi)有 “突然出現(xiàn)” 的代碼段。不會(huì)給新手無(wú)從下手的感覺(jué)，如果那你對(duì)代碼陌生，那你該認(rèn)真翻翻往期文章了。你可以基于上一章逐步寫(xiě)代碼，也可以下載本章簡(jiǎn)單預(yù)覽代碼。

• 引入 bulma 樣式 CDN

vim new-bee/index.html<!-- font --> <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">

• 新建 Layout 目錄

vim new-bee/src/renderer/components/layout

• Layout 目錄下建立 Header.vue 模板組件

這個(gè)組件專門寫(xiě)頭部的內(nèi)容，最好配合柵格盡可能寫(xiě)出簡(jiǎn)單的響應(yīng)式組件

<template> <div id="bee-header" element-loading-text="正在努力請(qǐng)求github..." element-loading-background="rgba(0, 0, 0, 0.8)"> <!-- 遮罩 --> <div :class=" loading ? `modal is-active` : `modal` " style="background-color: #ffffff36"> < img src="https://img.actd.tw/images/2018/11/17/ezgif-4-05f4bba41fef.gif" style="width: 300px" alt=""> </div> <div class="is-underline "> <div class="container"> <nav class="navbar "> <div class="navbar-brand"> <a class="navbar-item" > < img src="https://img.actd.tw/images/2018/11/17/bee.png" alt="Bulma: a modern CSS framework based on Flexbox" width="92" height="28"> </a > <div class="login-before is-hidden-mobile" style="padding-top: 5px;"> <a class="navbar-item is-hidden-desktop" href=" " target="_blank"> <span class="icon" style="color: #333;"> <i class="fa fa-lg fa-github is-size-2"></i> </span> </a > </div> <div class="navbar-item is-hidden-desktop "> <div class="field has-addons" ><div class="control" ><input type="input" class="input" name="email" placeholder="搜索一下" required="required" style="height: 36.4px;width:130px"><input type="hidden" name="redirect" id="name" value="/fr/#thanks"></div><div class="control" ><input type="submit" class="button is-warning" value="GO"></div></div> </div> <div class="navbar-burger burger" data-target="navMenuDocumentation" > <span></span> <span></span> <span></span> </div> </div> <div id="navMenuDocumentation" class="navbar-menu"> <div class="navbar-start"> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link is-active"> 發(fā)現(xiàn) </a > <div class="navbar-dropdown "> <a class="navbar-item " type="收藏集"> 收藏集 </a > <a class="navbar-item" type="徽章"> 徽章 </a > <a class="navbar-item " type="排名"> 排名 </a > <a class="navbar-item " type="職場(chǎng)生活"> 職場(chǎng)生活 </a > </div> </div> <a class="navbar-item " href="https://bulma.io/expo/"> <!--<span class="bd-emoji">??</span>--> 專欄 </a > <a class="navbar-item " href="https://bulma.io/expo/"> <!--<span class="bd-emoji">??</span>--> 聊天 <!-- 很多人不知道干什么。。。 --> </a > <a class="navbar-item " href="https://bulma.io/expo/"> <!--<span class="bd-emoji">??</span>--> 面經(jīng) </a > <router-link class="navbar-item " to="/book"> <!--<span class="bd-emoji">??</span>--> 書(shū)籍 </router-link> </div> <div class="navbar-end"> <div class="login-before" style="padding-top: 5px;"> <!-- pc --> <a class="navbar-item is-hidden-desktop-only" href="https://github.com/pkwenda/my-bbs" target="_blank"> <span class="icon" style="color: #333;"> <i class="fa fa-lg fa-github is-size-2"></i> </span> </a > </div> <div class="navbar-item is-hidden-mobile "> <div class="field has-addons" ><div class="control" ><input type="input" class="input" name="email" placeholder="搜索一下" required="required" style="height: 36.4px;"><input type="hidden" name="redirect" id="name" value="/fr/#thanks"></div><div class="control" ><input type="submit" class="button is-warning" value="GO"></div></div> </div> <div class="navbar-item is-hidden-mobile "> <!--<span class="icon is-medium">--> <i class="iconfont icon-tixing"></i> <!--</span>--> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="is-hidden-mobile" target="_blank"> < img src="https://avatars2.githubusercontent.com/u/14212375?s=400&u=dc515636befebfda36501309d1cdc087ee31d500&v=4" class=" header-avatar img-circle " style="margin-top: 10px"> </a > <div class="navbar-dropdown "> <a class="navbar-item " type="收藏集"> 寫(xiě)文章 </a > <a class="navbar-item" type="徽章"> 設(shè)置 </a > <a class="navbar-item " type="排名"> 退出 </a > </div> </div> <div class="login-before"> <div class="navbar-item"> <div class="field is-grouped"> <p class="control"> <a class="button is-warning" v-show="!isLogin" > <strong>登錄</strong> </a > </p > </div> </div> </div> </div> </div> </nav> </div> </div> </div></template><script>import _ from "lodash";export default { name: "BeeHeader", data() { return { popupShow: false, isLogin: false, user: {}, loading: false, userInfo: {} }; }, created() {}, destroyed() {}, mounted() {}, methods: {}};</script><style scoped>.img-circle { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}</style>

什么樣式可以寫(xiě)在 .vue 文件中

上文的比較熟悉的代碼是讓我們的頭像變圓的代碼段

<style scoped>.img-circle { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}

• 效果

這里我偷了個(gè)懶，剛好可以說(shuō)一說(shuō)，對(duì)于如此通用的樣式，局限在 .vue文件中，并且以 scoped 標(biāo)示，宣判了它無(wú)法復(fù)用的事實(shí)，任何模塊想用這個(gè)樣式，都需要復(fù)制一份，顯然是不規(guī)范的，我們通常還會(huì)建立通用的 css 文件進(jìn)行管理，大型項(xiàng)目 css 管理規(guī)范將更加嚴(yán)格、規(guī)范的樹(shù)級(jí)結(jié)構(gòu)，具體就看 CTO 的想法了。

根據(jù)喜好選擇如何布局

按需引入

vim new-bee/src/renderer/components/HelloWorld.vue<template> <div> <Header></Header> <!--<div class="container"> </div>--> </div></template><script>import Header from "@/components/layout/Header";import _ from "lodash";export default { name: "NewBeeIndex", components: { Header }, data() { return {}; }, destroyed() {}, mounted() {}, methods: {}, watch: {}};</script>

缺點(diǎn)是要一個(gè)一個(gè)引入，但優(yōu)點(diǎn)是代碼可讀性高

全局引入

• App 主入口

vim new-bee/src/renderer/App.vue

• 引入

<template> <div id="app"> <Header></Header> <!-- < img src="./assets/logo.png"> --> <router-view/> </div></template><script>import Header from "@/components/layout/Header";export default { name: "App", components: { Header }};</script><style></style>

• 查看效果

基于 webpack 爸爸的熱部署，我們無(wú)需刷新瀏覽器，webpack 偷偷用 ws 更新了我們的內(nèi)容。似乎很完美，但是也許大家發(fā)現(xiàn)了一個(gè)問(wèn)題，我們通過(guò)瀏覽器渲染出來(lái)的 dom 就可以看到：：







我們?cè)谥?APP 入口引入了頭部布局， App.vue 是緊臨 元素的正文元素，而這個(gè)程序所有頁(yè)面、子路由全部都是 App.vue 入口的子集，說(shuō)明全局引入布局會(huì)存在如下問(wèn)題：

1、這個(gè)項(xiàng)目所有的項(xiàng)目都一定會(huì)帶上 Header 組件渲染的內(nèi)容 2、而且會(huì)影響在下期 《性能優(yōu)化》中講的 webpack 按需加載的性能。

當(dāng)然可以再 Header 組件上書(shū)寫(xiě)邏輯條件,過(guò)濾指定的路由，但會(huì)破壞項(xiàng)目的易讀性，難以維護(hù)
我個(gè)人是比較推薦第一種：按需引入的方式。

繼續(xù)布局

• 照貓畫(huà)虎寫(xiě)好 Footer

vim new-bee/src/renderer/components/layout/Footer.vue<template> <footer class="footer footer-light-medium " style="padding-bottom: 20px;padding-top: 20px;"> <div class="container"> <div class="columns"> <!-- Column --> <div class="column is-4"> <div class="mb-20"> < img class="small-footer-logo" src="https://img.actd.tw/images/2018/11/17/bee.png" alt=""> <div class="footer-description pt-10"> new bee 是一個(gè)為開(kāi)發(fā)者提供的專注于技術(shù)分享的開(kāi)源社區(qū),所有源碼均可在 github 上找到,希望對(duì)廣大開(kāi)發(fā)者有所幫助。 </div> </div> <div> <span class="moto">喜歡項(xiàng)目可以點(diǎn)贊支持 <a href="https://github.com/pkwenda/new-bee" target="_blank"> <span class="icon"><i class="fa fa-github"></i></span> </a >.</span> <div class="social-links mt-20"> </div> </div> </div> <!-- Column --> <div class="column is-6 is-offset-2"> <div class="columns"> <!-- Column --> <div class="column"> <ul class="footer-column"> <li class="column-header"> Links </li> <li class="column-item"><a href="https://github.com/pkwenda/new-bee">Home</a ></li> <li class="column-item"><a href="https://cssninja.io/themes">Blog</a ></li> <li class="column-item"><a href="https://github.com/pkwenda/new-bee/wiki">Wiki</a ></li> </ul> </div> <!-- Column --> <div class="column"> <ul class="footer-column"> <li class="column-header"> Ressources </li> <li class="column-item"><a href="https://cssninja.io/help">Help center</a ></li> <li class="column-item"><a href="https://cssninja.io/blog">Blog</a ></li> <li class="column-item"><a href="https://cssninja.io/help/rules">Rules</a ></li> </ul> </div> <!-- Column --> <div class="column"> <ul class="footer-column"> <li class="column-header"> Terms </li> <li class="column-item"><a href="https://cssninja.io/help/terms/licenses/personal">Personal</a ></li> <li class="column-item"><a href="https://cssninja.io/help/terms/licenses/developer">Developer</a ></li> <li class="column-item"><a href="https://cssninja.io/help/terms/service">Terms of Service</a ></li> </ul> </div> </div> </div> </div> </div></footer></template><script>import _ from "lodash";export default { name: "Footer", data() { return {}; }, created() {}, destroyed() {}, mounted() { this.auto(); }, methods: {}};</script>

別忘了在 HelloWorld 引入一下

• 看看效果

• 看起來(lái)效果還不錯(cuò)，接下來(lái)是 Content（正文）部分

vim new-bee/src/renderer/components/layout/Content.vue<template> <div class="container" style="height:700px"> <h1 >博客列表</h1> <article class="column is-3" v-for="blog in blogs" v-bind:key="blog"> <a class="bd-article-image is-bootstrap" > <span class="bd-article-overlay"></span> <span class="bd-article-icon"> <i class="fa fa-tag"></i> </span> <strong class="bd-star-icon" ><i class="fa fa-star"></i> <span style="font-size: 1rem">&nbsp;{{blog.commendCount}}</span></strong> <strong class="bd-article-info"> <span> <time class="bd-article-date" datetime="2017-10-09T00:00:00+00:00"> {{blog.tag}} </time> <strong class="bd-article-title"> {{blog.title}} </strong> </span> </strong> </a> </article> </div></template><script>import _ from "lodash";let article = { tag: "java", title: "java", commendCount: 0 };export default { name: "Footer", data() { return { blogs: [ article, article, article, article, article, article, article, article ] }; }, created() {}, destroyed() {}, mounted() {}, methods: {}};</script><style scoped>.bd-article-image.is-bootstrap { background-color: #6f5499;}.bd-article-image { background-color: #00d1b2; display: block; height: 240px; margin-left: auto; margin-right: auto; position: relative; text-align: center;}.bd-star-icon { font-size: 19.2px; font-size: 1.2rem; color: #0a0a0a; opacity: 0.25; bottom: 10px; left: 30px; position: absolute; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;}.bd-article-icon,.bd-article-info { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}.bd-article-info { padding: 20px;}a strong { color: currentColor;}.bd-article-date { color: rgba(0, 0, 0, 0.5); display: block;}.bd-article-title { color: white; display: block; font-size: 1.8rem; font-weight: 700; line-height: 1.25; padding: 0 20px;}.bd-article-icon { color: #0a0a0a; opacity: 0.25;}h1 { text-align: center; font-size: 30px;}.column.is-3,.column.is-3-tablet { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 25%; float: left;}</style>

• 看看效果

• HelloWorld.vue 代碼看起來(lái)是這樣的
  

還算看得過(guò)去，我們繼續(xù)參照?qǐng)D二







為 Content 制定 AD(廣告) 組件。

vim new-bee/src/renderer/components/common/AD.vue<template> <div class="ad"><h1>澳門皇家賭場(chǎng)上線啦</h1></div></template><script>import _ from "lodash";export default { name: "AD", data() { return {}; }, destroyed() {}, mounted() {}, methods: {}, watch: {}};</script> <style scoped>.ad { width: 150px; height: 180px; background-color: #ececec; position: fixed; right: 30px; top: 80px;}</style>

• 別忘了在 Content.vue 引入一下

...<AD></AD>...import AD from "@/components/common/AD";export default { name: "Content", components: { AD }, ... }

• 看下效果

• 對(duì)比一下我們之前 sketch 畫(huà)的草圖

差不多完成了我們初步的構(gòu)思

總結(jié)

至此頁(yè)面布局和組件的引用大概講述完了，相信大家可以舉一反三，寫(xiě)好自己的小網(wǎng)站，其中更復(fù)雜的嵌套方式不再講了，大家直接去看項(xiàng)目吧。

作者的話

其實(shí)這個(gè)項(xiàng)目老早就是今天這個(gè)樣子了，只是一直在下班后寫(xiě)教程，耽誤了進(jìn)度，寫(xiě)教程也不是復(fù)制粘貼，首先要保障準(zhǔn)確性，而不是刪刪改改草草了事，想寫(xiě)出好的教程只能換位思考，以小白的身份，從 CLI 、頭到尾一行代碼一行代碼堆上去。相信寫(xiě)到現(xiàn)在一部分人對(duì)前端也有了一些新的認(rèn)識(shí)，前端已經(jīng)不是引入一個(gè) JQuery.js、Vue.js 去寫(xiě)腳本的時(shí)代了 （Angular 已經(jīng)有 IOC 了），作為一個(gè)后端前端初步就帶大家玩到這里了，Electron 以后大家直接去看項(xiàng)目吧，沒(méi)什么好講的，下一章會(huì)單獨(dú)講解一章終章《前端性能優(yōu)化》大概涉及： webpack按需加載 、gZip、CDN、沒(méi)錢買服務(wù)器如何調(diào)試小程序等 Tips ，本教程全棧方向的，下一步還有后端微服務(wù)、消息隊(duì)列、docker、docker-compose/rancher 模擬集群、運(yùn)維 等幾個(gè)點(diǎn)，目前大概寫(xiě)了三分之一吧，以后會(huì)加快進(jìn)度的，盡量新年之前寫(xiě)完全部?jī)?nèi)容。

關(guān)于回復(fù)

新發(fā)布的文章前兩天其實(shí)我都會(huì)去掘金大家的評(píng)論我都會(huì)看，但是你能想象得到嗎，掘金消息提醒沒(méi)有分類 ：點(diǎn)贊 | 回復(fù) |













大家的消息就是在無(wú)盡的滾動(dòng)條中石沉大海了，之后也就懶得看了，評(píng)論找不到我可以去 github的issues 各個(gè)文章下面留言提問(wèn)，或者勘誤，為后人鋪路，新文章也會(huì)先發(fā)到這里一天請(qǐng)大家勘誤，star 不 star 無(wú)所謂了，謝謝大家。

項(xiàng)目地址

本章源碼地址

文章地址

下一章《前端終章-前端性能優(yōu)化與上線》