JavaWeb什么？
- 众所周知，Java程序员是上知天文，下至地理。中间懂人情世故，当然这是一个优秀的人士，刚好他会Java，你说巧不巧。
Javaweb就是网页
- 说它是网页，也对也不对，对的在于，它的最终效果通过网页来展示。其中网页又为：
静态网页：诸如HTML，这样的网页就像一个PPT，它的页面所以数据都是固定在网页中，不会因为时间的改变而改变。最经典的莫过于马云前期创业所制作的黄页。
动态网页:动态网页是如今比较多的一种网页形式，我们常常所听到的PHP或者JSP都是动态网页的表现。也就是它的界面会在不同的用户和不同的时段展示不同的内容。诸如淘宝网页。
对比：黄页和淘宝网页都是马云所创建，可见随着时代的进步，静态会向动态网页发展，这是时代的必然。
- 说回来JavaWeb就是使用Java语言开发的web界面，而并非其单纯通过如PHP或者HTML来编辑语言，而是将网页语言嵌入Java中进行编写。
web服务器是什么？
- web服务器简单将就是将我们制作的网页发布至局域网或者互联网中，这样就可以供其它用户来访问了。
- 我们常说的某个站点或者网站，就可以理解为web服务器，现如今比较常见的web服务器由Apache、Nginx、IIS三个服务器。
- 我们访问web服务器发布的网页，则是通过URL（统一资源定位符）来寻找我们的网页位置。
Tomacat
- tomacat便是Apache公司发布的一款免费的web服务器，我们在Java中可以通过它来简单部署一个可供访问的网站，但是因为性能局限，所以网页只适合较小流量。
- 当我们下载了tomacat的jar包后，将其解压后，直接运行startup.bat文件，未报错后，就可以打开其默认的本地端口号8080进行自带网页了。
- 效果图如下：
- 这样一个简单的web网页就完成了，如果想改变网页内容。
- 于是，我们将自己的网页放上去后，就成了下面的状态
- 而这样的一个网页，就是通过简单的html文件实现。内容如下
<!doctype html>
<!--Quite a few clients strip your Doctype out, and some even apply their own. Many clients do honor your doctype and it can make things much easier if you can validate constantly against a Doctype.-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email template By Adobe Dreamweaver CC</title>
<!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->
<!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->
<style type="text/css">
body {
margin: 0;
}
body, table, td, p, a, li, blockquote {
-webkit-text-size-adjust: none!important;
font-family: sans-serif;
font-style: normal;
font-weight: 400;
}
button {
width: 90%;
}
@media screen and (max-width:600px) {
/*styling for objects with screen size less than 600px; */
body, table, td, p, a, li, blockquote {
-webkit-text-size-adjust: none!important;
font-family: sans-serif;
}
table {
/* All tables are 100% width */
width: 100%;
}
.footer {
/* Footer has 2 columns each of 48% width */
height: auto !important;
max-width: 48% !important;
width: 48% !important;
}
table.responsiveImage {
/* Container for images in catalog */
height: auto !important;
max-width: 30% !important;
width: 30% !important;
}
table.responsiveContent {
/* Content that accompanies the content in the catalog */
height: auto !important;
max-width: 66% !important;
width: 66% !important;
}
.top {
/* Each Columnar table in the header */
height: auto !important;
max-width: 48% !important;
width: 48% !important;
}
.catalog {
margin-left: 0%!important;
}
}
@media screen and (max-width:480px) {
/*styling for objects with screen size less than 480px; */
body, table, td, p, a, li, blockquote {
-webkit-text-size-adjust: none!important;
font-family: sans-serif;
}
table {
/* All tables are 100% width */
width: 100% !important;
border-style: none !important;
}
.footer {
/* Each footer column in this case should occupy 96% width and 4% is allowed for email client padding*/
height: auto !important;
max-width: 96% !important;
width: 96% !important;
}
.table.responsiveImage {
/* Container for each image now specifying full width */
height: auto !important;
max-width: 96% !important;
width: 96% !important;
}
.table.responsiveContent {
/* Content in catalog occupying full width of cell */
height: auto !important;
max-width: 96% !important;
width: 96% !important;
}
.top {
/* Header columns occupying full width */
height: auto !important;
max-width: 100% !important;
width: 100% !important;
}
.catalog {
margin-left: 0%!important;
}
button {
width: 90%!important;
}
}
</style>
</head>
<body yahoo="yahoo">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><table width="600" align="center" cellpadding="0" cellspacing="0">
<!-- Main Wrapper Table with initial width set to 60opx -->
<tbody>
<tr>
<td><table bgcolor="#d0cfcf" class="top" width="48%" align="left" cellpadding="0" cellspacing="0" style="padding:10px 10px 10px 10px;">
<!-- First header column with Logo -->
<tbody>
<tr>
<td style="font-size: 25px; color: #929292; text-align: center; font-family: sans-serif;"><strong>人生理想 </strong></td>
</tr>
</tbody>
</table>
<table bgcolor="#d0cfcf" class="top" width="48%" align="left" cellpadding="0" cellspacing="0" style="padding:10px 10px 10px 10px; text-align:right">
<!-- Second header column with ISSUE|DATE -->
<tbody>
<tr>
<td style="font-size: 25px; color: #929292; text-align: center; font-family: sans-serif;"><strong>柴米油盐</strong></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<!-- HTML Spacer row -->
<td style="font-size: 0; line-height: 0;" height="20"><table width="96%" align="left" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0; line-height: 0;" height="20"> </td>
</tr>
</table></td>
</tr>
<tr>
<!-- HTML IMAGE SPACER -->
<td style="font-size: 0; line-height: 0;" height="20"><table align="left" cellpadding="0" cellspacing="0" >
<tr>
<td ><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589366626943&di=a49721ec6d0582d77315991af5712b5c&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1405%2F10%2Fc2%2F34071487_1399697420418.jpg" alt="" height="" width="100%" class=""></td>
</tr>
</table></td>
</tr>
<tr>
<!-- HTML Spacer row -->
<td style="font-size: 0; line-height: 0;" height="20"><table width="96%" align="left" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0; line-height: 0;" height="20"> </td>
</tr>
</table></td>
</tr>
<tr>
<!-- Introduction area -->
<td><table width="96%" align="left" cellpadding="0" cellspacing="0">
<tr>
<!-- row container for TITLE/EMAIL THEME -->
<td align="center" style="font-size: 32px; font-weight: 300; line-height: 2.5em; color: #929292; font-family: sans-serif;">山河远阔，人间烟火。</td>
</tr>
<tr>
<!-- row container for Tagline -->
<td align="center" style="font-size: 16px; font-weight:300; color: #929292; font-family: sans-serif;">我们一直都在努力！ </td>
</tr>
<tr>
<td style="font-size: 0; line-height: 0;" height="20"><table width="96%" align="left" cellpadding="0" cellspacing="0">
<tr>
<!-- HTML Spacer row -->
<td style="font-size: 0; line-height: 0;" height="20"> </td>
</tr>
</table></td>
</tr>
<tr>
<!-- Row container for Intro/ Description -->
<td align="left" style="font-size: 14px; font-style: normal; font-weight: 100; color: #929292; line-height: 1.8; text-align:justify; padding:10px 20px 0px 20px; font-family: sans-serif;">我以前没什么实际的人生信条，第一次被一个人问我信不信上帝的时候，我说我不信，又问那你信什么，我回答就是信自己。其实那时我说说而已。我那时也没什么迷茫，有自己的计划，除了害怕死亡，其他并没深入想得透彻。很久以后我重生信了耶稣，我才有了人生信条。对我的提升是，我的人生有活泼的盼望和动力。我知道我不是宇宙的中心，我也不能为自己活着，耶稣才是宇宙的中心，我要做的就是在祂安排给我的位置上，做祂要我做的事情，当我见主面的时候，可以站立得住，不至羞愧。所以我知道我人生的意义和目标</td>
</tr>
</table></td>
</tr>
<tr>
<!-- HTML Spacer row -->
<td style="font-size: 0; line-height: 0;" height="10"><table width="96%" align="left" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0; line-height: 0;" height="20"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table cellpadding="0" cellspacing="0" align="center" width="84%" style="margin-left:12.5%" class="catalog">
<!-- Table for catalog -->
<tr>
<td ><table class ="responsive-table" width="48%" cellspacing="0" cellpadding="0" align="left" style="margin: 10px 0px 10px 0px;">
<!-- Table container for each image and description in catalog -->
<tbody>
<tr>
<td><table class="table.responsiveImage" width="66%" cellspacing="0" cellpadding="0" align="left">
<!-- Table container for image -->
<tbody>
<tr>
<td align="center" style="padding:10px 3px 10px 3px;"><img src="https://i01piccdn.sogoucdn.com/0be3e41b088f08fd" alt="sample" style="width: 120px;"></td>
</tr>
</tbody>
</table>
<table class="table.responsiveContent" width="66%" cellspacing="0" cellpadding="0" align="left">
<!-- Table container for content -->
<tbody>
<tr>
<td><p style="font-size: 14px; font-style: normal; font-weight: normal; color: #929292; padding: 5px 0px 0px 10px;line-height: 1.5em; font-family: sans-serif;">人生的路百余条，何必与生活较劲，不如去守护它，爱着它。</p>
<a href="127.0.0.1:8000/camera/" style="text-decoration:none">
<button style="background-color:#AAAAAA; text-align:center; padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px;color: #FFFFFF; font-family: sans-serif; ">阅读</button>
</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table class ="responsive-table" width="48%" cellspacing="0" cellpadding="0" align="left" style="margin: 10px 0px 10px 0px;">
<!-- Table container for each image and description in catalog -->
<tbody>
<tr>
<td><table class="table.responsiveImage" width="66%" cellspacing="0" cellpadding="0" align="left">
<!-- Table container for image -->
<tbody>
<tr>
<td align="center" style="padding:10px 3px 10px 3px;"><img src="https://i01piccdn.sogoucdn.com/a1c24334cbc5d7f8" alt="sample" style="width: 120px;"></td>
</tr>
</tbody>
</table>
<table class="table.responsiveContent" width="66%" cellspacing="0" cellpadding="0" align="left">
<!-- Table container for content -->
<tbody>
<tr>
<td><p style="font-size: 14px; font-style: normal; font-weight: normal; color: #929292; padding: 5px 0px 0px 10px;line-height: 1.5em; font-family: sans-serif;">青春最值得的事莫过于挥洒汗水，所以把汗水流在我们青春活力的年纪是十分重要的。</p>
<a href="127.0.0.1:8000/index/" style="text-decoration:none">
<button style="background-color:#AAAAAA; text-align:center; padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px;color: #FFFFFF; font-family: sans-serif; ">阅读</button>
</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><table class ="responsive-table" width="48%" cellspacing="0" cellpadding="0" align="left" style="margin: 10px 0px 10px 0px;">
<!-- Table container for each image and description in catalog -->
<tbody>
<tr>
<td><table class="table.responsiveImage" width="66%" cellspacing="0" cellpadding="0" align="left">
<!-- Table container for image -->
<tbody>
<tr>
<td align="center" style="padding:10px 3px 10px 3px;"><img src="https://i02piccdn.sogoucdn.com/8d1784d25a038e9e" alt="sample" style="width: 120px;"></td>
</tr>
</tbody>
</table>
<table class="table.responsiveContent" width="66%" cellspacing="0" cellpadding="0" align="left">
<!-- Table container for content -->
<tbody>
<tr>
<td><p style="font-size: 14px; font-style: normal; font-weight: normal; color: #929292; padding: 5px 0px 0px 10px;line-height: 1.5em; font-family: sans-serif;">曾梦想仗剑走天涯，看一看世界的繁华，年少的心总有些轻狂，如今已四海为家。</p>
<a href="#" style="text-decoration:none">
<p style="background-color:#AAAAAA; text-align:center; padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px;color: #FFFFFF; font-family: sans-serif;">阅读</p>
</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table class ="responsive-table" width="48%" cellspacing="0" cellpadding="0" align="left" style="margin: 10px 0px 10px 0px;">
<!-- Table container for each image and description in catalog -->
<tbody>
<tr>
<td><table class="table.responsiveImage" width="66%" cellspacing="0" cellpadding="0" align="left">
<!-- Table container for image -->
<tbody>
<tr>
<td align="center" style="padding:10px 3px 10px 3px;"><img src="https://i02piccdn.sogoucdn.com/b15a849a39b4af03" alt="sample" style="width: 120px;"></td>
</tr>
</tbody>
</table>
<table class="table.responsiveContent" width="66%" cellspacing="0" cellpadding="0" align="left">
<!-- Table container for content -->
<tbody>
<tr>
<td><p style="font-size: 14px; font-style: normal; font-weight: normal; color: #929292; padding: 5px 0px 0px 10px;line-height: 1.5em; font-family: sans-serif;">我再二环路的里面想着你，你在远方的山上春风十里。</p>
<a href="#" style="text-decoration:none">
<p style="background-color:#AAAAAA; text-align:center; padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px;color: #FFFFFF; font-family: sans-serif;">阅读 </p>
</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<!-- HTML spacer row -->
<td style="font-size: 0; line-height: 0;" height="20"><table width="96%" align="left" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0; line-height: 0;" height="20"> </td>
</tr>
</table></td>
</tr>
<tr bgcolor="#d0cfcf">
<td><table class="footer" width="48%" align="left" cellpadding="0" cellspacing="0">
<!-- First column of footer content -->
<tr>
<td><p align="center" style="font-size: 22px; font-weight:300; line-height: 2.5em; color: #929292; font-family: sans-serif;">未来已来</p>
<p align="center" style="font-size: 12px; color:#929292; text-align:center; font-family: sans-serif;">掌握未来的你，也是掌握自己。</p></td>
</tr>
</table>
<table class="footer" width="48%" align="left" cellpadding="0" cellspacing="0">
<!-- Second column of footer content -->
<tr>
<td><p style="font-size: 14px; font-style: normal; font-weight:normal; color: #ffffff; line-height: 1.8; text-align:justify;padding-top:10px; margin-left:20px; margin-right:20px; font-family: sans-serif;">好像很多都已经放出来啦,有很多超喜欢的图诶,尽力补更一些吧~每一天都是新生,请继续努力我一直这样坚信,我们都会成为更好的人呐 </p>
<p align="right" style="font-family: sans-serif;"> <a style="color:#929292; text-decoration:none; padding-left:20px; font-size:14px;" href="#">Link 1</a> <a style="color:#929292; text-decoration:none; padding-left:20px; font-size:14px;" href="#">Link 2</a> <a style="color:#929292; text-decoration:none; font-size:14px; padding-left:20px; padding-right:20px; " href="#">Link 3</a></p></td>
</tr>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</body>
</html>
- 当然我将网页的样式都写在了一起，所以很臃肿，但是也不是那么难实现
- 实在不行，咱就写一个简单的hello world
HTTP的解释
- HTTP（超文本传输协议），是一种通过TCP实现的请求-响应的协议。它用于规范客户端用什么样的格式传输请求，请求又包括请求头和请求体等。
HTTP1.0和1.1的版本是一个有很大改变的过程。
| 区别 | 1.0时代 | 1.1时代 |
|---|---|---|
| 请求 | GET、POST、 | GET、POST、DELETE、、、 |
-
请求内容较多，就不一一列举了。
-
总的来说，1.1比1.0有了很大的改观，比如断点续传，也就是说，1.0时代的请求，会将整个信息传回来，有时候我们并不需要这么多的信息，便造成了浪费。
-
断点续传就是如在下载文件时，将文件切割成很多小块儿，一个一个的传输至我们的客户端。
-
还有很多差别，诸如响应码的增加等等。
maven
- 在Java项目中，我们的环境需要导入很多的jar包，在前期需要手动导入，这样的工作当然也不是很复杂。
但是因为包有很多的依赖，也就意味着我们不是简单的加载一个包就可以，它后面可能还会关联很多的jar包，其复杂的关系让人头疼- 于是这样一款管理jar包的仓库横空出世，它的到来无不是程序员的福音。
- 它的安装和tomacat相似，只需要下载该包，将其解压即可。
- 然后在pom.xml文件中添加如上面的依赖即可。
- 其中groupId为组号，相当于位于的组是哪个？
- artifactId是唯一标识号，独一无二
- version为版本号
- scope是作用范围，provided为提供，还有如生产环境下有效，其它区域无效等
- 还有很多有趣的使用，比如更换镜像，pom管理等着你去发现
servlet
- servlet是Java实现的一个接口，而任何实现了该接口的类都叫servlet。它是一个微服务器，对HTTP协议实现的Web服务器的拓展。
- 其主要功能是交互地浏览和跳转网页，其过程如下
1、客户端发送请求至服务器端；
2、服务器将请求信息发送至 Servlet；
3、Servlet 生成响应内容并将其传给服务器。响应内容动态生成，通常取决于客户端的请求；
4、服务器将响应返回给客户端。
- servlet的生命周期包括init（初始化）、service（服务期）以及destroy（销毁）。
- 其中servlet有很多接口，例如servletRequest、ServletResponse、ServletConfig等等。其中常用的就是请求和响应接口，其中响应接口的源码如下：
- 这是一个实现类该接口的类，其中有我们熟悉的响应码定义，比如100，200，300，400，500等
| 响应码 | 含义 |
|---|---|
| 100 | 继续：希望客户端继续发送 |
| 200 | 请求成功的响应 |
| 300 | 重定向，类似页面跳转的意思，但是URL不变 |
| 400 | URL错误，客户端需要改正 |
| 500 | 服务器的错误，需要维修检查服务器 |
- 在Request和Response的区别也值得深究
Cookie和Session
- Session：一种服务器端为确保用户的状态而产生的一种信息认定的数据，由服务器端验证客户端的状态。因为HTTP是无状态信息的协议，所以才产生了Session
- Cookie：小饼干，一种由客户端产生来验证是否为该用户的缓存信息，储存在浏览器或者磁盘中的信息，用于验证是否为该用户。
MVC结构
Model、View、Controller三层结构
View：JSP动态网页层
Controller：Servlet、Hand Mapping、View Resolver等
Model：JavaBean、JDBC等数据库模型层
众所周知- 视图层，就是展示给客户端得一种数据页面，也就是最终在浏览器呈现得页面
- 控制层，为servlet之类的视图解析和数据库控制等作用的结构，作为一个隔离用户去直接操作数据库和视图的一层结构
- 模型层，作为操作数据库的驱动，一般会创建Bean等接口或者类去实现，举例Java的话，就是该类实现加载JDBC驱动去操作我们想操作的很多数据库如MySQL、Orcale等
Ajax
- 什么是Ajax？
通俗理解就是更快速地对动态页面的某一部分进行更新，使刷新页面的速度很快，体验感更好。而且页面也得到了刷新。
- 其中实现Ajax的步骤如下：
要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:
创建XMLHttpRequest对象,即创建一个异步调用对象.
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
设置响应HTTP请求状态变化的函数.
发送HTTP请求.
获取异步调用返回的数据.
使用JavaScript和DOM实现局部刷新.
————————————————
版权声明：本文为CSDN博主「谁是听故事的人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chaopingyao/article/details/106481895
总结
- 该部分是进入JavaWeb开发的入门级教程，也算是对各个知识点的梳理和理解
- 希望下次能更加深入了解各方面的知识。
4491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
