中转站CreatShare开发者社区

真的不该错过的大学生全天 8 小时 Web 小全栈编程马拉松活动

2017-04-17  本文已影响474人  hylerrix
这个是大一服务端学弟哦 q(´･ω･`)p 那就开始吧！

序

在和四个实验室 Web 服务端大一学弟的为期俩周的准备下，2017 年 04.08 号这一整天，终于成功举办了这场编程马拉松活动。从最初的简单分享到发现时间不足而拓展成编程马拉松，也终于敲定了活动名称，确定了活动流程。此之谓：

小全栈编程马拉松

如果你还不了解我，不了解这场活动在大学氛围能够成功举办的背景，不妨看看这三篇文章，当然更多的故事在我的简书和微信订阅号之中（@韩亦乐）。

并且整场活动的文章内容在这里：

景

这场活动在西邮通院科协邀请下，由我所在的 CreatShare 互联网实验室主讲，包括全天流程及其干货内容都由 CreatShare 互联网实验室（其实就是我和四个学弟啦）策划并完善。我是这么形容这场活动对我的意义，其中可见从我的俩个大学实验室到我组织的本地 FCC 西安开源前端（全栈）社区活动，融汇了我俩年的“毕生所学”。

那么不多说，活动流程如下，用 MindeNode 绘制，贯穿 Web 前后端的基础知识点和软技能，激情的开始吧。

最帅的大一学弟没有之一 (´థ౪థ ) ☞

入

整场活动从前端到后端，首先便是 HTML + CSS 的必备基础内容。我们在这里引入了自己的思考，开启一场独特的“大前端”之旅。

HTML + CSS

](http:https://img.haomeiwen.com/i2558748/f79355886097698c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

以下三个图是从学弟的 PPT 中取材，HTML 可以了解结构和历史，CSS 可以看看选择器和属性，并用流行的 Sublime 编辑器做个 Demo 体验（匹配一下上面第一个学弟帅哥的照片，激发一下学习欲望）。

我做了总结和扩充，从真实世界到前端，从大前端看 Web。

写一个 Demo 解释一下吧~�请忽视我的“高耦合”：

<!-- HTML 标签是由尖括号包围的关键词，比如 <html>，用来描述网页 -->
<html>
    <head>
        <title>这是我的第一个页面。</title>
    </head>
    <!-- Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们 -->
    <body>
        <h1>这是我的第一个大标题。</h1>
        <!-- HTML 标签通常是成对出现的，比如 <b> 和 </b> -->
        <p>这是我的第一个段落。</p>
        <br/>
        <hr/>
        <h2>我比大标题小那么一丢丢</h2>
        <p><a>这是我的第一个链接</a></p>
        <p>别跑，我的头像好帅气</p>
        <!-- 即将插入一个图像，虽然源码的耦合度不同 -->
        <p>![](http:https://img.haomeiwen.com/i2558748/699f535e2b458353?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
    </body>
</html>

这场名曰“ Web 全栈”的活动，怎么能不讲讲 Web 的背景？

好巧的是，查资料的时候，看到万维网之父刚刚获得图灵奖，实至名归，激动万分。

JavaScript + ChromeDevTool

相比“PHP 是世界上最好的语言”，JavaScipt 应该算是世界上最“全能”的语言了。JS 从最初的网页前端交互到现在的 Web 前后端、移动端混合应用、物联网甚至 AR、VR ，无所不在。毕竟，Atwood 定律告诉我们：

凡是可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写。

[图片上传失败...(image-b400c6-1509644504877)]](http:https://img.haomeiwen.com/i2558748/8e9718d163fb7f5b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

来场实战，想必在座的大学生大多都不怎么关注自己的“专业培养计划”，结合代码实战，来在西邮官网上实战抓取专业培养计划，利用了 JS 的 DOM 操作。

[图片上传失败...(image-63529b-1509644504877)]](http:https://img.haomeiwen.com/i2558748/8b3f6459bfc4a6a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

var v1 = document.getElementsByTagName("table")[2];
var nameArr = [];
var classCount = v1.childNodes[1].childElementCount - 1;
for (var i = 0; i < classCount; i++) {
    var name = v1.childNodes[1].childNodes[i+1].childNodes[2].innerHTML;
    var nature = v1.childNodes[1].childNodes[i+1].childNodes[6].innerHTML;
    if (nature === "选修课") {
        name += "(选)"
    }
    nameArr.push(name);
}
console.log(nameArr.join("，"));

是否是选修课也进行了判断，最终获得到四年培养计划的所有课程，短短的 JS 代码避免了多少手工记录，还加深了多少 DOM 知识呢？

发完讲师的照片就跑真刺激。（谁让比他大一级，逃。。

这个是大一服务端学弟哦 q(´･ω･`)p

freeCodeCamp

啊啊啊，这个在线 JS 全栈编程平台向别人介绍的太多了。直接放图和链接吧！在早上的活动最后，向大家推荐了这个全球性开源编程社区平台。

Why...Why...Why always me to create blogs to review and share -- Virgo Me.

除了左下角的各大其他城市线下 JS 编程活动缩影外，其他三张都是我组织的 FCC 西安线下编程活动。认识到了五湖四海的大家。

影

8 小时的活动~！干货很多，软技能很多，怎么不来点 VIDEO~不能白白浪费了免费 Wi-Fi，大大的投影和热情参与的同学们啊，俩个视频来分享。相关链接可以在 Youtube、优酷等国内外平台搜在这里就不给你们贴链接了，劳动劳动更有意义吧。

从上面的第一个视频可以总结到，今天的程序员是未来的巫师，掌握着改造世界的方法。影片贯穿着生动的全球 IT 牛人变成回忆录：

绝对不会告诉你们的是，《TED 编织我的梦》这部 TED 演讲我在去年面向大一新生的 DIY 电脑俱乐部软件部第一次分享的主讲过程中就放映过，也认识到了这次的几位服务端大一学弟，实则，成功圈粉一大波迷弟。

我们，不要忘记用孩子的视角理解编程世界。

乱入我在去年 DIY 电脑俱乐部软件部主讲的分享文章，和缩影一张。

漫游C世界--DIY软件部编程之旅

秀秀秀 迷迷迷

没办法，我就是爱玩。哎，快大三了，这病，得治。

后

可能是我的“同性相惜(吸)”的气质太浓重了罢，短暂的午饭和午休过后，到了下午进行服务端分享的时候，早上的女生，就剩通院科协参与组织的了。

迷弟们，你们走吧，我想静静。( ತಎತ)

Full-Stack-Developer

什么是全栈工程师？我们该不该以全栈工程师为奋斗目标？我们又能从全栈工程师的方向中学习到什么？这里凝聚了我的感悟。

详细内容，记得去看看 我的第一个开源电子书：Little-FSD

[图片上传失败...(image-6ee8d1-1509644504877)]](https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer)](http:https://img.haomeiwen.com/i2558748/d3e0d4da018a1d3a.png?imageMogr2/auto-orient/strip%7CimageView2/2)

正如精读和粗读，广度和深度也是永远矛盾的话题，先来一波知乎黑。

全栈黑~

当然，我不这么认为，我理解的“全栈工程师”的重点不在于去复古曾经最早的下搞电路设计，中写汇编代码，上知设计模式的“全能程序员”，而是新时代的，拥有极强学习能力的编程“终生学习者”。

公司的事，就是你的事，不要局限在自己的职位内。转译自 Facebook。

从软件工程思考到的全栈工程师从某种角度可以说，就是产品运营、运营经理、视觉设计、前端工程师、服务端工程师，统统吃一口。下图是我在去年为我所在的 CreatShare 互联网实验室纳新准备的组织结构图可以参考。

关于这次活动的技术点，我也快速画在了概念图中，以做头脑风暴：Web 前端，Web 后端，框架、平台、工具、基础知识点等等。。

驾驭头脑风暴

Linux + Apache

从下图链接中学弟的 PPT 中可以学习到，Linux 操作系统的基础知识和用法以及 Apache 服务器的用处、须知。这是我见过的，最详细的 PPT 没有之一。。

[图片上传失败...(image-63049d-1509644504877)]](http:https://img.haomeiwen.com/i2558748/41728931a857a711.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

偷一张 PPT 放到这里：

PHP + MySQL

PHP。。我的大一便以服务端做为方向，PHP 作为学习语言来学习，在一定的了解过后，前后端的通吃的时间、精神压力下，终于选择了 JavaScript 作为找工作时的重点语言。PHP + MySQL 便是最后一位大一学弟的分享。

[图片上传失败...(image-c9cb56-1509644504877)]](http:https://img.haomeiwen.com/i2558748/f6d7767182df2086.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

可以在 Windows 平台安装 XAMPP 的 PHP 运行环境傻瓜包，或在 MacOS、Linux 下更难更干货地安装开发环境，进行Apache、PHP 、MySQL的深入学习。这里贴一段代码，看看 PHP 怎么链接数据库，So Easy！

<?

$conn=mysql_connect('localhost','root','');  
//状态  
if(!$conn){  
echo "connection failed";  
exit;  
}  
  
//选择数据库  
$sql='use student';  
//conn通道进行  
$rs=mysql_query($sql,$conn);  
//设置字符集  
$sql='set names utf8';  
mysql_query($sql,$conn);  

?>

PHP 当然必须得有收接 HTTP 请求的能力，比如处理 GET、POST 请求：

还可以模拟客户端发送 GET、POST 请求哦，就让爬虫开始吧。

可以用 postman 这类的 HTTP API 模拟工具实战。

真正的 Web 全栈工程师，是不需要依赖浏览器的。 -- 引用自 phantomjs 官网。

架构之战

到了这里，活动也接近尾声，分享的内容慢慢，但后端也只涉及了 LAMP 架构，即 Linux + Apache + MySQL + PHP，常被用来做传统的多页面网站。然而还有 MEAN 架构、.net 等等开发架构，可以幽默的解释为什么我们要学习后端？

MEAN 架构，发扬了 Web 单页面应用的存在需求。MEAN 便是基于 JavaScript 的全栈框架 MongDB、Express.js、Angular.js、Node.js 。freeCodeCamp 在线编程平台便是用 MEAN 架构实现。技术没有优劣性，开发者可以择一而入。

LAMP V.S Node.JS

另外俩个大一服务端学弟也在这里，能看出来吗？就是站着的俩位（逃。

最后俩个大一学弟在哪里 ( _ ͡° ͜ʖ ͡° )_

我，终于，露脸了，围观请打赏~Two Three Three。

曲

我在 DIY 电脑俱乐部软件部分享的回顾文章里就以下面这段话结尾：

分享到最后时间也晚了，教室也要关门了。这次分享结束，但人生未尝不是一次重新开始~

是啊，这次，再一次重新开始，再一次与众不同，期待未来的更加精彩吧！

[图片上传失败...(image-6e1734-1509644504877)]](http:https://img.haomeiwen.com/i2558748/8985814dd5364c87.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

全栈，是一种心态！

上一篇下一篇

猜你喜欢

热点阅读