原文 web開發技術棧（框架）總結

Bootstrap-Layui-Amazeui-jQuery-vue-react-AngularJS-ci-Thinkphp-Yii-Laravel-Node-Django-springMVC-apache-nginx-mysql-redis……

天呐，好多……

小編雖說(shuō)出(chū)身工業軟件，但心裏一直藏着一個(gè)UI夢。近兩年，小編業餘時(shí)間從零開始摸索web開發，把web開發常用的(de)技術和(hé / huò)框架大(dà)概都摸了(le／liǎo)摸看了(le／liǎo)看，趁着五一假期有點時(shí)間，做個(gè)總結。

本文提到(dào)的(de)前端，是(shì)指通俗語義下web開發的(de)前端，主要(yào / yāo)内容是(shì)視圖層的(de)開發，包括UI布局、用戶交互及後端數據請求展示。

本文提到(dào)的(de)後端，是(shì)指web開發的(de)後端，内容包括模塊路由和(hé / huò)數據庫存取。注意，這(zhè)裏的(de)後端不(bù)是(shì)指大(dà)數據開發領域的(de)Hadoop、Storm那些。

前端

JavaScript(後文統稱爲(wéi / wèi)js)、css、HTML是(shì)前端開發的(de)語言基礎，如果想能将前端框架用好還是(shì)需要(yào / yāo)将水平提高到(dào)大(dà)概能用的(de)程度。html負責網頁的(de)内容和(hé / huò)基本結構，css負責UI樣式，js負責将用戶請求傳送到(dào)後端并将後端數據在(zài)html頁面中展示。

前端的(de)框架分兩類，UI樣式庫和(hé / huò)js庫。有些UI樣式爲(wéi / wèi)了(le／liǎo)實現動态效果，會使用js庫如jQuery。

前端開發的(de)編程工作JS爲(wéi / wèi)主，還有近幾年出(chū)的(de)TypeScript（JS的(de)超集）。

奇怪的(de)是(shì)，最近各官網下載的(de)開發包裏都不(bù)帶jQuery庫，如有專業人(rén)士路過請稍作指點。

UI樣式庫

前端框架中有很大(dà)一部分是(shì)UI樣式庫。這(zhè)些樣式庫的(de)關注點是(shì)視圖。對于(yú)糾結（患有強迫症）的(de)開發者，不(bù)建議使用UI樣式框架，真的(de)是(shì)哪哪都看着不(bù)爽，到(dào)最後還不(bù)如自己css造輪子(zǐ)來(lái)的(de)爽快。自己css造，不(bù)一定好看，但可以(yǐ)滿足強迫症。

Bootstrap

小編認爲(wéi / wèi)Bootstrap是(shì)一個(gè)非常好的(de)入門選擇，教程示例非常豐富，顔值也(yě)還過得去。
栅格布局自帶響應式，常用的(de)顔色都有類可以(yǐ)直接調用。
Bootstrap中文網：http://www.bootcss.com/

用法示例：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">導航</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li> 
    </ul>
  </div>  
</nav>

示例代碼可以(yǐ)看出(chū)，引入類的(de)方式來(lái)定義控件樣式，使用方便而(ér)且語義清晰。

Layui

和(hé / huò)Bootstrap差不(bù)多的(de)東西，個(gè)人(rén)感覺色系看起來(lái)稍顯寡淡。
Layui官網：https://www.layui.com

Amaze-UI

俗稱妹子(zǐ)UI，也(yě)是(shì)一款樣式框架。
妹子(zǐ)官網：http://amazeui.org/

Font Awesome

圖标字體庫和(hé / huò)CSS框架，畢竟隻有圖标字體和(hé / huò)CSS，所以(yǐ)一般配合其他(tā)的(de)樣式框架使用。
Font Awesome官網：http://fontawesome.dashgame.com/

js庫

js庫是(shì)實現功能的(de)主要(yào / yāo)手段。常規的(de)js庫中都會包含DOM（或虛拟DOM）操作、ajax異步get和(hé / huò)post請求封裝實現、頁面渲染刷新等。

相比原生js，使用庫優點在(zài)于(yú)方便，缺點在(zài)于(yú)js庫文件通常動辄數百kb，在(zài)帶寬緊張的(de)環境會拖慢頁面的(de)加載速度。

小編現在(zài)喜歡用vue.min.js，輕快又方便。爲(wéi / wèi)啥不(bù)用vue-cli方式呢？講真，對于(yú)php流個(gè)人(rén)業餘全菜開發者來(lái)說(shuō)，npm run dev帶來(lái)的(de)不(bù)方便比方便更多些。

這(zhè)年頭，不(bù)用npm都不(bù)好意思說(shuō)自己是(shì)前端框架，不(bù)信請看vue、React、AngularJS，全都是(shì)這(zhè)套玩法。

jQuery

對于(yú)傳統開發者來(lái)說(shuō)，js爲(wéi / wèi)主的(de)前端框架與其說(shuō)是(shì)框架像是(shì)庫。對C/C++開發者來(lái)說(shuō)，就(jiù)像是(shì)

#include <stdio.h>
……

jQuery最具特色的(de)操作是(shì) $(“yixzm”) 等價于(yú) document.getElementById(“yixzm”)，以(yǐ)及ajax，就(jiù)像這(zhè)樣：

$.ajax({ url: "/api", context: document.body, success: function(){
    console.log("test");
}});

DOM操作真的(de)很方便。

jQuery官網：http://jquery.com/

vue

隻需要(yào / yāo)用一下下，就(jiù)會很爽的(de)庫。
職業玩家都使用npm的(de)方式，業餘玩家嘛用用link引入也(yě)就(jiù)可以(yǐ)了(le／liǎo)。vue對開發者最大(dà)的(de)便利是(shì)不(bù)用頻繁的(de)DOM操作，數據隻需要(yào / yāo)賦值給定義的(de)對象元素即可同步刷新頁面内容。

據jsp玩家講，和(hé / huò)jsp差不(bù)多？據php玩家講，和(hé / huò) <?php 差不(bù)多？

但小編感覺方便程度上(shàng)還是(shì)差很多的(de)，畢竟請求到(dào)的(de)數據可以(yǐ)直接進頁面，寫在(zài)js裏怎麽看都更好些。

vue-cli模式開發，可以(yǐ)讓js代碼工程化。或許，這(zhè)時(shí)候的(de)前端工程師需要(yào / yāo)調整鄙視鏈層級。（C >> C++ >> java >> php >> js？）

小編說(shuō)，js主要(yào / yāo)負責請求交互和(hé / huò)動态刷新，但有人(rén)不(bù)講規矩。比如vue中的(de)vue-element，不(bù)僅能處理交互，還能生成UI的(de)組件模塊。

vue-cli模式開發，有個(gè)叫做模闆的(de)東西，文件後綴格式如filename.vue，這(zhè)玩意将每一個(gè)獨立的(de)HTML模塊連同CSS和(hé / huò)JS代碼一起封裝在(zài)一個(gè)文件裏，用的(de)時(shí)候直接引入，相當方便。

用法示例代碼：

<div id="app">
  <ul>
    <template v-for="key in objs">
      <li>{{ obj.txt }}</li>
      <li v-html="obj.html">--------------</li>
    </template>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    objs: [
      { txt: 'yixzm', html: '<h1>yixzm</h1>' },
      { txt: 'dream', html: '<h2>dream</h2>' },
      { txt: 'stone', html: '<h3>stone</h3>' },
    ]
  }
})
</script>

怎麽樣？夠方便吧~

v-for 這(zhè)玩意，小編第一次看到(dào)時(shí)被驚呆了(le／liǎo)，還能這(zhè)麽寫頁面？用起來(lái)好舒服~

vue官網：https://cn.vuejs.org/

React

這(zhè)玩意和(hé / huò)vue的(de)類似之(zhī)處是(shì)也(yě)能工程化的(de)管理js開發項目。既能引入的(de)方式使用，也(yě)能npm方式構建項目。

用法示例代碼：

<div id="example"></div>

<script type="text/babel">
function UserGreeting(props) {
  return <h1>歡迎回來(lái)!</h1>;
}

function GuestGreeting(props) {
  return <h1>請先注冊。</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('example')
);
</script>

通過示例代碼中的(de)這(zhè)兩句：

document.getElementById('example')

return <h1>請先注冊。</h1>;

可以(yǐ)發現，React的(de)開發渲染風格和(hé / huò)原生JS相似度很高，和(hé / huò)vue區别很大(dà)。

React官網：https://reactjs.org/

AngularJS

AngularJS和(hé / huò)vue代碼相似度很高。

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

和(hé / huò)vue相比，幾乎就(jiù)是(shì)換了(le／liǎo)各變量名…… 當然，hello world 隻是(shì)表象，更多區别還需要(yào / yāo)深入使用才能感受到(dào)。

AngularJS官網：https://angularjs.org/
AngularJS中文網：http://www.angularjs.net.cn/

後端

除了(le／liǎo)專注視圖活躍在(zài)用戶面前的(de)前端框架，還有一些默默在(zài)後台奉獻的(de)後端框架。web後端框架做的(de)事一般來(lái)說(shuō)，是(shì)提供http請求服務接口，實現請求路由、數據存取、模塊後台功能實現等。

新時(shí)代的(de)前端框架如vue和(hé / huò)React，本身自帶路由功能，大(dà)家将其叫做前端路由。前端路由一般使用在(zài)開發SPA（單頁應用）的(de)場景，路由時(shí)會異步加載數據渲染至頁面但不(bù)會重新加載整個(gè)頁面。而(ér)後端路由會重新向服務端提交請求。

後端框架一句話總結：存取數據分模塊，各種語言都能用。

Php有ci、tp、Yii和(hé / huò)laveral，java有springMVC，Python有Django，JS有node，可謂百家争鳴、百花齊放。

這(zhè)時(shí)候，C/C++出(chū)身的(de)小編秉着不(bù)靠天不(bù)靠地(dì / de)輪子(zǐ)自己造的(de)精神，對各框架普遍采取讀源碼試用而(ér)不(bù)用的(de)态度。了(le／liǎo)解、學習，但寫寫東西還是(shì)喜歡自己撸。強撸和(hé / huò)借鑒（抄襲）有益理解别人(rén)的(de)閃光點。

php框架

ci和(hé / huò)tp上(shàng)手極快，Yii和(hé / huò)Laravel稍微有點學習成本。

ci

ci即優雅的(de)CodeIgniter，很mini的(de)一款框架，相對容易入門。

CI中文網：https://codeigniter.org.cn/

thinkphp

傳說(shuō)中的(de)培訓班神器，據說(shuō)上(shàng)手極快？

官網：http://www.thinkphp.cn/

Yii

沒啥好說(shuō)的(de)，看起來(lái)和(hé / huò)ci、tp貌似差不(bù)多…… 好久沒翻Yii源碼，記得貌似是(shì)傳統的(de)<?php code ?>的(de)方式寫模闆？沒啥特别的(de)映象。

Yii中文網：https://www.yiichina.com/

Laravel

本菜感覺上(shàng)手好麻煩，夾雜的(de)東西太多。（正在(zài)使用laravel的(de)大(dà)神請嘗試理解小編着重提到(dào)的(de)“菜”字）
Composer安裝模塊效率很高，據說(shuō)是(shì)沖鋒槍？學習成本還是(shì)蠻高的(de)。

Laravel中文網：https://www.golaravel.com/

Python框架

Django

Python版的(de)Laravel……

Django小編寫自動化、爬蟲的(de)時(shí)候也(yě)會用到(dào)，但拿來(lái)寫web總感覺不(bù)習慣…… 誰讓Php是(shì)世界上(shàng)最好的(de)語言呢~

Django官網：https://www.djangoproject.com/

Java框架

Spring MVC，額，沒寫過Java，小編如果說(shuō)這(zhè)是(shì)Java的(de)web開發框架，不(bù)知是(shì)否有專家會留言批評呢？

HTTP服務

以(yǐ)上(shàng)後端框架關注應用和(hé / huò)數據，對HTTP服務監聽關注的(de)并不(bù)多。服務監聽工作一般由Apache或者Nginx來(lái)承擔，負責請求響應、并發和(hé / huò)數據返回。關于(yú)HTTP服務，小編除了(le／liǎo)Apache用的(de)比較多，Nginx搭過幾個(gè)系統外，了(le／liǎo)解的(de)并不(bù)多。所以(yǐ)，小編暫且總結接觸過的(de)這(zhè)三個(gè)。

對于(yú)apache和(hé / huò)nginx的(de)比較，網上(shàng)有很多帖子(zǐ)有講而(ér)且很詳細。比如這(zhè)篇：Apache和(hé / huò)Nginx的(de)區别 就(jiù)講的(de)很好

後端流的(de)JS

node-js，額，隻用node寫過一個(gè)socket server，沒啥可總結的(de)。node寫在(zài)這(zhè)裏是(shì)否合适也(yě)有待學習。
nodejs中文網：http://nodejs.cn/

apache

老牌的(de)HTTP服務提供者。在(zài)小編寫C++的(de)時(shí)代，傳說(shuō)中的(de)LAMP、WAMP猶如迷霧中的(de)燈塔一般，在(zài)知識的(de)海洋裏引領着小編。

apache動态請求響應效率高，httpd.conf配置也(yě)極其方便。

apache官網：http://www.apache.org/

nginx

據說(shuō)更擅長靜态文件響應？需要(yào / yāo)配置反向代理才能正常使用Php、Python等語言開發的(de)工程，小編個(gè)人(rén)感覺有些麻煩，不(bù)怎麽喜歡用。

nginx官網：http://nginx.org/

數據庫

存數據，mysql很方便。redis在(zài)内存裏，數據請求時(shí)加載超級快！

mysql VS redis？

關系型和(hé / huò)非關系型，索引方便和(hé / huò)響應快速……
一起用吧，就(jiù)像硬盤和(hé / huò)内存。

不(bù)過，現在(zài)mysql一般用MariaDB來(lái)替代。
mariadb官網：https://mariadb.org/
mysql官網：https://www.mysql.com/
redis中文網：http://www.redis.cn/

開發環境及工具

vscode

這(zhè)玩意寫前端代碼還不(bù)錯，良心工具。

vscode官網：https://code.visualstudio.com/

……

還有很多，小編這(zhè)次先總結這(zhè)些。

#寫在(zài)最後

web開發内容很多，也(yě)很有趣。

小編将求索以(yǐ)圖成長。