整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
常看我文章的读者都知道，我创业了，关于我创业的情况，我在公众号上也很少提，因为我个人感觉没什么好提的，所以写的也少。其实，我一直也想找机会好好分享一些东西，今天我在浏览技术社区的时候，正好看到一个人做的炫酷的程序员简历。通过他制作这个简历的过程，聊一聊我创业公司的使用的技术栈，因为比较契合。
在切入正题之前，先看看这个小伙子做的简历，到底炫酷不炫酷呢？如下：
是不是感觉非常的炫酷和高大上呢？这其中他使用的技术正好跟我们公司前端使用的技术栈相吻合。那就是：
其实作为一个创业型公司，尤其是像我们这种在二三线城市的创业型公司，很少会使用前后端分离的技术，因为前后端分离就会导致人员成本过高。在大部分的二三线城市一般都是一个人做好前后端，在三线城市 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小时内与您取得联系。
