原文(wén) web開發技術(shù)棧（框架）總結

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

天呐，好多……

小編雖說出身工業(yè)軟件，但心裡一直藏着一個(gè)UI夢。近兩年，小編業(yè)餘時間從零開始摸索web開發，把web開發常用的技術(shù)和(hé)框架大概都摸了摸看了看，趁着五一假期有點時間，做個(gè)總結。

本文(wén)提到的前端，是指通(tōng)俗語義下(xià)web開發的前端，主要内容是視圖層的開發，包括UI布局、用戶交互及後端數據請求展示。

本文(wén)提到的後端，是指web開發的後端，内容包括模塊路(lù)由和(hé)數據庫存取。注意，這裡的後端不是指大數據開發領域的Hadoop、Storm那些。

前端

JavaScript(後文(wén)統稱為js)、css、HTML是前端開發的語言基礎，如(rú)果想能将前端框架用好還是需要将水平提高到大概能用的程度。html負責網頁的内容和(hé)基本結構，css負責UI樣式，js負責将用戶請求傳送到後端并将後端數據在html頁面中(zhōng)展示。

前端的框架分兩類，UI樣式庫和(hé)js庫。有些UI樣式為了實現動(dòng)态效果，會使用js庫如(rú)jQuery。

前端開發的編程工作JS為主，還有近幾年出的TypeScript（JS的超集）。

奇怪的是，最近各官網下(xià)載的開發包裡都不帶jQuery庫，如(rú)有專業(yè)人士路(lù)過請稍作指點。

UI樣式庫

前端框架中(zhōng)有很大一部分是UI樣式庫。這些樣式庫的關(guān)注點是視圖。對于糾結（患有強迫症）的開發者，不建議使用UI樣式框架，真的是哪哪都看着不爽，到最後還不如(rú)自己css造輪子(zǐ)來的爽快。自己css造，不一定好看，但可(kě)以滿足強迫症。

Bootstrap

小編認為Bootstrap是一個(gè)非常好的入門選擇，教程示例非常豐富，顔值也還過得去。
栅格布局自帶響應式，常用的顔色都有類可(kě)以直接調用。
Bootstrap中(zhōng)文(wén)網：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>

示例代碼可(kě)以看出，引入類的方式來定義控件樣式，使用方便而且語義清晰。

Layui

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

Amaze-UI

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

Font Awesome

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

js庫

js庫是實現功能的主要手段。常規的js庫中(zhōng)都會包含DOM（或虛拟DOM）操作、ajax異步get和(hé)post請求封裝實現、頁面渲染刷新等。

相比原生js，使用庫優點在于方便，缺點在于js庫文(wén)件通(tōng)常動(dòng)辄數百kb，在帶寬緊張的環境會拖慢頁面的加載速度。

小編現在喜歡用vue.min.js，輕快又方便。為啥不用vue-cli方式呢(ne)？講真，對于php流個(gè)人業(yè)餘全菜開發者來說，npm run dev帶來的不方便比方便更多些。

這年頭，不用npm都不好意思說自己是前端框架，不信請看vue、React、AngularJS，全都是這套玩法。

jQuery

對于傳統開發者來說，js為主的前端框架與其說是框架像是庫。對C/C++開發者來說，就像是

#include <stdio.h>
……

jQuery最具特色的操作是 $(“yixzm”) 等價于 document.getElementById(“yixzm”)，以及ajax，就像這樣：

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

DOM操作真的很方便。

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

vue

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

據jsp玩家講，和(hé)jsp差不多？據php玩家講，和(hé) <?php 差不多？

但小編感覺方便程度上還是差很多的，畢竟請求到的數據可(kě)以直接進頁面，寫在js裡怎麼看都更好些。

vue-cli模式開發，可(kě)以讓js代碼工程化。或許，這時候的前端工程師(shī)需要調整鄙視鍊層級。（C >> C++ >> java >> php >> js？）

小編說，js主要負責請求交互和(hé)動(dòng)态刷新，但有人不講規矩。比如(rú)vue中(zhōng)的vue-element，不僅能處理交互，還能生成UI的組件模塊。

vue-cli模式開發，有個(gè)叫做模闆的東西，文(wén)件後綴格式如(rú)filename.vue，這玩意将每一個(gè)獨立的HTML模塊連同CSS和(hé)JS代碼一起封裝在一個(gè)文(wén)件裡，用的時候直接引入，相當方便。

用法示例代碼：

<div id="app">
  <ul>
    <template v-for="key in objs">
      <li>{{ obj.txt }}</li>
      <li v-html="404.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 這玩意，小編第一次看到時被驚呆了，還能這麼寫頁面？用起來好舒服~

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

React

這玩意和(hé)vue的類似之處是也能工程化的管理js開發項目。既能引入的方式使用，也能npm方式構建項目。

用法示例代碼：

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

<script type="text/babel">
function UserGreeting(props) {
  return <h1>歡迎回來!</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>

通(tōng)過示例代碼中(zhōng)的這兩句：

document.getElementById('example')

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

可(kě)以發現，React的開發渲染風格和(hé)原生JS相似度很高，和(hé)vue區别很大。

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

AngularJS

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

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

和(hé)vue相比，幾乎就是換了各變量名…… 當然，hello world 隻是表象，更多區别還需要深入使用才能感受到。

AngularJS官網：https://angularjs.org/
AngularJS中(zhōng)文(wén)網：http://www.angularjs.net.cn/

後端

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

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

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

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

這時候，C/C++出身的小編秉着不靠天不靠地輪子(zǐ)自己造的精神，對各框架普遍采取讀源碼試用而不用的态度。了解、學習，但寫寫東西還是喜歡自己撸。強撸和(hé)借鑒（抄襲）有益理解别人的閃光點。

php框架

ci和(hé)tp上手極快，Yii和(hé)Laravel稍微有點學習成本。

ci

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

CI中(zhōng)文(wén)網：https://codeigniter.org.cn/

thinkphp

傳說中(zhōng)的培訓班神器(qì)，據說上手極快？

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

Yii

沒啥好說的，看起來和(hé)ci、tp貌似差不多…… 好久沒翻Yii源碼，記得貌似是傳統的<?php code ?>的方式寫模闆？沒啥特别的映象。

Yii中(zhōng)文(wén)網：https://www.yiichina.com/

Laravel

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

Laravel中(zhōng)文(wén)網：https://www.golaravel.com/

Python框架

Django

Python版的Laravel……

Django小編寫自動(dòng)化、爬蟲的時候也會用到，但拿來寫web總感覺不習慣…… 誰讓Php是世界上最好的語言呢(ne)~

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

Java框架

Spring MVC，額，沒寫過Java，小編如(rú)果說這是Java的web開發框架，不知是否有專家會留言批評呢(ne)？

HTTP服務

以上後端框架關(guān)注應用和(hé)數據，對HTTP服務監聽關(guān)注的并不多。服務監聽工作一般由Apache或者Nginx來承擔，負責請求響應、并發和(hé)數據返回。關(guān)于HTTP服務，小編除了Apache用的比較多，Nginx搭過幾個(gè)系統外，了解的并不多。所以，小編暫且總結接觸過的這三個(gè)。

對于apache和(hé)nginx的比較，網上有很多帖子(zǐ)有講而且很詳細。比如(rú)這篇：Apache和(hé)Nginx的區别 就講的很好

後端流的JS

node-js，額，隻用node寫過一個(gè)socket server，沒啥可(kě)總結的。node寫在這裡是否合适也有待學習。
nodejs中(zhōng)文(wén)網：http://nodejs.cn/

apache

老牌的HTTP服務提供者。在小編寫C++的時代，傳說中(zhōng)的LAMP、WAMP猶如(rú)迷霧中(zhōng)的燈塔一般，在知識的海洋裡引領着小編。

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

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

nginx

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

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

數據庫

存數據，mysql很方便。redis在内存裡，數據請求時加載超級快！

mysql VS redis？

關(guān)系型和(hé)非關(guān)系型，索引方便和(hé)響應快速……
一起用吧，就像硬盤和(hé)内存。

不過，現在mysql一般用MariaDB來替代。
mariadb官網：https://mariadb.org/
mysql官網：https://www.mysql.com/
redis中(zhōng)文(wén)網：http://www.redis.cn/

開發環境及工具

vscode

這玩意寫前端代碼還不錯，良心工具。

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

……

還有很多，小編這次先總結這些。

#寫在最後

web開發内容很多，也很有趣。

小編将求索以圖成長。