web应用边学边开发（1）：要用到的技术总览

准备开始学习开发Web应用，包括前端和后端的整体开发.  在学习过程中，我将亲手搭建一个从前端到后端的完整的动态网站，并将过程步骤和遇到的问题在此记录下来，与大家分享。 将要学习和使用到的技术如下:

 

前端： Bootstrap, JQuery, angularJS,  Echarts, highcharts

后端： Spring-MVC， Rest接口， Thrift接口 

其他： Maven，MQ队列 

 下面对其中部分技术做一个简要的介绍，并给出他们相关的官网链接。

目前这些介绍多是我从网上copy来的，等我完成网站开发的学习之后，再根据自己的理解来重新写一遍。

 

（1） Echarts ： http://echarts.baidu.com/index.html

　　ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

 

（2） Bootstrap ： http://www.bootcss.com/

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。

虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式

Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。

Bootstrap 是完全开源的。它的代码托管、开发、维护都依赖 GitHub 平台

 

（3） JQuery ： http://www.jquery123.com/

                   ：初学者登录==>http://www.w3school.com.cn/jquery/

Query 是一个高效、精简并且功能丰富的 JavaScript 工具库，极大地简化了 JavaScript 编程。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

 

(4) angularJs: http://www.apjs.net/

  angular下载：https://angularjs.org/

 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。

  通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：

  类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等

  框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。

  AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：

  使用双大括号{{}}语法进行数据绑定；

  使用DOM控制结构来实现迭代或者隐藏DOM片段；

  支持表单和表单的验证；

  能将逻辑代码关联到相关的DOM元素上；

  能将HTML分组成可重用的组件。

 

 AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。

  如游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不同，它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

 

（5） spring-mvc: http://www.importnew.com/15141.html

springMVC是一个基于DispatcherServlet的MVC框架，每一个请求最先访问的都是DispatcherServlet，DispatcherServlet负责转发每一个Request请求给相应的Handler，Handler处理以后再返回相应的视图(View)和模型(Model)，返回的视图和模型都可以不指定，即可以只返回Model或只返回View或都不返回。

DispatcherServlet是继承自HttpServlet的，既然SpringMVC是基于DispatcherServlet的，那么我们先来配置一下DispatcherServlet，好让它能够管理我们希望它管理的内容。HttpServlet是在web.xml文件中声明的。

模型-视图-控制器（MVC）是一个众所周知的以设计界面应用程序为基础的设计模式。它主要通过分离模型、视图及控制器在应用程序中的角色将业务逻辑从界面中解耦。通常，模型负责封装应用程序数据在视图层展示。视图仅仅只是展示这些数据，不包含任何业务逻辑。控制器负责接收来自用户的请求，并调用后台服务（manager或者dao）来处理业务逻辑。处理后，后台业务层可能会返回了一些数据在视图层展示。控制器收集这些数据及准备模型在视图层展示。MVC模式的核心思想是将业务逻辑从界面中分离出来，允许它们单独改变而不会相互影响。

在Spring MVC应用程序中，模型通常由POJO对象组成，它在业务层中被处理，在持久层中被持久化。视图通常是用JSP标准标签库（JSTL）编写的JSP模板。控制器部分是由dispatcher servlet负责，在本教程中我们将会了解更多它的相关细节。
一些开发人员认为业务层和DAO层类是MVC模型组件的一部分。我对此持有不同的意见。我不认为业务层及DAO层类为MVC框架的一部分。通常一个web应用是3层架构，即数据-业务-表示。MVC实际上是表示层的一部分。

 

(6) Apache maven

Maven 是一个项目管理和构建自动化工具。

通过它便捷的管理项目的生命周期,即项目的jar包依赖，开发，测试，发布打包. 使用maven不需要上网单独下载jar包，只需要在配置文件pom.xml中配置jar包的依赖关系，就可以自动的下载jar包到我们的项目中。这样，别人开发或者使用这个工程时，不需要来回的拷贝jar包，只需要复制这个pom.xml就可以自动的下载这些jar包。Maven通过特定的标识来定义项目名称，这样既可以唯一的匹配其他的jar包

Maven 使用惯例优于配置的原则 。它要求在没有定制之前，所有的项目都有如下的结构：
 

目录	目的
${basedir}	存放 pom.xml和所有的子目录
${basedir}/src/main/java	项目的 java源代码
${basedir}/src/main/resources	项目的资源，比如说 property文件
${basedir}/src/test/java	项目的测试类，比如说 JUnit代码
${basedir}/src/test/resources	测试使用的资源

 

一个 maven 项目在默认情况下会产生 JAR 文件，另外 ，编译后 的 classes 会放在 ${basedir}/target/classes 下面， JAR 文件会放在 ${basedir}/target 下面。

Maven 官网的下载链接是 : http://maven.apache.org/download.html 。

该页的最后给出了安装指南。