Web学习笔记

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>


我要     学习


<div>
    /* 注释 */
    <span style="color: red;">时间span>
    <span>2020.10.10span>
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>主题1dt>
    <dd>项目1dd>
    <dd>项目2dd>
    <dt>主题2dt>
    <dd>项目1dd>
    <dd>项目2dd>
dl>
表格
<table border="1" width="300" height="100">
    <caption><strong>学生成绩单strong>caption>
    <tr> 
        <th>姓名th>   
        <th>成绩th>
        <th>评语th>
    tr>
    <tr>
        <td>司马懿td>  
        <td>90td>
        <td>真棒td>
    tr>
    <tr>
        <td>诸葛亮td>
        <td>100td>
        <td>非常棒td>
    tr>
table>
格式化表格
<table border="1" width="300" height="100">
    <caption><strong>学生成绩单strong>caption>
    <thead>
        <tr> 
            <th>姓名th>   
            <th>成绩th>
            <th>评语th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>司马懿td>  
            <td rowspan="2">90td>
            <td>真棒td>
        tr>
        <tr>
            <td>诸葛亮td>
            <td>非常棒td>
        tr>
    tbody>
    <tfoot>
        <tr>
            <td colspan="3">总结td>
        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>Documenttitle>
    
    <link rel="stylesheet" href="./my.css">
head>
<body>
    <p class="x">外联式使用CSSp>
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>Documenttitle>
    <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>
    
    <p class="red size">222p>

body>
2、id选择器
<head>
    <style>
        #a{
            color: chartreuse;
        }
    style>
head>
<body>
    
    <p id="a">一段文字p>
body>
3、标签选择器
<head>
    <style>
        p{
            color: chartreuse;
        }
    style>
head>
<body>
    
    <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>


<input type="text">
<input type="password">

或者如下:

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


<div class="v1" xx="123">sdiv>
<div class="v1" xx="456">sdiv>
<div class="v1" xx="789">sdiv>
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

添加数据

  1. 指定列添加数据(列与值一一对应)
insert into 表名(列名1,列名2...) values(1,值2...);
  1. 全部列添加数据(需要与表头数量相等)
insert into 表名 values(1,值2...);
  1. 批量添加数据
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>

基础语法

  1. 区分大小写
  2. 结尾有;
  3. 注释:单行注释//,多行注释/**/
  4. 大括号表示代码块
  5. 输出语句:

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

  6. 变量
    var num = 123;
    num = "nihao";
    //var关键字定义的变量相当于全局变量,并可以重复定义
    {
        let num = 2; //相对于局部变量
    }
    
    count num1 = 10; //常量,定义后不可修改
    
  7. 数据类型

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

  8. 运算符

    == :判断值是否相等,如20=="20"返回true。
    === :判断是否完全等于。

  9. 类型转换】

    字符串转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

  10. 流程控制语句:跟java相同:if…else   swith…case   while   do…while   for
  11. 函数
    function add(a,b){ //function关键字
        return a+b;
    }
    
    let result = add(1,2);  //调用
    
  12. 数组 var arr = [1,2,3]; 或者var arr = new Array(1,2,3); 长度和类型不固定。

    获取长度 arr.lrngth
    添加元素 arr.push(10);
    删除元素 arr.splice(0,1); //从0开始删除1个元素

  13. 字符串 var str = new String(s); 或者var str = s;
    可以通过length获取长度

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

  14. 自定义对象
    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接口

  1. 创建web项目,导入Servlet坐标
  <dependencies>
    <dependency>
      <groupId>javax.servletgroupId>
      <artifactId>servlet-apiartifactId>
      <version>2.5version>
      <scope>providedscope>
    dependency>
  dependencies>
  1. 实现Servlet接口,重写所有方法,并在servlet中输出一句话,并在类上使用@WebServlet注解,配置访问路径
@WebServlet("/demo")
public calss ServletDemo implements Servlet{
    @Override
    public coid service(){}
}
  1. 启动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>Titletitle>
head>
<body>

<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");

你可能感兴趣的:(前端,学习,笔记)