文章目录
web相关知识概述
web简介(了解)
World Wide Web即全球广域网,也成为万维网。
它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务,为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面,其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
简而言之就是我们平时上网浏览的网页,玩的网页信息,上网下载资源。对于程序员而言就是前端知识,web服务器和数据库知识的结合就是web。
web发展阶段:
- web 1.0
1994年在中国第一个web网站是中国黄页,由马云创建的。属于静态页面,只能看,不能交互。
- web 2.0
动态网站。网站数据是时时更新的,数据来自于数据库,可以实现前后台数据的交互
软件架构模式(掌握)
BS:browser server 浏览器服务器
优点:
- 只需要服务器,用户下载浏览器,维护方便
- 减少用户磁盘
缺点:
- 给服务器造成压力
- 用户观看体验不友好
CS:client server 客户端服务器
优点:
- 具有客户端和服务器端,减轻服务器的压力
- 用户体验好
缺点:
- 维护成本大
- 版本升级麻烦,占用户磁盘空间
注:bs其实是一种特殊的cs
B/S和C/S通信模式特点(重要)
- 先有请求
- 后有响应
- 请求和响应是成对出现的
web资源(理解)
资源
计算机中数据文件
分类
- 静态资源:html css js。只能书写静态网站。静态网站的数据永远不会发生改变
- 动态资源:使用一些语言可以实现数据的变化
URL请求路径(理解)
作用
通过资源路径可以访问到具体的服务器
介绍
URL(Uniform Resource Locator),统一资源定位符,是对互联网上资源位置的一种表示,互联网上的每个文件都有一个唯一的URL
格式
协议://服务器的ip地址:服务器的端口号/项目名/资源路径
比如:jdbc:mysql://localhost:3306/数据库名
说明:
协议:是一种规范,类似于网络编程中的TCP UDP(传输层),这里讲解的是应用层(http https协议)
服务器的ip地址:访问服务器的地址。同一个网段中服务器ip地址是唯一的
服务器的端口号:访问服务器的进程号,属于唯一标识
浏览器通过url访问服务器的过程
https://www.baidu.com/s?ie=UTF-8&wd=java
- https:协议
- www.baidu.com:域名
- 先根据你输入的域名找到你的电脑上本地域名解析文件:hosts
- 本地解析文件没有,然后找公网上的DNS域名解析服务器
- 解析服务器将www.baidu.com解析成112.80.248.75
- 服务器的端口号:默认是80,百度也将其端口号设置为80,所以可以不写
服务器(掌握)
服务器介绍了解
概述
服务器,是提供计算机服务的设备。由于服务器需要请求响应,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力
分类
- 硬件服务器
服务器的构成包括处理器、硬盘、内存、系统总线等
- 软件服务器
本质就是一个应用程序(由代码编写而成),运行在服务器设备上
常见的web服务器
https://img-blog.csdnimg.cn/img_convert/d5d486ccde049b586f4392cbddd01b5c.png" alt="Snipaste_2024-04-30_10-28-09.png" />
tomact_98">下载安装tomact服务器
下载
tomact服务器属于网页服务器,用来发布动态和静态网页的,由Apache公司开发的开源免费的
官网:https://tomcat.apache.org
https://img-blog.csdnimg.cn/img_convert/dfbf818a947aac21ef65592d022f6a28.png" alt="Snipaste_2024-04-30_14-24-30.png" />
https://img-blog.csdnimg.cn/img_convert/ccdf6ae54588928af13aefd8b0b9f32b.png" alt="Snipaste_2024-04-30_14-24-38.png" />
安装
下载好将其放到没有中文和特殊符号的目录,然后进行解压即可
目录结构
https://img-blog.csdnimg.cn/img_convert/3a5d25e1743ccb392f25173aeb5f83f4.png" alt="Snipaste_2024-04-30_14-26-24.png" />
tomact_109">启动并使用浏览器访问tomact服务器
启动
直接双击bin目录下面的startup.bat文件
在浏览器地址栏输入访问地址:localhost:8080
https://img-blog.csdnimg.cn/img_convert/bd6f15484d9b2e603ed8af4beebafcf5.png" alt="Snipaste_2024-04-30_14-34-33.png" />
出现这个页面,说明访问成功
停止tomact(三种方法):
- 双击bin目录下的shutdown.bat
- 直接关闭上面的启动startup.bat文件的dos窗口
- 在doc窗口上按快捷键ctrl+c
tomact_118">tomact启动失败常见原因
- 端口号冲突
- 查看端口号:按住ctrl+r然后输入cmd打开命令板然后输入netstat -nao
- https://img-blog.csdnimg.cn/img_convert/e3a320a521cb06db853c374281c65d9d.png" alt="Snipaste_2024-04-30_14-43-31.png" />
- 打开任务管理器,点击详细信息,查找PID未20416的,然后结束进程
- 没有配置环境变量JAVA_HOME
- 之前有的小伙伴电脑上安装过tomact,并且在环境变量path中配置了环境变量,导致启动不成功。将之前配置的删除即可
tomactweb_127">使用tomact服务器发布web项目
tomactwebappsweb_129">在tomact的安装目录webapps下发布web项目
- 在webapps文件夹下创建heima文件夹
- 在heima文件夹中创建index.html文件
- 使用记事本打开html页面输入下面内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>Hello,tomact!
</body>
</html>
- 启动tomact
- 在浏览器上输入:localhost:8080/heima/index.html
注:浏览器访问页面的时候必须加上文件夹名
使用idea创建web项目
idea创建maven的web项目-骨架(了解)
https://img-blog.csdnimg.cn/img_convert/e72e9696c7272626617258eaa24f1862.png" alt="Snipaste_2024-04-30_15-25-55.png" />
在pom文件中将标签中的内容删掉
然后将maven目录补全
https://img-blog.csdnimg.cn/img_convert/9db4e0af8e555c23457e6185f34f071a.png" alt="Snipaste_2024-04-30_15-27-53.png" />
https://img-blog.csdnimg.cn/img_convert/59b761724f7a04487dffd60851538d34.png" alt="Snipaste_2024-04-30_15-30-51.png" />
idea创建maven的web项目-不使用骨架(建议使用)
https://img-blog.csdnimg.cn/img_convert/55b5c2dfbfdeb7fa25a5e3805454b263.png" alt="Snipaste_2024-04-30_15-34-35.png" />
到另一个界面直接create即可
https://img-blog.csdnimg.cn/img_convert/73e16329882b3088a22e9661782e6709.png" alt="Snipaste_2024-04-30_15-37-27.png" />
在idea中发布web项目
使用骨架(有点麻烦)
先在webapp下创建一个html文件
https://img-blog.csdnimg.cn/img_convert/bcb1520ebed19dc42f9a0c000afbe940.png" alt="Snipaste_2024-04-30_15-46-53.png" />
https://img-blog.csdnimg.cn/img_convert/ccc868730aad4f166767183ca4c1e0f2.png" alt="Snipaste_2024-04-30_15-56-18.png" />
https://img-blog.csdnimg.cn/img_convert/04fd703bef95f9aaf0aa1916d23f3f93.png" alt="Snipaste_2024-04-30_15-58-08.png" />
https://img-blog.csdnimg.cn/img_convert/3aaaf320a183483d8f3e40889de05ba8.png" alt="Snipaste_2024-04-30_15-58-15.png" />
然后运行即可,在浏览器地址栏输入自己编写的html文件名
https://img-blog.csdnimg.cn/img_convert/0452dabcd52e62ea3442be3677f2e9f2.png" alt="Snipaste_2024-04-30_15-59-33.png" />
不使用骨架(建议使用)
在webapp下书写html文件,然后直接运行即可
https://img-blog.csdnimg.cn/img_convert/f4fff2d88af7902fc9ce87742fb4b21b.png" alt="Snipaste_2024-04-30_16-03-51.png" />
https://img-blog.csdnimg.cn/img_convert/45bcd7a5a38634c07b5948994123e467.png" alt="Snipaste_2024-04-30_16-05-11.png" />
使用idea发布web项目的注意事项
web项目的目录结构说明
https://img-blog.csdnimg.cn/img_convert/ed33df7b1a9310c41e11d453cf22ef9a.png" alt="Snipaste_2024-04-30_17-23-10.png" />
将虚拟路径的项目删除,只保留/
https://img-blog.csdnimg.cn/img_convert/81d6aa4759e129e2ae2032505636d7f5.png" alt="Snipaste_2024-04-30_17-24-02.png" />
https://img-blog.csdnimg.cn/img_convert/b0fe4232e7f74cfbcba2a9324b006bad.png" alt="Snipaste_2024-04-30_17-25-21.png" />
再次点击启动按钮弹出框
https://img-blog.csdnimg.cn/img_convert/f1815b7e7d4dae19a34e920e76d79d61.png" alt="Snipaste_2024-04-30_17-26-29.png" />
去掉自动打开浏览器功能
将对勾去掉即可
https://img-blog.csdnimg.cn/img_convert/7782e3f685b4dc427bcfdc8bbdcd34bb.png" alt="Snipaste_2024-04-30_17-27-07.png" />
tomact_182">浏览器输入url访问tomact服务器疑惑
https://img-blog.csdnimg.cn/img_convert/651341b091dbfe7a6619008cef4b50ae.png" alt="Snipaste_2024-04-30_17-28-20.png" />
idea中启动tomcat服务器会自动访问web目录下面的三个页面:index.html index.htm index.jsp
如果没有这三个资源就会报404
注意:自动访问上述三个资源的原因是:
在tomact的配置文件web.xml中存在下面的配置
<welcome-file-list><welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file>
</welcome-file-list>
如果在idea中webapp目录下的那个web.xml中也写上述代码,会执行idea中web.xml(子)
https://img-blog.csdnimg.cn/img_convert/62f557d3c4f22d7f9c1300759ddb2d05.png" alt="Snipaste_2024-04-30_17-31-02.png" />
pom.xml添加Tomact插件
<!--配置maven的插件--><build><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><version>2.2</version><configuration><port>80</port><path>/</path></configuration></plugin></plugins></build>
然后添加tomact Helper插件(File->settings)
https://img-blog.csdnimg.cn/img_convert/86a16e1ac9cdc22742414c5a39cc0664.png" alt="Snipaste_2024-04-30_17-33-42.png" />
https://img-blog.csdnimg.cn/img_convert/bfc55996a845100cad8670df09932234.png" alt="Snipaste_2024-04-30_17-39-22.png" />
https://img-blog.csdnimg.cn/img_convert/827639c6747bb44803737d0c92640238.png" alt="Snipaste_2024-04-30_17-39-44.png" />