04-JavaWeb开发【JSP&EL&JSTL&MVC&Bootstrap前端框架】

typora-copy-images-to: img
typora-root-url: img

知识回顾

1.会话技术：用户打开浏览器并访问网页开始，直到关闭浏览器会话结束
2.Cookie:
	1）属于一个一个类，可以创建对象
	2）创建服务器端，存储到浏览器端，好处：减少服务器压力，弊端：不安全
	3）API:
		1.创建对象 ：new Cookie(name,value)
		2.获取name：getName()
		3.获取value：getValue()
		4.修改value：setValue()
		5.设置最大存活时间：setMaxAge(秒)  默认是会话级别的cookie，浏览器关闭就销毁。通过该函数可以持久化cookie
		6.设置有效路径：setPath(path)
3.Session:
	1)属于HttpSession接口类型,使用tomcat的实现类创建对象
	2)创建对象：HttpSession session= request.getSession();  第一次是创建，后续就是获取
	3）获取唯一标识JSESSIONID:getId()
	4)销毁方法：invalidate()
	5)session原理：第一次创建session在服务器中，为每个用户开辟一个session容器，每个容器具有唯一标识JSESSIONID，然后tomcat默认创建会话级别的cookie存放JSESSIONID，然后将cookie响应给浏览器，下次访问的时候携带cookie中JSESSIONID，然后进行比较找到自己的session容器。
	6）session持久化方案：就是持久化cookie。
		创建session
		获取JSESSIONID
		创建cookie：new Cookie("JSESSIONID",seesionid的值);
		设置存储时间
		响应给浏览器
	7）session的钝化和活化：了解
		钝化：序列化。正常关闭tomcat，会将session中的数据序列化到tomcat服务器所属的硬盘中 work\Catalina\localhost 
		活化：反序列化。启动tomcat,会将之前钝化的文件加载到内存中。
	8）禁用cookie，如何解决找到session的问题：重写url(在路径后面拼接jsessionid)了解
		1)重定向重写url:response.encodeRedirectURL(url);
		2)超链接重写url:response.encodeURL(url);

MVC设计模式(掌握)

• 掌握MVC设计模式的思想

MVC设计模式是一种思想，不仅仅使用在java中。

1.M:model 模型 ，操作数据

2.V:View 视图 ，显示数据

3.C:Controller 控制器，负责分发和控制

一、JSP【掌握】

1、jsp简介

1.jsp既可以书写java代码又可以书写html标签页面

2.jsp属于后端的技术，java类实质是一个servlet

【1】问题引入

之前书写的登录案例，如果登录错误我们为了在页面中提示错误信息我们在servlet中编写html标签响应给浏览器，这样会比较麻烦。接下来的jsp技术就可以解决上述问题，不需要在servlet中自己手动编写html标签了，这样使用会很方便。

【2】 JSP发展（了解）

model1时代：jsp刚开始诞生的时候所有的代码都放到jsp中。

例如：操作数据库的jdbc,显示数据等

model2时代：基于mvc设计模式的思想。jsp只是用来作为视图显示数据的，使用servlet负责进行分发或者控制，model模型即业务层、dao层、实体( javabean )

【3】jsp介绍

java server pages java服务器端的页面。

jsp属于后台服务器端的技术，本质是一个java类，就是一个servlet，

只是在底层使用类似于如下代码编写的

  response.getWriter().print("");

我们只需要在jsp书写html标签，底层翻译成java代码。

步骤：

1.创建jsp的后缀名是.jsp

2.在web项目下的web目录创建

3.tomcat执行jsp的时候会将.jsp翻译成.java,然后在编译为.class文件，最后运行.class文件

【代码演示】

1.在项目的web目录下创建jsp页面

2.在jsp中书写java代码和html标签

3.运行服务器访问jsp即可

<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %><%--
  Created by IntelliJ IDEA.
  User: tiansuo
  Date: 2020-11-22
  Time: 9:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


    <%--书写html标签--%>
    
第一个jsp
    <%--书写java代码--%>
    <%
        //这里编写java代码
        //需求：获取当前系统时间变为字符串格式
        //1.创建当前系统时间
        Date date = new Date();
        //2.创建日期格式化解析类对象
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //3.使用日期格式化解析类对象调用格式化方法进行格式化
        String time = sdf.format(date);
        //4.输出格式化的字符串的时间
        System.out.println("time = " + time);
        //响应给页面
        response.getWriter().print(time);
    %>

2、jsp原理(掌握)

【jsp加载流程图】

【查找jsp的源码】

说明：源文件名：jsp文件名_jsp

/*
 * Generated by the Jasper component of Apache Tomcat
 * Version: Apache Tomcat/8.5.31
 * Generated at: 2020-11-22 01:55:39 UTC
 * Note: The last modified time of this file was set to
 *       the last modified time of the source file after
 *       generation to assist with modification tracking.
 */
package org.apache.jsp;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.jsp.*;
import java.util.Date;
import java.text.SimpleDateFormat;
/*
	1.demo01_jsp 表示类名： jsp文件名_jsp变为类名
	2.demo01_jsp类继承了org.apache.jasper.runtime.HttpJspBase类
*/
public final class demo01_jsp extends org.apache.jasper.runtime.HttpJspBase
    implements org.apache.jasper.runtime.JspSourceDependent,
                 org.apache.jasper.runtime.JspSourceImports {

  private static final javax.servlet.jsp.JspFactory _jspxFactory =
          javax.servlet.jsp.JspFactory.getDefaultFactory();

  private static java.util.Map<java.lang.String,java.lang.Long> _jspx_dependants;

  private static final java.util.Set<java.lang.String> _jspx_imports_packages;

  private static final java.util.Set<java.lang.String> _jspx_imports_classes;

  static {
    _jspx_imports_packages = new java.util.HashSet<>();
    _jspx_imports_packages.add("javax.servlet");
    _jspx_imports_packages.add("javax.servlet.http");
    _jspx_imports_packages.add("javax.servlet.jsp");
    _jspx_imports_classes = new java.util.HashSet<>();
    _jspx_imports_classes.add("java.util.Date");
    _jspx_imports_classes.add("java.text.SimpleDateFormat");
  }

  private volatile javax.el.ExpressionFactory _el_expressionfactory;
  private volatile org.apache.tomcat.InstanceManager _jsp_instancemanager;

  public java.util.Map<java.lang.String,java.lang.Long> getDependants() {
    return _jspx_dependants;
  }

  public java.util.Set<java.lang.String> getPackageImports() {
    return _jspx_imports_packages;
  }

  public java.util.Set<java.lang.String> getClassImports() {
    return _jspx_imports_classes;
  }

  public javax.el.ExpressionFactory _jsp_getExpressionFactory() {
    if (_el_expressionfactory == null) {
      synchronized (this) {
        if (_el_expressionfactory == null) {
          _el_expressionfactory = _jspxFactory.getJspApplicationContext(getServletConfig().getServletContext()).getExpressionFactory();
        }
      }
    }
    return _el_expressionfactory;
  }

  public org.apache.tomcat.InstanceManager _jsp_getInstanceManager() {
    if (_jsp_instancemanager == null) {
      synchronized (this) {
        if (_jsp_instancemanager == null) {
          _jsp_instancemanager = org.apache.jasper.runtime.InstanceManagerFactory.getInstanceManager(getServletConfig());
        }
      }
    }
    return _jsp_instancemanager;
  }

  public void _jspInit() {
  }

  public void _jspDestroy() {
  }
  //业务方法，在这里处理业务逻辑
  public void _jspService(final javax.servlet.http.HttpServletRequest request, final javax.servlet.http.HttpServletResponse response)
      throws java.io.IOException, javax.servlet.ServletException {

    final java.lang.String _jspx_method = request.getMethod();
    if (!"GET".equals(_jspx_method) && !"POST".equals(_jspx_method) && !"HEAD".equals(_jspx_method) && !javax.servlet.DispatcherType.ERROR.equals(request.getDispatcherType())) {
      response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED, "JSPs only permit GET POST or HEAD");
      return;
    }

    final javax.servlet.jsp.PageContext pageContext;
    javax.servlet.http.HttpSession session = null;
    final javax.servlet.ServletContext application;
    final javax.servlet.ServletConfig config;
    javax.servlet.jsp.JspWriter out = null;
    final java.lang.Object page = this;
    javax.servlet.jsp.JspWriter _jspx_out = null;
    javax.servlet.jsp.PageContext _jspx_page_context = null;


    try {
      //处理响应的乱码的
      response.setContentType("text/html;charset=UTF-8");
      pageContext = _jspxFactory.getPageContext(this, request, response,
      			null, true, 8192, true);
      _jspx_page_context = pageContext;
      application = pageContext.getServletContext();
      config = pageContext.getServletConfig();
      session = pageContext.getSession();
      out = pageContext.getOut();
      _jspx_out = out;

      out.write('\r');
      out.write('\n');
      out.write("\r\n");
      out.write("\r\n");
      out.write("\r\n");
      out.write("\r\n");
      out.write("    \r\n");
      out.write("\r\n");
      out.write("\r\n");
      out.write("    ");
      out.write("\r\n");
      out.write("    
第一个jsp
\r\n");
      out.write("    ");
      out.write("\r\n");
      out.write("    ");
		
        //这里编写java代码
        //需求：获取当前系统时间变为字符串格式
        //1.创建当前系统时间
        Date date = new Date();
        //2.创建日期格式化解析类对象
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //3.使用日期格式化解析类对象调用格式化方法进行格式化
        String time = sdf.format(date);
        //4.输出格式化的字符串的时间
        System.out.println("time = " + time);
        //响应给页面
        response.getWriter().print(time);
    
      out.write("\r\n");
      out.write("\r\n");
      out.write("\r\n");
    } catch (java.lang.Throwable t) {
      if (!(t instanceof javax.servlet.jsp.SkipPageException)){
        out = _jspx_out;
        if (out != null && out.getBufferSize() != 0)
          try {
            if (response.isCommitted()) {
              out.flush();
            } else {
              out.clearBuffer();
            }
          } catch (java.io.IOException e) {}
        if (_jspx_page_context != null) _jspx_page_context.handlePageException(t);
        else throw new ServletException(t);
      }
    } finally {
      _jspxFactory.releasePageContext(_jspx_page_context);
    }
  }
}

【jsp是一个servlet】

1）找到jsp源码：

2）查找 org.apache.jasper.runtime.HttpJspBase

将tomcat下面的lib包下面的jasper.jar进行解压

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210504003010906.png?x-

3）结论：demo01_jsp是HttpServlet的子类 所以jsp是一个servlet

public final class demo01_jsp extends org.apache.jasper.runtime.HttpJspBase{}
public abstract class HttpJspBase extends HttpServlet{}

jsp是一个java类实质上是一个Servlet

jsp类中具有一个业务方法，业务方法体中具有以下常见对象

 public void _jspService(final javax.servlet.http.HttpServletRequest request, final javax.servlet.http.HttpServletResponse response)
      throws java.io.IOException, javax.servlet.ServletException {
     /*
     	常用的对象：
     	1.request
     	2.response
     	3.session
     	4.application就是ServletContext
     */
 }

3、在jsp页面中书写java代码的三种方式(掌握)

1、脚本片段

1.使用脚本片段书写的java代码被放到业务方法体中即_jspService中

2.缺点：书写在脚本片段的java代码不能定义java中的方法，只能调用java中的方法

【1】格式

<%
    //书写java代码
%>

<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %><%--
  Created by IntelliJ IDEA.
  User: tiansuo
  Date: 2020-11-22
  Time: 9:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


    <%--书写html标签--%>
    
第一个jsp
    <%--书写java代码--%>
    <%
        //这里编写java代码
        //需求：获取当前系统时间变为字符串格式
        //1.创建当前系统时间
        Date date = new Date();
        //2.创建日期格式化解析类对象
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //3.使用日期格式化解析类对象调用格式化方法进行格式化
        String time = sdf.format(date);
        //4.输出格式化的字符串的时间
        System.out.println("time = " + time);
        //响应给页面
        response.getWriter().print(time);
    %>

2、脚本声明

本片段虽然可以嵌入java代码，但是如果，我们要给当前的jsp中定义一些成员方法或者成员变量，就需要一个新的技术——脚本声明

通过查看jsp的源代码我们发现，脚本片段的代码都会存在service方法中，而方法中是不可以定义一个方法的。

【1】格式

<%!
	//这里书写java代码，在 脚本声明中书写的java代码会放到jsp类的成员位置 
 %>

【2】代码实现

<%--
        2.脚本声明：java代码放到类的成员位置
    --%>
    <%!
        //定义方法
         public void show(){
            System.out.println("哈哈");
        }

        //定义成员变量
        int num = 10;
    %>

3.脚本表达式

虽然脚本声明和脚本片段已经可以书写Java代码了，但是如果我们要使用java代码向页面输出一些内容，还是需要 使用原来的response对象，比较繁琐，因此，我们需要一个更加简便的方式，可以代替response**向页面输出内容 ** ——这个就是脚本表达式。

脚本表达式的格式：<%= 向浏览器输出的内容 %> 等价于：out.print( 向浏览器输出的内容)

【1】作用：取代之前向页面的输出语句

之前输出页面数据代码：

 response.getWriter().print(数据);

格式：

<%=输出页面的内容%>

注意：脚本表达式等号后面的输出内容只能是数据，脚本表达式相当于print方法

【2】代码实现

 	<%--
        3.脚本表达式：<%=输出页面的内容%>
    --%>
    <%="锁哥"%>
    <%=123%>

翻译之后的：

内容小结

总结：

​ 1.不要同时使用脚本表达式和response同时往页面输出信息，会出现顺序不一致。

​ 现象：response会出现在最前面。使用一种输出即可。

​ 2.脚本表达式<%= str %> ：在页面输出内容，在service方法中起作用；

​ 3.脚本片段<% %> ：在service方法中，原样输出的代码片段；属于局部为，放在_jspService方法中

​ 4.脚本声明：<%! String str = "黑马程序员" %> ：定义成员变量；

【1】在jsp页面中书写java代码的三种方式

1.脚本片段

<%
	java代码，放到service方法体内部
%>

2.脚本声明

<%!
 	书写的java代码放到类的成员位置   
 
 %>

3.脚本表达式

<%=输出内容%>

【2】脚本表达式使用注意事项

脚本表达式只是用来向页面中输出数据的简化代码：response.getWriter().print(数据);

结果：

说明：通过查看源码我们发现使用脚本表达式输出的数据代码是放到前面，但是页面结果却最后输出。原因是和两种输出方式的输出流有关：

1.脚本表达式使用的输出流是：javax.servlet.jsp.JspWriter out = null;  输出流是JspWriter。JspWriter特点是先将数据放到缓冲区中，然后在一起输出。
   
2.response.getWriter().print("岩岩"); 使用的字符输出流是PrintWriter,PrintWriter字符输出流直接输出到浏览器

4、JSP的三大指令(理解)

【概念】

JSP指令（directive）是为JSP引擎而设计的，它们并不直接产生任何可见输出效果，

而只是告诉引擎如何处理JSP页面中的其余部分。

指令用来声明JSP页面的一些属性，比如编码方式，文档类型。

我们在servlet中也会声明我们使用的编码方式和响应的文档类型的，而JSP就是用指令来声明的。

分类

【1】page指令

<%@ 指令名 属性名="属性值" 属性名="属性值" 属性名="属性值"。。。 %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

【2】taglib指令

【3】include指令

page指令【重要】

【1】作用：解决响应乱码 当前页面的语言 导包错误页面等

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
1.contentType="text/html;charset=UTF-8 解决响应乱码翻译之后：
 response.setContentType("text/html;charset=UTF-8");
2.当前页面的语言：language="java"  不写默认是java

【2】导包快捷键： alt+enter

1.使用哪个包下的就导入哪个包下的类或者接口
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
2.一起导入
<%@ page import="java.util.ArrayList,java.text.SimpleDateFormat,java.util.Date" %>
java.util.* 导入java.util包下所有的内容
<%@ page import="java.util.*,java.text.SimpleDateFormat" %>

【3】 错误页面 配置

<%--配置错误页面
    如果当前页面报错直接跳转到error.jsp页面
--%>
<%@ page errorPage="/error.jsp" %>

<%--
  Created by IntelliJ IDEA.
  User: cfl
  Date: 2020-11-22
  Time: 11:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--声明当前页面是一个错误页面，其他页面报错了找到这个页面
    	isErrorPage="true" 表示当前页面是一个错误页面，如果值是true表示可以使用对象exception获取错误信息。默认是false
--%>
<%@page isErrorPage="true" %>


    


    
异常了
    <%--获取报错页面的异常信息--%>
    <%
        String message = exception.getMessage();
        response.getWriter().print(message);
    %>

taglib指令

作用：用来导入第三方标签库的，例如下面讲解的JSTL标签库。

【1】格式

<%@ taglib uri="标签库地址" prefix="标签前缀" 。。。 %>

【2】代码实现

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
说明：表示引入外部的jstl标签库的。
prefix="c" 表示前缀
uri="http://java.sun.com/jsp/jstl/core" 表示jstl标签库的地址

include指令

【1】作用：表示在一个jsp页面静态包含某个jsp页面。

【2】格式：

<%@include file="URL" %> 指定要导入页面的地址

内容小结

1、page 指令：
    1.解决响应乱码和指定语言
    2.导包，使用快捷键：alt+enter
    3.可以设置错误页面<%@ page errorPage="/error.jsp" %>
    4.声明当前页面是一个错误页面：<%@ page isErrorPage="true" %> 然后就可以在当前jsp页面中使用获取错误信息的jsp内置对象：		exception
    
2、taglib 指令
作用：用来导入第三方标签库的，例如下面讲解的JSTL标签库
<%@ taglib uri="标签库地址" prefix="标签前缀" 。。。 %>

3、include 指令
作用：表示在一个jsp页面静态包含某个jsp页面。
静态导入jsp的格式
<%@ include file="引入的jsp地址"%>

5、开发中配置错误信息页面【掌握】

在web.xml中进行配置错误信息页面。

【1】配置错误状态码错误信息

web.xml配置

 	
    <error-page>
        
        <error-code>404error-code>
        
        <location>/404.jsplocation>
    error-page>

说明：只要访问的资源不存在报404错误就会访问404.jsp页面。

404.jsp

<%--
  Created by IntelliJ IDEA.
  User: tiansuo
  Date: 2020-11-22
  Time: 11:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


    <%--404图片--%>
    

【2】配置服务中的常见异常信息

web.xml

 
    <error-page>
       
        <exception-type>java.lang.NullPointerExceptionexception-type>
        
        <location>/null.jsplocation>
    error-page>

demo.jsp

<%--
  Created by IntelliJ IDEA.
  User: tiansuo
  Date: 2020-11-22
  Time: 11:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


    <%
        String s = null;
        s.length();
    %>

null.jsp

<%--
  Created by IntelliJ IDEA.
  User: tiansuo
  Date: 2020-11-22
  Time: 11:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


    
空指针了。。。

6、JSP九大内置对象

【1】作用**：在JSP页面中不需要获取和创建，可以直接使用的对象**

【2】JSP一共有9个内置对象

	变量名				  真实类型					作用
	pageContext		    PageContext			 	// 当前页面中共享数据（域对象）
    request				HttpServletRequest      // 一次请求中共享数据（域对象）
    session             HttpSession				// 一次会话中共享数据（域对象）
    application			ServletContext			// 整个web应用共享数据（域对象）
    -----------------------------------------------
    response			HttpServletResponse		// 响应对象
    page（this）				Object			   // 当前页面(servlet)对象
    out                 JSPWriter				// 输出对象
    config              ServletConfig			// servlet配置对象
    exception           Throwable				// 异常对象（默认关闭...）		

* 常用
	1. pageContext
			1）当前页面的域对象，作用方法：仅限于当前jsp页面
			2）获取其他八个内置对象		
	2. request
			1）接收用户请求（参数）
			2）一次请求中域对象
			
	3. response
			1）设置响应
				字节流
				字符流
	4. out
			1）专门在jsp中处理字符输出流
				print(); // 在网页中输出内容

7、【案例】用jsp更改之前的登录系统

使用jsp的好处是：1.页面更加好看 2.不用在servlet使用java代码响应给浏览器html标签了

【1】LoginServlet：用户名和密码错误跳转到login.jsp页面

【2】login.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    
    

    
    
    
    


<%--
    使用java代码取出request域对象的数据
--%>
<%
    String msg = (String) request.getAttribute("msg");
%>

    

        
登录页面
        <%=msg%>
        
        
        登录
    

二、EL表达式【重要】

1、EL引入

上述使用jsp改造了登录案例有问题，我们既然发现login.jsp整体页面结构和login.html页面结构是一致的，那么我们是否可以只保留login.jsp呢。

可以实现，好处简化代码开发。随之带来的问题：

如果直接登录login.jsp页面，由于request域对象中还没有数据，那么执行代码：

msg是null所以第一次访问就会显示null。我们这里可以使用EL表达式来解决：

EL表达式：${msg},如果msg有数据，则显示，没有内容则不显示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0eUvZsw3-1620059064976)(/image-20201122152316667.png)]

2、EL表达式的介绍

• 理解什么是EL表达式以及作用
• 能够使用EL表达式从域对象中获取数据

【1】EL全称： Expression Language 中文的意思是EL表达式。

【2】主要作用：从jsp四大域对象(pageContext,request,session,application)中获取数据。

【3】取值格式：${四大域对象在el中的名字.域对象中key}

域对象	在EL中的对象名称	在servlet中的对象名	说明
page域	pageScope	pageContext，属于javax.servlet.jsp.PageContext类的对象	page域指的是当前JSP页面，其中存储的数据只在当前页面有效，因为jsp本质是servlet，所以page域只在一个servlet中有效。
request域	requestScope	request，属于javax.servlet.http.HttpServletRequest接口的对象	request域：一次请求或请求链中request域
session域	sessionScope	session,属于javax.servlet.http.HttpSession接口的对象	session域：一次会话过程中，session域
application域	applicationScope	application，属于javax.servlet.ServletContext接口的对象	application域：服务启动后整个项目对应的ServletContext域

EL从四大域对象中获取数据

域对象	取值方式
page域	${pageScope.key}
request域	${requestScope.key}
session域	${sessionScope.key}
application域	${applicationScope.key}

【4】代码演示

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%--
1. 在一个JSP页面中，
   使用脚本片段分别向page域、request域，session域，application域和中存储数据；
    --%>
    <%
        //1.page域
        pageContext.setAttribute("page","page域的数据");
        //2.request域
        request.setAttribute("request","request域的数据");
        //3.session域
        session.setAttribute("session","session域的数据");
        //4.application域
        application.setAttribute("application","application域的数据");
    %>

    <%--2. 使用EL表达式从这4个域中取值；--%>
    page域:${pageScope.page}<br>
    request域:${requestScope.request}<br>
    session域:${sessionScope.session}<br>
    application域:${applicationScope.application}<br>
</body>
</html>

3、EL表达式【搜索数据注意事项】

• 掌握使用EL表达式从jsp四大域对象中获取数据省略不写对象名的特点

【1】如果使用EL表达式从jsp四大域对象中获取数据的时候不书写对象名，那么从小向大依次查找，

​ 直到找到为止 。使用的时候建议加对象名，这样提高搜索效率

【2】代码实现

<%--
  Created by IntelliJ IDEA.
  User: tiansuo
  Date: 2020-11-22
  Time: 15:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


        <%
            //2.request域
            request.setAttribute("username","request域的数据");
            //3.session域
            session.setAttribute("username","session域的数据");
        %>
        request域：${requestScope.username}

        session域：${sessionScope.username}

        <%--
            省略对象名：request域的数据
            如果使用EL表达式从jsp四大域对象中获取数据的时候不书写对象名，那么从小向大依次查找，直到找到为止    。
            使用的时候建议加对象名，这样提高搜索效率
        --%>
        省略对象名：${username} 

4、EL表达式从cookie中取值

• 掌握使用EL表达式在jsp页面中获取cookie中的value

【1】回顾：创建cookie对象

new Cookie(name,value)

【2】使用EL表达式在jsp页面中获取cookie中的value

${cookie.cookie的name属性值.value}

【3】实现步骤

1.创建一个登录的jsp页面

2.创建一个登录的servlet

3.在登录的servlet中获取页面提交的用户名和密码以及复选框按钮

4.如果用户希望记住用户名和密码我们创建cookie，并响应给浏览器

5.在login.jsp页面中使用EL取出cookie中的数据

login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    



    <%--
        5.在login.jsp页面中使用EL取出cookie中的数据
    --%>
    <%--${cookie.cookie的name属性值.value}--%>
    <%--Cookie cookie1 = new Cookie("username", username);--%>
        <%--
            ${cookie.username.value} 使用cookie对象结合EL从浏览器中取出用户名
        --%>
 --------------------------------------------------------------------------
    

    <%--Cookie cookie2 = new Cookie("password", password);--%>
    

 --------------------------------------------------------------------------
    
    

    记住用户名和密码

Login2Servlet类

//2.创建一个登录的servlet
@WebServlet("/login2Servlet")
public class Login2Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //3.在登录的servlet中获取页面提交的用户名和密码以及复选框按钮
        //用户名
        String username = request.getParameter("username");
        //密码
        String password = request.getParameter("password");
        //复选框值
        String ck = request.getParameter("ck");
        //4.如果用户希望记住用户名和密码我们创建cookie，并响应给浏览器
        if("on".equals(ck)){
            Cookie cookie1 = new Cookie("username", username);
            Cookie cookie2 = new Cookie("password", password);
            //设置存活时间
            cookie1.setMaxAge(60*60);
            cookie2.setMaxAge(60*60);
            response.addCookie(cookie1);
            response.addCookie(cooke2);
        }

    }
}

5、EL运算符

算术运算

运算符	说明	使用示例	结果
+	加	${n1+n2}	70
-	减	${n1-n2}	10
*	乘	${n1*n2}	1200
/或div	除	${n1/n4}	4
%或mod	取余	${n1%n4}	0

关系运算

运算符	说明	使用示例	结果
== 或 eq	等于 equal	${n1 == n2}	false
!= 或ne	不等于 not equal	${n1 != n2}	true
> 或 gt	大于 greater than	${n1 > n2}	true
>= 或ge	大于等于 greater than or equal	${n1 >= n2}	true
< 或 lt	小于 less than	${n1 < n2}	false
<= 或le	小于等于 less than or equal	${n1 <= n2}	false

逻辑运算

运算符	说明	使用示例	结果
&& 或 and	逻辑与,一假即假	${true && false}	false
|| 或 or	逻辑或，一真即真	${true || false}	true
! 或 not	非，取反	${!false}	true

三元运算

<%--
 	表达式1?表达式2：表达式3
--%>
三元运算符：

${n1>=n2?"正确":"错误！"}

empty运算

【1】表示判断的内容是否为空，以下三种情况被认为是空：

>**1.空字符串**
>
>**2.没有数据的集合**
>
>**3.对象是null**
>
>只要满足上述三种情况结果就是true。
>
>    1.空字符串 ""
>    2.没有数据的集合集合长度是0
>    3.对象是null

【2】使用格式

// 判断的内容是否为空
${empty 对象名}

// 取反
${not empty 对象名}

【3】代码实现

<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.Date" %>
<%--
  Created by IntelliJ IDEA.
  User: tiansuo
  Date: 2020-11-22
  Time: 16:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%
        request.setAttribute("n1","10");
        request.setAttribute("n2","20");
        request.setAttribute("n3",30);
        request.setAttribute("n4",40);
    %>
    <%--
        1.EL的运算符：和java一致
    --%>
    <%--结果是 10--%>
    n3%n2:${n3 mod n2} <br>

    <%--
        2.EL的关系运算：和java一致
    --%>
    <%--结果是 true--%>
    n4大于等于n1:${n4 ge n1}<br>
    <%--
       3.EL的三元运算：和java一致
   --%>
    <%--判断n1是否大于等于n2--%>
    n1是否大于等于n2：${n1 ge n2 ? "正确" : "错误"}<br>

    <%--
       4.empty运算：

        1.空字符串
        2.没有数据的集合
        3.对象是null
        只要满足上述三种情况结果就是true。
   --%>
    <%
        //创建空字符串
        String s = "";
        //空集合
        ArrayList<String> list = new ArrayList<String>();
        //空对象
        Date date = null;

        //存到域对象中
        request.setAttribute("s",s);
        request.setAttribute("list",list);
        request.setAttribute("date",date);
    %>
    <%--true--%>
    1.空字符串 : ${empty requestScope.s} <br>
    <%--true--%>
    2.没有数据的集合:${empty requestScope.list}<br>
    <%--true--%>
    3.对象时null:${empty requestScope.date}<br>
    <%--false--%>

    取反：${not empty requestScope.date}<br>

</body>
</html>

三、JSTL标签库【掌握】

【问题引入】

我们之前在jsp页面中既书写了java代码又书写了html标签，这样会造成页面看起来很乱，

并且java代码和html标签严重耦合在一起，给维护带来极大的不方便。

【解决问题】

使用JSTL标签库来取代在jsp页面中书写java代码。就是使用标签代替java代码。

1、JSTL标签库的介绍

The JavaServer Pages Standard Tag Library，简称JSTL。

JSTL标签库底层使用java代码完成的。属于第三方的：Apache，使用的时候需要导包。

2、JSTL核心标签库【掌握】

标签名称	作用
(掌握)	通常用于输出一段文本内容到客户端浏览器
	用于设置各种Web域中的属性
	用于删除各种Web域中的属性
	用于捕获嵌套在标签体中的内容抛出的异常
(掌握)	java代码if(){}语句功能
	用于指定多个条件选择的组合边界，它必须与c:when和c:otherwise标签一起使用
(掌握)	代替java代码for循环语句
	迭代操作String字符
	给请求路径添加参数
	重写url，在请求路径添加sessionid
	用于在JSP页面中导入一个URL地址指向的资源内容
	用于将当前的访问请求转发或重定向到其他资源

(掌握)

• 能够使用标签向页面输出数据

【1】作用：表示向浏览器中输出数据。

【2】步骤：

1.导入jstl的jar包

2.创建jsp页面

3.在jsp页面使用jsp的常见指令taglib导入标签库

<%@ taglib uri=“标签库地址” prefix=“标签前缀” 。。。 %>

	1.http://java.sun.com/jsp/jstl/core 表示JSTL的标签库地址
	2.prefix="c" 前缀即c:...
<%@ taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

4.使用JSTL标签输出内容

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: tiansuo
  Date: 2020-11-22
  Time: 16:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


    <%--使用JSTL标签输出内容--%>
    

(掌握)

• 能够使用标签进行条件的判断

【1】需求：使用java代码在jsp页面向request域对象中存储一个对象，

使用标签判断该对象是否为空

【2】格式：

	文本
标签的作用相当于java中的if判断语句。
1.test属性值中书写的是判断条件，这里书写EL表达式
2.如果判断条件为true则执行文本内容，如果为false则不执行文本内容

【3】代码实现

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: tiansuo
  Date: 2020-11-22
  Time: 16:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


    <%--
        使用java代码在jsp页面向request域对象中存储一个对象，使用``标签判断该对象是否为空
    --%>
    <%
        //向request中存储数据
        request.setAttribute("s","abc");
    %>
    <%--
        使用JSTL标签：c:if判断request域对象中的s是否等于null
    --%>
    
        
    

    
        
    

c:foreach标签(掌握)

• 能够使用c:foreach标签遍历数组

1.格式

 
        数据:${var的属性值}
 

2.items="${requestScope.a}" 表示从request域对象中取出数组名a

request.setAttribute(“a”,arr); items支持EL表达式

3**.var=“x” 表示数组中的数据，不支持EL**

4.如果取出var的变量保存的数据必须使用EL表达式 ：${var的属性值}

c:foreach标签相当于java中的for循环，标签的属性如下

// 变量名 ：数组或者集合中的数据
for(数组或者集合数据类型 变量名 : 数组或者集合名){
}
举例：
//增强for循环 x相当于var  arr 相当于items
int[] arr ={10,20,30};
for(int x : arr){
    System.out.println(x);
}
上面等价于下面的JSTL格式：
<c:foreach var="x" items="数组名">
    ${x}
</c:foreach>
----------------------------------------------
//普通for循环 i=1 相当于 begin=0
<c:foreach begin="0" end="${arr.length-1}" step="1"/>
上面等价于下面的JSTL格式：   
for(int i=0;i<arr.length;i++){
     System.out.println(arr[i]);
}

【1】遍历普通数组

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: tiansuo
  Date: 2020-11-22
  Time: 16:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


    <%--
        使用JSTL遍历普通数组；
    --%>
    <%
        //1.定义数组
        int[] arr = {10,20,30};
        //2.使用java的for循环遍历
        //x表示数组中的数据  arr表示数组
        for (int x : arr) {
            response.getWriter().print(x);
        }
        //将arr数组存储到request中
        request.setAttribute("a",arr);
    %>

    <%--使用c:foreach进行遍历--%>
    <%--
        1.items="${requestScope.a}" 表示从request域对象中取出数组名a  request.setAttribute("a",arr);
            items支持EL表达式
        2.var="x" 表示数组中的数据，不支持EL
        3.如果取出var的变量保存的数据必须使用EL表达式 ：${var的属性值}
    --%>
    
        数据:${x}
    

3、使用JSTL标签库的c:foreach遍历集合【掌握】

遍历map集合

使用JSTL的c:foreach标签遍历map集合，var中保存的是键值对整体对象，

我们需要使用var的属性值.key获取map集合的键，使用var的属性值.value获取map集合值。

• 掌握使用c:foreach标签遍历map集合

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.HashMap" %><%--
  Created by IntelliJ IDEA.
  User: tiansuo
  Date: 2020-11-23
  Time: 8:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


    <%--遍历map集合--%>
    <%--脚本片段--%>
    <%
        //1.创建map集合
        HashMap hm = new HashMap();
        //2.添加数据
        hm.put("001","湖人队");
        hm.put("002","勇士队");
        hm.put("003","马刺队");
        hm.put("004","猛龙队");
        //3.将map集合存储到域对象中
        request.setAttribute("map",hm);
    %>

    <%--使用jstl标签遍历map集合--%>
    <%--
        1.items="${requestScope.map}" 表示从request域对象中获取map集合
        2.var="entry" entry表示map集合中的每个键值对对象
    --%>
    
        key:${entry.key},value:${entry.value}

    

浏览器显示结果：

遍历list集合 【开发经常使用】

• 掌握使用c:foreach标签遍历list集合

使用c:foreach标签遍历list集合中的实体类对象，var中的属性值就是list集合的每个实体类对象，然后使用实体类对象调用实体类的成员变量名即可获取数据，其实调用的是实体类的get方法。

需求：在servlet中向list集合中存储几个Product商品对象，然后将list集合存储到request中，

并转到jsp页面，在jsp页面中使用jstl+el取出数据。

步骤：

1.创建一个实体类Product

package com.itheima.sh.a_jstl_01;
//1.创建一个实体类Product
public class Product {
    private String pname;
    private double price;

    public Product() {
    }

    public Product(String pname, double price) {
        this.pname = pname;
        this.price = price;
    }

    public String getPname() {
        return pname;
    }

    public void setPname(String pname) {
        this.pname = pname;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    @Override
    public String toString() {
        return "Product{" +
                "pname='" + pname + '\'' +
                ", price=" + price +
                '}';
    }
}

2.创建一个servlet，将数据封装到实体类中，然后将多个实体类对象放到list集合中，

最后将list集合放到request中

@WebServlet("/productListServlet")
public class ProductListServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /*
            2.创建一个servlet，将数据封装到实体类中，然后将多个实体类对象放到list集合中，最后将list集合放到request中
         */
        //将数据封装到实体类中
        Product p1 = new Product("笔记本", 9999);
        Product p2 = new Product("手机", 5999);
        Product p3 = new Product("电视机", 3999);

        //然后将多个实体类对象放到list集合中
        ArrayList<Product> list = new ArrayList<Product>();
        Collections.addAll(list, p1, p2, p3);

        //最后将list集合放到request中
        request.setAttribute("products",list);

        //转发到jsp页面
        request.getRequestDispatcher("/productList.jsp").forward(request,response);
    }
}

3.创建jsp页面，在该页面中取出list数据并显示页面

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


    <%--3.创建jsp页面，在该页面中取出list数据并显示页面--%>
    <%--
        1.items="${requestScope.products}"  表示获取request中的集合对象即 request.setAttribute("products",list);
        2.var="p" 表示list集合中每个商品对象

        3.${p.pname} p表示商品对象，p.pname底层调用了Product实体类中的getPname()方法
    --%>
    
    
        商品名:${p.pname},
        惊爆价:${p.price}

    
    

四、案例【查询书籍并显示并响应给浏览器】

1、需求

使用jstl+el获取list集合中的数据显示到页面中。

点击查询所有书籍按钮，将数据库的所有书籍信息显示到页面中。

2.实现步骤

1.搭建项目环境

2.创建主页的jsp页面

3.创建servlet接收请求

4.创建业务层，在业务层中使用mybatis调用dao层查询数据库的数据

5.创建dao层，定义方法使用注解向数据库查询数据

6.在展示书籍信息的页面展示所有的书籍

3.代码实现

1）搭建项目环境

1.1数据库环境

create table book (
	id int primary key auto_increment,
	name varchar(30),
	author varchar(20),
	price double
);

insert into book (name,author,price) values ('红楼梦','曹雪芹',150.36),('西游记','吴承恩',78.29),('JavaEE SSH实战开发','NewBoy',38.8),('三国演义','罗贯中',58.45);

select * from book;

1.2导包

1.3创建的包

1.4导入配置文件

【1】创建存储配置文件的目录

说明：resources目录相当于src目录。

【2】导入配置文件

1.5导入工具类

/**
 * @author tiansuo
 * @date 2019-11-12 10:02
 *  会话工厂工具类
        1. 通过静态方法得到一个工厂对象
        2. 通过静态方法得到会话对象
 *
 */
public class SessionFactoryUtils {
    //声明一个工厂对象
    private static SqlSessionFactory factory;
    //在静态代码块中创建会话工厂
    static {
        SqlSessionFactoryBuilder builder = new SqlSessionFactoryBuilder();
        //得到输入流
        try(InputStream inputStream = Resources.getResourceAsStream("mybatis-config.xml");) {
            factory = builder.build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    /**
     静态方法得到会话工厂
     */
    public static SqlSessionFactory getSessionFactory() {
        return factory;
    }
    /**
     得到会话对象
     */
    public static SqlSession getSession() {
        return factory.openSession();
    }
}

1.6Book实体类

public class Book {
    //成员变量
    private Integer id;
    private String name;
    private String author;
    private Double price;
    //构造方法

    public Book() {
    }

    //成员方法

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public Double getPrice() {
        return price;
    }

    public void setPrice(Double price) {
        this.price = price;
    }

    @Override
    public String toString() {
        return "Book{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", author='" + author + '\'' +
                ", price=" + price +
                '}';
    }
}

2）创建主页index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    


查询所有的书籍

3）创建servlet接收请求

@WebServlet("/queryAllServlet")
public class QueryAllServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.创建业务层对象
        UserService userService = new UserService();
        //2.使用业务层对象调用查询所有书籍的方法,返回list集合
        List<Book> list =  userService.queryAllBooks();
        //3.将list集合放到request中
        request.setAttribute("bookList",list);
        //4.转发到展示书籍jsp页面books.jsp
        request.getRequestDispatcher("/books.jsp").forward(request,response);
    }
}

4）service层

创建业务层，在业务层中使用mybatis调用dao层查询数据库的数据

public class UserService {
    //创建业务层，在业务层中使用mybatis调用dao层查询数据库的数据
    public List<Book> queryAllBooks() {
        //1.使用工具类获取mybatis中的session
        SqlSession session = SessionFactoryUtils.getSession();
        //2.使用session会话对象调用方法获取接口代理对象
        BookMapper mapper = session.getMapper(BookMapper.class);
        //3.使用接口代理对象调用方法获取所有的书籍存储到list集合中
        List<Book> list = mapper.queryAllBooks();
        //4.返回list集合给web层
        return list;
    }
}

5）dao层

创建dao层，定义方法使用注解向数据库查询数据

package com.itheima.sh.dao;

import com.itheima.sh.pojo.Book;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface BookMapper {
    //查询所有的书籍
    @Select("select * from book")
    List<Book> queryAllBooks();
}

6）显示所有的书籍 books.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    



    <%--使用jstl结合EL从后台queryAllServlet的reques域对象中取出数据--%>
    <%--tr>td*4 按tab--%>
    
    
        

    
书籍列表
    

        
编号
        
书籍名称
        
作者
        
价格
    

            
${book.id}
            
${book.name}
            
${book.author}
            
${book.price}
        
    
    

五、Bootstrap前端框架【了解】

1、Bootstrap的简介

什么是框架：

在现有的语言基础上，由第三方厂商美国Twitter公司开发的一些功能组件，可以提高开发效率，降低开发难度。学会使用这些框架来开发程序。

说明：

由于学习的java是oracle公司的，所以第一方指的是oracle公司。作为学习java的我们，我们属于第二方。而第三方就是除了我们和oracle公司以外的公司，比如最为有名的第三方公司是Apache。

作用与优势：

用于前端开发的框架，主要基于我们之前学习的HTML、CSS和JavaScript技术

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：Bootstrap支持所有的主流浏览器。如：Internet Explorer、 Firefox、 Opera、 Google Chrome、Safari。

响应式设计

概念：

一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。响应式布局基于HTML和CSS，才可以实现。

特点：一个网页可以自动适应设备的宽度，在手机，平板，电脑看到的是同一个页面。

说明：一般不会将一个非常复杂的网页作为响应式，如电脑版本的淘宝和京东。响应式一般应用于比较简单的网页。

在bootstrap中一共将设备分成四类：微型xs，小型sm，中型md，大型lg

官网下载：

中文官网：www.bootcss.com

Bootstrap的目录结构

1.设置全局 CSS 样式：基本的 HTML元素均可以通过 **class 设置样式并得到增强效果。**

2.JavaScript 插件：为 Bootstrap 的组件赋予了“生命”。
BootStrap使用JavaScript插件之后就是可以实现数据的交互。要不然数据无法交互，那么就是静态页面了。

3.组件：无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

 Bootstrap：
  ├── css/  全局的CSS样式，把所有的标签重新定义了样式
  │   ├── bootstrap.css    样式文件，标准版
  │   ├── bootstrap.min.css  压缩版，我们开发的时候使用压缩版
  │   ├── bootstrap-theme.css  
  │   ├── bootstrap-theme.min.css    
  ├── js/  JavaScript的插件目录
  │   ├── bootstrap.js   
  │   └── bootstrap.min.js  导入这个JS文件
  └── fonts/ 字体图标，用于在网页上使用各种BootStrap提供的小图标，如果不用，这个文件夹可以不复制。
      ├── glyphicons-halflings-regular.eot
      ├── glyphicons-halflings-regular.svg
      ├── glyphicons-halflings-regular.ttf
      ├── glyphicons-halflings-regular.woff
      └── glyphicons-halflings-regular.woff2

压缩版与标准版的区别

压缩版(min)与标准版的功能是一样的，压缩版文件更小，更省资源，加载速度更快。但是没有换行，没有注释，变量名都很短。只是阅读性比较差。

目录下的字体图标

2、创建Bootstrap模板

只需要创建一次，以后可以直接复制这个模板使用

1)新创键一个静态Web项目 bootstrap_demo。

2)将解压出来的三个文件夹css、js、fonts赋值到项目bootstrap_demo中。

3)将课前资料中jQuery类库jquery-3.2.1.min.js文件复制到js文件夹下。

4)在day05_bootstrap项目下新创建一个HTML文件index.html。

5)将页面上"起步基本模板"代码复制到index.html中。

​ 说明：如果能够上网直接到主页找到起步，然后找到基本模板。

<html lang="zh-CN">

<head>
   
    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap 101 Templatetitle>

    
    <link href="css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<h1>你好，世界！h1>

<script src="js/jquery-3.2.1.min.js">script>

<script src="js/bootstrap.min.js">script>
body>
html>

3、全局CSS样式

按钮：普通按钮

可作为按钮使用的标签或元素，为 、 或 元素添加按钮类。

预定义样式的按钮：

有不同颜色的按钮

<div class="container">
    <h3>预定义按钮h3>
    <input type="button" class="btn btn-primary" value="我是首选项按钮"/>
    <input type="button" class="btn btn-success" value="我是成功按钮"/>
    <input type="button" class="btn btn-info" value="我是一般信息按钮"/>
div>

表格

表格就是table，为任意

标签添加 table类可以为其赋予基本的样式 ，可以完成对表格的美化。可以通过bootstrap主页中的全局CSS样式中的右侧表格来学习表格知识。

表格的样式	类名，class属性值
基本实例	table
条纹状表格，就是隔行颜色有点类似斑马纹	table-striped
带边框的表格	table-bordered
鼠标悬停	table-hover

表格中的状态类

单独对某个td或tr设置不同的颜色，通过这些状态类可以为行或单元格设置颜色。

class属性值	描述
active	鼠标悬停在行或单元格上时所设置的颜色
success	标识成功或积极的动作，浅绿色
info	标识普通的提示信息或动作
warning	标识警告或需要用户注意

接到主页找到起步，然后找到基本模板。

<html lang="zh-CN">

<head>
   
    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap 101 Templatetitle>

    
    <link href="css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<h1>你好，世界！h1>

<script src="js/jquery-3.2.1.min.js">script>

<script src="js/bootstrap.min.js">script>
body>
html>

3、全局CSS样式

按钮：普通按钮

可作为按钮使用的标签或元素，为 、 或 元素添加按钮类。

预定义样式的按钮：

有不同颜色的按钮

<div class="container">
    <h3>预定义按钮h3>
    <input type="button" class="btn btn-primary" value="我是首选项按钮"/>
    <input type="button" class="btn btn-success" value="我是成功按钮"/>
    <input type="button" class="btn btn-info" value="我是一般信息按钮"/>
div>

表格

表格就是table，为任意

标签添加 table类可以为其赋予基本的样式 ，可以完成对表格的美化。可以通过bootstrap主页中的全局CSS样式中的右侧表格来学习表格知识。

表格的样式	类名，class属性值
基本实例	table
条纹状表格，就是隔行颜色有点类似斑马纹	table-striped
带边框的表格	table-bordered
鼠标悬停	table-hover

表格中的状态类

单独对某个td或tr设置不同的颜色，通过这些状态类可以为行或单元格设置颜色。

class属性值	描述
active	鼠标悬停在行或单元格上时所设置的颜色
success	标识成功或积极的动作，浅绿色
info	标识普通的提示信息或动作
warning	标识警告或需要用户注意
danger	标识危险或潜在的带来负面影响的动作

---

具体操作可参考官网呀
读到此处的小哥哥小姐姐们点个赞吧！
ღ( ´･ᴗ･` )比心