JavaWeb--尚硅谷

JavaWeb

视频地址

相关文件

day1 HTML&&CSS

1、B/S软件的结构

• Browser Server
  客户端：浏览器
  服务器端：WEB服务器

2、前端的开发流程

• Ps：美术实现：网页设计师根据需求设计网页
  前端：将设计做成静态网页
  java程序员：将静态网页修改为动态网页

3、网页的组成部分

• 页面包括内容（结构）、表现、行为
  内容：页面中可以看到的数据，html技术来展示
  表现：内容在页面上的展示形式，如布局颜色大小等，一般由CSS技术实现（CSS 是一种描述 HTML 文档样式的语言）
  行为：页面中元素与输入设备交互的响应，javascript

4、html简介

• 子主题 2

  • 子主题 1

• 子主题 2

5、创建html

6、html书写规范

• 页面开始、头信息、标题。页面的主题内容、页面结束

7、heml标签介绍

• 标签的格式、标签的属性、事件的属性（鼠标点击等）、但标签双标签等

8、常用标签介绍文档

• font字体标签、特殊字符（空格 大于号小于号引号等，版权商标 等）、
  3、标题标签 h1-h6
  4、超链接 href （读作H ref 全写Hypertext reference）
  5、列表标签 有序 无序
  6、img标签 显示图片
  7、表格标签
  8、跨行跨列表格
  9、iframe框架标签（内嵌窗口）
  10、表单标签：
  表单页面中用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

9、css技术

• css是层叠样式表单，是用于 增强控制网页样式，并允许将样式信息与网页内容分离 的一种标记性语言
  语法规则：选择器 属性 值
  3、css和HTML的结合方式
  div区隔标记，用来区分区和标签
  4、CSS选择器：标签名选择器，id选择器，class选择器，组合选择器
  5、常用样式：字体颜色，宽度，高度、背景颜色、字体样式、文本居中，超链接去下划线，表格细线

day2 JavaScript语言入门

1、JavaScript介绍JS

• 子主题 1

2、JavaScript和html代码的结合方式

• 在head标签中，或者body标签中使用script标签来书写JavaScript代码

4、变量

• JavaScript的变量类型：
  数值类型 ：number
  字符串类型：string
  对象类型：object
  布尔类型：boolean
  函数类型：function
  undefinded 未定义，js变量为赋予初始值的时候都是undefined
  定义变量格式： var 变量名； var 变量名 = 值；

  • 子主题 1

5、比较（关系）运算，逻辑运算

• 等于 == 值比较
  全等于 === 值加类型比较
  且或非 && || |

7、数组

• 数组的定义：
  var 数组名 = [];
  var 数组名 = [1, ‘abc’， ‘true’];

8、函数

• 函数的定义：
  1、
  function 函数名(形参列表){
  函数体
  }
  若想带有返回值，只要在函数体重直接使用return语句即可
  2、
  var 函数名 = function(形参列表){
  函数体
  }
• 函数的arguments 隐形参数（只在function函数内）

9、自定义对象

• Object形式的自定义对象

对象的定义：
var 变量名 = new Object();//对象实例（空对象）
变量名.属性名 = 值;//定义一个属性
变量名.函数名= function(){}//定义一个函数

对象的访问：
变量名.属性/函数名();

• {}形式的自定义对象
  var 变量名={
  属性名：值，
  属性名：值，
  函数名：function（）{}
  }
  对象的访问：
  变量名.属性/函数名（）；

10，js中的事件

• 事件是 电脑输入设备 与页面进行交互的响应
  onload，onclick, onblur, onchange, onsubmit
  事件的注册又分为静态注册和动态注册两种：
  静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码
  动态注册事件：先通过js代码得到标签的dom对象，然后再通过dom 对象.事件名= function(){} 这种形式赋予事件响应后的代码，叫动态注册
  动态注册基本步骤:
  1,获取标签对象
  2.标签对象.事件名= function(){}

11、DOM模型

• DOM模型
  document object model文档对象模型：把文档中的标签，属性，文本，转换成为对象来管理

对Document对象的理解：
1、Document他管理了所有的HTML文档内容
2、document它是一种树结构的文档，有层级关系
3、他让我们把所有的标签都对象化
4、我们可以通过document访问所有的标签对象

Document对象中的方法介绍
document.getElementById(elementId)通过标签的id属性查找标签dom对象，elementId是标签的id属性值
id
name
tagname
对应的三个方法一定要在页面加载完成之后执行，才能查询到标签对象

day3 jQuery

jQuery = JavaScript + Query(查询)

核心思想：write less， do more(写的更少，做的更多)

2、使用jQuery给一个按钮绑定单击事件

1】使用jQuery必须导入jQuery库
2】jQuery中$是一个函数
3】为按钮添加点击响应函数
1、使用jQuery查询到标签对象
2、使用标签对象.click(function(){} ):

3、jQuery核心函数

• 1、传入参数为 [ 函数 ] 时：
  表示页面加载完成之后。相当于 window.onload = function(){}
  2、传入参数为 [ HTML 字符串 ] 时：
  会对我们创建这个 html 标签对象
  3、传入参数为 [ 选择器字符串 ] 时：
  $(“#id 属性值”); id 选择器，根据 id 查询标签对象
  $(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
  $(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象
  4、传入参数为 [ DOM 对象 ] 时：
  会把这个 dom转化为jQuery对象

4、jQuery对象和dom对象

• DOM对象通过getElementById/Name/TagName/ceateElement()查询出来的标签对象是Dom
  DOM对象Alert出来的效果是：[object HTML 标签名 Element]
• jQuery对象
  通过jQuery 提供的API创建的对象/
  包装的Dom对象/
  提供的API查询到的对象创建的对象，是JQuery对象
  jQuery对象Alert出来的效果是[object Object]
• jQuery对象的本质： dom对象的数组+jQuery提供的一系列功能函数
• 1、dom 对象转化为 jQuery 对象（*重点）
  先有 DOM 对象
  $( DOM 对象 ) 就可以转换成为 jQuery 对象
  var $obj = $(dom对象);
  2、jQuery 对象转为 dom 对象（*重点）
  先有 jQuery 对象
  jQuery 对象[下标]取出相应的 DOM
  var dom = $ obj[下标];

5、jQuery选择器

• 基本选择器
  #id 根据id查找标签对象
  element 根据标签名查找标签对象
  .class 根据class查找标签对象

•        表示任意的，所有的元素
         selector1.selector2 组合选择器
  

• 层级选择器
  ancestor 后代选择器
  parent>child 子元素选择器
  prev+next相邻元素选择器
  prev~sibings之后的兄弟元素选择器
• 过滤选择器
  基本过滤器
  内容过滤器 contains empty parent has
  属性过滤器
  表单过滤器

6、jQuery元素筛选

day4 jQuery

1，jQuery属性操作

val同时选中多个表单状态
全选，全不选，反选

4、DOM的增删改

内部插入
a.append(b)
a.prepend(b)
外部插入
a.insertAfter(b) ba
a.insertBefore(b) ab
替换
a.replaceWith(b) 用b替换掉a
a.replaceAll(b) 用a替换掉所有b
删除
a.remove()
a.empty();
动态添加，删除表格记录

6、CSS样式操作

添加 删除 获取

7、jQuery动画

隐藏，显示，hide(), show(), toggle()
淡入淡出

8、jQuery事件操作

$(function(){});和window.οnlοad=function(){}区别
触发时间
浏览器内核解析完页面的标签 创建好DOM对象后马上执行
原生jsye面加载完成后，等浏览器内核解析完 创建好DOM对象还要等标签显示时需要的内容加载完成

触发顺序
jQuery是页面加载完成之后先执行
原生js的页面加载完成之后

执行次数
jQuery的页面加载完成之后都封装成function函数，依次顺序全部执行
原生js的页面加载完成之后，只会执行最后依次的赋值函数

day5 Tomcat&&xml

Tomcat

• JavaWeb是指 所有通过Java语言编写可以通过浏览器访问的程序的总称，JavaWeb是基于请求request和响应response来开发的

Web资源的分类：
静态资源 html css js txt mp4 jpg
动态资源 jsp页面 Servlet程序

常用的Web服务器
Tomcat：提供对jsp和Servlet的支持，是一种轻量级的javaWeb容器，目前应用最广的JavaWeb服务器
Jboss
GlassFish
Resin
WebLogic

• Tomcat的安装：
  在IDEA中部署工程到Tomcat上

xml

• xml：可扩展的标记性语言
  作用：保存数据，作为项目或者模块的配置文件
  作为网络传输数据的格式（但现在以JSON为主）
  xml语法：
  必须有关闭标签，对大小写敏感，正确的嵌套
• dom4j
• 子主题 3

day6 Servlet

Serlet是javaEE规范之一，规范就是接口

Servlet是JavaWeb三大组件之一，三大组件分别是 Servlet程序，Filter过滤器，Listener监听器
Servlet是运行在服务器上的一个java小程序，可以接受客户端发送过来的请求，并相应数据给客户端

Get和Post请求的分发处理

HTTP协议

07中其他一些请求响应

day8 jsp

jsp: java server pages Java的服务器页面，本质是一个Servlet程序

作用：代替Servlet程序回传html页面的数据

jsp 的三种语法:

jsp头部的page指令
jsp中的常用脚本
jsp中的三种注释

jsp九大内置对象

Listener监听器

day9 EL表达式&&JSTL标签库

1、EL表达式：

Expression Language 表达式语言，非常简洁
格式： ${表达式}
作用：
代替jsp页面中的表达式脚本在jsp页面中进行数据的输出

运算： 关系运算，逻辑运算，算术运算，三元运算

day14 Cookie和Session

Cookie：服务器通知客户端保存键值对的一种技术

客户端有了Cookie后，每次请求都发送给服务器
每个Cookie的大小不能超过4kb
a 创建
b 服务器获取
c Cookie值的修改
d 浏览器查看Cookie
e Cookie生命控制（创建销毁）
f Cookie有效路径Path的设置(过滤掉哪些Cookie可以发送给服务器，那些不发)
由服务器(Tomcat)创建并通知客户端(浏览器)
服务器获取Cookie只需要一行代码req.getCookies():Cookie[]

• Cookie练习：
  免输入用户名登录

Session会话：Session是一个接口（HttpSession）

用来维护一个客户端和服务器之间关联的一种技术
每个客户端都有自己的一个Session会话
Session会话中，经常用来保存用户登录之后的信息

day15 Filter过滤器

Filter过滤器是JavaWeb的三大组件之一（Servlet Listener Filter）

作用：拦截请求，过滤响应（权限检查，日记操作，事务管理）

Filter 过滤器的使用步骤：

1、编写一个类去实现 Filter 接口
2、实现过滤方法 doFilter()
3、到 web.xml 中去配置 Filter 的拦截路径

子主题 2

子主题 3

day16 JSON，AJAX, i18n

JSON: JavaScript Object Notation 一种轻量级(与xml比较)的数据交换(客户端和服务器之间业务数据的传递格式)格式

json定义：由键值对组成，本身是一个对象，
json的存在有两种形式，json对象，json字符串，
一般要操作json中的数据的时候，需要json对象的格式 JSON.parse() 把字符串转化为对象
一般要在客户端和服务器之间进行数据交换的时候，使用json字符串JSON.stringify()对象转化为字符串

JSON在java中的使用

AJAX请求：是指一种创建交互式网页应用的网页开发技术

ajax是浏览器通过js异步发起请求，局部更新(局部更新不会舍弃原来页面的内容)页面的技术

i18国际化

书城项目

04第一阶段：表单验证

• 验证用户名
  密码
  确认密码
  邮箱
  验证码

08第二阶段：用户注册和登录

• 需求 1：用户注册
  需求如下：
  1）访问注册页面
  2）填写注册信息，提交给服务器
  3）服务器应该保存用户
  4）当用户已经存在----提示用户注册 失败，用户名已存在
  5）当用户不存在-----注册成功

需求 2：用户登陆
需求如下：
1）访问登陆页面
2）填写用户名密码后提交
3）服务器判断用户是否存在
4）如果登陆失败 —>>>> 返回用户名或者密码错误信息
5）如果登录成功 —>>>> 返回登陆成

- JavaEE项目的三层架构

Web层/视图展现层：获取请求参数,封装好成为Bean对象，调用Service层处理业务，响应数据给客户端请求转发重定向
Service业务层：处理业务逻辑，调用持久层保存到数据库
Dao持久层：只负责跟数据库交互

分层的目的是为了解耦，降低代码的耦合度，方便项目后期的维护和升级

	- 

- 1、创建书城需要的数据库和表

2、编写数据库表对应的JavaBean对象
3、编写工具类JdbcUtils
4、编写BaseDao
5、编写UserDao测试
6、编写UserService和测试
7、编写web层 实现用户注册功能
Debug调试的使用

10第三阶段：

• 页面jsp动态化：

  • 1、在 html 页面顶行添加 page 指令。
    2、修改文件后缀名为：.jsp
    3、使用 IDEA 搜索替换.html 为.jsp(快捷键：
    Ctrl+Shift+R

• 抽取页面中的相同内容

• 登录，注册错误提示及表单回显

• BaseServlet的抽取： 把用户模块UserServlet程序和图书模块BookServlet程序中相同部分抽象出父类BaseServlet，再分别继承

• 使用EL表达式修改表单回显

11第五阶段 图书模块

• 1、MVC 三层架构（思想：将软件代码拆分为组件，单独开发，组合使用，目的是降低耦合度）
  Model模型：（抽取模型）将与业务逻辑相关的数据 封装为具体的JavaBean类，其中不掺杂任何与数据处理相关的代码
  View视图：只负责数据和界面的显示，不接受任何与显示数据无关的代码，
  Controller控制器：”调度者“（接收，跳转），只负责接收请求，调用业务层的代码处理请求，然后派发页面 Servlet

• 1、图书模块

  • 编写图书模块的数据库表
  • 编写图书模块的JavaBean
  • 编写图书模块的Dao和测试Dao
  • 编写图书模块的Service和测试Service
  • 编写图书模块的Web层和页面联调测试

• 2、图书分页

  • 分页模块的分析
  • 分页模型Page的抽取：
    当前页数，总页数，总记录数，当前页数据，每页记录数
    首页，上一页，下一页，末页，跳转到指定页数功能的实现
    首页index.jsp的跳转
  • 首页价格搜索

• 子主题 4

14第六阶段

• 登录–显示用户名

  • UserServlet程序中保存用户登录的信息
  • 子主题 2
  • 子主题 3

• 注销用户

  • 1、销毁 Session 中用户登录的信息（或者销毁 Session）
    2、重定向到首页（或登录页面）

• 表单重复提交–验证码

  • 表单重复提交有三种常见的情况：
    一：提交完表单。服务器使用请求转来进行页面跳转。这个时候，用户按下功能键 F5，就会发起最后一次的请求。
    造成表单重复提交问题。解决方法：使用重定向来进行跳转
    二：用户正常提交服务器，但是由于网络延迟等原因，迟迟未收到服务器的响应，这个时候，用户以为提交失败，
    就会着急，然后多点了几次提交操作，也会造成表单重复提交。
    三：用户正常提交服务器。服务器也没有延迟，但是提交完成后，用户回退浏览器。重新提交。也会造成表单重复提交

15第八阶段

• 1、使用Filter过滤器拦截/pages/manager/所有内容，实现权限检查
  2、ThreadLocal的使用：可以解决多线程的数据安全问题
  3、使用Filter和ThreadLocal组合管理事务
  将异常交给Tomcat，让Tomcat展示友好的错误信息页面

16第九阶段

• 使用ajax验证用户名是否可用：UserServlet 程序中 ajaxExistsUsername 方法
• 使用ajax修改把商品添加到购物车