JavaWeb学习记录 Day4（JSP入门）

秒速五厘米 2021-12-09 03:33 321阅读 0赞

### 文章目录 ###

*  Day 4
 *  JSP简介
 *  JSP执行原理
 *  JSP语法
 *  JSP特殊用法
 *  JSP综合项目

# Day 4 #

2019年7月16日。  
这是我学习JavaWeb的第四天。  
这一天，我学到了以下的知识。

# JSP简介 #

Java Service Page ：Java服务器页面。**其根本是一个简化的Servlet设计**，它 是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML（标准通用标记语言的子集）文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件，后缀名为(\*.jsp)。 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行

JSP能处理一些Java前后端交互的数据，主要用来显示数据，但不建议大量代码写在JSP页面里面；

*  优点：简单，和HTML差不多
 *  缺点：书写页面会很乱，HTML代码和JAVA交错；

# JSP执行原理 #

动态请求会被分发到Web容器（Web服务器）中。

容器会去执行字节码文件，就是 .class文件。

Servlet是java类，可以直接编译成class文件。

但是，Jsp怎么编译成class文件？

于是我们会想，**jsp是不是会被转换成一个java类**。

**追究本质**

Tomcat在工作的时候，将我们的Jsp页面转换成了java类

![\[外链图片转存(img-2g4W5V0S-1563257777629)(G:\\note\\assets\\1563095858294.png)(G:\\note\\assets\\1563095858294.png)\]][img-2g4W5V0S-1563257777629_G_note_assets_1563095858294.png_G_note_assets_1563095858294.png]

打开这个类分析：

该类继承一个类：HTTPJSPBase ， 没有直接继承HttpServlet ， 但是HTTPJSPBase继承了HttpServlet，所以得出结论

**JSP本身就是一个servlet的方式运行的**

那他怎么输出页面的呢？发现他是使用out对象输出到浏览器

![\[外链图片转存失败(img-JI1L0BA6-1563257777629)(G:\\note\\assets\\1563096198210.png)\]][img-JI1L0BA6-1563257777629_G_note_assets_1563096198210.png]

那这个out对象上去的方式是什么呢？

发现，有一个\_jspService可以执行操作我们的JSP，将它输出到前端页面。

![\[外链图片转存失败(img-pHXgVlrv-1563257777630)(G:\\note\\assets\\1563096302443.png)\]][img-pHXgVlrv-1563257777630_G_note_assets_1563096302443.png]

继续分析源码，得到一些属性；

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]

# JSP语法 #

JSP基础语法

1.  JSP获得变量的值 `<%= 表达式或者变量值 %>`
2.  JSP定义局部变量:写一段Java代码 `<% Java代码 %>`  
    注意点：必须严格遵守Java规范
3.  JSP定义全局变量 `<%! 全局变量或方法 %>`

除此之外，JSP中还分为EL表达式和JSTL标签这两种表达方法，本篇博客先介绍EL表达式。

*  EL表达式：`${}`

EL表达式一般用来输出变量的值，而不是一个对象。  
语法演示示例如下：

<%@ page import="java.util.Date" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    
    <%--
    JSP基础语法
      1.JSP获得变量的值 <%= 表达式或者变量值 %>
      2.JSP定义局部变量:写一段Java代码   <% Java代码 %>
        注意点：必须严格遵守Java规范
      3.JSP定义全局变量 <%! 全局变量或方法 %>
    
    简化符：因为HTML是标记语言，我们需要一些标记
    EL表达式和JSTL标签
    
        ${ }  ==  <%= %> 联系和区别
        EL表达式一般用来输出变量的值；而不能是一个对象；
    
    tomcat会在jsp解析的时候将_jspService转换成对应的doget。dopost，我们正常方式无法直接调用！
    
    //JSP内置对象：
        pageContext 作用域：
              application = pageContext.getServletContext(); 应用
              session = pageContext.getSession(); 会话
              request = 请求
              page = this; 页面
    
          ===
          out.输出
    --%>
    
    
    <%!
      int i = 0;
    
      public int add(int a,int b){ 
          return a+b;
      }
    
    %>
    
    
    <%
    //Java代码
    String name = "abc";
    int age = 18;
    int j = 0;
        Date date = new Date();
    
        out.write(
                (java.lang.String) org.apache.jasper.runtime.PageContextImpl.proprietaryEvaluate
                        ("${name}", java.lang.String.class,
                                (javax.servlet.jsp.PageContext)_jspx_page_context,
                                name
                        )
        );
    
    %>
    
    
    <html>
      <head>
        <title>$Title$</title>
      </head>
      <body>
    
      <h1>
    
    日期：<%=new Date()%>
    名字：<%=name%>
    年龄：<%=age%>
    i:<%=i++%>
    j:<%=j++%>
    
      </h1>
    
      </body>
    </html>

# JSP特殊用法 #

jsp代码可以在不同的 <%%>中实现，但是，Java代码必须保持完成，否则页面会报500错误（服务器代码错误）；  
示例如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
        <title>首页</title>
      </head>
      <body>
    
      <%--在页面输出100个Hello，World--%>
    
      <%
          for (int i = 0; i < 100; i++) { 
      %>
          <h1>Hello,World</h1>
      <%
          }
      %>
    
     
      </body>
    </html>

# JSP综合项目 #

模拟一个数据库，在数据库中有一个新闻表（News），在表中有两个字段（日期和信息），完成JSP的综合运用，项目示例如下：

1.  **模拟数据库**（db）

package com.kuang.db;
    
    import com.kuang.pojo.News;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class NewsDB { 
    
        public static List<News> list = new ArrayList<News>();
    
        static { 
            list.add(new News("7.16","学习了JSP的使用以及源码分析"));
            list.add(new News("7.14","学习了Servlet，简单的JSP的使用"));
            list.add(new News("7.13","学习了Tomcat，Servlet的使用"));
            list.add(new News("7.13","学习了Tomcat，Servlet的使用"));
            list.add(new News("7.13","学习了Tomcat，Servlet的使用"));
            list.add(new News("7.13","学习了Tomcat，Servlet的使用"));
            list.add(new News("7.13","学习了Tomcat，Servlet的使用"));
            list.add(new News("7.13","学习了Tomcat，Servlet的使用"));
        }
    
    }

2.**实体类**（pojo）

package com.kuang.pojo;
    
    //实体类，一般放在pojo包下，【 or entity or JavaBeans】
    //实体类，只有属性，一般用来映射数据库中的字段 （ O R M ）
    //私有属性 ， 无参构造，有参构造
    //get/set方法
    //为了方便程序打印，建议加上toString（）；
    public class News { 
    
        private String data;
        private String content;
    
        public News() { 
        }
    
        public News(String data, String content) { 
            this.data = data;
            this.content = content;
        }
    
        public String getData() { 
            return data;
        }
    
        public void setData(String data) { 
            this.data = data;
        }
    
        public String getContent() { 
            return content;
        }
    
        public void setContent(String content) { 
            this.content = content;
        }
    
        @Override
        public String toString() { 
            return "News{" +
                    "data='" + data + '\'' +
                    ", content='" + content + '\'' +
                    '}';
        }
    }

1.  **dao层**（dao）

package com.kuang.dao;
    
    
    //dao包一般用来存放操作数据库的对象类；
    
    import com.kuang.pojo.News;
    
    import java.util.List;
    
    public interface NewsDao { 
        //获得所有的新闻
        public List<News> getAllNews();
    
    }

package com.kuang.dao;
    
    import com.kuang.db.NewsDB;
    import com.kuang.pojo.News;
    
    import java.util.List;
    
    //NewsDao的实现类
    public class NewsDaoImpl implements NewsDao { 
        @Override
        public List<News> getAllNews() { 
            List<News> list = NewsDB.list;
            return list;
        }
    
    }

1.  **service层**（service）

package com.kuang.service;
    
    import com.kuang.pojo.News;
    
    import java.util.List;
    
    //service一般存放业务类
    public interface NewsService { 
        //获得所有的新闻
        public List<News> getAllNews();
    }

package com.kuang.service;
    
    import com.kuang.dao.NewsDao;
    import com.kuang.dao.NewsDaoImpl;
    import com.kuang.pojo.News;
    
    import java.util.List;
    
    public class NewsServiceImpl implements NewsService { 
    
        //从dao层中取出相应的操作数据库的方法
        NewsDao newsDao = new NewsDaoImpl();
    
        @Override
        public List<News> getAllNews() { 
            return newsDao.getAllNews();
        }
    }

1.  **servlet**（servlet）

package com.kuang.servlet;
    
    import com.kuang.pojo.News;
    import com.kuang.service.NewsService;
    import com.kuang.service.NewsServiceImpl;
    import org.apache.catalina.Session;
    import org.junit.Test;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    import java.io.IOException;
    import java.util.List;
    
    public class NewsServlet extends HttpServlet { 
    
        NewsService newsService = new NewsServiceImpl();
    
        @Test
        public void test(){ 
    
    
        }
    
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
            //写代码读取数据存到某个地方，让前端读取；
    
            List<News> allNews = newsService.getAllNews();//从业务层去获得数据中的全部新闻
    
            int i = 1;
    
            for (News allNew : allNews) {  //遍历获得每一个新闻
    
                String data = allNew.getData();
                String content = allNew.getContent();
    
                //四大作用域
                // page（不用它，代表当前页面）
                // request（一次请求中有效）： 登录注册
                // session (一次会话中存在) ： 购物车
                // application：本质就是Context （全局，所有会话共享） ： 广告
                //这四个作用域用来存放一些内容或者对象
                HttpSession session = req.getSession();
    
                session.setAttribute("data"+i,data);
                session.setAttribute("content"+i,content);
    
                System.out.println(session.getAttribute("data"+i));
                System.out.println(session.getAttribute("content"+i));
    
                i++;//自增
            }
    
            //数据都读取出来了，给你放到session中了，该去访问页面了
            resp.sendRedirect("index.jsp");
    
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
            doGet(req, resp);
        }
    }

1.  **web.xml**

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0">
    
        <servlet>
            <servlet-name>newsServlet</servlet-name>
            <servlet-class>com.kuang.servlet.NewsServlet</servlet-class>
        </servlet>
    
    
        <servlet-mapping>
            <servlet-name>newsServlet</servlet-name>
            <url-pattern>/news.do</url-pattern>
        </servlet-mapping>
    
    </web-app>

1.  **index.jsp**

<%@ page import="com.kuang.db.NewsDB" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
      <title>首页</title>
    
      <%--引入css--%>
      <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/layui.css">
      <%--引入静态资源文件必须带上项目路径位置--%>
      <Script src="${pageContext.request.contextPath}/statics/layui/layui.js"></Script>
    
    </head>
    <body>
    
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>常规时间线</legend>
    </fieldset>
    
    <ul class="layui-timeline">
    
    
    <%
      for (int i = 1; i <= NewsDB.list.size(); i++) { 
    %>
    
      <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
          <h3 class="layui-timeline-title">
            <%=request.getSession().getAttribute("data"+i)%>
            <%--${ sessionScope.data1}--%>
          </h3>
          <p>
            <%--${ sessionScope.content1}--%>
              <%=request.getSession().getAttribute("content"+i)%>
          </p>
        </div>
      </li>
    
    <%
      }
    %>
    
    
      <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
          <div class="layui-timeline-title">过去</div>
        </div>
      </li>
    </ul>
    
    
    </body>
    </html>

注意：该主页（index.jsp）引用了layui前端框架，若想显示完整的效果，请去layui的官网上下载相关库

[img-2g4W5V0S-1563257777629_G_note_assets_1563095858294.png_G_note_assets_1563095858294.png]: /images/20211209/e9f383828cd44c1f890c5fd200c09d86.png
[img-JI1L0BA6-1563257777629_G_note_assets_1563096198210.png]: /images/20211209/99f96f5b6418464c8c122b03d07f205b.png
[img-pHXgVlrv-1563257777630_G_note_assets_1563096302443.png]: /images/20211209/8e592ac364dc4711879f67ecc1031fd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]: /images/20211209/61ec95b8059a4f5a9c9829eecd9afab0.png