整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
常看我文章的讀者都知道，我創業了，關于我創業的情況，我在公眾號上也很少提，因為我個人感覺沒什么好提的，所以寫的也少。其實，我一直也想找機會好好分享一些東西，今天我在瀏覽技術社區的時候，正好看到一個人做的炫酷的程序員簡歷。通過他制作這個簡歷的過程，聊一聊我創業公司的使用的技術棧，因為比較契合。
在切入正題之前，先看看這個小伙子做的簡歷，到底炫酷不炫酷呢？如下：
是不是感覺非常的炫酷和高大上呢？這其中他使用的技術正好跟我們公司前端使用的技術棧相吻合。那就是：
其實作為一個創業型公司，尤其是像我們這種在二三線城市的創業型公司，很少會使用前后端分離的技術，因為前后端分離就會導致人員成本過高。在大部分的二三線城市一般都是一個人做好前后端，在三線城市 PHP 使用的很多，簡單，上手快，模板多，開發快。
我們在創業之初，也是誤打誤撞的，不知道是否是腦子進水了，還是咋地，竟然采用了前后端分離的方式，這就導致我們現在每個前端都需要配一個后臺開發。而當時我們使用的前端技術就是 Vue 。
前端框架用的是 Vue，而前端 UI 呢？當然是采用的基于 Vue 的 ElementUI ，它是由餓了么團隊開源的，在國內應該算是前端非常火的一個 UI 框架了。它比較簡單，上手也快，成熟度也還可以，是一個非常不錯的 UI 框架。
看到上面作者畫出得界面了么？就是使用的 ElementUI 和 前端非常著名的圖表庫：ECharts。
ECharts 其實在之前就特別想分享給大家，一直沒有找到合適的機會。ECharts，是一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari 等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
它是由百度出品的，在前端開發者中應該是眾所周知的一個圖表庫了。它也支持移動端和小程序，而且各種圖表應該是非常全了，效果也非常好。
通過上面簡歷中的中國地圖和各種柱狀圖和餅形圖就知道了，這個庫絕對值得推薦。
通過這么一聊，你們就知道了我們前端使用的技術棧了，我們的后臺使用的是鐵打的 Java ，選擇的可以說是非常的穩重了吧！就是之前不知道怎么想的，當時為啥前端會采用這種技術棧，在這個節骨眼上，其實節約成本真的非常重要。
講到這里了，我想對大家說，在這個業界大環境不好的時候，大家一定要埋頭苦干，技術不壓身，多學點東西，怎么著都不用怕。我知道關注我的讀者中，大部分都是移動端開發的，大前端是趨勢，這個我過幾天再講，為什么大前端是趨勢。所以，作為移動端的開發者，掌握一門好的前端技術是非常有必要的。
可能作為移動端的開發者，不知道怎么入手。這里我想說：在前端的三大框架中 Vue ，React 和 Angluar 中，我強烈推薦大家學習 Vue ，不僅僅是中國人開發的，它有中文文檔，而且它相比于其他兩個，容易，上手快，在國內它的生態也越來越完善。然后自己再學點像 ElementUI 這樣的 UI 框架以及 ECharts 圖表庫，你就能非常好的完成一個前端得開發任務。
當然，學習這個技術棧之前，自己必須會一些基礎性的東西，就像是 CSS ，HTML 和 JS 都是必要的，尤其是 JS 得掌握熟練才行。所以想從移動端轉前端的開發者可以試試這個學習技術棧。
是不是感覺學習還沒有方向，感覺沒有一個現成的例子，有的，在文章開頭不就說了么？這個叫梁峻榮的小伙子開源的這個炫酷簡歷的開源項目就是一個非常現成的例子。
為什么呢？因為我大致去看了看，這個項目他講述的非常的清楚，從整體框架的搭建，基礎配置，Vue 的安裝，ElementUI 的安裝，ECharts 的安裝，以及如何分布實現這個簡歷項目和效果，寫的非常清楚，就是一篇良心文章，適合一個想學前端的朋友看。
如果你是想入門，一個初學者，在看完這個流程之后，再去學習，可能會方向感更強。有興趣的可以去試試。
簡歷項目的開源地址：https://github.com/LiangJunrong/document-library
關注 wx - 公 - 號 -：非著名程序員，對話框回復關鍵字 “1024”，免費領取 30 本經典編程書籍。
當然，在這里我們也要感謝這個開源簡歷項目的作者的辛苦付出。還不趕緊去關注 star 一波？
開篇之前，先提個問題，什么是類？分類嗎？可以這么說吧！我們可以給物體分類，也可以給人分類。正所謂，物以類聚，人以群分。難道我們這里是給元素分類？用分類來理解是不準確的啦！從某些角度，也可以理解成分類，說白了也就是個標識而已。廢話不說，我們正式步入今晚的主題！
html中的類是什么鬼？先上個例子，然后再剖析它：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>陪你復習鞏固，攻破前端技能</title>
<style>
.c1 {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="c1">
<h2>彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
</div>
<div class="c1">
<p>筆者親自設計的，一個入侵性極低的Oracle監控方案</p>
<a href="https://mp.weixin.qq.com/s/PDm2bK7IMFOwjNHFOblgXg" target="_blank">oracledb_exporter監控Oracle，一個入侵性極低的監控方案。</a>
</div>
<div class="c1">
<p>意猶未盡的第2篇再次推出，一個入侵性極低的Oracle監控方案</p>
<a href="https://mp.weixin.qq.com/s/gFeWlZRGkIMAOCNFpKm8-Q" target="_blank">意猶未盡的第2篇再次推出，繼續講解oracledb_exporter監控Oracle，一個入侵性極低的監控方案。</a>
<div>
</body>
</html>
效果如下圖：
好了，我們正式開始對它進行剖析，搞清楚到底啥是類，上面的小栗子中，定義了3個div元素，它們的class屬性值均為 "c1"。然后注意到沒有？在head中的style標簽里，通過 ”.c1“ 的方式同時對3個div進行了css樣式的設置。所以也由此引出了它的一個特點，那就是多個HTML元素可以共享同一個類，上述的例子中3個div（元素）的類（class）名都定義了為“c1”，且同時對3個div進行了css樣式的設置，這就是它的共享性。不知道筆者說明白了沒有，好尷尬。
那接下來，我們再來個小栗子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>陪你復習鞏固，攻破前端技能</title>
<style>
.c2 {
font-size: 120%;
color: crimson;
}
</style>
</head>
<body>
<h1>彩虹<span class="c2">運維</span>技術棧社區</h1>
<p>我們會<span class="c2">持續分享</span>運維和運維開發領域相關的技術文章</p>
</body>
</html>
效果如下圖：
上面的例子中，“運維”和“持續分享”這兩個字都在span標簽里，且這兩個span標簽都定義了class屬性，class=“c2”，同時通過“.c2”的方式設置了CSS屬性。上面的例子中，就是通過這樣的辦法實現了對某部分的文字進行樣式的設置。
截止目前，我們通過兩個小栗子，直接解剖了什么是類，那么我們再做個小總結：
其實在前面的小栗子中，已經講解過class的語法了，不知道廣大盆友們注意到了沒有。如果沒有注意到，咱們再這個章節重新復習一下。
看下面代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>陪你復習鞏固，攻破前端技能</title>
<style>
.cc3 {
background-color: blue;
color: white;
padding: 8px;
}
</style>
</head>
<body>
<h2 class="cc3">彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
<p class="cc3">我們會持續分享運維和運維開發領域相關的技術文章</p>
</body>
</html>
效果如下圖：
上面的例子中，是如何引用到文本內容并設置CSS屬性的呢？答案就是通過.css3這樣的語法，我們設置的類名是css3。然后在style中，設置css屬性，在{}大括號里的內容就是CSS的屬性，關于CSS，筆者后續會專門逐一講解哈。
什么？一個元素可以屬于多個類？到底怎么玩，廢話不說，咱們上個例子就知道了。下面的例子，是在上一個例子的基礎上進行了小改造，看下面代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>陪你復習鞏固，攻破前端技能</title>
<style>
.cc3 {
background-color: blue;
color: white;
padding: 8px;
}
.css4 {
text-align: center;
}
</style>
</head>
<body>
<h2 class="cc3 css4">彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
<p class="cc3">我們會持續分享運維和運維開發領域相關的技術文章</p>
</body>
</html>
效果如下圖：
注意到這個語法了嗎？class="cc3 css4"，沒錯了！在上面的style中，分別對同一個h2元素進行設置了不同的CSS屬性。也就是說，對同一個元素需要定義多個類，用空格分隔類名就可以實現啦！是不是太簡單了啦？
什么？類的復用怎么理解？也就是說不同的元素可以共享同一個類。其實這個概念，在之前的例子中都有用到啦！只不過還沒有拋出這個概念而已，下面我們來個小栗子，鞏固一下。
這個例子是在上一個例子的基礎上做了小改造，看下面代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>陪你復習鞏固，攻破前端技能</title>
<style>
.share_class {
background-color: blue;
color: white;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<h2 class="share_class">彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
<p class="share_class">我們會持續分享運維和運維開發領域相關的技術文章</p>
</body>
</html>
效果如下圖：
注意到了嗎？兩個元素：h2和p元素，都使用了相同的類，類名叫share_class，這就達到了復用的效果呀！
截止目前，還沒講解到js，那么先講個小知識點，js如何使用class的。當然，核心的用法也是使用類名為指定的元素完成一些功能，在JavaScript里是通過getElementsByClassName()方法來訪問元素中的類名，反言之，也可以說是通過getElementsByClassName()方法來訪問帶有指定類名的元素。關于js的知識，后續筆者會一一講解每個知識點，不急，咱們慢慢來。
下面，先來個小栗子，這例子很簡單，通過js實現點擊后隱藏h2和p元素的內容，下面看代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>陪你復習鞏固，攻破前端技能</title>
</head>
<body>
<button onclick="my_fun()">點擊可以隱藏元素哦</button>
<h2 class="c1">彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
<p class="c1">我們會持續分享運維和運維開發領域相關的技術文章</p>
<script>
function my_fun() {
var x=document.getElementsByClassName("c1");
for (var i=0; i < x.length; i++) {
x[i].style.display="none";
}
}
</script>
</body>
</html>
效果如下圖：
看到效果了嗎？隱藏的功能就是通過js實現的，js很強大，后面我們一起專門分享js的知識點。
好了，今晚的知識點分享到此為止啦！誠邀廣大盆友的關注，望多多點贊、轉發、收藏。
本文轉載于（喜歡的盆友關注我們）：https://mp.weixin.qq.com/s/c9tXDae2l1osseOwKzILuQ
發電腦桌面應用可以使用多種技術棧，具體選擇取決于開發者的需求和偏好。以下是一些常見的技術棧：
這只是一些常見的技術棧，實際開發中還可能涉及到其他技術和工具，具體選擇應根據項目需求和開發團隊的技術能力來決定。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
