原文 web开发技术栈（框架）总结

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

天呐，好多……

小编虽说出身工业软件，但心里一直藏着一个UI梦。近两年，小编业余时间从零开始摸索web开发，把web开发常用的技术和框架大概都摸了摸看了看，趁着五一假期有点时间，做个总结。

本文提到的前端，是指通俗语义下web开发的前端，主要内容是视图层的开发，包括UI布局、用户交互及后端数据请求展示。

本文提到的后端，是指web开发的后端，内容包括模块路由和数据库存取。注意，这里的后端不是指大数据开发领域的Hadoop、Storm那些。

前端

JavaScript(后文统称为js)、css、HTML是前端开发的语言基础，如果想能将前端框架用好还是需要将水平提高到大概能用的程度。html负责网页的内容和基本结构，css负责UI样式，js负责将用户请求传送到后端并将后端数据在html页面中展示。

前端的框架分两类，UI样式库和js库。有些UI样式为了实现动态效果，会使用js库如jQuery。

前端开发的编程工作JS为主，还有近几年出的TypeScript（JS的超集）。

奇怪的是，最近各官网下载的开发包里都不带jQuery库，如有专业人士路过请稍作指点。

UI样式库

前端框架中有很大一部分是UI样式库。这些样式库的关注点是视图。对于纠结（患有强迫症）的开发者，不建议使用UI样式框架，真的是哪哪都看着不爽，到最后还不如自己css造轮子来的爽快。自己css造，不一定好看，但可以满足强迫症。

Bootstrap

小编认为Bootstrap是一个非常好的入门选择，教程示例非常丰富，颜值也还过得去。
栅格布局自带响应式，常用的颜色都有类可以直接调用。
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>

示例代码可以看出，引入类的方式来定义控件样式，使用方便而且语义清晰。

Layui

和Bootstrap差不多的东西，个人感觉色系看起来稍显寡淡。
Layui官网：https://www.layui.com

Amaze-UI

俗称妹子UI，也是一款样式框架。
妹子官网：http://amazeui.org/

Font Awesome

图标字体库和CSS框架，毕竟只有图标字体和CSS，所以一般配合其他的样式框架使用。
Font Awesome官网：http://fontawesome.dashgame.com/

js库

js库是实现功能的主要手段。常规的js库中都会包含DOM（或虚拟DOM）操作、ajax异步get和post请求封装实现、页面渲染刷新等。

相比原生js，使用库优点在于方便，缺点在于js库文件通常动辄数百kb，在带宽紧张的环境会拖慢页面的加载速度。

小编现在喜欢用vue.min.js，轻快又方便。为啥不用vue-cli方式呢？讲真，对于php流个人业余全菜开发者来说，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

只需要用一下下，就会很爽的库。
职业玩家都使用npm的方式，业余玩家嘛用用link引入也就可以了。vue对开发者最大的便利是不用频繁的DOM操作，数据只需要赋值给定义的对象元素即可同步刷新页面内容。

据jsp玩家讲，和jsp差不多？据php玩家讲，和 <?php 差不多？

但小编感觉方便程度上还是差很多的，毕竟请求到的数据可以直接进页面，写在js里怎么看都更好些。

vue-cli模式开发，可以让js代码工程化。或许，这时候的前端工程师需要调整鄙视链层级。（C >> C++ >> java >> php >> js？）

小编说，js主要负责请求交互和动态刷新，但有人不讲规矩。比如vue中的vue-element，不仅能处理交互，还能生成UI的组件模块。

vue-cli模式开发，有个叫做模板的东西，文件后缀格式如filename.vue，这玩意将每一个独立的HTML模块连同CSS和JS代码一起封装在一个文件里，用的时候直接引入，相当方便。

用法示例代码：

<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 这玩意，小编第一次看到时被惊呆了，还能这么写页面？用起来好舒服~

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

React

这玩意和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>

通过示例代码中的这两句：

document.getElementById('example')

return <h1>请先注册。</h1>;

可以发现，React的开发渲染风格和原生JS相似度很高，和vue区别很大。

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

AngularJS

AngularJS和vue代码相似度很高。

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

和vue相比，几乎就是换了各变量名…… 当然，hello world 只是表象，更多区别还需要深入使用才能感受到。

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

后端

除了专注视图活跃在用户面前的前端框架，还有一些默默在后台奉献的后端框架。web后端框架做的事一般来说，是提供http请求服务接口，实现请求路由、数据存取、模块后台功能实现等。

新时代的前端框架如vue和React，本身自带路由功能，大家将其叫做前端路由。前端路由一般使用在开发SPA（单页应用）的场景，路由时会异步加载数据渲染至页面但不会重新加载整个页面。而后端路由会重新向服务端提交请求。

后端框架一句话总结：存取数据分模块，各种语言都能用。

Php有ci、tp、Yii和laveral，java有springMVC，Python有Django，JS有node，可谓百家争鸣、百花齐放。

这时候，C/C++出身的小编秉着不靠天不靠地轮子自己造的精神，对各框架普遍采取读源码试用而不用的态度。了解、学习，但写写东西还是喜欢自己撸。强撸和借鉴（抄袭）有益理解别人的闪光点。

php框架

ci和tp上手极快，Yii和Laravel稍微有点学习成本。

ci

ci即优雅的CodeIgniter，很mini的一款框架，相对容易入门。

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

thinkphp

传说中的培训班神器，据说上手极快？

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

Yii

没啥好说的，看起来和ci、tp貌似差不多…… 好久没翻Yii源码，记得貌似是传统的<?php code ?>的方式写模板？没啥特别的映象。

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

Laravel

本菜感觉上手好麻烦，夹杂的东西太多。（正在使用laravel的大神请尝试理解小编着重提到的“菜”字）
Composer安装模块效率很高，据说是冲锋枪？学习成本还是蛮高的。

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

Python框架

Django

Python版的Laravel……

Django小编写自动化、爬虫的时候也会用到，但拿来写web总感觉不习惯…… 谁让Php是世界上最好的语言呢~

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

Java框架

Spring MVC，额，没写过Java，小编如果说这是Java的web开发框架，不知是否有专家会留言批评呢？

HTTP服务

以上后端框架关注应用和数据，对HTTP服务监听关注的并不多。服务监听工作一般由Apache或者Nginx来承担，负责请求响应、并发和数据返回。关于HTTP服务，小编除了Apache用的比较多，Nginx搭过几个系统外，了解的并不多。所以，小编暂且总结接触过的这三个。

对于apache和nginx的比较，网上有很多帖子有讲而且很详细。比如这篇：Apache和Nginx的区别 就讲的很好

后端流的JS

node-js，额，只用node写过一个socket server，没啥可总结的。node写在这里是否合适也有待学习。
nodejs中文网：http://nodejs.cn/

apache

老牌的HTTP服务提供者。在小编写C++的时代，传说中的LAMP、WAMP犹如迷雾中的灯塔一般，在知识的海洋里引领着小编。

apache动态请求响应效率高，httpd.conf配置也极其方便。

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

nginx

据说更擅长静态文件响应？需要配置反向代理才能正常使用Php、Python等语言开发的工程，小编个人感觉有些麻烦，不怎么喜欢用。

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

数据库

存数据，mysql很方便。redis在内存里，数据请求时加载超级快！

mysql VS redis？

关系型和非关系型，索引方便和响应快速……
一起用吧，就像硬盘和内存。

不过，现在mysql一般用MariaDB来替代。
mariadb官网：https://mariadb.org/
mysql官网：https://www.mysql.com/
redis中文网：http://www.redis.cn/

开发环境及工具

vscode

这玩意写前端代码还不错，良心工具。

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

……

还有很多，小编这次先总结这些。

#写在最后

web开发内容很多，也很有趣。

小编将求索以图成长。