java前端 07-SERVLET

已于 2022-07-04 14:40:08 修改
阅读量1.1k 收藏
点赞数
分类专栏： java js 文章标签： javascript
于 2020-10-31 11:19:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Theshy08/article/details/109400044
版权
java 同时被 2 个专栏收录
81 篇文章 34 订阅
订阅专栏
js
11 篇文章 0 订阅
订阅专栏

### Web服务软件做了哪些事儿?

1. 负责建立底层的网络连接
2. 负责将客户端请求的文件返回给客户端  
3. 负责根据客户端请求的路径找到对应的Servlet 并进行响应 

### 如何创建Web工程

1. 创建maven工程 选择通过 maven-archetype-webapp骨架创建工程
2. 配置Tomcat 点击绿色扳手旁边Add Config.... 点击灯泡 删除 application Context
3. 给工程添加java和resources文件夹  并且在工程设置页面中的facets里面打钩 ,在工程设置页面的models->dependencies添加Tomcat相关jar包
4. 创建Servlet 处理拦截路径  在doGet方法中写返回数据的代码

### Servlet响应流程

- 用户在浏览器中输入http://localhost:8080/hello请求地址 当发出请求时,该请求会首先被Tomcat拦截, 然后根据请求的路径中的字地址找到对应的Servlet,两种查找方式:1. 通过web.xml配置文件 2. 通过注解方式(servlet3.0以上版本推荐使用的方式),  找到对应的Servlet后Tomcat会通过反射技术将Servlet实例化,并且调用对象中的service方法, 在service方法内部判断请求方式,如果请求方式是get则掉doGet方法, 如果请求方式为post 则调用doPost方法

### 请求方式GET和POST

1. get请求: 请求参数放在请求地址的后面(不能传递敏感信息), 请求参数的大小有限制(只能传递4k以内数据)
   - 浏览器地址栏中发出的请求
   - 通过html页面中的超链接
   - 通过form表单 默认提交方式(method=get)

2. post请求: 请求参数放在请求体内(由于不可见所以安全性较高), 请求参数无大小限制(一般用于文件上传)
   - 通过form表单 method=post

### SayHello练习

1. 在webapp下面创建sayhello.html页面  页面中准备form表单 提交地址为sayhello, 表单中一个文本框   
2. 创建Servlet名字为ServletSayHello, 处理路径为 /sayhello   在doGet方法中获取传递过来的参数 ,  在接收到的参数后面拼上"你好" 返回给浏览器   

### 乘法练习

1. 在webapp下面创建mul.html页面 页面中准备form表单 提交地址为mul 表单里面两个文本输入框 分别获取用户输入的两个数字, 再加一个提交按钮
2. 创建Servlet 名为 ServletMul  处理路径为 /mul  , 在doGet方法中或传递过来的两个参数,获取到的参数为字符串 需要转成int   把相乘之后的结果返回给浏览器 

### AI练习

1. 在webapp下面创建ai.html页面 页面中准备form表单 提交地址为ai ,表单里面1个文本输入框 获取用户输入的信息, 再加一个提交按钮
2. 创建ServletAI  处理路径 /ai   在doGet方法中获取传递过来的信息,  对信息内容进行替换  把替换完的内容 返回给浏览器.

### 注册功能步骤:

1. 创建maven工程 选择通过 maven-archetype-webapp骨架创建工程
2. 配置Tomcat 点击绿色扳手旁边Add Config.... 点击灯泡 删除 application Context
3. 给工程添加java和resources文件夹  并且在工程设置页面中的facets里面打钩 ,在工程设置页面的models->dependencies添加Tomcat相关jar包

1. 在webapp下面创建注册页面 reg.html    在页面中准备form表单  提交地址为reg  请求方式改成post ,  两个文本输入框   和 一个提交按钮 
2. 创建ServletReg, 拦截路径为 /reg  在doPost里面 先设置字符集 获取传递过来的用户名和密码   在控制台输出 
3. 把jdbc02工程中pom.xml里面用到的MySQL坐标 和数据库连接池坐标 复制到新工程的pom.xml里面 
4. 把jdbc02工程中的DBUtils复制到新工程的cn.tedu包下面 
5. 把jdbc02工程中的jdbc.properties配置文件复制到新工程的相同位置  
6. 在ServletReg的doPost方法里面 把获取到的用户名和密码通过JDBC代码保存到数据库里面

 

### 英雄表增删改查

- 创建表:

  create table hero(id int primary key auto_increment,name varchar(20),type varchar(20),money int)charset=utf8;

  

### 删除英雄步骤:

1. 创建ServletDelete 处理为 /delete  获取传递过来的id  在控制台输出检测一下,   获取数据库连接把得到的id对应的hero表中的数据删除 然后给页面返回删除完成!

### 重定向

- 服务器执行重定向方法 会立即给客户端返回一个302状态码和一个请求路径,客户端浏览器接收到302状态码后会立即向指定的路径再次发出请求

### DAO

- Data Access Object 数据访问对象 

### 常见错误码

- **404**  找不到资源,有可能是找不到文件  也有可能是找不到处理该路径的Servlet,如果是找不到文件检查路径是否正确和文件存放位置是否正确,  如果是找不到Servlet 检查请求路径和Servlet中注解里面处理的路径是否正确

- **405** 找到了对应的Servlet 但是没有找到对应的方法(doGet/doPost) ,比如:发出的请求是post 但是在Servlet里面只有doGet时报此错误

- **500**   找到了Servlet,也找到了对应的方法, 在执行doGet/doPost里面代码时报的错,   也可以理解成此错误码指业务代码出错

### 常见错误

1. ### 空指针异常

![image-20201015104403091](image-20201015104403091.png)

找不到jdbc.properties配置文件, 检查文件是否存在,如果存在 在Idea中找到Build->ReBuild 一下即可解决.

2. 设置响应类型出错:  1. 页面跳转变成了下载文件    2. 页面显示中文时变成了? 

### 项目代码分包

- controller:保存项目中所有的Servlet
- dao:保存项目中所有的dao, 一个复杂的工程通常会有很多张表组成,也就是会有很多个dao类
- entity: 保存项目中的所有实体类
- utils:保存项目中所有的工具类

### 重构版英雄表增删查步骤 

- 准备工作

1. 创建maven工程 选择通过 maven-archetype-webapp骨架创建工程
2. 配置Tomcat 点击绿色扳手旁边Add Config.... 点击灯泡 删除 application Context
3. 给工程添加java和resources文件夹  并且在工程设置页面中的facets里面打钩 ,在工程设置页面的models->dependencies添加Tomcat相关jar包
4. 创建四个包分别是  cn.tedu.controller/dao/entity/utils
5. 在pom.xml中添加 两个jar包依赖
6. 把之前工程DBUtils复制到新工程的utils包下面 , 把之前工程的jdbc.properties配置文件复制到resources文件夹

- 添加英雄步骤:
  1. 创建add.html页面,在页面中添加form表单 提交地址为add  表单中三个文本输入框和一个提交按钮
  2. 在controller包下面创建ServletAdd 处理路径为/add  在doGet方法中获取传递过来的name/type/money  
  3. 创建Hero实体类属性有 id/name/type/money    提供setget方法 构造方法 tostring方法 
  4. 在dao包下面创建HeroDao 并在里面创建insert方法 
  5. 在ServletAdd里面 获取完参数之后把参数封装到Hero对象中, 创建HeroDao并且调用里面的insert方法把封装好的hero对象传递进去, 给页面返回添加完成的信息
  6. 实现dao里面的insert方法 把传递过来的hero对象里面的数据保存到hero表中
- 查询英雄步骤
  1. 创建ServletFindAll 处理路径为 /findall 在doGet方法中 创建HeroDao 并且调用dao里面的findAll方法, 方法的返回值为List集合  集合中装着多个Hero对象. 将List集合中的Hero对象遍历 并且把数据装进table里面返回给浏览器
  2. 实现dao中的findAll方法,从数据库的hero表中查询出所有数据,把数据封装到Hero对象里面 并添加到ArrayList集合中  返回出去

- 删除功能步骤:
  1. 创建ServletDelete,处理路径为 /delete 在doGet方法中获取传递过来id, 创建HeroDao并调用dao里面的deleteById方法把得到的id传递到方法中, 然后重定向到/findall列表页面
  2. 实现dao里面的deleteById方法 把传递过来id对应的数据删除


 

 

#### Thymeleaf模板引擎框架

- 此框架的作用是将服务器查询到的数据和html页面进行整合, 得到一个新的html页面,最后将装着数据的页面返回给浏览器
- 使用此框架可以将处理数据和页面的代码分离开,避免了在Servlet中写html代码,从而提高了开发效率

- 如何使用:

  1. 在工程中添加ThUtils模板引擎工具类

  2. 在pom.xml文件中添加以下依赖

     ```xml
     <!-- Thymeleaf -->
     <dependency>
         <groupId>org.thymeleaf</groupId>
         <artifactId>thymeleaf</artifactId>
         <version>3.0.11.RELEASE</version>
     </dependency>
     ```

### 修改步骤

1. 在list.html页面中把英雄名称 改成超链接 连接的地址为 showupdate?id=xxx

2. 创建ServletShowUpdate 处理路径为/showupdate  获取传递过来的id,在控制台输出检查是否成功, 创建HeroDao并调用findById方法把id传递进去,返回值为查询到的Hero对象 将查询到的hero对象装进Context容器中 并通过ThUtil工具类将容器里面的数据和update.html页面整合到一起

3. 实现dao中的findById方法 

4. 创建update.html页面 在页面中准备form表单提交地址为update,把context容器里的数据取出显示到页面中

5. 创建ServletUpdate 处理路径为/update  获取传递过来的4个参数封装到hero对象中 创建HeroDao 并调用update方法把hero对象传递进去 

6. 实现dao中的update方法  将hero中的数据修改到hero表里面.

   

### 常见错误:

![image-20201016102943844](image-20201016102943844.png)

出错原因: Servlet里面的处理路径问题 1. 没有写/   2. 处理路径重复

### 实现老师表的增删改查

- 准备工作

  1. 创建maven工程  

  2. 配置tomcat 

  3. pom.xml中添加3个依赖

  4. 工程添加 java和resources文件夹

  5. 工程设置页面 打钩  和 添加Tomcat相关jar包

  6. 创建四个包

  7. 把之前工程的两个工具类放到工程中

  8. 把jdbc.properties 配置文件复制到工程中

  9. 创建老师表

     create table teacher(id int primary key auto_increment,name varchar(20),intro varchar(200),imgUrl varchar(200))charset=utf8;

- 发布老师信息


 

 

### 朋友圈练习

- 创建工程 

- 创建库和表

  create database message character set utf8;

  use message;

  create table user(id int primary key auto_increment, username varchar(20), password varchar(20))charset=utf8;

  create table message(id int primary key auto_increment, content varchar(140),imgUrl varchar(200),user_id int,created bigint)charset=utf8;

- 实现注册功能

  - 创建页面reg.html  提交地址reg   请求方式post
  - 创建ServletReg      获取参数  把参数封装到 User实体类中, 创建User实体类 顺便把UserDao创建出来  , 封装到对象中之后 创建Dao 并调用insert方法 ,重定向到/login.html页面
  - 实现dao的insert方法

- 登录功能 

  - 创建页面login.html  提交地址login 请求方式post
  - 创建ServletLogin   获取参数  创建UserDao 并调用login方法 把用户名和密码传递进去 返回值为user对象 通过user对象是否有值判断是否登录成功,成功重定向到/home 失败重定向到/login.html
  - 实现login方法

- 实现首页功能

  - 创建ServletHome   在doGet方法中显示动态页面home.html(通过Context和ThUtils)
  - 创建home.html页面,页面中准备发布消息的超链接 连接地址为 send.html
  - 创建 send.html页面, 在页面中获取用户输入的消息和图片   上传文件需要把form表单的提交方式改为 post   还要修改编码类型  提交地址为send
  - 创建ServletSend 获取用户输入的消息  和上传的文件  把文件保存得到图片文件的路径,  把用户输入的信息封装到Message对象中,  创建Message实体类和MessageDao,  封装数据时需要用到 当前登录的用户id,  在登录成功的时候(ServletLogin) 把登录成功的user对象装进session,   在ServletSend中取出Session里面的user对象  如果没有值说明没登录重定向到登录页面  , 有值说明登录过  把登录的用户id取出一起封装到Message对象,  封装完之后 创建Dao并调用insert方法把message对象传递进去, 重定向到/home
  - 实现dao里面的insert方法   
  - 在ServletHome里面创建Dao并调用findAll方法 查询出所有的Message 把查询到的集合装进Context容器对象中 
  - 实现dao中的findAll方法
  - 在home.html页面中取出容器中的数据并显示出来


 

 

### VRD项目

- 创建07vrd工程  

  - 配置tomcat 删除路径
  - 创建文件夹java和resources
  - 工程设置页面 打钩和 添加Tomcat依赖
  - pom.xml中的三个jar包依赖
  - 创建四个包   把之前工程中的两个工具类复制到utils包下
  - 把jdbc.properties配置文件复制到新工程    并修改里面数据库的名字为vrd

- 创建数据库和表

  create database vrd character set utf8;

  use vrd;

  create table vrduser(id int primary key auto_increment,username varchar(20),password varchar(20))charset=utf8;

  insert into vrduser values(null,'admin','123456');

### 登录功能

1. 把login.html页面复制到工程的resources目录下
2. 创建ServletShowLogin 处理路径 /showlogin  ,  在doGet方法中将login.html页面显示
3. 创建ServletLogin 处理路径为/login  在doPost方法中设置字符集 获取用用户名和密码  创建UserDao  并调用里面的login方法 把用户名和密码传递进去 返回值为User ,如果返回的user不为null则重定向到/home 反之则重定向到/showlogin    
4. 实现dao中的login方法(参考昨天代码)

  

### 首页分类显示

1. 创建分类表

   create table category(id int primary key auto_increment,name varchar(20))charset=utf8;

   insert into category values(null,'手绘'),(null,'次时代'),(null,'雕刻'),(null,'室内设计'),(null,'地图编缉');

2. 创建实体类Category  包含id和name属性   创建CategoryDao

3. 在ServletHome中创建CategoryDao调用findAll方法 返回值为List集合里面装着Category对象, 把查询到的集合装进Context容器中  

4. 在home.html页面中  留下首页和手绘  在手绘的li里面遍历标签并显示出context容器里集合中的数据

### 会话管理cookie和session

- 客户端和服务器之间进行数据交互遵循的是HTTP协议,此协议是无状态协议(一次请求对应一次响应,响应完之后断开连接,服务器无法跟踪客户端的请求), 通过cookie可以给客户端添加一个标识, 添加完标识之后 客户端每次向服务器发出请求都会带着这个标识, 从而让服务器识别此客户端 , 由于cookie保存在客户端存在安全隐患(有可能数据会被伪造) 这时session的出现解决了此问题, session基于cookie实现,但是真正的数据是保存在服务器的,这样就不存在数据被篡改的风险.

<img src="image-20201020163416843.png" alt="image-20201020163416843" style="zoom: 50%;" />

- 通过Cookie实现记住用户名和密码  

  执行过程: 当客户端第一次登陆并且勾选了记住用户名和密码,服务器将用户名和密码保存到cookie中 下发给浏览器,  当浏览器再次向/showlogin发出请求时会自动带着cookie里面的用户名和密码, 在ServletShowLogin中取出Cookie中的用户名和密码装进context容器中,最后在login.html页面中取出并显示到文本框中

- 涉及代码:

  1. 在ServletLogin 登录成功时保存用户名和密码到cookie中 

     ![image-20201020173309909](image-20201020173309909.png)

  2. 在ServletShowLogin中取出cookie中的用户名和密码装进Context

     ![image-20201020173402474](image-20201020173402474.png)

  3. 在login.html页面中取出容器中的用户名和密码显示到文本框里面

     ![image-20201020173442954](image-20201020173442954.png)

### Cookie保存时间

- cookie默认是保存在浏览器的内存中, 当浏览器关闭时 cookie就会从内存中删除
- 如果设置了保存时间cookie会保存到磁盘中,只有时间到了之后才从磁盘中删除

### Cookie中保存中文问题

- Cookie中默认不支持保存中文  需要进行url编码

![image-20201021093035932](image-20201021093035932.png)

![image-20201021093110909](image-20201021093110909.png)

### 通过Session实现记住登录状态

- ![image-20201021094240816](image-20201021094240816.png)

- 当用户在ServletLogin中登录成功时 ,通过getSession()方法获取session对象 由于是第一次获取Session, 此时服务器中并没有和此客户端对应的session对象,没有则创建一个新的session对象, 然后把登录成功的user对象保存进session中,同时将session的id装进cookie中下发给浏览器,当浏览器以后再发出请求时都会带上cookie中的session的id , 这样服务器再次调用getsession方法时 就不会创建新的session对象了,而是通过id找到之前创建的session对象, 从而实现多个Servlet之间共享同一个session对象  

### Cookie和Session对比

- cookie的数据保存在客户端,类似打孔式的会员卡
  - 保存时间: 默认保存在浏览器内存中,浏览器关闭则清楚,也可以设置任意的保存时间,会保存到磁盘中时间到之后再清楚
  - 保存数据大小有限制只能保存4k以内数据,而且只能保存字符串数据
  - 应用场景: 需要长时间保存的数据 如记住用户名和密码
- session的数据保存在服务器端, 类似银行卡
  - 保存时间: 默认是半个小时左右, 可以修改但是不建议,因为所有客户端的数据都是保存在同一台服务器的所以资源比较珍贵
  - 保存数据没有大小限制, 而且可以保存任意对象类型数据  
  - 应用场景:短时间保存的数据并且对安全性要求较高的数据, 如:记住登录状态  

轮播图步骤:

1. 创建表

   create table banner(id int primary key auto_increment,imgUrl varchar(200));

   insert into banner values(null,'images/banner0.jpg'),(null,'images/banner1.jpg'),(null,'images/banner2.jpg');

2. 创建Banner实体类和BannerDao

3. 在ServletHome中 创建BannerDao并调用findAll方法 返回值为List集合装着Banner对象  把查询回来的集合装进Context容器中 

4. 在home.html页面中添加 轮播图相关代码 通过Thymeleaf将轮播图中的内容替换,  轮播图相关代码 百度搜索 bootstrap->菜鸟教程->左侧边栏找到插件->轮播->可选的标题->复制实例代码到工程中

### 发布作品步骤:

1. 创建product表

   create table product(id int primary key auto_increment,title varchar(50),author varchar(20),intro varchar(255),imgUrl varchar(255),viewCount int,likeCount int,created bigint,category_id int)charset=utf8;

2. 创建ServletSend处理路径为/send 在类名上面添加注解(上传文件必加),在doPost方法中设置字符集,获取传递过来的各个参数,在控制台输出 确保接受正确,把文件获取到改文件名把图片保存到images文件夹下面, 创建Product实体类和ProductDao, 把接收到的参数封装到Product对象中 调用dao里面的insert方法,把product对象传递进去, 重定向到/home首页
3. 实现dao中的insert方法

### 首页展示作品步骤

1. 在ServletHome里面创建ProductDao并调用findAll方法 查询到集合pList 把集合装进容器 
2. 实现dao中的findAll方法 
3. 在home.html页面中将容器中的数据显示

### 瀑布流步骤

1. html相关代码

   ![image-20201021173404938](image-20201021173404938.png)

2. css相关代码

   ![image-20201021173424127](image-20201021173424127.png)

3. jQuery相关代码

   ![image-20201021173444777](image-20201021173444777.png)

### Cookie保存时间

- cookie默认是保存在浏览器的内存中, 当浏览器关闭时 cookie就会从内存中删除
- 如果设置了保存时间cookie会保存到磁盘中,只有时间到了之后才从磁盘中删除

### Cookie中保存中文问题

- Cookie中默认不支持保存中文  需要进行url编码

![image-20201021093035932](image-20201021093035932.png)

![image-20201021093110909](image-20201021093110909.png)

### 通过Session实现记住登录状态

- ![image-20201021094240816](image-20201021094240816.png)

- 当用户在ServletLogin中登录成功时 ,通过getSession()方法获取session对象 由于是第一次获取Session, 此时服务器中并没有和此客户端对应的session对象,没有则创建一个新的session对象, 然后把登录成功的user对象保存进session中,同时将session的id装进cookie中下发给浏览器,当浏览器以后再发出请求时都会带上cookie中的session的id , 这样服务器再次调用getsession方法时 就不会创建新的session对象了,而是通过id找到之前创建的session对象, 从而实现多个Servlet之间共享同一个session对象  

### Cookie和Session对比

- cookie的数据保存在客户端,类似打孔式的会员卡
  - 保存时间: 默认保存在浏览器内存中,浏览器关闭则清楚,也可以设置任意的保存时间,会保存到磁盘中时间到之后再清楚
  - 保存数据大小有限制只能保存4k以内数据,而且只能保存字符串数据
  - 应用场景: 需要长时间保存的数据 如记住用户名和密码
- session的数据保存在服务器端, 类似银行卡
  - 保存时间: 默认是半个小时左右, 可以修改但是不建议,因为所有客户端的数据都是保存在同一台服务器的所以资源比较珍贵
  - 保存数据没有大小限制, 而且可以保存任意对象类型数据  
  - 应用场景:短时间保存的数据并且对安全性要求较高的数据, 如:记住登录状态  

轮播图步骤:

1. 创建表

   create table banner(id int primary key auto_increment,imgUrl varchar(200));

   insert into banner values(null,'images/banner0.jpg'),(null,'images/banner1.jpg'),(null,'images/banner2.jpg');

2. 创建Banner实体类和BannerDao

3. 在ServletHome中 创建BannerDao并调用findAll方法 返回值为List集合装着Banner对象  把查询回来的集合装进Context容器中 

4. 在home.html页面中添加 轮播图相关代码 通过Thymeleaf将轮播图中的内容替换,  轮播图相关代码 百度搜索 bootstrap->菜鸟教程->左侧边栏找到插件->轮播->可选的标题->复制实例代码到工程中

### 发布作品步骤:

1. 创建product表

   create table product(id int primary key auto_increment,title varchar(50),author varchar(20),intro varchar(255),imgUrl varchar(255),viewCount int,likeCount int,created bigint,category_id int)charset=utf8;

2. 创建ServletSend处理路径为/send 在类名上面添加注解(上传文件必加),在doPost方法中设置字符集,获取传递过来的各个参数,在控制台输出 确保接受正确,把文件获取到改文件名把图片保存到images文件夹下面, 创建Product实体类和ProductDao, 把接收到的参数封装到Product对象中 调用dao里面的insert方法,把product对象传递进去, 重定向到/home首页
3. 实现dao中的insert方法

### 首页展示作品步骤

1. 在ServletHome里面创建ProductDao并调用findAll方法 查询到集合pList 把集合装进容器 
2. 实现dao中的findAll方法 
3. 在home.html页面中将容器中的数据显示

### 瀑布流步骤

1. html相关代码

   ![image-20201021173404938](image-20201021173404938.png)

2. css相关代码

   ![image-20201021173424127](image-20201021173424127.png)

3. jQuery相关代码

   ![image-20201021173444777](image-20201021173444777.png)

### 给瀑布流元素中添加蓝色条

1. html代码

   ![image-20201022094458101](image-20201022094458101.png)

2. 相关样式

   ```css
   /*蓝色信息条样式*/
   .floatView{
       width: 100%;
       height: 40px;
       background-color: #0aa1ed;
       color: #ffc600;
       text-align: center;
       position: absolute;
       bottom: 0; /*显示在上级的最底部*/
       display: none;/*让元素隐藏*/
   }
   .floatView>p{
         margin: 0;/*去掉自带的间距*/
         font-size: 14px;
     }
   ```

3. 移入移出动画

   ![image-20201022094543512](image-20201022094543512.png)

### 图片移入移出缩放动画

![image-20201022094614928](image-20201022094614928.png)

### 浏览最多步骤

1. 在ServletHome 中 调用ProductDao 里面的findViewList方法, 返回值为List集合 里面装着4个查询回来的Product对象 ,  把集合装进Context容器
2. 实现dao中的findViewList方法 查询4条数据  按照viewCount降序排序
3. 在home.html页面中把容器中的数据遍历显示出来

### 最受欢迎步骤

1. 在ServletHome 中 调用ProductDao 里面的findLikeList方法, 返回值为List集合 里面装着4个查询回来的Product对象 ,  把集合装进Context容器
2. 实现dao中的findLikeList方法 查询4条数据  按照likeCount降序排序
3. 在home.html页面中把容器中的数据遍历显示出来

### 给瀑布流元素中添加蓝色条

1. html代码

   ![image-20201022094458101](image-20201022094458101.png)

2. 相关样式

   ```css
   /*蓝色信息条样式*/
   .floatView{
       width: 100%;
       height: 40px;
       background-color: #0aa1ed;
       color: #ffc600;
       text-align: center;
       position: absolute;
       bottom: 0; /*显示在上级的最底部*/
       display: none;/*让元素隐藏*/
   }
   .floatView>p{
         margin: 0;/*去掉自带的间距*/
         font-size: 14px;
     }
   ```

3. 移入移出动画

   ![image-20201022094543512](image-20201022094543512.png)

### 图片移入移出缩放动画

![image-20201022094614928](image-20201022094614928.png)

### 浏览最多步骤

1. 在ServletHome 中 调用ProductDao 里面的findViewList方法, 返回值为List集合 里面装着4个查询回来的Product对象 ,  把集合装进Context容器
2. 实现dao中的findViewList方法 查询4条数据  按照viewCount降序排序
3. 在home.html页面中把容器中的数据遍历显示出来

### 最受欢迎步骤

1. 在ServletHome 中 调用ProductDao 里面的findLikeList方法, 返回值为List集合 里面装着4个查询回来的Product对象 ,  把集合装进Context容器
2. 实现dao中的findLikeList方法 查询4条数据  按照likeCount降序排序
3. 在home.html页面中把容器中的数据遍历显示出来


 

 

### 作品点赞功能步骤

1. 在detail.html页面中给点赞超链接 添加请求路径为 like?id=xxx  
2. 创建ServletLike  处理路径为/like 在doGet方法中获取传递过来的id参数, 创建ProductDao并调用里面的 likeById(id),  最后重定向到/detail?id=xxx (id为当前点赞的id)
3. 实现dao中的likeById方法   修改likeCount=likeCount+1      

### 浏览量增加

1. 在ServletDetail里面掉dao里面的viewById方法 把作品id穿进去  
2. 实现dao里面的viewById方法  修改viewCount=viewCount+1
3. 通过session 实现浏览量只能增加一次

### 设置欢迎页面

```xml
<!--设置欢迎页面-->
<welcome-file-list>
  <welcome-file>home</welcome-file>
</welcome-file-list>
```

### 修改轮播图

1. 在home.html页面中 找到 轮播图超链接  地址改为 showbanner   

2. 创建ServletShowBanner 处理路径为/showbanner, 在doGet方法中 创建BannerDao调用findAll方法 把查询到的集合 装进容器 显示到banner.html页面中
3. 页面中添加form表单 提交地址为addbanner  
4. 创建ServletAddBanner 处理路径为 /addbanner  添加处理文件上传的注解  在doPost中 获取上传的文件 把文件保存在images文件夹下面, 得到保存文件的路径 images/xxxxxxx.jpg 这样的路径   创建BannerDao 调用insert方法把路径传递进去,  重定向到/showbanner
5. 实现BannerDao里面的insert方法

### 删除轮播图 

1. 修改banner.html里面的删除超链接 地址为 deletebanner?id=xxx
2. 创建ServletDeleteBanner 获取传递过来的id  创建BannerDao并调用里面的deleteById方法  , 重定向到/showbanner
3. 实现dao中的deleteById方法

### 同步请求和异步请求

- 目前我们发出的所有请求都是同步请求(同步请求特点:发出请求后浏览器则不显示任何内容直到服务器返回内容后再显示)
- <img src="image-20201023155235642.png" alt="image-20201023155235642" style="zoom: 80%;" />

- 同步请求: 客户端发出请求后页面则清空  服务器接收到请求后 将数据库中查询到的数据和页面整合到一起后 返回给浏览器,浏览器再做显示 
- 异步请求: 客户端发出异步请求不影响当前的显示,实际上异步请求可以理解为开启了一个新的线程去向服务器发请求
- 前后端分离: 如果不实现前后端分离,服务器开发的Servlet需要考虑此时的客户端是浏览器还是手机设备, 返回的内容是不一样的 通常同一个业务需要准备两套Servlet, 实现了前后端分离后 服务器端不需要考虑前端页面展示相关的操作,只需要将数据库中查询到的数据返回给前端即可,这样只需要一套Servlet即可给所有客户端提供服务

<img src="image-20201023155540701.png" alt="image-20201023155540701" style="zoom: 50%;" />

<img src="image-20201023155651012.png" alt="image-20201023155651012" style="zoom:50%;" />

- 如何发出异步请求?

  通过Ajax技术 发出异步请求,格式如下:

  ```javascript
  $.ajax({
      type:"get",//请求方式
      url:"hello",//请求地址
      data:"info=abc",//请求参数
      success:function (result) {    //请求成功调用的方法
          alert(result);//result代表服务器返回的数据
      }
  })
  ```

### Json

- 客户端给服务器发请求服务器返回的数据有可能是比较复杂的数据组合,这些数据必须必字符串的形式返回,这样的话就需要有一个通用的封装数据的格式,目前使用的格式最常见的就是Json,个别场景还有使用xml的,json是一种轻量级的数据封装(数据交换)格式

```
- xml:
<persons>
    <person>
        <name>张三</name>
        <age>18</age>
        <gender>男</gender>
    </person>
</persons>
- json: {"name":"张三","age":18,"gender":"男"}
```

### 过滤器

- 过滤器也是Tomcat中的一种组件(Servlet也是一种组件), 如果在Tomcat中添加过滤器,在客户端访问某个Servlet之前会先经过过滤器, 在过滤器可以对该请求进行业务判断,可以控制是否允许访问此Servlet  

- 如何使用过滤器

  1. 创建Filter, 添加多个处理的路径

     ```java
     @WebFilter(filterName = "Filter",urlPatterns = {"/showsend","/showbanner"})
     ```

  2. 在doFilter方法中添加业务判断的代码,如果执行chain.doFilter()此代码代表允许访问Servlet

- 过滤器的拦截方式(urlPatterns的几种书写方式)

  - 精确匹配: /showsend     /showbanner                   
  - 后缀匹配:   *.jpg     *.png     *.html     (可以解决图片盗链问题)
  - 路径匹配:   /images/*   路径中只要包含 images  就会拦截
  -   匹配所有:   /*    客户端发出的所有请求 都会被拦截到

- 过滤器应用场景: 可以将多个Servlet中出现的重复代码写到过滤器中 从而提高开发效率

### 监听器Listener

- Listener监听器也是Tomcat中的一种组件
- 作用: 类似于Web前端开发中的事件,  可以监听工程运行过程中的一些特定时间点,比如: 工程创建及销毁,Session的创建及销毁等    
- 应用场景: 可以做一些项目初始化操作,可以实现工程关闭之前的一些收尾工作,  可以监听在线人数或某个Servlet的访问人数等 

### VUE  (读音和view一样)

![image-20201026162201439](image-20201026162201439.png)

- 作用和Thymeleaf类似, Thymeleaf框架是同步请求中 负责将数据和页面进行整合的框架, 属于后端(服务器端)技术, 而VUE是异步请求中将页面和数据进行整合的框架,属于前端技术

- 使用vue可以降低查找元素的次数,从而提高执行效率

- 如何使用vue? 

  vue框架就是一个普通的js文件, 通过script标签的src属性引入到html页面中即可.

- vue格式:

  - {{msg}} 和 v-text="msg"  作用一样 都是给元素设置文本内容, 前者网速慢时可能会出现闪烁现象
  - v-html="msg"  作用是给元素设置html标签内容
  - v-model="xxx" 让元素的value值和某个变量进行绑定 
  - v-bind:属性名="变量"  让元素的某个属性和vue中的变量进行绑定

  - v-on:事件名 和  @事件名    是给元素添加事件并绑定某个方法
  - 

一只小鸟儿
关注
专栏目录
JavaWeb_day32:Servlet 1
qq_40174864的博客
09-14 208
Servlet 是服务器端运行的java小程序，起到一个桥梁的作用，用于浏览器和应用程序之间进行沟通。 常见的java服务器         10行 tomcat(免费的 apache) jetty(免费的 eclipse) jboss (jboss) weblogic (bea, oracle) websphere (ibm) java se , java ee, java me...
前端 servlet
qq_41315339的博客
04-15 240
servlet javax.servlet 包中包含了 7 个接口 ,3 个类和 2 个异常类 , 它们分别是 : 接口:RequestDispatcher,Servlet,ServletConfig,ServletContext,ServletRequest,ServletResponse 和 SingleThreadModel 类 :GenericServlet,ServletInputStream 和 ServletOutputStream 异常类 :ServletException 和 Unavai
前端之Servlet
ccccrj博客
05-28 721
文章目录Servlet使用流程Servlet执行流程Servlet生命周期Servlet简便用法????注解配置不用xml使用Servlet继承类GenericServletHttpServlet Servlet 获取服务器中的动态资源，也就是java代码，依赖于服务器对java类进行运行，而Servlet就是一个接口，定义了Java类被浏览器访问到（tomcat识别）的规则。 使用流程 创建JavaEE项目 定义一个类实现Servlet接口 实现接口方法 配置Servlet，在web.xml中配置Ser
Web前端之Servlet1
Eternity_y的博客
09-21 317
Servlet 服务器端小程序,处理请求，返回响应。 servlet, jsp, el, 都属于java ee tomcat 服务器 1.前提条件： a. 要安装jdk b. 要配置JAVA_HOME 环境变量 2.启动：bin/startup.bat (windows下) 3.停止：bin/shutdown.bat (windows下) 4.用浏览器检查它是否真正启动： http://loca...
Web 前端学习 之servlet技术(一)
Weary_PJ的博客
08-13 547
Web 前端学习 之初识servlet Servlet技术简介 手动实现Servlet程序 要求: 实现如下功能 1、编写一个类去实现Servlet 接口 2、实现service 方法，处理请求，并响应数据 3、到web.xml 中去配置servlet 程序的访问地址 1.idea创建module 在之前已经创建好的项目中选择New>Module 选择JDK版本以及相应的Tomcat服务器版本,并勾选下面的Web Application 为新建的module取一个名字,Finish即可 2.
Java-JSP-Servlet员工信息管理系统Mysql数据库+JSTL(可作为Java课设毕业设计)
12-17
在员工信息管理系统中，JSP页面用于展示数据和接收用户输入，与Servlet交互，将前端的用户交互转化为后端的Java逻辑处理。 **Servlet**: Servlet是Java提供的一种服务器端组件，用于扩展服务器的功能。在本系统中，...
Java-Servlet学生成绩管理系统（带前端样式）
12-10
Java-Servlet学生成绩管理系统（带前端样式）
JSP-Bean-Servlet.zip_java web servlet_java+web+servlet_jdp bean
09-20
《深入理解Java Web开发：JSP、Bean与Servlet实战》 在Java企业级应用开发中，JSP（JavaServer Pages）、Bean和Servlet是构建Web应用程序的三大核心技术。本压缩包"JSP-Bean-Servlet.zip"包含了一个实际的Java Web...
Java开发-Servlet项目-学山智慧物业管理系统（Servlet6.0+JDBC+MySQL8）
最新发布
04-24
学山智慧物业管理系统采用了目前最新版的 Servlet6.0+JDBC+MySQL8 来实现，项目使用目前在企业开发中广泛采用的前后端分离架构，所有的... 掌握前端 layuimini 框架的用法。  掌握 智慧物业系统相关的业务功能。
JavaBridge.jar，php-servlet.jar
09-29
例如，你可以保留已有的 PHP 前端，同时利用 Java 提供的高并发处理能力、稳定性和安全性。 5. **注意事项**：集成过程中需要注意的是性能优化，因为 PHP 脚本的执行相比原生 Java 会有一定的性能损耗。此外，由于...
浅谈Web前端关于学习Servlet一些心得欢迎大神补充
墨龙的博客
06-14 514
Servlet主要有三个方法需要注意：init()、service()、destroy()。其他继承自Sevlet的类，如HTTPServlet 以及 GenceServlet 都是在这三个方法上进行扩展的。 另外，Servlet是单例。 谈到Servlet，首先得谈到Servlet的生命周期： init()：在服务器载入Servlet时执行，且仅执行一次。之后无论多少客户端访问Servle
Javaweb开发了解前端知识七、Servlet（一）
mxcsdn的博客
06-03 914
1.Servlet技术2.Servlet类的继承体系3.ServletConfig类4.ServletContext类1.Servlet技术 a) 什么是Servlet Servlet是javaWeb的三大组件。Servlet程序，Listener监听器。Filter过滤器。 Servlet程序主要是运行在Tomcat服务器上。 Servlet程序的作用：接收客户端的请求。响应给客户端数据。...
前端页面+ servlet基础
weixin_64881460的博客
03-07 606
一、servlet本质：java代码 所有的数据存储在数据库。 怎么链接数据库，有一套行为规范叫jdbc。确定了到底怎么链接的。 有几套常用的数据库 如果没有行为规范，要编写一套链接程序。每个都会给一套链接程序，不利于计算机的更新替代，比如先用sqlServer,然后想换Oeacle，那整个编程逻辑都要重新写一遍，改动量太大。 Oeacle 全套产品，一个java应用程序，一个Oeacle，还有mysql. 一个java应用程序一开始属于Sum公司 ， 想到了jdbc:行为规范（相当于.
Servlet之输入交互-------------利用Servlet文本框
EnchantedR的博客
06-03 1121
1.创建首页index.jsp&lt;%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/h
IDEA 创建Servlet项目
qq_42260493的博客
07-03 3080
1.打开IDEA，点击Create New project创建一个一个新项目 2.点击Java Enterprise，然后选择Web Application，点击Next 3.设置项目名，项目路径，点击Finish 4.创建java文件编译路径classes文件夹，和jar包存放路径lib文件夹（在WEB-INF文件下新建两个文件夹classes和lib），创建成功后项目结构如下所示 5.配置classes和lib 6.配置Tomcat服务器，点击Add configuration
Web开发模式【实例篇】MVC--迈向标准开发
weixin_34000916的博客
03-15 110
实例: 用一个用户登录验证实例讲解MVC设计模式 登录程序之前已经学过，是使用ＪＳＰ＋JDBC完成的开发操作，但是之前的登录程序开发中可以发现有很多的问题，就是一个JSP文件中代码过多了，即便是使用了JSP+javaBean的开发模式，其本身也存在JSP中代码过多的问题。 现在我们就可以利用MVC设计模式来彻底解决掉这些代码过多的问题了 在本程...
servlet任务-用户登录
weixin_42688085的博客
10-22 962
任务需求： 任务概述： 任意一个项目或 APP，必不可少的就是登录模块，用户登录成功或失败，跳转 到不同结果页面，现在刘磊接到组长分配的任务，需要给项目添加一个登录模 块，要求贴切真实网站需求，页面有表单验证，后台连接数据库真实判断，跳 转到不同页面给用户提示 任务过程： 1. 创建登录页面，要求用户输入用户名和密码 2. 创建数据库，保存用户名和密码 3. 创建 servlet,接收用户提交的用户名和密码，接收后，将数据传递到数据 库进行验证 4. 根据验证结果，跳转到不同的结果页面，成.
使用Servlet进行用户登录（六）
csdn_kenneth的博客
12-03 326
我们通过servlet来实现一次用户登录的功能。 一、数据库 DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `id` int(11) NOT NULL, `username` varchar(50) DEFAULT NULL, `password` varchar(50) DEFAULT NULL, `email` var
Servlet实现登录注册，代码演示（先测试代码，后部分为登录注册）
chen983234416的博客
10-24 3324
1、Eclipse创建动态web工程 2、启动服务器，访问默认本机地址localHost:8080+项目名 3、什么是Servlet, 是Java Servlet 的简称，称为小服务程序或服务连接器，主要功能是交互式地浏览和生成数据，生成动态的内容 4、servlet的作用： 5、登录流程：用户在浏览器输入了用户名、密码，点击登录按钮，发送登录请求，servlet接受到请求后，可...
Java JSP-Servlet实现的学生宿舍管理系统
1. **Java Web开发技术**：本项目使用了Java的Web开发技术，包括JSP（JavaServer Pages）和Servlet。JSP用于创建动态网页，而Servlet则处理HTTP请求和响应，提供了服务器端的编程能力。 2. **MVC模式**：虽然没有...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值