宛城区微网站建设,助君网络科技,网页与网站的区别和关系,高级服装定制1#xff0c;JSP 概述
JSP#xff08;全称#xff1a;Java Server Pages#xff09;#xff1a;Java 服务端页面。是一种动态的网页技术#xff0c;其中既可以定义 HTML、JS、CSS等静态内容#xff0c;还可以定义 Java代码的动态内容#xff0c;也就是 JSP HTML Jav…1JSP 概述
JSP全称Java Server PagesJava 服务端页面。是一种动态的网页技术其中既可以定义 HTML、JS、CSS等静态内容还可以定义 Java代码的动态内容也就是 JSP HTML Java。如下就是jsp代码
htmlheadtitleTitle/title/headbodyh1JSP,Hello World/h1%System.out.println(hello,jsp~);%/body
/html
上面代码 h1 标签内容是展示在页面上而 Java 的输出语句是输出在 idea 的控制台。
那么JSP 能做什么呢现在我们只用 servlet 实现功能看存在什么问题。如下图所示当我们登陆成功后需要在页面上展示用户名 上图的用户名是动态展示也就是谁登陆就展示谁的用户名。只用 servlet 如何实现呢在今天的资料里已经提供好了一个 LoginServlet 该 servlet 就是实现这个功能的现将资料中的 LoginServlet.java 拷贝到 request-demo 项目中来演示。接下来启动服务器并访问登陆页面 输入了 zhangsan 用户的登陆信息后点击 登陆 按钮就能看到如下图效果 当然如果是 lisi 登陆的在该页面展示的就是 lisi,欢迎您动态的展示效果就实现了。那么 LoginServlet 到底是如何实现的我们看看它里面的内容 上面的代码有大量使用到 writer 对象向页面写标签内容这样我们的代码就显得很麻烦将来如果展示的效果出现了问题排错也显得有点力不从心。而 JSP 是如何解决这个问题的呢在资料中也提供了一个 login.jsp 页面该页面也能实现该功能现将该页面拷贝到项目的 webapp下需要修改 login.html 中表单数据提交的路径为下图 重新启动服务器并进行测试发现也可以实现同样的功能。那么 login.jsp 又是如何实现的呢那我们来看看 login.jsp 的代码 上面代码可以看到里面基本都是 HTML 标签而动态数据使用 Java 代码进行展示这样操作看起来要比用 servlet 实现要舒服很多。
JSP 作用简化开发避免了在Servlet中直接输出HTML标签。
2JSP 快速入门
接下来我们做一个简单的快速入门代码。
2.1 搭建环境
创建一个maven的 web 项目项目结构如下 pom.xml 文件内容如下
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersion
groupIdorg.example/groupIdartifactIdjsp-demo/artifactIdversion1.0-SNAPSHOT/versionpackagingwar/packaging
propertiesmaven.compiler.source8/maven.compiler.sourcemaven.compiler.target8/maven.compiler.target/properties
dependenciesdependencygroupIdjavax.servlet/groupIdartifactIdjavax.servlet-api/artifactIdversion3.1.0/versionscopeprovided/scope/dependency/dependencies
buildpluginsplugingroupIdorg.apache.tomcat.maven/groupIdartifactIdtomcat7-maven-plugin/artifactIdversion2.2/version/plugin/plugins/build
/project
2.2 导入 JSP 依赖
在 dependencies 标签中导入 JSP 的依赖如下
dependencygroupIdjavax.servlet.jsp/groupIdartifactIdjsp-api/artifactIdversion2.2/versionscopeprovided/scope
/dependency
该依赖的 scope 必须设置为 provided因为 tomcat 中有这个jar包了所以在打包时我们是不希望将该依赖打进到我们工程的war包中。
2.3 创建 jsp 页面
在项目的 webapp 下创建jsp页面 通过上面方式创建一个名为 hello.jsp 的页面。
2.4 编写代码
在 hello.jsp 页面中书写 HTML 标签和 Java 代码如下
% page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitleTitle/title
/head
bodyh1hello jsp/h1
%System.out.println(hello,jsp~);%
/body
/html
2.5 测试
启动服务器并在浏览器地址栏输入 http://localhost:8080/jsp-demo/hello.jsp我们可以在页面上看到如下内容 同时也可以看到在 idea 的控制台看到输出的 hello,jsp~ 内容。
3JSP 原理
我们之前说 JSP 就是一个页面那么在 JSP 中写 html 标签我们能理解但是为什么还可以写 Java 代码呢
因为 JSP 本质上就是一个 Servlet。接下来我们聊聊访问jsp时的流程 浏览器第一次访问 hello.jsp 页面 tomcat 会将 hello.jsp 转换为名为 hello_jsp.java 的一个 Servlet tomcat 再将转换的 servlet 编译成字节码文件 hello_jsp.class tomcat 会执行该字节码文件向外提供服务
我们可以到项目所在磁盘目录下找 target\tomcat\work\Tomcat\localhost\jsp-demo\org\apache\jsp 目录而这个目录下就能看到转换后的 servlet 打开 hello_jsp.java 文件来查看里面的代码 由上面的类的继承关系可以看到继承了名为 HttpJspBase 这个类那我们在看该类的继承关系。到资料中的找如下目录 资料\tomcat源码\apache-tomcat-8.5.68-src\java\org\apache\jasper\runtime 该目录下就有 HttpJspBase 类查看该类的继承关系 可以看到该类继承了 HttpServlet 那么 hello_jsp 这个类就间接的继承了 HttpServlet 也就说明 hello_jsp 是一个 servlet。
继续阅读 hello_jsp 类的代码可以看到有一个名为 _jspService() 的方法该方法就是每次访问 jsp 时自动执行的方法和 servlet 中的 service 方法一样 。
而在 _jspService() 方法中可以看到往浏览器写标签的代码 以前我们自己写 servlet 时这部分代码是由我们自己来写现在有了 jsp 后由tomcat完成这部分功能。
4JSP 脚本
JSP脚本用于在 JSP页面内定义 Java代码。在之前的入门案例中我们就在 JSP 页面定义的 Java 代码就是 JSP 脚本。
4.1 JSP 脚本分类
JSP 脚本有如下三个分类 %...%内容会直接放到_jspService()方法之中 %…%内容会放到out.print()中作为out.print()的参数 %!…%内容会放到_jspService()方法之外被类直接包含
代码演示
在 hello.jsp 中书写
%System.out.println(hello,jsp~);int i 3;
%
通过浏览器访问 hello.jsp 后查看转换的 hello_jsp.java 文件i 变量定义在了 _jspService() 方法中 在 hello.jsp 中书写
%hello%
%i%
通过浏览器访问 hello.jsp 后查看转换的 hello_jsp.java 文件该脚本的内容被放在了 out.print() 中作为参数 在 hello.jsp 中书写
%!void show(){}String name zhangsan;
%
通过浏览器访问 hello.jsp 后查看转换的 hello_jsp.java 文件该脚本的内容被放在了成员位置 4.2 案例
4.2.1 需求
使用JSP脚本展示品牌数据 说明 在资料 资料\1. JSP案例素材 中提供了 brand.html 静态页面 在该案例中数据不从数据库中查询而是在 JSP 页面上写死
4.2.2 实现 将资料 资料\1. JSP案例素材 中的 Brand.java 文件放置到项目的 com.itheima.pojo 包下 在项目的 webapp 中创建 brand.jsp 并将 brand.html页面中的内容拷贝过来。brand.jsp 内容如下 % page contentTypetext/html;charsetUTF-8 languagejava %
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
input typebutton value新增br
hrtable border1 cellspacing0 width800trth序号/thth品牌名称/thth企业名称/thth排序/thth品牌介绍/thth状态/thth操作/th
/trtr aligncentertd1/tdtd三只松鼠/tdtd三只松鼠/tdtd100/tdtd三只松鼠好吃不上火/tdtd启用/tdtda href#修改/a a href#删除/a/td/tr
tr aligncentertd2/tdtd优衣库/tdtd优衣库/tdtd10/tdtd优衣库服适人生/tdtd禁用/td
tda href#修改/a a href#删除/a/td/tr
tr aligncentertd3/tdtd小米/tdtd小米科技有限公司/tdtd1000/tdtd为发烧而生/tdtd启用/td
tda href#修改/a a href#删除/a/td/tr/table
/body
/html 现在页面中的数据都是假数据。 在 brand.jsp 中准备一些数据 %// 查询数据库ListBrand brands new ArrayListBrand();brands.add(new Brand(1,三只松鼠,三只松鼠,100,三只松鼠好吃不上火,1));brands.add(new Brand(2,优衣库,优衣库,200,优衣库服适人生,0));brands.add(new Brand(3,小米,小米科技有限公司,1000,为发烧而生,1));
%注意这里的类是需要导包的 将 brand.jsp 页面中的 table 标签中的数据改为动态的 table border1 cellspacing0 width800trth序号/thth品牌名称/thth企业名称/thth排序/thth品牌介绍/thth状态/thth操作/th/tr%for (int i 0; i brands.size(); i) {//获取集合中的 每一个 Brand 对象Brand brand brands.get(i);}%tr aligncentertd1/tdtd三只松鼠/tdtd三只松鼠/tdtd100/tdtd三只松鼠好吃不上火/tdtd启用/tdtda href#修改/a a href#删除/a/td/tr
/table上面的for循环需要将 tr 标签包裹起来这样才能实现循环的效果代码改进为 table border1 cellspacing0 width800trth序号/thth品牌名称/thth企业名称/thth排序/thth品牌介绍/thth状态/thth操作/th/tr%for (int i 0; i brands.size(); i) {//获取集合中的 每一个 Brand 对象Brand brand brands.get(i);%tr aligncentertd1/tdtd三只松鼠/tdtd三只松鼠/tdtd100/tdtd三只松鼠好吃不上火/tdtd启用/tdtda href#修改/a a href#删除/a/td/tr%}%/table注意%% 里面写的是 Java 代码而外边写的是 HTML 标签 上面代码中的 td 标签中的数据都需要是动态的所以还需要改进 table border1 cellspacing0 width800trth序号/thth品牌名称/thth企业名称/thth排序/thth品牌介绍/thth状态/thth操作/th/tr%for (int i 0; i brands.size(); i) {//获取集合中的 每一个 Brand 对象Brand brand brands.get(i);%tr aligncentertd%brand.getId()%/tdtd%brand.getBrandName()%/tdtd%brand.getCompanyName()%/tdtd%brand.getOrdered()%/tdtd%brand.getDescription()%/tdtd%brand.getStatus() 1 ? 启用:禁用%/tdtda href#修改/a a href#删除/a/td/tr%}%/table4.2.3 成品代码
% page importcom.itheima.pojo.Brand %
% page importjava.util.List %
% page importjava.util.ArrayList %
% page contentTypetext/html;charsetUTF-8 languagejava %%// 查询数据库ListBrand brands new ArrayListBrand();brands.add(new Brand(1,三只松鼠,三只松鼠,100,三只松鼠好吃不上火,1));brands.add(new Brand(2,优衣库,优衣库,200,优衣库服适人生,0));brands.add(new Brand(3,小米,小米科技有限公司,1000,为发烧而生,1));%!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
input typebutton value新增br
hr
table border1 cellspacing0 width800trth序号/thth品牌名称/thth企业名称/thth排序/thth品牌介绍/thth状态/thth操作/th/tr%for (int i 0; i brands.size(); i) {Brand brand brands.get(i);%tr aligncentertd%brand.getId()%/tdtd%brand.getBrandName()%/tdtd%brand.getCompanyName()%/tdtd%brand.getOrdered()%/tdtd%brand.getDescription()%/tdtd%brand.getStatus() 1 ? 启用:禁用%/tdtda href#修改/a a href#删除/a/td/tr%}%
/table
/body
/html4.2.4 测试
在浏览器地址栏输入 http://localhost:8080/jsp-demo/brand.jsp 页面展示效果如下 4.3 JSP 缺点
通过上面的案例我们可以看到 JSP 的很多缺点。
由于 JSP页面内既可以定义 HTML 标签又可以定义 Java代码造成了以下问题 书写麻烦特别是复杂的页面 既要写 HTML 标签还要写 Java 代码 阅读麻烦 上面案例的代码相信你后期再看这段代码时还需要花费很长的时间去梳理 复杂度高运行需要依赖于各种环境JREJSP容器JavaEE… 占内存和磁盘JSP会自动生成.java和.class文件占磁盘运行的是.class文件占内存 调试困难出错后需要找到自动生成的.java文件进行调试 不利于团队协作前端人员不会 Java后端人员不精 HTML 如果页面布局发生变化前端工程师对静态页面进行修改然后再交给后端工程师由后端工程师再将该页面改为 JSP 页面
由于上述的问题 JSP 已逐渐退出历史舞台以后开发更多的是使用 HTML Ajax 来替代。Ajax 是我们后续会重点学习的技术。有个这个技术后前端工程师负责前端页面开发而后端工程师只负责前端代码开发。下来对技术的发展进行简单的说明 第一阶段使用 servlet 即实现逻辑代码编写也对页面进行拼接。这种模式我们之前也接触过 第二阶段随着技术的发展出现了 JSP 人们发现 JSP 使用起来比 Servlet 方便很多但是还是要在 JSP 中嵌套 Java 代码也不利于后期的维护 第三阶段使用 Servlet 进行逻辑代码开发而使用 JSP 进行数据展示 第四阶段使用 servlet 进行后端逻辑代码开发而使用 HTML 进行数据展示。而这里面就存在问题HTML 是静态页面怎么进行动态数据展示呢这就是 ajax 的作用了。
那既然 JSP 已经逐渐的退出历史舞台那我们为什么还要学习 JSP 呢原因有两点 一些公司可能有些老项目还在用 JSP 所以要求我们必须动 JSP 我们如果不经历这些复杂的过程就不能体现后面阶段开发的简单
接下来我们来学习第三阶段使用 EL表达式 和 JSTL 标签库替换 JSP 中的 Java 代码。
5EL 表达式
5.1 概述
EL全称Expression Language 表达式语言用于简化 JSP 页面内的 Java 代码。
EL 表达式的主要作用是 获取数据。其实就是从域对象中获取数据然后将数据展示在页面上。
而 EL 表达式的语法也比较简单${expression} 。例如${brands} 就是获取域中存储的 key 为 brands 的数据。
5.2 代码演示 定义servlet在 servlet 中封装一些数据并存储到 request 域对象中并转发到 el-demo.jsp 页面。 WebServlet(/demo1)
public class ServletDemo1 extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 准备数据ListBrand brands new ArrayListBrand();brands.add(new Brand(1,三只松鼠,三只松鼠,100,三只松鼠好吃不上火,1));brands.add(new Brand(2,优衣库,优衣库,200,优衣库服适人生,0));brands.add(new Brand(3,小米,小米科技有限公司,1000,为发烧而生,1));//2. 存储到request域中request.setAttribute(brands,brands);//3. 转发到 el-demo.jsprequest.getRequestDispatcher(/el-demo.jsp).forward(request,response);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}注意 此处需要用转发因为转发才可以使用 request 对象作为域对象进行数据共享 在 el-demo.jsp 中通过 EL表达式 获取数据 % page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitleTitle/title
/head
body${brands}
/body
/html在浏览器的地址栏输入 http://localhost:8080/jsp-demo/demo1 页面效果如下
5.3 域对象
JavaWeb中有四大域对象分别是 page当前页面有效 request当前请求有效 session当前会话有效 application当前应用有效
el 表达式获取数据会依次从这4个域中寻找直到找到为止。而这四个域对象的作用范围如下图所示 例如 ${brands}el 表达式获取数据会先从page域对象中获取数据如果没有再到 requet 域对象中获取数据如果再没有再到 session 域对象中获取如果还没有才会到 application 中获取数据。
6JSTL标签
6.1 概述
JSP标准标签库(Jsp Standarded Tag Library) 使用标签取代JSP页面上的Java代码。如下代码就是JSTL标签
c:if test${flag 1}男
/c:if
c:if test${flag 2}女
/c:if上面代码看起来是不是比 JSP 中嵌套 Java 代码看起来舒服好了。而且前端工程师对标签是特别敏感的他们看到这段代码是能看懂的。
JSTL 提供了很多标签如下图 我们只对两个最常用的标签进行讲解c:forEach 标签和 c:if 标签。
JSTL 使用也是比较简单的分为如下步骤 导入坐标 dependencygroupIdjstl/groupIdartifactIdjstl/artifactIdversion1.2/version
/dependency
dependencygroupIdtaglibs/groupIdartifactIdstandard/artifactIdversion1.1.2/version
/dependency在JSP页面上引入JSTL标签库 % taglib prefixc urihttp://java.sun.com/jsp/jstl/core % 使用标签
6.2 if 标签
c:if相当于 if 判断 属性test用于定义条件表达式
c:if test${flag 1}男
/c:if
c:if test${flag 2}女
/c:if代码演示 定义一个 servlet 在该 servlet 中向 request 域对象中添加 键是 status 值为 1 的数据 WebServlet(/demo2)
public class ServletDemo2 extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 存储数据到request域中request.setAttribute(status,1);//2. 转发到 jstl-if.jsp数据request.getRequestDispatcher(/jstl-if.jsp).forward(request,response);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}定义 jstl-if.jsp 页面在该页面使用 c:if 标签 % page contentTypetext/html;charsetUTF-8 languagejava %
% taglib prefixc urihttp://java.sun.com/jsp/jstl/core %
html
headtitleTitle/title
/head
body%--c:if来完成逻辑判断替换java if else--%c:if test${status 1}启用/c:ifc:if test${status 0}禁用/c:if
/body
/html注意 在该页面已经要引入 JSTL核心标签库 % taglib prefixc urihttp://java.sun.com/jsp/jstl/core %
6.3 forEach 标签
c:forEach相当于 for 循环。java中有增强for循环和普通for循环JSTL 中的 c:forEach 也有两种用法
6.3.1 用法一
类似于 Java 中的增强for循环。涉及到的 c:forEach 中的属性如下 items被遍历的容器 var遍历产生的临时变量 varStatus遍历状态对象
如下代码是从域对象中获取名为 brands 数据该数据是一个集合遍历遍历并给该集合中的每一个元素起名为 brand是 Brand对象。在循环里面使用 EL表达式获取每一个Brand对象的属性值
c:forEach items${brands} varbrandtr aligncentertd${brand.id}/tdtd${brand.brandName}/tdtd${brand.companyName}/tdtd${brand.description}/td/tr
/c:forEach代码演示 servlet 还是使用之前的名为 ServletDemo1 。 定义名为 jstl-foreach.jsp 页面内容如下 % page contentTypetext/html;charsetUTF-8 languagejava %
% taglib prefixc urihttp://java.sun.com/jsp/jstl/core %!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
input typebutton value新增br
hr
table border1 cellspacing0 width800trth序号/thth品牌名称/thth企业名称/thth排序/thth品牌介绍/thth状态/thth操作/th/trc:forEach items${brands} varbrand varStatusstatustr aligncenter%--td${brand.id}/td--%td${status.count}/tdtd${brand.brandName}/tdtd${brand.companyName}/tdtd${brand.ordered}/tdtd${brand.description}/tdc:if test${brand.status 1}td启用/td/c:ifc:if test${brand.status ! 1}td禁用/td/c:iftda href#修改/a a href#删除/a/td/tr/c:forEach
/table
/body
/html6.3.2 用法二
类似于 Java 中的普通for循环。涉及到的 c:forEach 中的属性如下 begin开始数 end结束数 step步长
实例代码
从0循环到10变量名是 i 每次自增1
c:forEach begin0 end10 step1 vari${i}
/c:forEach7MVC模式和三层架构
MVC 模式和三层架构是一些理论的知识将来我们使用了它们进行代码开发会让我们代码维护性和扩展性更好。
7.1 MVC模式
MVC 是一种分层开发的模式其中 MModel业务模型处理业务 VView视图界面展示 CController控制器处理请求调用模型和视图 控制器serlvlet用来接收浏览器发送过来的请求控制器调用模型JavaBean来获取数据比如从数据库查询数据控制器获取到数据后再交由视图JSP进行数据展示。
MVC 好处 职责单一互不影响。每个角色做它自己的事各司其职。 有利于分工协作。 有利于组件重用
7.2 三层架构
三层架构是将我们的项目分成了三个层面分别是 表现层、业务逻辑层、数据访问层。 数据访问层对数据库的CRUD基本操作 业务逻辑层对业务逻辑进行封装组合数据访问层层中基本功能形成复杂的业务逻辑功能。例如 注册业务功能 我们会先调用 数据访问层 的 selectByName() 方法判断该用户名是否存在如果不存在再调用 数据访问层 的 insert() 方法进行数据的添加操作 表现层接收请求封装数据调用业务逻辑层响应数据
而整个流程是浏览器发送请求表现层的Servlet接收请求并调用业务逻辑层的方法进行业务逻辑处理而业务逻辑层方法调用数据访问层方法进行数据的操作依次返回到serlvet然后servlet将数据交由 JSP 进行展示。
三层架构的每一层都有特有的包名称 表现层 com.itheima.controller 或者 com.itheima.web 业务逻辑层com.itheima.service 数据访问层com.itheima.dao 或者 com.itheima.mapper
后期我们还会学习一些框架不同的框架是对不同层进行封装的 7.3 MVC 和 三层架构
通过 MVC 和 三层架构 的学习有些人肯定混淆了。那他们有什么区别和联系 如上图上半部分是 MVC 模式上图下半部分是三层架构。 MVC 模式 中的 C控制器和 V视图就是 三层架构 中的表现层而 MVC 模式 中的 M模型就是 三层架构 中的 业务逻辑层 和 数据访问层。
可以将 MVC 模式 理解成是一个大的概念而 三层架构 是对 MVC 模式 实现架构的思想。 那么我们以后按照要求将不同层的代码写在不同的包下每一层里功能职责做到单一将来如果将表现层的技术换掉而业务逻辑层和数据访问层的代码不需要发生变化。
8案例
需求完成品牌数据的增删改查操作 这个功能我们之前一直在做而这个案例是将今天学习的所有的内容包含 MVC模式 和 三层架构进行应用并将整个流程贯穿起来。
8.1 环境准备
环境准备工作我们分以下步骤实现 创建新的模块 brand_demo引入坐标 创建三层架构的包结构 数据库表 tb_brand 实体类 Brand MyBatis 基础环境 Mybatis-config.xml BrandMapper.xml BrandMapper接口
8.1.1 创建工程
创建新的模块 brand_demo引入坐标。我们只要分析出要用到哪儿些技术那么需要哪儿些坐标也就明确了 需要操作数据库。mysql的驱动包 要使用mybatis框架。mybaits的依赖包 web项目需要用到servlet和jsp。servlet和jsp的依赖包 需要使用 jstl 进行数据展示。jstl的依赖包
pom.xml 内容如下
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersiongroupIdorg.example/groupIdartifactIdbrand-demo/artifactIdversion1.0-SNAPSHOT/versionpackagingwar/packagingpropertiesmaven.compiler.source8/maven.compiler.sourcemaven.compiler.target8/maven.compiler.target/propertiesdependencies!-- mybatis --dependencygroupIdorg.mybatis/groupIdartifactIdmybatis/artifactIdversion3.5.5/version/dependency!--mysql--dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion5.1.34/version/dependency!--servlet--dependencygroupIdjavax.servlet/groupIdartifactIdjavax.servlet-api/artifactIdversion3.1.0/versionscopeprovided/scope/dependency!--jsp--dependencygroupIdjavax.servlet.jsp/groupIdartifactIdjsp-api/artifactIdversion2.2/versionscopeprovided/scope/dependency!--jstl--dependencygroupIdjstl/groupIdartifactIdjstl/artifactIdversion1.2/version/dependencydependencygroupIdtaglibs/groupIdartifactIdstandard/artifactIdversion1.1.2/version/dependency/dependenciesbuildpluginsplugingroupIdorg.apache.tomcat.maven/groupIdartifactIdtomcat7-maven-plugin/artifactIdversion2.2/version/plugin/plugins/build
/project8.1.2 创建包
创建不同的包结构用来存储不同的类。包结构如下 8.1.3 创建表
-- 删除tb_brand表
drop table if exists tb_brand;
-- 创建tb_brand表
create table tb_brand
(-- id 主键id int primary key auto_increment,-- 品牌名称brand_name varchar(20),-- 企业名称company_name varchar(20),-- 排序字段ordered int,-- 描述信息description varchar(100),-- 状态0禁用 1启用status int
);
-- 添加数据
insert into tb_brand (brand_name, company_name, ordered, description, status)
values (三只松鼠, 三只松鼠股份有限公司, 5, 好吃不上火, 0),(华为, 华为技术有限公司, 100, 华为致力于把数字世界带入每个人、每个家庭、每个组织构建万物互联的智能世界, 1),(小米, 小米科技有限公司, 50, are you ok, 1);8.1.4 创建实体类
在 pojo 包下创建名为 Brand 的类。
public class Brand {// id 主键private Integer id;// 品牌名称private String brandName;// 企业名称private String companyName;// 排序字段private Integer ordered;// 描述信息private String description;// 状态0禁用 1启用private Integer status;public Brand() {}public Brand(Integer id, String brandName, String companyName, String description) {this.id id;this.brandName brandName;this.companyName companyName;this.description description;}public Brand(Integer id, String brandName, String companyName, Integer ordered, String description, Integer status) {this.id id;this.brandName brandName;this.companyName companyName;this.ordered ordered;this.description description;this.status status;}public Integer getId() {return id;}public void setId(Integer id) {this.id id;}public String getBrandName() {return brandName;}public void setBrandName(String brandName) {this.brandName brandName;}public String getCompanyName() {return companyName;}public void setCompanyName(String companyName) {this.companyName companyName;}public Integer getOrdered() {return ordered;}public void setOrdered(Integer ordered) {this.ordered ordered;}public String getDescription() {return description;}public void setDescription(String description) {this.description description;}public Integer getStatus() {return status;}public void setStatus(Integer status) {this.status status;}Overridepublic String toString() {return Brand{ id id , brandName brandName \ , companyName companyName \ , ordered ordered , description description \ , status status };}
}
8.1.5 准备mybatis环境
定义核心配置文件 Mybatis-config.xml 并将该文件放置在 resources 下
?xml version1.0 encodingUTF-8 ?
!DOCTYPE configurationPUBLIC -//mybatis.org//DTD Config 3.0//ENhttp://mybatis.org/dtd/mybatis-3-config.dtd
configuration!--起别名--typeAliasespackage namecom.itheima.pojo//typeAliasesenvironments defaultdevelopmentenvironment iddevelopmenttransactionManager typeJDBC/dataSource typePOOLEDproperty namedriver valuecom.mysql.jdbc.Driver/property nameurl valuejdbc:mysql:///db1?useSSLfalseamp;useServerPrepStmtstrue/property nameusername valueroot/property namepassword value1234//dataSource/environment/environmentsmappers!--扫描mapper--package namecom.itheima.mapper//mappers
/configuration在 resources 下创建放置映射配置文件的目录结构 com/itheima/mapper并在该目录下创建映射配置文件 BrandMapper.xml
?xml version1.0 encodingUTF-8 ?
!DOCTYPE mapperPUBLIC -//mybatis.org//DTD Mapper 3.0//ENhttp://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.itheima.mapper.BrandMapper/mapper8.2 查询所有 当我们点击 index.html 页面中的 查询所有 这个超链接时就能查询到上图右半部分的数据。
对于上述的功能点击 查询所有 超链接是需要先请后端的 servlet 由 servlet 跳转到对应的页面进行数据的动态展示。而整个流程如下图 8.2.1 编写BrandMapper
在 mapper 包下创建创建 BrandMapper 接口在接口中定义 selectAll() 方法
/*** 查询所有* return*/
Select(select * from tb_brand)
ListBrand selectAll();8.2.2 编写工具类
在 com.itheima 包下创建 utils 包并在该包下创建名为 SqlSessionFactoryUtils 工具类
public class SqlSessionFactoryUtils {private static SqlSessionFactory sqlSessionFactory;static {//静态代码块会随着类的加载而自动执行且只执行一次try {String resource mybatis-config.xml;InputStream inputStream Resources.getResourceAsStream(resource);sqlSessionFactory new SqlSessionFactoryBuilder().build(inputStream);} catch (IOException e) {e.printStackTrace();}}public static SqlSessionFactory getSqlSessionFactory(){return sqlSessionFactory;}
}8.2.3 编写BrandService
在 service 包下创建 BrandService 类
public class BrandService {SqlSessionFactory factory SqlSessionFactoryUtils.getSqlSessionFactory();/*** 查询所有* return*/public ListBrand selectAll(){//调用BrandMapper.selectAll()//2. 获取SqlSessionSqlSession sqlSession factory.openSession();//3. 获取BrandMapperBrandMapper mapper sqlSession.getMapper(BrandMapper.class);//4. 调用方法ListBrand brands mapper.selectAll();sqlSession.close();return brands;}
}8.2.4 编写Servlet
在 web 包下创建名为 SelectAllServlet 的 servlet该 servlet 的逻辑如下 调用 BrandService 的 selectAll() 方法进行业务逻辑处理并接收返回的结果 将上一步返回的结果存储到 request 域对象中 跳转到 brand.jsp 页面进行数据的展示
具体的代码如下
WebServlet(/selectAllServlet)
public class SelectAllServlet extends HttpServlet {private BrandService service new BrandService();Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 调用BrandService完成查询ListBrand brands service.selectAll();//2. 存入request域中request.setAttribute(brands,brands);//3. 转发到brand.jsprequest.getRequestDispatcher(/brand.jsp).forward(request,response);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}8.2.5 编写brand.jsp页面
将资料 资料\2. 品牌增删改查案例\静态页面 下的 brand.html 页面拷贝到项目的 webapp 目录下并将该页面改成 brand.jsp 页面而 brand.jsp 页面在表格中使用 JSTL 和 EL表达式 从request域对象中获取名为 brands 的集合数据并展示出来。页面内容如下
% page contentTypetext/html;charsetUTF-8 languagejava %
% taglib prefixc urihttp://java.sun.com/jsp/jstl/core %!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
hr
table border1 cellspacing0 width80%trth序号/thth品牌名称/thth企业名称/thth排序/thth品牌介绍/thth状态/thth操作/th/trc:forEach items${brands} varbrand varStatusstatustr aligncenter%--td${brand.id}/td--%td${status.count}/tdtd${brand.brandName}/tdtd${brand.companyName}/tdtd${brand.ordered}/tdtd${brand.description}/tdc:if test${brand.status 1}td启用/td/c:ifc:if test${brand.status ! 1}td禁用/td/c:iftda href/brand-demo/selectByIdServlet?id${brand.id}修改/a a href#删除/a/td/tr/c:forEach
/table
/body
/html8.2.6 测试
启动服务器并在浏览器输入 http://localhost:8080/brand-demo/index.html看到如下 查询所有 的超链接点击该链接就可以查询出所有的品牌数据 为什么出现这个问题呢是因为查询到的字段名和实体类对象的属性名没有一一对应。相比看到这大家一定会解决了就是在映射配置文件中使用 resultMap 标签定义映射关系。映射配置文件内容如下
?xml version1.0 encodingUTF-8 ?
!DOCTYPE mapperPUBLIC -//mybatis.org//DTD Mapper 3.0//ENhttp://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.itheima.mapper.BrandMapperresultMap idbrandResultMap typebrandresult columnbrand_name propertybrandName/resultresult columncompany_name propertycompanyName/result/resultMap
/mapper并且在 BrandMapper 接口中的 selectAll() 上使用 ResuleMap 注解指定使用该映射
/*** 查询所有* return*/
Select(select * from tb_brand)
ResultMap(brandResultMap)
ListBrand selectAll();重启服务器再次访问就能看到我们想要的数据了 8.3 添加 上图是做 添加 功能流程。点击 新增 按钮后会先跳转到 addBrand.jsp 新增页面在该页面输入要添加的数据输入完毕后点击 提交 按钮需要将数据提交到后端而后端进行数据添加操作并重新将所有的数据查询出来。整个流程如下 接下来我们根据流程来实现功能
8.3.1 编写BrandMapper方法
在 BrandMapper 接口在接口中定义 add(Brand brand) 方法
Insert(insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status}))
void add(Brand brand);8.3.2 编写BrandService方法
在 BrandService 类中定义添加品牌数据方法 add(Brand brand) /*** 添加* param brand*/public void add(Brand brand){//2. 获取SqlSessionSqlSession sqlSession factory.openSession();//3. 获取BrandMapperBrandMapper mapper sqlSession.getMapper(BrandMapper.class);//4. 调用方法mapper.add(brand);//提交事务sqlSession.commit();//释放资源sqlSession.close();}8.3.3 改进brand.jsp页面
我们需要在该页面表格的上面添加 新增 按钮
input typebutton value新增 idaddbr并给该按钮绑定单击事件当点击了该按钮需要跳转到 brand.jsp 添加品牌数据的页面
scriptdocument.getElementById(add).onclick function (){location.href /brand-demo/addBrand.jsp;}
/script注意该 script 标签建议放在 body 结束标签前面。 8.3.4 编写addBrand.jsp页面
从资料 资料\2. 品牌增删改查案例\静态页面 中将 addBrand.html 页面拷贝到项目的 webapp 下并改成 addBrand.jsp 动态页面
% page contentTypetext/html;charsetUTF-8 languagejava %
!DOCTYPE html
html langenheadmeta charsetUTF-8title添加品牌/title
/head
body
h3添加品牌/h3
form action/brand-demo/addServlet methodpost品牌名称input namebrandNamebr企业名称input namecompanyNamebr排序input nameorderedbr描述信息textarea rows5 cols20 namedescription/textareabr状态input typeradio namestatus value0禁用input typeradio namestatus value1启用brinput typesubmit value提交
/form
/body
/html8.3.5 编写servlet
在 web 包下创建 AddServlet 的 servlet该 servlet 的逻辑如下: 设置处理post请求乱码的字符集 接收客户端提交的数据 将接收到的数据封装到 Brand 对象中 调用 BrandService 的add() 方法进行添加的业务逻辑处理 跳转到 selectAllServlet 资源重新查询数据
具体的代码如下
WebServlet(/addServlet)
public class AddServlet extends HttpServlet {private BrandService service new BrandService();Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//处理POST请求的乱码问题request.setCharacterEncoding(utf-8);//1. 接收表单提交的数据封装为一个Brand对象String brandName request.getParameter(brandName);String companyName request.getParameter(companyName);String ordered request.getParameter(ordered);String description request.getParameter(description);String status request.getParameter(status);//封装为一个Brand对象Brand brand new Brand();brand.setBrandName(brandName);brand.setCompanyName(companyName);brand.setOrdered(Integer.parseInt(ordered));brand.setDescription(description);brand.setStatus(Integer.parseInt(status));//2. 调用service 完成添加service.add(brand);//3. 转发到查询所有Servletrequest.getRequestDispatcher(/selectAllServlet).forward(request,response);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}8.3.6 测试
点击 brand.jsp 页面的 新增 按钮会跳转到 addBrand.jsp页面 点击 提交 按钮就能看到如下页面里面就包含我们刚添加的数据 8.4 修改 点击每条数据后面的 编辑 按钮会跳转到修改页面如下图 在该修改页面我们可以看到将 编辑 按钮所在行的数据 回显 到表单然后需要修改那个数据在表单中进行修改然后点击 提交 的按钮将数据提交到后端后端再将数据存储到数据库中。
从上面的例子我们知道 修改 功能需要从两方面进行实现数据回显和修改操作。
8.4.1 回显数据 上图就是回显数据的效果。要实现这个效果那当点击 修改 按钮时不能直接跳转到 update.jsp 页面而是需要先带着当前行数据的 id 请求后端程序后端程序根据 id 查询数据将数据存储到域对象中跳转到 update.jsp 页面进行数据展示。整体流程如下 8.4.1.1 编写BrandMapper方法
在 BrandMapper 接口在接口中定义 selectById(int id) 方法 /*** 根据id查询* param id* return*/Select(select * from tb_brand where id #{id})ResultMap(brandResultMap)Brand selectById(int id);8.4.1.2 编写BrandService方法
在 BrandService 类中定义根据id查询数据方法 selectById(int id) /*** 根据id查询* return*/public Brand selectById(int id){//调用BrandMapper.selectAll()//2. 获取SqlSessionSqlSession sqlSession factory.openSession();//3. 获取BrandMapperBrandMapper mapper sqlSession.getMapper(BrandMapper.class);//4. 调用方法Brand brand mapper.selectById(id);sqlSession.close();return brand;}8.4.1.3 编写servlet
在 web 包下创建 SelectByIdServlet 的 servlet该 servlet 的逻辑如下: 获取请求数据 id 调用 BrandService 的 selectById() 方法进行数据查询的业务逻辑 将查询到的数据存储到 request 域对象中 跳转到 update.jsp 页面进行数据真实
具体代码如下
WebServlet(/selectByIdServlet)
public class SelectByIdServlet extends HttpServlet {private BrandService service new BrandService();Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接收idString id request.getParameter(id);//2. 调用service查询Brand brand service.selectById(Integer.parseInt(id));//3. 存储到request中request.setAttribute(brand,brand);//4. 转发到update.jsprequest.getRequestDispatcher(/update.jsp).forward(request,response);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}8.4.1.4 编写update.jsp页面
拷贝 addBrand.jsp 页面改名为 update.jsp 并做出以下修改 title 标签内容改为 修改品牌 form 标签的 action 属性值改为 /brand-demo/updateServlet input 标签要进行数据回显需要设置 value 属性 品牌名称input namebrandName value${brand.brandName}br
企业名称input namecompanyName value${brand.companyName}br
排序input nameordered value${brand.ordered}brtextarea 标签要进行数据回显需要在标签体中使用 EL表达式 描述信息textarea rows5 cols20 namedescription${brand.description} /textareabr单选框使用 if 标签需要判断 brand.status 的值是 1 还是 0 在指定的单选框上使用 checked 属性表示被选中状态 状态
c:if test${brand.status 0}input typeradio namestatus value0 checked禁用input typeradio namestatus value1启用br
/c:ifc:if test${brand.status 1}input typeradio namestatus value0 禁用input typeradio namestatus value1 checked启用br
/c:if综上update.jsp 代码如下
% page contentTypetext/html;charsetUTF-8 languagejava %
% taglib prefixc urihttp://java.sun.com/jsp/jstl/core %
!DOCTYPE html
html langen
headmeta charsetUTF-8title修改品牌/title
/head
body
h3修改品牌/h3
form action/brand-demo/updateServlet methodpost品牌名称input namebrandName value${brand.brandName}br企业名称input namecompanyName value${brand.companyName}br排序input nameordered value${brand.ordered}br描述信息textarea rows5 cols20 namedescription${brand.description} /textareabr状态c:if test${brand.status 0}input typeradio namestatus value0 checked禁用input typeradio namestatus value1启用br/c:ifc:if test${brand.status 1}input typeradio namestatus value0 禁用input typeradio namestatus value1 checked启用br/c:ifinput typesubmit value提交
/form
/body
/html8.4.2 修改数据
做完回显数据后接下来我们要做修改数据了而下图是修改数据的效果 在修改页面进行数据修改点击 提交 按钮会将数据提交到后端程序后端程序会对表中的数据进行修改操作然后重新进行数据的查询操作。整体流程如下 8.4.2.1 编写BrandMapper方法
在 BrandMapper 接口在接口中定义 update(Brand brand) 方法
/*** 修改* param brand*/
Update(update tb_brand set brand_name #{brandName},company_name #{companyName},ordered #{ordered},description #{description},status #{status} where id #{id})
void update(Brand brand);8.4.2.2 编写BrandService方法
在 BrandService 类中定义根据id查询数据方法 update(Brand brand) /*** 修改* param brand*/public void update(Brand brand){//2. 获取SqlSessionSqlSession sqlSession factory.openSession();//3. 获取BrandMapperBrandMapper mapper sqlSession.getMapper(BrandMapper.class);//4. 调用方法mapper.update(brand);//提交事务sqlSession.commit();//释放资源sqlSession.close();}8.4.2.3 编写servlet
在 web 包下创建 AddServlet 的 servlet该 servlet 的逻辑如下: 设置处理post请求乱码的字符集 接收客户端提交的数据 将接收到的数据封装到 Brand 对象中 调用 BrandService 的update() 方法进行添加的业务逻辑处理 跳转到 selectAllServlet 资源重新查询数据
具体的代码如下
WebServlet(/updateServlet)
public class UpdateServlet extends HttpServlet {private BrandService service new BrandService();Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//处理POST请求的乱码问题request.setCharacterEncoding(utf-8);//1. 接收表单提交的数据封装为一个Brand对象String id request.getParameter(id);String brandName request.getParameter(brandName);String companyName request.getParameter(companyName);String ordered request.getParameter(ordered);String description request.getParameter(description);String status request.getParameter(status);//封装为一个Brand对象Brand brand new Brand();brand.setId(Integer.parseInt(id));brand.setBrandName(brandName);brand.setCompanyName(companyName);brand.setOrdered(Integer.parseInt(ordered));brand.setDescription(description);brand.setStatus(Integer.parseInt(status));//2. 调用service 完成修改service.update(brand);//3. 转发到查询所有Servletrequest.getRequestDispatcher(/selectAllServlet).forward(request,response);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}存在问题update.jsp 页面提交数据时是没有携带主键数据的而后台修改数据需要根据主键进行修改。
针对这个问题我们不希望页面将主键id展示给用户看但是又希望在提交数据时能将主键id提交到后端。此时我们就想到了在学习 HTML 时学习的隐藏域在 update.jsp 页面的表单中添加如下代码
%--隐藏域提交id--%
input typehidden nameid value${brand.id}update.jsp 页面的最终代码如下
% page contentTypetext/html;charsetUTF-8 languagejava %
% taglib prefixc urihttp://java.sun.com/jsp/jstl/core %
!DOCTYPE html
html langen
headmeta charsetUTF-8title修改品牌/title
/head
body
h3修改品牌/h3
form action/brand-demo/updateServlet methodpost%--隐藏域提交id--%input typehidden nameid value${brand.id}品牌名称input namebrandName value${brand.brandName}br企业名称input namecompanyName value${brand.companyName}br排序input nameordered value${brand.ordered}br描述信息textarea rows5 cols20 namedescription${brand.description} /textareabr状态c:if test${brand.status 0}input typeradio namestatus value0 checked禁用input typeradio namestatus value1启用br/c:ifc:if test${brand.status 1}input typeradio namestatus value0 禁用input typeradio namestatus value1 checked启用br/c:ifinput typesubmit value提交
/form
/body
/html
