Web学习笔记

flask库
前端基础
- - - 超链接：
    - 空连接：
    - 图片：
    - 视频（音频）：
    - 嵌套使用
    - 列表
    - 表格
    - 格式化表格
    - input表单系列
网络请求
- - - GET方式
    - POST请求
    - 通过GET方式获取输入参数
    - 通过POST方式获取输入参数
    - 注册页面
CSS
- - 三种使用方式
  - - 行内式
    - 外联式
    - 内嵌式
  - 选择器
  - - 1、类选择器
    - 2、id选择器
    - 3、标签选择器
    - 4、通配符选择器
    - 5、属性选择器
    - 6、后代选择器
  - CSS样式
  - - 高度与宽度
    - 字体和颜色
MySQL基础
- SQL语言
- - - SQL分类
  - DDL
  - DML
  - DQL
  - 约束
- 事务
JDBC
JavaSvript
- 基础语法
- BOM对象
- DOM
- 事件监听
HTTP
- HTTP请求数据格式
- HTTP响应数据格式
Tomcat
- Maven Web项目
Servlet
- request
- response

flask库

基本使用方法：python与前端交互

from flask import Flask, render_template, request

app = Flask(__name__, template_folder="templates")

# 用户在浏览器访问/chat时自动执行 index() 函数。
@app.route("/chat")
def index():
    # return "中国联通！"
    # 将html文件放在templates文件夹下
    return render_template("./open1.html") 

@app.route("/chat")
def index2():
    return render_template("./open2.html")  

if __name__ == "__main__":
    app.run(port=8000)  # 自定义端口号（默认5000）

前端基础

<h1>一级标签</h1>
<h2>二级标签</h2>
<div>块级标签（占一行）</div>
<span>行内标签（不独立占行）</span>

<b>文本加粗</b>
<strong>文本加粗</strong>

<u>下划线</u>
<ins>下划线</ins>

<i>倾斜</i>
<em>倾斜</em>

<s>删除线</s>
<del>删除线</del>

<!-- hr水平分割线 br换行符 p段落 -->
<hr>
<br>

<!-- 空格 -->
我要&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学习

<!-- 行内式CSS -->
<div>
    /* 注释 */
    <span style="color: red;">时间</span>
    <span>2020.10.10</span>
</div>

超链接：

target="_blank"在新窗口打开标签，默认是覆盖原网页

<a href="https://www.baidu.com/" target="_blank">百度</a>

空连接：

<a href="#">空链接</a>

图片：

也可以设置width=10% 这种。

<img src="R.jpg" alt="加载失败的替换文本" title="鼠标悬停时的提示文字" width="400">

视频（音频）：

controls表示显示播放的控件，autoplay自动播放(部分浏览器不支持)，loop循环播放

<audio src="时间的尽头.mp3" controls autoplay loop></audio>

嵌套使用

点击图片即可跳转到链接

<a href="https://www.baidu.com/" target="_blank">
    <img src="../baidu.png" alt="百度一下" width="300px">
</a>

列表

无序列表

<ul>
    <li>榴莲</li>
    <li>香蕉</li>
    <li>苹果</li>
</ul>

有序列表

<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>

自定义列表

<dl>
    <dt>主题1</dt>
    <dd>项目1</dd>
    <dd>项目2</dd>
    <dt>主题2</dt>
    <dd>项目1</dd>
    <dd>项目2</dd>
</dl>

表格

<table border="1" width="300" height="100">
    <caption><strong>学生成绩单</strong></caption>
    <tr> <!-- tr表示行 -->
        <th>姓名</th>   <!-- th表示表头单元格 -->
        <th>成绩</th>
        <th>评语</th>
    </tr>
    <tr>
        <td>司马懿</td>  <!-- tr表示普通单元格 -->
        <td>90</td>
        <td>真棒</td>
    </tr>
    <tr>
        <td>诸葛亮</td>
        <td>100</td>
        <td>非常棒</td>
    </tr>
</table>

格式化表格

<table border="1" width="300" height="100">
    <caption><strong>学生成绩单</strong></caption>
    <thead>
        <tr> <!-- tr表示行 -->
            <th>姓名</th>   <!-- th表示表头单元格 -->
            <th>成绩</th>
            <th>评语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>司马懿</td>  <!-- tr表示普通单元格 -->
            <td rowspan="2">90</td><!-- rowspan跨行合并 -->
            <td>真棒</td>
        </tr>
        <tr>
            <td>诸葛亮</td>
            <td>非常棒</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">总结</td><!-- colspan跨列合并 -->
        </tr>
    </tfoot>
</table>

input表单系列

具有重置提交按钮的输入框

<form method="post" action="提交地址">
    <input type="text" placeholder="输入用户名"><br>
    <input type="password" placeholder="请输入密码"><br>
    <input type="reset">
    <input type="submit">
</form>

单选框
checked 表示默认选中

性别：
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女<br>

多选框

爱好：<input type="checkbox" name="hobby">游泳
    <input type="checkbox" name="hobby">读书
    <input type="checkbox" name="hobby">跑步

下拉菜单

multiple表示多选

<select name="city" multiple>
    <option>北京</option>
    <option>上海</option>
    <option selected>深圳</option>
    <option>广州</option>
</select>

文件选择

选择文件：<input type="file"><br>
选择多个文件：<input type="file" multiple>

多行文本框

<textarea name="more" cols="30" rows="3"></textarea>

网络请求

GET方式

将请求数据拼接到url中。请求数据作为参数在url中。

POST请求

请求数据在请求头和请求体中。

通过GET方式获取输入参数

from flask import Flask, render_template, request

app = Flask(__name__, template_folder="templates")

# 用户在浏览器访问/chat时自动执行 index() 函数。
@app.route("/get/register", methods=["GET"])
def index1():
    # 将html文件放在templates文件夹下
    return render_template("./open.html")  

@app.route("/get/result", methods=["GET"])
def index2():
    # 获得用户输入信息
    print(request.args)
    return "注册成功！"

if __name__ == "__main__":
    app.run(port=8000)  # 自定义端口号（默认5000）

通过POST方式获取输入参数

from flask import Flask, render_template, request

app = Flask(__name__, template_folder="templates")

# 用户在浏览器访问/chat时自动执行 index() 函数。
@app.route("/register", methods=['get', 'post'])
def index1():
    # 将html文件放在templates文件夹下
    return render_template("./open.html")  

@app.route("/post/result", methods=["post"])
def index3():
    # 获得用户输入信息
    print(request.form)
    user = request.form.get("user")
    pwd = request.form.get("pwd")
    # getlist获取多标签
    return "注册成功！"

if __name__ == "__main__":
    app.run(port=8000)  # 自定义端口号（默认5000）

注册页面

./open.html文件

method=是请求方式，action=返回地址。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
</head>
<body>
    <form method="post" action="/post/result">
        用户名<input type="text" name="user" placeholder="输入用户名">
        <br>密码
        <input type="password" name="pwd" placeholder="输入密码">
        <br>
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>

简化版本
python

from flask import Flask, render_template, request

app = Flask(__name__, template_folder="templates")

# 用户在浏览器访问/chat时自动执行 index() 函数。
@app.route("/register", methods=['get', 'post'])
def register():
    # 将html文件放在templates文件夹下
    return render_template("./open.html")  

@app.route("/result", methods=['get', 'post'])
def do_register():
    # 判断html文件的请求参数的获取方式
    if request.method == "get":
        print(request.args)
        print("get方式")
        print("注册成功！")
    else:
        # post方式获得用户输入信息
        print(request.form)
        user = request.form.get("user")
        pwd = request.form.get("pwd")
        print("post方式")
        return "注册成功！"
    
if __name__ == "__main__":
    app.run(port=8000)  # 自定义端口号（默认5000）

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
</head>
<body>
    <!-- -->
    <form method="post" action="/result">
        用户名<input type="text" name="user" placeholder="输入用户名">
        <br>密码
        <input type="password" name="pwd" placeholder="输入密码">
        <br>
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>

CSS

三种使用方式

行内式

<p style="color: red;background-color: darkgreen;">这是一段文字</p>

外联式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外联语句 -->
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <p class="x">外联式使用CSS</p>
</body>
</html>

my.css文档

.x{
    color: brown; 
    font-size: 30px;
    background-color:gold;
    width: 250px;
    height: 50px;
}

内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*内嵌式CSS*/
        .x{
           color: brown; 
           font-size: 30px;
           background-color:gold;
           width: 250px;
           height: 50px;
        }
    </style>
</head>
<body>
    <p class="x">这是HTML文件</p>
    这是HTML文件
</body>
</html>

选择器

1、类选择器

如果同时使用两个类选择器，并且有格式冲突，那么默认选择style中位置靠后的格式，如果不想被覆盖，可以在前面的某个格式属性中加入!important作为标注，如：color:red !important;

<head>
    <style>
        /*定义CSS类，以.开头*/
        .red{
            color: crimson;
        }
        .size{
            font-size: 66px;
        }
    </style>
</head>
<body>
    <!-- 使用CSS类 -->
    <p class="red size">222</p>

</body>

2、id选择器

<head>
    <style>
        #a{
            color: chartreuse;
        }
    </style>
</head>
<body>
    <!-- 但一个id只能使用一次，一般配合JS使用 -->
    <p id="a">一段文字</p>
</body>

3、标签选择器

<head>
    <style>
        p{
            color: chartreuse;
        }
    </style>
</head>
<body>
    <!-- 所有的p标签都会被使用 -->
    <p>一段文字</p>
</body>

4、通配符选择器

<head>
    <style>
        /*所有标签的都会被渲染，一般用于处理文字格式*/
        *{
            color: blueviolet;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <p>先改年号</p>
    <div>你好</div>
    <span>我好</span>
</body>

5、属性选择器

<style>
    input[type="text"]{
        border: 1px solid red;
    }
</style>

<!-- text输入框会有红色边框 -->
<input type="text">
<input type="password">

或者如下：

<style>
    .v1[xx="123"]{
        color: gold;
    }
</style>

<!-- 第一行文字变成金色 -->
<div class="v1" xx="123">s</div>
<div class="v1" xx="456">s</div>
<div class="v1" xx="789">s</div>

6、后代选择器

<style>
    /* 如果写成.yy > li 则只会查找子代标签，不会查找孙代标签 */
    .yy li{
        color: red;
    }
</style>

<div class="yy">
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
</div>

CSS样式

高度与宽度

.c{
    height: 300px;
    width: 50%;
}

备注：

宽度支持百分比，高度不支持。
行内标签默认无效，块级标签会占用一整行。
可以通过 display:inline-block;修改。（兼具行内与块级标签的优势）。

字体和颜色

颜色、大小、加粗、字体

.c{
    color: #00FF7F;
    font-size: 58px;
    font-weight: bolder;
    font-family: 'Times New Roman', Times, serif;

    border: 1px solid red; /*边框*/
    text-align: center;    /*水平方向居中*/
    line-height: 59px;     /*垂直方向居中，跟方框大小相关*/
}

块级标签的浮动

.c{
    /* 标签浮动 */
    float: left;
    height: 100px;
    width: 100px;
    border: 1px solid red;
}

<div>
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
    <!-- 将浮动的标签拽回 -->
    <div style="clear: both;"></div>
</div>

设置div的边距（内边距） ```css .c{ padding-top:20px; padding-left:20px; padding:20px; /*上下左右都设置*/ padding: 20px 10px 5px 20px; /*上右下左*/ } ``` 外边距（离其他div块的距离） ```css .c{ margin-top:20px; } ``` 区域居中 ```css margin: 2px auto; /*上边两个像素，左右自动居中*/ ```

MySQL基础

下载：https://downloads.mysql.com/archives/community/

启动关闭：

启动：net start mysql
关闭：net stop mysql

登陆：mysql -uroot -p
退出：exit

登陆参数：

mysql -u用户名 -h服务器地址（默认127.0.0.1） -P端口号（默认3306）

卸载：

net stop mysql
mysqld -remove mysql
删除相关目录和环境变量

SQL语言

show databases; -- 分号结尾，不区分大小写
-- 单行注释
# mysql特有单行注释
/*多行注释*/

SQL分类

DDL：数据定义语言，操作数据库和表
DML：数据操作语言：对数据增删改
DQL：数据查询语言：对数据查询
DCL：数据控制语言：定义数据库的访问权限和安全级别，以及创建用户。

DDL

创建数据库

create database db1;
create database if not exists db1;

删除数据库

drop database db2;
drop database if exists db2;

使用数据库

use db1;
-- 查看当前使用的数据库
select database();

创建表Create

show tables; -- 查询表
desc da1;    -- 查询表结构

create table tb_user( -- tb_user是表名
    id int,           -- id 表头，数据类型为int
    username varchar(20), -- 最大20位字符串（变长）
    password varchar(20), 
);

tb_user

id	username	password

删除表

drop table if exists tb_user;

修改表

-- 修改表名
alter table 表名 rename to 新表名;
-- 添加列
alter table 表名 add 列名 数据类型;
-- 修改数据类型
alter table 表名 modify 列名 新数据类型;
-- 修改列名与数据类型
alter table 表名 change 列名 新列名 新数据类型;
-- 删除列
alter table 表名 drop 列名;

DML

添加数据

指定列添加数据(列与值一一对应)

insert into 表名(列名1，列名2...) values(值1，值2，...);

全部列添加数据(需要与表头数量相等)

insert into 表名 values(值1，值2，...);

批量添加数据

insert into 表名(列名1，列名2...) values(值1，值2，...),(值1，值2，...),(值1，值2，...),...;
insert into 表名 values(值1，值2，...),(值1，值2，...),(值1，值2，...),...;

修改数据
如果没有写条件会改变所有记录

-- 格式：updata 表名 set 列名1=值1，列名2=值2，...[where 条件];
update stu set sex = '女' where name = '张三';

删除数据

delete from 表名 while 条件;

DQL

单表查询

select 列名1，列名2，... from 表名;

-- 去除重复结果
select distinct 列名1，列名2，... from 表名;

-- 起别名
select name as 姓名，sex as 性别, ... from 表名;

条件查询

select * from 表名 while 条件;

模糊查询

select * from 表名 while name like '_化%'; -- like关键字，_匹配一个字符，%匹配多个字符

排序查询

select 列表字段 from 表名 order by 排序字段名1[排序方式],排序字段名2[排序方式],...;

排序方式

asc 升序(默认)
desc降序

聚合函数：将一列作为整体纵向计算。

count(列名) 统计数量
sum(列名) 求和
max(列名) 最大值
min(列名) 最小值
avg(列名) 平均值

select count(id) from stu;  -- 统计id数量

分页查询(limit是MySQL的方言)

select 字段列表 from limit 起始索引，查询条目数;

起始索引 = （当前页码-1）*每页条目数

约束

主键约束：primary key
非空约束：not null
唯一约束：unique
检查约束：check
默认约束：default (未填写数据时使用默认数据)

create table emp(
    id int primary key,
    name varchar(10) not null unique,
    salary double(7,2) default 0
);

事务

一组数据库操作命令，要么同时失败要么同时成功（绑定）

-- 开启事务
begin;
-- 提交事务(操作成功时提交)
commit;
-- 回滚事务(回到事务开启之前的操作)
rollback;

JDBC

使用java操作数据库(Java DataBase Connectivity)
首先在创建工程之后应该导入驱动包。
框架

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.Statement;

public class JDBCDemo {
    public static void main(String[] args) throws Exception {
        //注册驱动
        Class.forName("com.mysql.jdbc.Driver");
        //获取连接
        String url = "jdbc:mysql://127.0.0.1:3306/db1";
        String username = "root";
        String password = "012811";
        Connection conn = DriverManager.getConnection(url, username, password);
        //定义sql语句
        String sql = "update account set money = 2000 whrer id = 1";
        //获取sql的对象statement
        Statement stmt = conn.createStatement();
        //执行sql语句，返回修改行数
        int count = stmt.executeUpdate(sql);
        //释放资源
        stmt.close();
        conn.close();
    }
}

ctrl+alt+T快捷键：生成嵌套语句

通过事务方式执行sql语句：

try {
    //开启事务
    conn.setAutoCommit(false);
    //执行语句
    int count1 = stmt.executeUpdate(sql1);
    int count2 = stmt.executeUpdate(sql1);
    //提交事务
    conn.commit();
} catch (Exception e) {
    //回滚事务
    conn.rollback();
}

Statement作用：执行sql语句。

int num = stmt.executeUpdate(sql);//执行DML、DDL语句（返回修改行数）
ResultSet result = executeQuery(sql);//执行DQL语句，（返回查询结果集）

whlie(result.next()){
    int id = result.getInt(1);//可以通过下标签获取数据（默认从1开始）
    String name = result.getString("name");//可以通过列名获取数据
}
result.close();

JavaSvript

基础语法

引入方式

<script>
    alert("你好！");//内部方式
</script>

//外部方式
<script src="./demo.js"></script>

基础语法

区分大小写
结尾有;
注释：单行注释//，多行注释/**/
大括号表示代码块
输出语句：

window.alert()//写入警告框
document.write()//写入HTML输出
console.log()//写入浏览器控制台

变量

var num = 123;
num = "nihao";
//var关键字定义的变量相当于全局变量，并可以重复定义
{
    let num = 2; //相对于局部变量
}

count num1 = 10; //常量，定义后不可修改

数据类型

number：数字（整数，小数，NaN）
string:字符，字符串，单双引号均可以
boolean:布尔
null:空对象
undefined:申明的变量未初始化
可以使用typeof获取数据类型，如alert(typeof num);
运算符

== ：判断值是否相等，如20=="20"返回true。
=== ：判断是否完全等于。
类型转换】
字符串转number，前面加个+号，不能转为数字则转为NaN；
var num = +“20”;
或者使用parseInt()，如parseInt(str)；
```
var flag=3;
if(flag){
  alert("转为ture");  
}else{
  alert("转为false");  
}
```
字符串转布尔：空字符串转为false
数字转为布尔：NaN和0转为false
null 和 undefined 转为 false
流程控制语句：跟java相同：if…else swith…case while do…while for

函数

function add(a,b){ //function关键字
    return a+b;
}

let result = add(1,2);  //调用

数组 var arr = [1,2,3]; 或者var arr = new Array(1,2,3); 长度和类型不固定。

获取长度 arr.lrngth
添加元素 arr.push(10);
删除元素 arr.splice(0,1); //从0开始删除1个元素
字符串 var str = new String(s); 或者var str = s;
可以通过length获取长度

str.trim() //删除前后两端的空格

自定义对象

var person{
    name:"张三";
    age:23;
    eat:function(){
        alert("干饭");
    }
}

person.name;
person.eat;

BOM对象

Browser Obiect Model\

弹窗：

var flag = confirm("是否删除？");
if(flag){
    alert("删除成功！");
}else{
    ;
}

定时器:

setTimeout(function(){alert("等待3s")}, 3000);//等待3s后弹一次
setInterval(function(){alert("等待3s")}, 3000);//间隔3s循环弹出

location.herf

<script>
    document.write("三秒后跳转到首页...");
    setTimeout(function(){
        location.href = "https://www.baidu.com";
    }, 3000)
</script>

DOM

Document Object Model
对HTML文档进行操作

对象获取

document.getElementById;
document.getElementsByName;
document.getElementsByClassName;
document.getElementsByTagName;

.src=“” 替换路径或者网址
.style 设置CSS样式
.innerHTML:设置元素内容

可以通过 https://www.w3school.com.cn/ 查看

事件监听

方式一：通过html标签绑定

<input type="button" onclick='on()'>

function on(){
    alert("我被点了");
}

方式二：通过DOM元素属性绑定

<input type="button" id="btn">

document.getElementByld("btn").οnclick=function(){
    alert("我被点了");
}

表单验证

<script>
    document.getElementById("register").onsubmit = function(){
        var username = document.getElementById("user").value;
        var passward = document.getElementById("pwd").value;
        if(username.length > 6){
            alert(username.length)
            alert("登陆成功！");
            return true;
        }else{
            alert("请重新输入！");
            return false;
        }
    }
</script>

HTTP

状态码:
https://cloud.tencent.com/developer/chapter/13553

HTTP请求数据格式

HTTP响应数据格式

Tomcat

tomcat是一个web服务器，支持Servlet/JSP等JavaEE规范。也可以称为servlet容器或者web容器。

将文件夹删除即可卸载软件。ctrl+C关闭tomcat。

使用：将java项目或前端项目放到tomcat/webapps文件夹下即可，为了提高复制速度，也可以打包成war文件直接复制过去（会自动解压缩），其他人即可通过浏览器访问。

端口号 ：默认8080，在conf/server.xml中修改

Maven Web项目

项目结构

IDEA自动创建

Servlet

java提供的动态web开发技术，是一个java接口

创建web项目，导入Servlet坐标

  <dependencies>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
      <scope>provided</scope>
    </dependency>
  </dependencies>

实现Servlet接口，重写所有方法，并在servlet中输出一句话，并在类上使用@WebServlet注解，配置访问路径

@WebServlet("/demo")
public calss ServletDemo implements Servlet{
    @Override
    public coid service(){}
}

启动tomcat，在浏览器中输入URL访问Servlet。

常见错误

java: 错误: 不支持发行版本 6：解决Error java 错误不支持发行版本
Cannot resolve symbol 'WebServlet： Idea报错Cannot resolve symbol ‘HttpServlet’

Servlet会被Tomcat创建

Servlet生命周期

以后经常使用HttpServlet(封装好的类)，重写doGet和doPost方法即可。

request

package demo1;

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.BufferedReader;
import java.io.IOException;
import java.util.Map;
import java.util.Set;

@WebServlet("/demo")
public class ServletDemo1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        /*请求行*/
        //获取请求方式
        String method = req.getMethod();
        System.out.println(method);

        //获取虚拟目录
        String contextPath = req.getContextPath();
        System.out.println(contextPath);

        //获取URL（统一资源定位符）
        StringBuffer url = req.getRequestURL();
        System.out.println(url.toString());

        //获取URI（统一资源标识符）
        String uri = req.getRequestURI();
        System.out.println(uri);

        //获取请求参数
        String queryString = req.getQueryString();
        System.out.println(queryString);

        //--------------------------------------------
        /*请求头*/
        String agent = req.getHeader("user-agent");
        System.out.println(agent);

        //获取输入参数的键值对
        Map<String, String[]> map = req.getParameterMap();
        Set<String> keySet=map.keySet();
        for (String key:keySet) {
            System.out.print(key + ":");
            String[] values = map.get(key);
            for(String value:values){
                System.out.print(value+" ");
            }
            System.out.println();
        }

        //获取对应的参数值
        String[] username = req.getParameterValues("username");
        for(String name:username){
            System.out.println(name);
        }

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取字节输入流
        BufferedReader br = req.getReader();
        //读取数据
        String line = br.readLine();
        System.out.println(line);
        
        this.doGet(req,resp);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--将表单提交到/tomcat_demo_war/demo路径，Servlet会获取参数-->
<form action="/tomcat_demo_war/demo" method="get">
    <label>
        <input type="text" name="username">
    </label>
    <label>
        <input type="password" name="password">
    </label>
    <input type="submit">
</form>
</body>
</html>

解决中文乱码问题

//POST方式
req.setCharacterEncoding("UTF-8");
//GET方式
username = new String(username.getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8);

URL编码与解码

//编码
String encode = URLEncoder.encoder(str, "utf-8");
//解码
String decode = URLDecoder.decoder(encoder, "ISO-8859-1");
//字符转换为字节
byte[] bytes = getBytes("ISO-8859-1");
//将字节转换为字符串
new String(bytes, "utf-8");

请求转发(服务器内部共享资源，分工合作)，不用加虚拟目录

request.getRequestDispatcher("/path").forward(request, response);

response

重定向：自动跳转到其他资源

response中文乱码

resp.setContentType("text/html;charset=utf-8");

//获取输出流
PrintWriter writer = resp.getWriter();
writer.write("aaa");