xxxxxxxxxx
    今日课程，一共三章：CORS解决跨域，JSONP解决跨域，mysql数据库入门；

1. 跨域解决方案一：CORS

网络通讯三要素：协议，ip(域名)，端口；

xxxxxxxxxx
同源：三个都相同就是同源；
跨域：三个之中有一个不相同就是跨域；（http/https/file...注意点）

1.1 解决方案：cors 包（掌握）

xxxxxxxxxx
// 第一步：下载： npm i cors@2.8.5
// 第二步：导入
const cors = require("cors");
// 第三部：配置全局中间件
app.use(cors())

1.2 cors 底层原理（了解）

• Access-Control-Allow-Origin

  设置哪些 ip 或者 域名，跨域访问该服务接口。

  （值一般为具体的域名或者 ip 或者 * , * 代表允许所有地址跨域访问）

• Access-Control-Allow-Headers

  设置允许的跨域请求的头信息；

  (默认只允许九个，这九个之外的需要单独设置，content-type属性只支持三个值，* 可以支持所有）

• Access-Control-Allow-Methods

  设置允许的请求方法，默认只有三个，GET/POST/HEAD；

  (默认支持三个请求方法，使用 * 可以支持所有)

注意：cors 模块底层设置的头信息不止这三个；

1.3 简单和预检请求（了解）

• 简单请求：请求方法是三个默认请求方式之一，且请求头在默认允许的九个之内；

  特点：发送一次请求；

• 预检请求：请求方法是三个默认请求方式之外，或者求头存在不在默认允许的九个头信息之内的其他请求头；

  特点：发送两次请求，其中第一次是一次预见测试，没有具体的数据，查看是否允许发送此类请求；

2. 跨域解决方案二：JSONP

2.1 客户端代码原理

jquery 发送jsonp请求：

xxxxxxxxxx
$.ajax({
    // method: 'get',// 所有的jsonp请求都是get请求，所以这个属性可以不写了
    // data: , // 写了以后太繁琐，取消
    url: 'http://www.liulongbin.top:3006/api/jsonp',
    // 最重要的属性
    dataType: "jsonp",
    success: function (res) {
        console.log(res)
    }
})

客户端代码原理：通过创建 script 标签，设置src属性，完成跨域的请求；参数写到 路径中 问号的后面，有一个必传的参数 callback，传递的是函数的名字，将来要调用！

​x
// 1.封装一个jsonp函数;
jsonp({
    // method: 'get',// 所有的jsonp请求都是get请求，所以这个属性可以不写了
    url: 'http://www.liulongbin.top:3006/api/jsonp',
    // data: , // 写了以后太繁琐，取消
    success: function (res) {
        console.log(res)
    }
})
​
// 封装
function jsonp(obj) {
    // 1.创建一个script标签;   2.改变src    3.给函数起名字，定义为全局函数；
    var script = document.createElement("script"); // 不要用innerHTML, 他不会自动发送请求
    // 3.给函数起名字，定义为全局函数；
    var fnName = "lvchao_1231235345456456243";
    // window.aaa就是把aaa设置为全局变量！
    window[fnName] = obj.success;
    // 2.改变src,添加到head中
    script.src = obj.url + "?callback="+fnName+"&name=zs&age=18";
    // 把script标签添加到head标签中，就会发送src的请求了
    document.head.appendChild(script);
    // 代码执行完毕，把script标签删除
    script.onload = function () {
        document.head.removeChild(script);
    }
}

2.2 服务端代码原理

• 代码写道 cors 中间件之前；（写道 cors 中间件之后，起作用的就是 cors 中间件了）

• 请求方法必须使用GET，路径 /api/jsonp，一定要加 /api，因为后面的路由对于这个jsonp请求现在还不起作用；未来也未必起作用，因为我们不会把这个请求写道路由中！

• 具体代码：

  xxxxxxxxxx
  // 注意: jsonp要写到cors之前;
  app.get("/api/jsonp", (req, res) => {
      // 获取函数名,设置对象,发送给客户端
      const fnName = req.query.callback;
      // 定义发送给客户端的对象转换为json字符串
      var objStr = JSON.stringify({
          name: '张三',
          age: 18
      });
      // 字符串类型的执行函数
      res.send(`${fnName}(${objStr})`);
  });
  

3. mysql数据库

市面上有很多数据库，最常见的有四个，分为两类：

• 关系型数据库：Mysql（用的最多，免费），Orcale（收费），SQL server（收费）
• 非关系型数据库：mongodb（出现的比较晚，不需要sql语句，免费）

准备工作：创建数据库，创建表，设置字段格式和特殊标识，添加数据（验证表是否创建成功）；sql 语句：执行增删改查，让我们程序员能够更加简单有效的操作数据库：

3.1 查询语句（ select ）

xxxxxxxxxx
-- 通过 * 把 users 表中所有的数据查询出来
select * from users
-- 从 users 表中把 username 和 password 对应的数据查询出来
-- select username, password from users

3.2 添加语句（ insert into ）

xxxxxxxxxx
-- 向 users 表中，插入新数据，username 的值为 tony stark  password 的值为 098123
insert into users (username, password) values ('tony stark', '098123')
-- select * from users

3.3 修改语句（ update ）

xxxxxxxxxx
-- 将 id 为 4 的用户密码，更新成 888888
update users set password='888888' where id=4
-- select * from users
-- 更新 id 为 2 的用户，把用户密码更新为 admin123  同时，把用户的状态更新为 1
update users set password='admin123',status=1 where id=2
-- select * from users

3.4 删除语句（ delete ）

xxxxxxxxxx
-- 删除 users 表中， id 为 4 的用户
delete from users where id=2
-- select * from users

3.5 条件语句（ where ）

xxxxxxxxxx
-- 演示 where 子句的使用
select * from users where status=1
select * from users where username!='ls'

3.6 逻辑运算符（ and 和 or ）

xxxxxxxxxx
-- 使用 AND 来显示所有状态为0且id小于3的用户
select * from users where status=0 and id<3
-- 使用 or 来显示所有状态为1 或 username 为 zs 的用户
select * from users where status=1 or username='zs'

3.7 （了解）排序（ order by ）

xxxxxxxxxx
-- 对users表中的数据，按照 status 字段进行升序排序
select * from users order by status
-- 按照 id 对结果进行降序的排序  desc 表示降序排序   asc 表示升序排序（默认情况下，就是升序排序的）
select * from users order by id desc
-- 对 users 表中的数据，先按照 status 进行降序排序，再按照 username 字母的顺序，进行升序的排序
select * from users order by status desc, username asc

3.8 （了解）获取数据总量 count(*) 和 字段起别名 as

-- 使用 count(*) 来统计 users 表中，状态为 0 用户的总数量
select count(*) from users where status=0
-- 使用 AS 关键字给列起别名
select count(*) as total from users where status=0
select username as uname, password as upwd from users