Web学习笔记

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，...);

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

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

3. 批量添加数据

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>

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

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

3. 启动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");