一、Web开发要解决的问题
- 展示用户操作界面
- 从后端获取数据,在用户界面上显示
- 在前端『收集』用户填写的数据发送给后端执行『保存』或『更新』
二、Web开发相关概念
1、C/S模式
-
C:Client客户端
-
S:Server服务器
-
缺点:不同操作系统平台下,同样的功能需要开发很多套不同的程序
- Android平台
- IOS平台
- Windows平台
- ......
2、B/S模式
- B:Browser浏览器
- S:Server服务器
在浏览器端开发一套用户界面即可,由于主流浏览器都遵循W3C组织定义的网页技术规则,所以同一套网页程序在不同浏览器上能够呈现相同的界面,大大提高开发效率
3、Web应用
- 应用:Application,特指一款应用程序,我们学编程就是学习开发『应用程序』
- 桌面应用:Microsoft Office、QQ、英雄联盟......等等,在PC端使用的应用程序,我们不做
- Web应用:一款可以通过Web方式访问的应用程序,通常是指通过浏览器访问的应用程序
- Web应用的前端部分:前端工程
- Web应用的后端部分:后端工程
4、请求和响应
前端程序和后端程序交互访问的最基本形式:
- 请求:点菜
- 响应:上菜
三、学习的目标
- 手段:知识、技术、语法......
- 目的:开发业务功能,给学框架打基础
- 登录、注册
- 登录状态检查
- C:Create 新增、保存
- R:Retrieve 查询
- U:Update 更新
- D:Delete 删除
- ......
Talk is cheap,show me the code.
------林纳斯·托瓦兹(Linux之父)
四、技术栈
1、前端技术栈
- HTML:定义网页主体结构
- CSS:定义网页布局和显示样式
- JavaScript:编程实现网页动态效果
- Vue:页面渲染和组件化开发框架
- axios:Ajax异步交互框架
- ES6:JavaScript的新语法标准
- Node.js:JavaScript代码执行引擎,让JavaScript代码可以脱离浏览器运行
- npm:JavaScript代码的打包和依赖管理工具
- Vite:帮助我们生成前端工程的目录结构和必要的资源文件
- router:Vue组件化开发环境下,实现组件路由
- Pinia:在前端维护应用程序的全局状态数据
- Promise:JavaScript异步编程,类似于我们Java中的Thread
- ElementPlus:简单、易用、美观的页面控件集
2、后端技术栈
- XML:常用配置文件格式
- Tomcat:一个可以执行Java代码的Web服务器
- Servlet:一个可以处理请求的特殊的Java类
- HTTP:前后端交互报文的格式规定
- Cookie&Session:会话控制解决方案
- Filter:实现Servlet处理请求之前和之后的统一处理
- Listener:服务器端特定事件的监听与回调
3、总体机制
一、Web2.0规范
Web2.0规范主张在前端开发中,把结构、表现、行为三者分开,告别此前三者耦合在一起导致代码繁杂难以维护的时代
- 结构:HTML负责实现
- 表现:CSS负责实现
- 行为:JavaScript负责实现
二、HTML简介
1、HTML
HTML:Hyper Text Markup Language超文本标记语言。
- 超文本:HTML代码本身是文本,但浏览器却可以基于文本显示多媒体信息
- 标记语言:HTML代码主要是由标签组成的
2、HTML5
HTML5简称H5,2008年正式发布的HTML新语法标准。相比于之前的语法,H5更简洁、更规范。
三、First Blood
1、创建文件
在电脑任意目录下创建一个文本文件,修改文件名(连同扩展名一起修改)为:index.html
2、编辑文件
使用文本编辑工具打开刚刚创建的文件,编写如下代码:
html
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
hello html!!!
</body>
</html>
四、HTML语法
1、概念
①注释
html
<!-- 这是一个 HTML 注释,不会在浏览器窗口内显示 -->
②标签
html
<!-- 双标签:开始标签、结束标签 -->
<p>文本标签体</p>
<!-- 单标签 -->
<br>
③属性
html
<!-- 属性名="属性值" -->
<input type="text" name="userName">
2、规则
- 根标签必须是html标签
- 双标签必须正确关闭
- 标签可以嵌套但不能交叉嵌套
- 注释不能嵌套
- 属性必须有值,除非属性值和属性名一致
- 属性值必须加引号,单引号、双引号都可以
- 不区分大小写
五、安装VScode【可选】
1、安装过程
略
2、安装插件
复制插件名称,搜索安装
插件名称 | 作用 |
---|---|
Auto Rename Tag | 自动修改标签对插件 |
Chinese Language Pack | 汉化包 |
HTML CSS Support | HTML CSS 支持 |
Intellij IDEA Keybindings | IDEA快捷键支持 |
Live Server | 实时加载功能的小型服务器 |
open in browser | 通过浏览器打开当前文件的插件 |
Prettier-Code formatter | 代码美化格式化插件 |
Vetur | VScode中的Vue工具插件 |
vscode-icons | 文件显示图标插件 |
Vue 3 snipptes | 生成VUE模板插件 |
Vue language Features | Vue3语言特征插件 |
3、打开工作区
- 在电脑上新建目录
- 使用VScode打开新建的目录
4、新建前端工程
5、新建文件
6、生成HTML代码主体结构
7、运行HTML文件查看效果
六、应用场景:文章
1、标题标签
html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
标题标签就是用来显示标题的,不要用它们来控制字体大小
Web2.0开发思想主张根据 HTML 标签本身的语义来开发网页
结构(HTML)、表现(CSS)、行为(JavaScript)三者分开
三者分开能够很好的保证各不同技术之间彼此解耦,让代码更简洁、更优雅、更易于维护
所以这里再次体现了:"高内聚、低耦合"的开发理念
2、段落标签
html
<p>段落的特点是每个段落独占一行</p>
<p>段落的特点是每个段落独占一行</p>
<p>段落的特点是每个段落独占一行</p>
3、换行标签
html
<!-- 使用br标签换行 -->
<p>每一个段落,<br/>自己独占一行。</p>
4、分割线标签
html
<p>段落内容</p>
<hr/>
<p>段落内容</p>
5、无序列表
html
<!-- ul是unorder list的缩写 -->
<ul>
<!-- li是list item的缩写 -->
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
</ul>
6、超链接
①标签语法
- a标签:a字母是anchor单词的第一个字母,anchor是锚的意思
- href属性:指定目标资源的地址(访问路径)
- target属性:取值_blank时,表示在新窗口打开目标页面
②路径说明
【1】物理路径
- 概念:从物理磁盘的根目录开始的完整路径
text
D:\location\module01-HTML\target\page-target.html
- 问题:完全不具备可迁移性,只能在当前开发人员自己的电脑上运行。而实际开发时,肯定是需要把程序部署到服务器上运行,程序代码必须具备可迁移性。
- 结论:坚决不用!!!
【2】相对路径
- 概念:以当前页面自身为基准,逐层查找目标资源
text
以当前目录为基准:target\page-target.html
以当前目录为基准:.\target\page-target.html
以上一级目录为基准:..\xxx\target\page-target.html
- 问题:将来遇到Servlet里面请求的转发,相对路径参照的基准就会发生变化
- 结论:暂时可用
【3】绝对路径
- 概念:以斜杠开头的目录
- 基准:开头的斜杠代表服务器根目录,然后根据实际目录结构逐层查找资源
text
\module01-HTML\target\page-target.html
- 好处:不论Servlet怎么转发都不怕,开头斜杠的基准是不变的
- 结论:建议使用
7、图片标签
- img标签:image单词的缩写
- src属性:指定图片资源的路径
html
<img src="\module01-HTML\images\wanghaodong.jpg"/>
8、音乐播放组件【选学】
- audio标签:负责显示音乐播放组件
- src属性:指定音乐文件资源的路径
- controls属性:是否显示音乐播放组件的控制界面
- autoplay属性:控制音乐播放组件在打开页面时是否自动播放
html
<audio src="\module01-HTML\images\music.mp3" controls="controls" autoplay="autoplay"/>
9、视频播放组件【选学】
- width属性:视频播放时的宽度,单位是像素
- height属性:视频播放时的高度,单位是像素
html
<video src="\module01-HTML\images\pain.mp4" controls="controls" autoplay="autoplay"></video>
- 播放组件的小坑:如果要音频、视频播放器互不干扰,那么把它们二者放在各自的div里
10、HTML实体
对我们文章中用到的特殊符号进行转义,常用的有:
符号 | HTML实体 |
---|---|
< | < |
> | |
& | & |
空格 | |
七、应用场景:表格
1、没有任何修饰的表格
html
<!-- table 标签:定义整个表格 -->
<table>
<!-- thead 标签:定义表格的头部 -->
<thead>
<!-- tr 标签:定义表格中的一行 -->
<tr>
<!-- th 标签:定义一个表头单元格,里面文本有加粗效果 -->
<th>员工id</th>
<th>员工姓名</th>
<th>员工年龄</th>
<th>员工部门</th>
<th>员工工资</th>
</tr>
</thead>
<!-- tbody 标签:定义表格主体 -->
<tbody>
<tr>
<!-- td 标签:定义普通单元格 -->
<td>1</td>
<td>Tom</td>
<td>25</td>
<td>RD</td>
<td>10000</td>
</tr>
<tr>
<!-- td 标签:定义普通单元格 -->
<td>2</td>
<td>Jerry</td>
<td>26</td>
<td>HR</td>
<td>8000</td>
</tr>
<tr>
<!-- td 标签:定义普通单元格 -->
<td>3</td>
<td>Mary</td>
<td>35</td>
<td>FI</td>
<td>9000</td>
</tr>
</tbody>
</table>
2、给表格加样式修饰
整体复制过来,放在head标签里,不要自己写:
html
<style>
table {
/* 合并单元格框线 */
border-collapse: collapse;
/* 左右外边距设置为自动,就是水平居中 */
margin-left: auto;
margin-right: auto;
}
th,td {
border: 1px black solid;
/* 设置内边距 */
padding: 10px;
/* 文本居中对齐 */
text-align: center;
}
</style>
3、合并单元格
html
<table>
<tr>
<th>员工id</th>
<th>员工姓名</th>
<th>员工年龄</th>
<th>员工部门</th>
<th>员工工资</th>
</tr>
<tr>
<td>1</td>
<!-- rowspan 属性:设置跨行合并单元格 -->
<td rowspan="2">Tom</td>
<td>25</td>
<td>RD</td>
<td>10000</td>
</tr>
<tr>
<td>2</td>
<!-- <td>Jerry</td> -->
<td>26</td>
<!-- colspan 属性:设置跨列合并单元格 -->
<!-- col 是 column 的缩写 -->
<!-- span 是跨越的意思 -->
<td colspan="2">HR</td>
<!-- <td>8000</td> -->
</tr>
<tr>
<td>3</td>
<td>Mary</td>
<td>35</td>
<td>FI</td>
<td>9000</td>
</tr>
</table>
八、应用场景:表单
1、一个简单的表单
html
<!-- form 标签:定义一个表单 -->
<!-- action 属性:指定表单提交的目标地址 -->
<!-- 运行效果:表单提交时默认是GET请求方式,请求参数都被附着到了URL地址后面,在浏览器上能看到。 -->
<!-- 危害1:密码在浏览器地址栏明文显示出来,不安全。 -->
<!-- 危害2:URL地址后面附着请求参数容量有限。如果请求参数非常多,就会导致后面的请求参数丢失。 -->
<form action="target/page-target.html">
<!-- input 标签配合 type 属性取值 text:生成普通文本框 -->
<!-- name 属性:设定请求参数的名字,便于服务器端识别和提取 -->
账号:<input type="text" name="username"><br/>
<!-- input 标签配合 type 属性取值 password:生成密码框 -->
<!-- name 属性:设定请求参数的名字,便于服务器端识别和提取 -->
密码:<input type="password" name="userPwd"><br/>
<!-- button 标签配合 type 属性取值 submit:生成表单的提交按钮 -->
<button type="submit">登录</button>
</form>
2、以POST方式提交的表单
html
<!-- method 属性:指定提交表单时采用的请求方式,默认是GET方式,建议使用POST方式。 -->
<!-- ※提示:在VSCode中使用Live Server方式会看到HTTP ERROR 405,此时我们不经过服务器,直接在Windows系统中打开页面即可。 -->
<!-- 运行效果:通过POST方式提交表单,不会把请求参数暴露到浏览器地址栏,而是在请求体中携带请求参数。 -->
<!-- 使用建议:开发中,建议大家所有表单都通过POST方式提交。 -->
<form action="target/page-target.html" method="post">
<!-- 文本框使用 value 属性设置默认值 -->
账号:<input type="text" name="username" value="haodongge"><br/>
密码:<input type="password" name="userPwd" value="555666"><br/>
<button type="submit">登录</button>
<!-- 重置按钮可以把各个表单项的值恢复为默认值 -->
<button type="reset">重置</button>
<!-- 设置一个普通按钮,不会提交表单,点击后没有任何效果 -->
<button type="button">普通按钮</button>
</form>
Form Data表示表单提交的数据:
3、单选按钮和多选按钮
html
<form action="target/page-target.html" method="post">
<!-- input 标签配合 type 属性取值 radio:生成单选按钮 -->
<!-- value 属性:设置要给服务器提交的值。 -->
<!-- checked 属性:设置默认被选中的选项 -->
你最喜欢的季节:<br/>
<input type="radio" name="season" value="spring"/>春天<br/>
<input type="radio" name="season" value="summer" checked="checked"/>夏天<br/>
<input type="radio" name="season" value="autumn"/>秋天<br/>
<input type="radio" name="season" value="winter"/>冬天<br/>
<br/><br/>
你的性别:<br/>
<!-- 单选框的互斥性是由name属性设定的。name相同的被设定为一组,组内互斥。 -->
<input type="radio" name="gender" value="directMan"/>直男<br/>
<input type="radio" name="gender" value="commonSelfConfidentMan"/>普信男<br/>
<input type="radio" name="gender" value="downHeadMan" checked="checked"/>下头男<br/>
<input type="radio" name="gender" value="badHandsomeMan"/>渣男<br/>
<br/><br/>
<!-- input 标签配合 type 属性取值 checkbox:生成多选按钮 -->
<!-- value 属性:设置要给服务器提交的值。 -->
<!-- checked 属性:设置默认被选中的选项 -->
你最喜欢的球队:<br/>
<input type="checkbox" name="team" value="German"/>德国<br/>
<input type="checkbox" name="team" value="France" checked/>法国<br/>
<input type="checkbox" name="team" value="Brazil"/>巴西<br/>
<input type="checkbox" name="team" value="China" checked/>中国<br/>
<button type="submit">保存</button>
</form>
4、下拉列表
html
<form action="target/page-target.html" method="post">
请选择你最希望穿越回去的朝代:<br/>
<!-- select 标签:定义整个下拉列表 -->
<!-- name 属性:请求参数的名字 -->
<select name="period">
<!-- option 标签:下拉列表项 -->
<!-- value 属性:设置被选中的option要给服务器提交的值 -->
<!-- selected 属性:设置默认被选中 -->
<!-- option 标签的文本标签体:设置给用户看的数据 -->
<option value="qin">秦朝</option>
<option value="han">汉朝</option>
<option value="tang" selected="selected">唐朝</option>
<option value="song">宋朝</option>
<option value="yuan">元朝</option>
</select>
<br/>
<button type="submit">保存</button>
</form>
5、多行文本框
在多行文本框中输入内容时,敲回车不会导致表单提交
html
<form action="target/page-target.html" method="post">
<!-- textarea标签:定义多行文本框 -->
<!-- name 属性:设置请求参数名字 -->
<!-- 在 textarea 标签的文本标签体中设置默认值 -->
<textarea name="userDesc">请在这里输入用户介绍</textarea>
<br/>
<button type="submit">保存</button>
</form>
6、表单隐藏域
表单隐藏域是用来设置那些不希望或不必用户看到,但是又必须和表单一起提交的数据
html
<form action="target/page-target.html" method="post">
<input type="hidden" name="userId" value="5533"/>
<button type="submit">提交</button>
</form>
7、文件上传框
- 上传文件要求 form 标签必须设置 method 为 POST
- 上传文件要求 form 标签必须设置 enctype 为 multipart/form-data
- input 标签配合 type 属性取值 file:生成文件上传框
html
<form action="target/page-target.html" method="post" enctype="multipart/form-data">
请选择你的头像:<input type="file" name="headPicture"/><br/>
<button type="submit">上传</button>
</form>
1、名称简介
XML:eXtensible Markup Language 可扩展标记语言
- 可扩展:XML允许自定义标签
- 标记语言:主要由标签组成
2、应用场景
跨平台数据传输格式(目前已经被 JSON 取代)- 配置文件
- Tomcat:server.xml、context.xml
- Mybatis:mybatis-config.xml、EmployeeMapper.xml
- 后端Web应用:web.xml
- Spring框架:applicationContext.xml
- ......
xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
version="5.0">
<servlet>
<servlet-name>EmpServlet</servlet-name>
<servlet-class>com.atguigu.servlet.EmpServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>EmpServlet</servlet-name>
<url-pattern>/EmpServlet</url-pattern>
</servlet-mapping>
</web-app>
3、XML语法规则
- XML文档开头必须有XML声明
- 根标签有且只能有一个
- 双标签必须正确关闭
- 标签可以嵌套但不能交叉嵌套
- 注释不能嵌套
- 属性必须有值
- 属性值必须加引号,单引号、双引号都可以
- 不区分大小写
4、XML约束
XML约束规定了XML文档中可以包含哪些标签、标签有哪些子标签、标签有哪些属性、属性有哪些值......常用的两种约束形式是:
- DTD约束
- Schema约束
所以虽然XML允许自定义标签,但是官方通过XML约束做好规定之后,我们就必须按照约束的要求来写,不能随便写了。
这也解释了为什么XML语法规则和HTML这么像:XML语法规则+HTML约束=HTML语法规则
5、XML学习目标
在 IDEA 的辅助下能够完成 XML 代码编写即可。