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, requestapp = 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, requestapp = 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, requestapp = 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, requestapp = 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 表头，数据类型为intusername 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的对象statementStatement 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{@Overridepublic 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 {@Overrideprotected 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);}}@Overrideprotected 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");