Web层（前端）

  WEB层: 包含JSP页面（V层）和Servlet（C层）等, 与WEB相关的内容;框架有Struts、SpringMVC

  MVC设计模式（思想模式），MVC把程序从逻辑上分为模型层、控制层、视图层，各层各司其职，之间是相互调用的关系而不是相互依赖的关系，这种模式能很好的适应需求的变化及软件的升级变更。目前应用较多的MVC框架是spring MVC框架，这个框架有清晰的角色划分，有强大而直接的配置方式，高效的绑定和验证等很多优势。较早的Struts2框架也是MVC框架。
  视图V： 封装的是对数据源Model的一种显示。一个模型可以由多个视图，而一个视图理论上也可以与不同的模型关联起来。主要由JSP（动态资源）页面构成,还包括HTML文档（静态资源）、标准标签库(JSTL)和Struts标签库、JavaScript脚本和CSS样式、多媒体文件、消息资源文件、ActionForm类。
  控制器C：封装的是外界作用于模型的操作。通常，这些操作会转发到模型上，并调用模型中相应的一个或者多个方法。一般Controller在Model和View之间起到了沟通的作用，处理用户在View上的输入，并转发给Model。这样Model和View两者之间可以做到松散耦合，甚至可以彼此不知道对方，而由Controller连接起这两个部分。控制器即是控制请求的处理逻辑，对请求进行处理，负责请求转发。
    ActionServlet组件: Struts框架的中央控制器。
    RequestProcessor组件: 每个子模块都具有的请求处理器。
    Action组件: 业务代理,它将调用模型进行一项具体的业务逻辑处理。
  模型M: 封装的是数据源和所有基于对这些数据的操作。在一个组件中，Model往往表示组件的状态和操作状态的方法。通常在Structs中使用其他模型组建来实现业务逻辑,如：JavaBean技术、EJB技术、Hibernates设计模式。

一、C层

（一）、理论

[@Controller和@RestController的区别？]https://www.cnblogs.com/clwydjgs/p/9255046.html).
SpringBoot 中常用注解@Controller/@RestController/@RequestMapping介绍.

（2）、实践

（3）、错误

二、M层

Spring boot（三）：@RequestMapping之Form表单参数传递及POJO绑定实例讲解.

三、V层

  V层的基础有HTML语言，CSS语言，JavaScript
  
  
  
  

（零）、模板引擎

Web模板引擎
  模板技术.提供了一种简洁的方式来生成动态的页面，并将程序逻辑和视图之间分离开来（通过一些对应的公共的数据接口），从而使程序开发人员只专注于编写底层代码，页面设计人员只专注于视图方面的设计，这种方式不仅提高了开发效率，还使得应用程序在长时间运行后依然具有很好的维护性。模板语言在现代的软件开发中占据着重要的地位，它的功能强大，而且学习起来又是非常简单，即使不熟悉编程的人也能很快的掌握它。模板语言可以生成动态的页面，简化Web开发，但是它不仅仅局限于此，还有许多地方都可以应用它，比如生成SQL、Email、XML或者程序源代码，甚至作为其它系统的一个集成组件。Velocity和FreeMarker是目前流行的两种模板语言，其中Velocity是 Apache Jakarta的一个开源产品，同时它也是一个基于Java的模板引擎，可方便的对模板进行解析和处理。FreeMarker是另一个优秀的模板语言，它的功能也是非常强大，而且适合于MVC模式的Web应用中。

1、JSP

  JSP将Java代码和特定变动内容嵌入到静态的页面中，实现以静态页面为模板，动态生成其中的部分内容。

2、FreeMarker

  FreeMarker是一款模板引擎： 即一种基于模板和要改变的数据， 并用来生成输出文本（HTML网页、电子邮件、配置文件、源代码等）的通用工具。

3、Thymeleaf

  

4、Velocity

（一）、基础

  HTML超文本标记语言（英语：HyperText Markup Language）是一种用于创建网页的标准标记语言。
  CSS 指层叠样式表 (Cascading Style Sheets)。层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。即CSS 指层叠样式表 (Cascading Style Sheets)把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题。Font Awesome是一套绝佳的图标字体库和CSS框架。
  JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

1、HTML

2、CSS

3、JavaScript

（二）、进阶

1、EMMET（HTML）

  Emmet是一个能大幅度提高前端开发效率的一个工具，Emmet 的前身叫做Zen Coding。
  通过使用Emmet，你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。
  Emmet可以用于许多前端编辑器，可以大大提高HTML和CSS的开发效率。

2、前端UI框架（CSS）

（1）、Bootstrap

  Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
  Bootstrap的github.
  Bootstrap中文网.

（2）、Vue

  Vue
  前后端分离
  
  Vue官网.
  

（3）、LayUI

（4）、MiniUI

  MiniUI

（5）、EasyUI

  EasyUI easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
  EasyUI中文地址.
  EasyUI英文地址.

（6）、Semantic UI

  

  
  Sematic UI官网.

（7）、Element UI（基于vue）

  Element UI.
  link.
  link.

  本篇文章是对于自我学习中的东西的自我整理，所以如有出错的地方请多多指教。
  文章中一些图片和内容来源于互联网，如有侵犯，请私信，立即整改。
参考文章：