bootstrap与前后端交互

1、bootstrap

bootstrap是已经封装好的css样式，通过类选择器(class)进行调用。

<html>
    <head>
        <title>bootStrap</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
    <body>
    </body>
</html>

在bootstrap（以下简称bs）中，有一些常用的样式。

1、控制尺寸

一般有默认、sm、md和lg四种尺寸，依次增大。
<%--这是一个大号的输入框--%>
<input type="text" class="form-control-lg">

2、控制色彩

默认、primary、secondary、info、warning、danger、dark和light
<%--div背景色为info，内部文本颜色为danger--%>
<div class="bg-info text-danger">123</div>

3、控制排版

在bs中，将父容器分为12等分，并且内部的块级标签并不会自动换行。
<%--在父容器类选择器为row，表示内部分为12等分--%>
<div class="row">
    <%--col-sm-x，其中x为比例，多个子容器比例之和超过12，那么超过12的子容器会移到下一行--%>
    <div class="col-sm-6 bg-info">123</div>
    <div class="col-sm-6 bg-warning">123</div>
</div>

4、其他常用样式

<div calss="bg"></div>背景设置
<div calss="text"></div>文本设置
<input type="text" class="form-control form-control-sm" name="num1">输入框设置无边框，体积小
<button class="btn btn-sm btn-info ml-2" type="submit">确定</button>按钮设置大小颜色
mt、mr、mb、ml ->margin的上右下左间距，后接-x，x表示长度
p-x -> x表示数字，p表示padding

2、前后端交互（计算器）

所有前后端交互均在在tomcat环境下。

1、Servlet类接收/传给前端数据

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

//servlet类需要用这个注解标注接受数据的地址
/**
1、地址最前面一定要加/
2、在地址栏后面加上/test，属于get请求，可以执行doGet方法内部代码
3、在前段可以通过其他方法发送请求，执行后端相应方法
*/
@WebServlet("/test")
public class TestServlet extends HttpServlet {
    //本次用两种请求：get和post
    //get方式一般会在url后面把参数带上,post并不会
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    }
}

1、后端获取数据（以get请求为例）

 @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
        //这个方法可以获得前端传来的数据，数据类型为字符串
        String param = req.getParameter("param");
    }

2、后端在接受数据的如何打开新页面

在get请求后，一定会打开一个新的页面，如果不进行处理，就会显示一片空白。
 @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
        //打开一个result.jsp的新页面，这个页面在原页面同级目录下
        req.getRequestDispatcher("result.jsp").forward(req, resp);
    }

3、后端将数据传回前端

 @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
        //obj表示传回的数据，str表示数据传回是的名字，前端根据这个str显示信息
        req.setAttribute(String str,Object obj);
    }

2、前端发送/接收数据

1、发送数据

1、地址栏输入

主页地址/test?数据参数名1=数据1&数据参数名2=数据2
在后端如果这样定义两个数据
 @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String param1 = req.getParameter("param1");
        String param2 = req.getParameter("param2");
    }
在地址栏输入：主页地址/test?param1=hello&param1=world，确认后java后端就能接收到"hello"和"wrold"两个字符串

2、超链接形式

<%--点击超链接是相当于向地址栏输入地址--%>
<a href="主页地址/test?数据参数名1=数据1&数据参数名2=数据2">提交数据</a>

3、表单提交

<%--action内填入对应地址，method指请求方式--%>
<form action="test" method="post">
    <%--点击submit按钮后提交表单至后端--%>
    <button type="submit">
        提交
    </button>
</form>

2、接收数据

//以res的名称提交数据3
req.setAttribute("res",3);
//设置前端转到的页面为result.jsp
req.getRequestDispatcher("result.jsp").forward(req, resp);

该页面为result.jsp

<html>
    <head>
        <title>结果</title>
    </head>
    <body>
        <%--${后端传入数据名}--%>
        结果=${res}
    </body>
</html>