JavaWeb之面向故事学习

前言

由于花太多的时间在算法上，项目完全不了解，再加上学校恶心排课压缩课时，致使毫无项目基础的我听课跟听天书一样。虽然讲清楚了如何写，但我完全不知道“为何写”。

这个专业，如果你不知道“为何写”，即使你写的再多，我认为是和CtrlCV没有区别的。——仲舟

所以写个博客，主要记录学习项目时，各专业术语直接的作业及其关系，将抽象的术语具体化，指明学习方法，既希望便于我的学习，也希望对初学者有所帮助。

我的学习方法：通过在各大网站的学习，对某个不了解的专业术语用近似的术语替换，快速构建自己的认识（当然可能存在错误），再带着目的、面向实体学习，再进行反馈，对认识进行修正。

初次学习项目，有很多不妥之处，还请多多指教！如有任何疑问或建议，欢迎在评论区留言。

什么是Java Web

我一直以为是一个软件，直到上网查了，才知道是用Java技术来解决相关web互联网领域的技术栈。也就是说，在软件方面，javaweb可以算是java、jsp、css、js、servelet、maven等等的统称，下面我将展示我对各专业术语的理解。

前置知识

《C语言》、《数据结构与算法》、《数据库》、《计算机组成原理》、《操作系统》、《Java基础》、《HTML和CSS》

一、前端基础

什么是前端，前端可以理解成网页，又由于之后我们是自己写网页，是一种创造，所以编写网页整个过程可以理解为：为自己的房间装修。
所以，故事从这开始：

网页：一个房间
写网页：给房间装修
女主A：20岁，女，软件开花班，是班里有名的学术妲己女神，平常没事就是“大佬带我”。
男主B：20岁，男，软件开花班，是班里有名的舔狗卷王，他努力学习Javaweb只为让女神参观他装饰的房间。

于是，B开始装修自己的房间。
（故事纯属虚构，请勿对号入座）

显示在浏览器的语言 HTML

如果说，C语言是在控制台上显示，则HTML则是在浏览器上显示的编程语言，如果要写网页，HTML是不可缺少的。
所以，我将其理解成：

HTML：最初是一个空房间，通过写代码增加物件：比如窗口、挂灯等。

HTML效果：

控制网页排版的 CSS

只用HTML写网页，会发现HTML排版很麻烦麻烦，由于网页是面向用户的，排版的工作量基本与组件构建相当。
所以可以将排版提出，单独成为CSS文件。对于过多属性的排版，CSS显得尤为简洁。
所以，我将其理解成：

CSS：控制物件的位置，对位置规范化。

HTML+CSS效果：

使网页变得有交互能力的 Javascript

交互：即交流互动
如果说，CSS能赋予网页“自动”动画效果，那么Javascirpt则能赋予网页“手动”动画效果。
也就是说：我们希望点击某个位置，网页会发生我想要的变化。
我们可以理解成：输入、处理与输出——某个位置接受反应，处理，回馈反应（比如出现一个弹窗）。
就输入输出来说，像极了C语言，但这次用的是类似Java语言（所以叫Javascript吧？）来控制交互能力。
所以，我将其理解成：

Javascript：让用户控制物件活动，比如让电视能换台。

HTML+CSS+Javascript效果：

二、远程访问

B仅用HTML+CSS+Javascript就装饰好了房间，准备迎接女神A的参观了！
这里可以理解成A参观B的房间，但A还是在A的房间参观，只是A的房间装饰和B的房间一模一样。

A浏览B的网页：A参观B的房间，参观方式为B在A的房间布置B的装饰。

但这样人工复制的方式也太Low了吧……
B觉得这样的方式不能让A有任何起色，他想用机器代替人工。
所以，我们需要一台设备，一直开着，让其他人随时访问我们的网站，这个东西叫做“物理服务器”。

接收请求与发送网页物理服务器

物理服务器负责接收请求与发送网页。
将网页挂在物理服务器上，就能直接访问静态网页了，解决了人工发送方式。

物理服务器：一座空旅馆

B将他的网页挂在了服务器上，于是A访问的过程就变成了这样：

这样就解决人工处理的问题了，B已经开始想象和A的二人世界了！

三、后端基础

A：“就这？”
B没有想到，看似高大上的房间，还是被A嫌弃了，原因是A不喜欢一尘不变的房间。

静态网页：不同的人参观，装修不变的房间
动态网页：不同的人参观，装修改变的房间

那么也就是说A能与A的房间交互，而B无法与A的房间交互，这导致B无法为A量身定制她专属的房间。
所以引入新名词：后端——为前端服务而生。
B不得不学这些技术，即使他头发已经不多了……

web容器 Tomcat

web容器：只要按照它的规范写出功能逻辑（比如servlet，又比如asp）就可以创建动态网页，而网络连接管理，会话管理等功能都由容器实现，大大简化了开发，web 容器启动后一直运行，监听所有提交到他所监控的那个端口的请求，并对此做出反映。
可以说，物理服务器没有智慧，他只是收到访问了什么网站的信息，就返回什么网站，不具备动态网页的能力。
而编写功能逻辑程序Servlet能创建动态网页，Tomcat的功能就是将物理服务器接收到的请求处理后给Servlet，将Servlet处理后的网页处理后返回给物理服务器，可以说，Tomcat是Servlet的容器。

Tomcat：前台服务员

这下B可以装饰好多房间了，他把装饰好的房间放进了旅馆中，并且雇佣了前台服务员Tomcat：

服务程序 Java

空服务器是没有智慧的、无法产生动态网页的。
就像前台只会将现成的房间给顾客参观。
于是B雇佣了一个名为Java的旅馆经理，用以提供不同装饰的房间给用户参观：

Java：旅馆经理
B编写Java程序：B雇佣旅馆经理

B：不过，这个经理好瘦啊，能干活吗？
……
（貌似不能。）
B：要不，带他吃一顿？

Java编译环境 JDK

B带着Java就近找到一家包子铺。
这里有很多包子，有肉馅的红豆馅的，韭菜馅的……

JDK：包子铺，提供了餐桌以及部分包子，但包子不能外带。
Jar包（依赖）：包子，是旅馆经理Java的食物，有各种馅
本地仓库：“杜绝浪费”的桌子，存放包子。

B：“想吃什么？自己点！”
……
Java没有任何反应，仿佛饿昏了。
（导演仲舟：你写程序问程序怎么写是吧？）
B：“那行吧，我帮你点点。”
于是，遇到了各种问题：

导入过多Jar包使项目冗余度过高：情况一
Jar包间存在多层依赖关系：情况二
Jar包间依赖版本冲突问题：情况三

B：“爱吃不吃！不吃拉倒！开摆！”
(全剧终，B最后没有成功开发出Javaweb项目，毕业以后只能进厂拧螺丝）
B：“焯！我算是养了个爹了QAQ”

自动下载依赖的配置 Maven

jar包（相当于C语言的头文件），包含着很多java类，在编程时用到外地jar包需要自己找到源网站并下载，下完后还要手动添加至项目的classpath里，显得相当麻烦。
于是B叫来了包子铺服务员Maven……

Maven：包子铺服务员，给顾客提供海量包子以及配菜

Maven会根据你要的Jar包，会先从本地仓库找是否有这些Jar包以及依赖的Jar包，如果没有，会从网上下载对应版本的Jar包：如上gif

B：欸，我没点奶黄包啊？
Maven：这是配肉包的，不然他吃不下
B：你骗谁？你是不是……
Java：Maven真懂我！就知道我吃肉包要配奶黄！
B：……建议原地结婚

动态创建网页的程序 Servlet

Java Servlet 是运行在 Web 服务器或应用服务器上的程序，由于我们使用他动态交互是在Java的Servlet类实现，同样，我们连数据库也是调用Java类的JDBC，我们可以将这里的Java分成Servlet和JDBC。

Servlet：旅馆经理
JDBC：旅馆仓库管理员

于是，仲舟旅馆里逐渐形成了一套比较完善的旅馆管理体系：

欸？细心的你可能会发现，为什么Tomcat会多一个“@”符号？
为了便于理解，我将标“@”的为插件，即只需要配置就能运行，而没标“@”的为程序，需要写代码自定义其功能。
那要怎么实现动态网页呢，请接下来我们的故事：
经过不懈努力，B终于当上了老板，就差迎娶女神A，走上人生巅峰了。
B把旅馆经理Servlet叫来：

B欣喜的叫来A参观，A虽然有些不情愿，但还是答应了：

当B正在沾沾自喜的时候，来了个不速之课——C。

连接数据库的程序 JDBC

男二C：20岁，男，软件开花班，是班里有名的渣男海王，他凭借着长的帅的资本，勾搭各种妹子，最喜欢在男主B面前找优越感。

C：你为何不把背景墙放到仓库呢，背景墙这么大，以后很多用户的时候怎么办？
B心想，还能放到仓库？但他不能在他女神面前表现得无知。
B：怎……怎么需要仓库，我只为A量身定制房间！
A：搁这玩尬的，你不就是不会嘛？

数据库（如mysql，SQL Server等）：仓库

C：让我来告述你怎么做吧：

B虽然觉得很有道理，但是很不服气，就跟被绿了一样。

四、后端辅助技术

虽然上述的知识已经能构建一个简单的接数据库的javaweb项目，但是无论对于用户的使用来说，还是对于开发者的开发来说，多少有点不便之处，下面我来介绍一些优化方案。

会话信息保存

会话：用户打开一个浏览器，点击多个超链接，访问多个web资源，关闭浏览器的过程。
由于每个页面会根据登录信息不同，而出现不同的页面，这一特点导致了我们在访问多次web资源的时候，要连续登录多次，就比如下面的故事：
A：“我想访问302房间。”（点击链接）
Servlet：“您是哪位？”（登录请求）
A：“我是A！”（登录）
Servlet：“欢迎访问302房间！”（登录成功，页面跳转）
A：“不好看，让我看看303房间！”（点击链接）
Servlet：“您是哪位？”（登录请求）
A：“……”
会话信息保存技术能解决用户反复访问同一服务器下web资源重复登录的问题，同时解决该技术有两种方法：

客户端带证件的技术 Cookie

Cookie：是一小段的文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。
有了Cookie技术，于是：
A：“我想访问302房间。”（点击链接）
Servlet：“您是哪位？”（登录请求）
A：“我是A！”（登录）
Servlet：“欢迎访问302房间！”（登录成功，页面跳转）
Servlet：“这是您第一次访问我们，给您开了个证明，请收好！”（给客户端发送一个Cookie）

Cookie：访客证件

A：“好的。”（客户端接收并保存Cookie）
A：“不好看，让我看看303房间！”（点击链接，客户端自动发送Cookie）
Servlet：“欢迎访问303房间！”（服务器接收Cookie，验证成功，登录成功，页面跳转）

服务器记录的技术 Session

B觉得Cookie方法不错，于是采用了Cookie技术，直到B发现了这回事——

所以cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗。
为了安全起见，引入session技术。
session：服务器为了保存用户状态而创建的一个特殊的对象。当用户在应用程序的Web页之间跳转时，存储在Session对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。
由于http协议的无状态特征，服务器根本就不知道访问者是“谁”，而cookie起到桥接的作用
所以要让服务器“认识”是同一个人，必须采用cookie
session在cookie基础上，再加上了服务器对信息的保存，使得开发者能通过设置信息保存的时间来提升安全性，举个例子：

以上是定义sessionid有效期为5分钟，也可以定义为一天、一个月，或是定义用户关闭浏览器即失效。

动态创建网页的技术2.0 JSP

不止用户端使用有不便之处，开发人员开发网页也有不便之处，比如：用Servlet返回动态网页时，需要考虑网页排版、交互等前端工作，而Servlet由后端人员编写，这导致了后端人员的工作量大幅增加。
我们不禁思考：由于HTML是静态的，Java（Servlet）是动态的，而前者专注排版，后者排版麻烦。有没有一种技术，能将Java插入HTML的动态位置，解决上述问题？
这个技术就是——JSP！
JSP：简化的Servlet设计，在HTML标签中嵌套Java代码，用以高效开发Web应用的动态网页。

当接受到访问响应时，会将JSP文件转化为Java（Servlet），再执行Servlet，在执行过程中，servlet产生HTML格式的输出并将其内嵌于HTTP response中上交给Web服务器。

与数据库的信息做映射的实体类 JavaBean

有时数据库传过来的数据会有很多属性，单存进数组中肯定是不方便调用的，所以我们需要对传过来的数据进行封装，在Java中就是通过类来实现，我们把对数据库做映射的实体类叫做JavaBean。
有时间再学

过滤器 Filter

有时间再学

监听器

有时间再学

五、项目搭建

上述讲了Javaweb主要技术的作用，如果只是对这些知识有大致了解，甚至没有开始写代码都没关系，到这只要明白了相关专业术语大致的意思就行，目的就是为了理解为什么要做后面的工作。到这里的进度应该就是老师开始敲Java代码的进度了。

部分老师教学本末倒置，边写代码边说作用，好比教我们怎么种田，但我们却不知道种田能得到什么。——仲舟

创建Maven项目

打开IDEA，我们首先要创建Maven项目。
B：不创建不可以吗？
可以，但是前面提过Maven的作用，如果使用空项目的话，需要自己手动下载jar包，异常麻烦。
（具体怎么创建和配环境找其他教程，这里主要说作用）
Maven的一个特点是：约定大于配置。你配置的文件必须存在其约束的存储位置下才能起作用！
所以就有了一个标准的目录结构，你新建的Maven应长成这样：

- 项目名-.idea：#存放项目的配置信息（历史记录，版本控制信息等）。- src：根目录- main：源代码- java：后端代码- resources：资源文件- webapp：前端代码- test：测试代码- java：后端代码- resources：资源文件- target：#存放编译文件- pom.xml：配置文件- 项目名.iml：#工程配置文件

所有文件只能基于这种目录放置，之后细分的目录可以随便放，但是一般会这样放：
我将这些文件用途分析之前，先去掉一些没必要的文件——
其中，标“#”的是系统配置文件，我们不需要管，把不管的项目去掉，就成了：

- 项目名- src：根目录- main：源代码- java：后端代码- resources：资源文件- webapp：前端代码- test：测试代码- java：后端代码- resources：资源文件- pom.xml：配置文件

你会发现text的文件和main文件很像，text的文件可以理解成debug的代码，可以先去掉：

- 项目名- src：根目录- main：源代码- java：后端代码- resources：资源文件- webapp：前端代码- pom.xml：配置文件

pom.xml，写入代码，就是告诉Maven“给我来份豆沙”，他买来的一系列“包子”会放入target中。

    - main：源代码- java：后端代码- resources：资源文件- webapp：前端代码

剩下的是代码的核心，其中，资源文件往往是放一些后端代码调用的文件，如：properties文件（记录些全局常量，如数据库连接地址）、excel文件（记录些程序数据）、js文件（有时java可能会调用其他的语言）等。我们可以理解为：其他文件夹。
所以我们主要布局工作还是放在java文件和webapp文件下。

webapp目录

先说说前端目录

      - webapp：前端代码- WEB-INF- js- css- img- XX.jsp- XX.html

众所周知，css放css，js放js，img放图片，还能新建其他文件夹，这我不多说。
一般主要的html和jsp文件放在外面。
这里重点说说WEB-INF：

      - webapp：前端代码- WEB-INF- web.xml- classes- lib

web.xml：告诉容器哪些servlets需要部署，以及URL映射关系。
classes：存放java（标签处理类）。
lib：存放jar，通常存放第三方依赖。

MVC三层架构

欲知后事如何，请听下回分解……

仲舟原创，未经允许禁止转载。