武汉学院-信工学院-欧阳小伟

Web开发基础

Web开发基础
武汉学院-信工学院-欧阳小伟
Web开发基础
武汉学院-信工学院-欧阳小伟

我们为什么上大学？

  • 培养学习能力
  • 这个世界唯一不变的就是变化，应对变化的办法是适应变化，快速适应变化需要好的学习能力
Web开发基础
武汉学院-信工学院-欧阳小伟

Web开发基础
武汉学院-信工学院-欧阳小伟

Talk is cheap, show me the code

  • Linus Torvalds:Creator of Linux & Git
  • f*** NVIDIA
Web开发基础
武汉学院-信工学院-欧阳小伟

学习方法

Web开发基础
武汉学院-信工学院-欧阳小伟

分数说明

类型 比例
平时成绩(到课、课堂提问) 20%
实验 20%
考试 60%
Web开发基础
武汉学院-信工学院-欧阳小伟

学习过程 >> 考试结果

  • 在学习的过程中，掌握好方法、工具，提升学习能力
  • 考试只是一个评估检测，分数并不重要
  • 工程能力比考试成绩重要
  • 对于软件工程师而言，学习能力最重要
Web开发基础
武汉学院-信工学院-欧阳小伟

学习方法

  • 研究它的历史
  • 研究它的现状
  • 注重它的应用
Web开发基础
武汉学院-信工学院-欧阳小伟

最好的时代 最坏的时代

  • AI的到来，学习将变得更加容易

    • 一定要使用AI来提升自己
    • 如果你善于利用AI，那么别人多年积累的知识、经验将迅速被你打败

  • AI的到来，未来软件工程师的岗位会减少

Web开发基础
武汉学院-信工学院-欧阳小伟

JSP(Java Server Pages)技术

  • Web技术(HTML,JavaScript,CSS)
  • 服务端渲染(Server Side Render)，动态生成HTML
  • Java既作为渲染脚本，也作为服务器程序
  • 其他SSR技术
Web开发基础
武汉学院-信工学院-欧阳小伟

服务端渲染 VS 前后端分离

-- 服务端渲染 前后端分离
特点 服务器生成HTML 前端主要负责展示和交互，而后端则专注于数据处理和API的提供
首屏加载 较快 -
SEO 更有利 -
兼容性 较好 -
服务端负载 - 较低
开发效率 - 较高
Web开发基础
武汉学院-信工学院-欧阳小伟

大纲

Web开发基础
武汉学院-信工学院-欧阳小伟

本次课程内容

  • B/S结构
  • Web简介
  • 服务器安装
  • IDE安装
  • 第一个Web项目
Web开发基础
武汉学院-信工学院-欧阳小伟

软件架构模式

  • B/S Browser/Server (浏览器/服务器)
  • C/S Client/Server (客户端/服务器）
    B/S vs C/S
Web开发基础
武汉学院-信工学院-欧阳小伟

什么是Web

  • 定义：Web原意是"蜘蛛网"，或"网"。
  • 在互联网等技术领域，特指网络
  • 是"World Wide Web(万维网)"的简称。
    • 我们上网时，常常需要输入的www就来源于此
  • 在Web程序结构中，浏览器端与Web服务器端采用 请求(Request)/响应(Response) 模式进行交互。
  • 在Web程序中，浏览器端与Web服务器端使用的协议是 HTTP协议
Web开发基础
武汉学院-信工学院-欧阳小伟

请求/响应模式工作流程

Web开发基础
武汉学院-信工学院-欧阳小伟

什么是协议？

  • 百科：共同计议，协商；经过谈判、协商而制定的共同承认、共同遵守的文件
Web开发基础
武汉学院-信工学院-欧阳小伟

计算机世界里的协议

  • 浏览器端、服务器端共同承认、遵守的文件
  • 计算机世界是0和1的世界
  • 那么当浏览器发送一串0/1序列到服务器，服务器如何知道这串0/1序列是什么意思？
  • 协议的作用便是用来定义这一串0/1序列的格式的
Web开发基础
武汉学院-信工学院-欧阳小伟

举个例子

字节序列(Hex)：0x00000741424344454647

  • 前8位含义
    • 00表示字符串
    • 01表示png格式图片
    • 02表示excel表格
    • 03表示word文档
  • 第9-40位含义：内容长度
  • 第41-结束：内容
Web开发基础
武汉学院-信工学院-欧阳小伟

HTTP协议格式


请求：
请求行 请求头 空行 请求主体

响应：

状态行 响应头 空行 响应主体
Web开发基础
武汉学院-信工学院-欧阳小伟

请求行（Request Line)

GET /rmrb/html/2024-07/03/nbs.D110000renmrb_01.htm HTTP/1.1

  • 格式为 METHOD URL HTTP/版本号
  • METHOD 表示请求方法
    • GET、POST
    • PUT、DELETE 等
  • URL 代表请求的资源的路径
  • HTTP/版本号 指定了使用的HTTP协议的版本，如 HTTP/1.1
Web开发基础
武汉学院-信工学院-欧阳小伟

请求头部（Request Header）

  • 请求头部包括多行，每行由键值对组成
Web开发基础
武汉学院-信工学院-欧阳小伟

空行和请求主体

  • 空行（Blank Line）:
    • 表示请求头部的结束，是一个空行
  • 请求主体（Request-Body）：
    • 请求主体是可选的，通常用于在POST请求中向服务器传送数据
Web开发基础
武汉学院-信工学院-欧阳小伟

HTTP响应




状态行 响应头 空行 响应主体
Web开发基础
武汉学院-信工学院-欧阳小伟

状态行(Status Code)

HTTP/1.1 200 OK

  • 格式为：HTTP/版本号 状态码 状态描述
  • 常见状态码：
    • 200 (成功)
    • 404 (资源未找到)
    • 500 (服务器内部错误)
  • 状态描述是对状态码的简单描述
Web开发基础
武汉学院-信工学院-欧阳小伟

404 Page Not Found

404

Web开发基础
武汉学院-信工学院-欧阳小伟

响应头(Response Header)

  • 响应头部的格式与请求头部类似
Web开发基础
武汉学院-信工学院-欧阳小伟

空行&响应主体

  • 空行（Blank Line）:
    • 表示请求头部的结束，是一个空行
  • 响应主体（Response-Body）：
    • 响应主体是服务器返回给客户端的数据，其格式由 Content-Type 头部指定。
    • 数据格式一般是自定义的，常见的有XML、JSON、Protobuf等

示例：人民日报

Web开发基础
武汉学院-信工学院-欧阳小伟

服务器的作用

  • 提供服务的机器
  • 要建立Web网站，最基本的要求是要让客户能够通过http/https协议访问网站里面的网页。
  • 为了能通过http/https协议访问网页，需将网页放在服务器中运行。
  • Java系列的服务器很多，如Tomcat、Jetty等
Web开发基础
武汉学院-信工学院-欧阳小伟

Java安装

Web开发基础
武汉学院-信工学院-欧阳小伟

服务器安装-Tomcat

tomcat

Web开发基础
武汉学院-信工学院-欧阳小伟

Tomcat说明

  • 本机演示
Web开发基础
武汉学院-信工学院-欧阳小伟

Tomcat启动(O神启动)

  • 进入Tomcat安装目录下的bin目录；
  • 双击bin目录下的startup.bat；
  • 打开浏览器，在地址栏输入http://localhost:8080/index.jsp，若能正常访问即安装成功。
Web开发基础
武汉学院-信工学院-欧阳小伟

Tomcat修改监听端口

  • 找到Tomcat安装目录下的文件“/conf/server.xml”；
  • 使用记事本或写字板打开文件，在文件中找到“Connector port=8080”；
  • 将“8080”改为“8888”，然后保存配置文件；
  • 重启Tomcat服务器。
<Connector port="8080" protocol="HTTP/1.1"
    connectionTimeout="20000"
    redirectPort="8443"
    maxParameterCount="1000"
/>
Web开发基础
武汉学院-信工学院-欧阳小伟

IDE安装-Eclipse

Web开发基础
武汉学院-信工学院-欧阳小伟

IDE安装-InteliJ IDEA

Web开发基础
武汉学院-信工学院-欧阳小伟

第一个JSP程序

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Hello</title>
</head>
<body>
    Hello, World!
</body>
</html>
Web开发基础
武汉学院-信工学院-欧阳小伟

URL

  • Uniform Resource Locator的缩写，译为统一资源定位符
  • 通常所说的网址，URL是惟一能够识别Internet上具体的计算机、目录或文件位置的命名约定。
  • 示例：https://localhost:8080/class01/hello.jsp
协议 IP地址(端口号) 主机资源：目录、文件名等
https localhost:8080 /class01/hello.jsp
Web开发基础
武汉学院-信工学院-欧阳小伟

我们访问网页时，发生了什么？

graph TD; A["域名解析"] --> B["建立TCP连接"]; B --> C["发起HTTP请求"]; C --> D["服务器响应HTTP请求"]; D --> E["浏览器渲染页面"];
Web开发基础
武汉学院-信工学院-欧阳小伟

域名解析

  • 域名解析：域名 -> IP地址
  • 例如：baidu.com -> 110.242.68.66
  • 为什么要域名解析？
Web开发基础
武汉学院-信工学院-欧阳小伟

本章总结

  • B/S架构
  • Web简介
  • 服务器安装
  • IDE安装
  • 第一个Web项目：HelloWorld
  • URL?域名解析？
Web开发基础
武汉学院-信工学院-欧阳小伟

实验

  • 安装JDK、Tomcat
  • 修改Tomcat端口为8976，然后进行测试
  • 安装IDEA，申请学生账号，然后在IDEA里配置好JSP开发环境
  • 编写一个简单的网页，在本地运行，然后在本机上访问，再试试再另一台计算机上访问，再试试使用手机访问。
Web开发基础

这里演示 ping baidu.com

使用通讯录作为例子讲解