js前端基础入门

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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包

4. 在webapp下面创建注册页面 reg.html    在页面中准备form表单  提交地址为reg  请求方式改成post ,  两个文本输入框   和 一个提交按钮 \

5. 创建ServletReg, 拦截路径为 /reg  在doPost里面 先设置字符集 获取传递过来的用户名和密码   在控制台输出 \

6. 把jdbc02工程中pom.xml里面用到的MySQL坐标 和数据库连接池坐标 复制到新工程的pom.xml里面 \

7. 把jdbc02工程中的DBUtils复制到新工程的cn.tedu包下面 \

8. 把jdbc02工程中的jdbc.properties配置文件复制到新工程的相同位置  \

9. 在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. 空指针异常

找不到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表里面.

出错原因: 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实现,但是真正的数据是保存在服务器的,这样就不存在数据被篡改的风险.

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

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

Cookie保存时间

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

Cookie中保存中文问题

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

• 当用户在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页面中将容器中的数据显示

Cookie保存时间

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

Cookie中保存中文问题

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

通过Session实现记住登录状态

• 当用户在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代码

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. 移入移出动画

图片移入移出缩放动画

浏览最多步骤

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代码

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. 移入移出动画

图片移入移出缩放动画

浏览最多步骤

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 实现浏览量只能增加一次

设置欢迎页面

<!--设置欢迎页面-->\
<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方法

同步请求和异步请求

• 目前我们发出的所有请求都是同步请求(同步请求特点:发出请求后浏览器则不显示任何内容直到服务器返回内容后再显示)\

• 同步请求: 客户端发出请求后页面则清空  服务器接收到请求后 将数据库中查询到的数据和页面整合到一起后 返回给浏览器,浏览器再做显示 \

• 异步请求: 客户端发出异步请求不影响当前的显示,实际上异步请求可以理解为开启了一个新的线程去向服务器发请求\

• 前后端分离: 如果不实现前后端分离,服务器开发的Servlet需要考虑此时的客户端是浏览器还是手机设备, 返回的内容是不一样的 通常同一个业务需要准备两套Servlet, 实现了前后端分离后 服务器端不需要考虑前端页面展示相关的操作,只需要将数据库中查询到的数据返回给前端即可,这样只需要一套Servlet即可给所有客户端提供服务

• 如何发出异步请求?

  通过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一样)

• 作用和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:事件名 和  @事件名    是给元素添加事件并绑定某个方法
-