前端与数据库结合运用详解

﹏ヽ暗。殇╰゛Y 2022-01-12 06:05 630阅读 0赞

## 1、mysql数据库（了解） ##

什么是数据库 ： 存放数据的仓库  
数据库语言 ： mysql sqlServer oracle ---->关系型数据库，非关系型数库：mongoDB  
数据库中存放的数据都是被结构化的数据

数据库中的数据是存放到一张表中的

一个数据库中可以存放多张数据表  
一张表由多行和多列组成 ，列标题叫做 字段

## 2、数据库的创建 ##

create database 数据库名称

## 3、创建表 ##

数据类型 ：int 整数值 不需要提供长度  
字符串需要提供长度  
char 字符串 char(100)  
varchar 字符串 varchar(100) 可变长度

创建表的语法 ：

create table  tablename
    (
        字段名  数据类型,
        字段名    数据类型,
        ............
    )

例如 ：

create table teacher
    (
            tid int,
            tname varchar(10),
            salary int
    )

## 3、表中数据的操作 增 删 改 查 ##

**添加数据 ：**

insert into  表名(字段名1,字段名2,...) values(值1,值2,....)

添加操作执行后 会返回受影响的行数

**删除数据 ：**  
delete from 表名 清空表中数据 慎用  
delete from 表名 where 条件 删除操作执行后 会返回受影响的行数  
表示条件的关键字 ：  
and 并且 age>20 and sex=‘男’  
or 或者 age > 20 or sex=‘女’  
= 等于

**修改数据 ：**  
update 表名 set 字段名=值1 , 字段名 = 值2 where 条件 修改操作执行后 会返回受影响的行数

**查询数据** ：  
select  
select \* from 表名 查询表中所有数据  
select 字段名1,字段名2 from 表名 查询特定字段  
select \* from 表名 where 条件 按条件查询

## 4、主键 ##

主键 ： 保证表中数据的唯一性 （数据的完整性） primary key  
主键特点 ：  
不能重复 不能为空  
一般一个表中 主键的列为 编号列  
一般主键列都会设置为自动增长

创建表时将编号列设置为主键自增：

create table products
    (
        pid int primary key auto_increment,  主键自增
        pname varchar(100),
        price int,
        paddr varchar(100)
    )

## 5、php如何操作mysql ##

**【案例】学生成绩表的增 删 改 查 php操作mysql**  
创建数据库 ： `create database db1901`  
创建两张表–登录和注册

create table user
        (
            uid int primary key auto_increment,
            uname varchar(100),
            upwd varchar(100)
    )

学生成绩表

create table score
        (
            sid int primary key auto_increment,
            sname varchar(100),
            h5 int,
            js int
    )

//通过表单提交注册信息，并添加到数据库里面  
![php操作mysql，增加数据][php_mysql]  
//通过表单提交登录信息，查询数据库里面信息进行匹配  
![php操作mysql，查询、验证数据，完成登录功能][php_mysql 1]  
//通过表单提交成绩单信息，并添加到数据库里面  
![表单提交数据][20190621114942995.png]  
![php操作mysql，增加数据][php_mysql 2]  
//将数据库中的数据显示  
![取出数据库中的数据并显示到页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]  
// php操作mysql，删除数据，并更新数据库  
![php操作mysql，删除数据][php_mysql 3]  
![php操作mysql，将数据库进行更新][php_mysql 4]

## 6、php输出语句 ##

echo  
print  
print\_r 专门用于打印数组的

## 7、从客户端向服务器传值 ##

方式一 ： 表单的name属性传值  
方式二 : 超链接的href属性传值  
方式三 ： 使用ajax传递数据

## 8、什么是ajax? ##

当从客户端向服务器端提交少量的数据、常见特效、验证用户名的唯一性、商品搜索、登录、注册等  
ajax作用 ： **页面无刷新 提高用户体检，减少带宽 ，提高程序的执行效率**  
异步的javaScript and xml，主要用于服务器和客户端的数据交互传值问题

## 9、ajax 工作流程(代码在服务器环境下进行) ##

## 10、同步和异步 ##

异步 ：同时分开执行 非阻塞模式　（前面的代码不会影响后面代码的执行）  
同步 ：同时按顺序执行　 阻塞模式　（前面代码会影响后面代码的执行）

## 11＼ajax操作步骤 ##

1、创建ajax对象  
var xhr = null;  
if( XMLHttpRequest )\{  
xhr = new XMLHttpRequest();  
\}else\{  
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);  
\}  
2、建立和服务器的连接  
open( “get/post” , 请求文件路径 url , 布尔值 )  
第三个参数 ： 表示同步 / 异步 true默认  
xhr.open( “GOT”, “data.txt”)

get和post区别 ：  
get路径传值数据对用户是可见的传递的数据量少安全性低便于调试  
post 非路径传值，数据对用户是不可见的，传递的数据量大安全性高

3、发送请求  
Xhr.send()

4、服务器响应客户端的结果 （返回结果）  
使用状态改变事件 onreadystatechange  
处理服务器返回的结果 状态值 readyState  
0 请求还没有初始化还没有open()  
1 请求已发送服务器还没有开始处理  
2 服务器接收请求后 没有处理数据  
3 开始处理请求 部分请求已完成  
4 所有请求全部完成

状态码 ：status  
200 交易成功  
404 文件路径错误  
500 服务器错误  
400 服务器语法错误

服务器响应客户端请求时需要注意的两个问题 ：  
1、状态值判断  
2、状态码的判断

![运用ajax请求数据][ajax]  
2、缓存  
当ajax多次请求同一个服务器路径数据时，第一次请求服务器时会将服务器文件的路径缓存到浏览器上，后面的多次请求如果路径不发生变化，直接从浏览器的缓存上获取数据  
就会导致当服务器数据发生变化时，不能及时获取服务器更新后的数据

**解决缓存问题 ：**  
更改请求路径在请求路径上加一个参数,值为一个随机值可以使用 Math.random() 或 new Date().getTime()

扩展 ：  
更改文件最后的操作时间：  
ajax.setRequestHeader( “If-Modified-Since”,“0” );

If-Modified-Since是标准的HTTP请求头标签，在发送HTTP请求时，把浏览器端缓存页面的最后修改时间一起发到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行比较。

如果时间一致，那么返回HTTP状态码304（不返回文件内容），客户端接到之后，就直接把本地缓存文件显示到浏览器中。

如果时间不一致，就返回HTTP状态码200和新的文件内容，客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示到浏览器中。

3、字符串和对象之间的转换

字符串转对象 ：JSON.parse()  
对象转字符串 ： JSON.stringify()

4、接口  
后端程序员为前端提供的路径url 就称为 接口  
接口参数 ：  
接口路径url  
接口返回值  
接口是否含有参数

2、ajax的post方式(了解) 需要在apache服务器下运行  
post 可以从服务器获取数据 同get  
向服务器发送数据时 需要设置请求头  
ajax.setRequestHeader( “content-type”,“application/x-www-form-urlencoded” );

3、同源策略  
同源 ： 同一个来源 协议、域名、端口号  
[http://localhost:80][http_localhost_80]  
[http://127.0.0.1:80][http_127.0.0.1_80]  
[http://localhost:8080][http_localhost_8080]  
[https://localhost:80][https_localhost_80] 和上面的路径访问地址不一样跨域现象

同源策略： 是浏览器的一个安全机制 ，要保证用户数据的安全  
当使用ajax访问服务器数据时，必须要保证访问路径的协议、域名、端口号和 ajax请求的路径保持一致

ajax 不能够跨域的原因是受同源策略的影响

4、如何解决前端跨域问题？？ jsonp  
什jsonp（json with padding） ：利用script标签的src属性实现  
jsonp如何实现跨域请求服务器数据 原理 ：  
1、动态创建一个script标签添加到body中  
2、设置script标签的src值这个值一般是一个接口路径（服务器路径）该接口路径上会有一个参数代表一个回调函数  
3、服务器通过对回调函数的调用完成数据的请求并将结果通过函数的参数返回

jsonp的接口和ajax接口区别 ：  
1、如果接口上有类似callback字样的参数就是jsonp接口，否则就是ajax接口  
2、jsonp接口返回的数据是对象 原生ajax接口返回数据是字符串  
3、jsonp只支持get方式请求数据 （路径传值）

服务器请求数据方式 ：get post \[ put delete \]

5、后端跨域 xhr2 CORS简称 xhr2（使用服务器解决的跨域） 后端（服务器）代理  
跨域实现 ： header(“Access-Control-Allow-Origin:\*”); 表示在任何域下都可以访问该接口 这样的接口ajax就可以访问

总结 ：  
跨域方式：jsonp xhr2 后端代理  
前端实现跨域 使用 ： jsonp  
后端实现跨域 使用 : jsonp xhr2(cors) 后端代理

了解几个协议  
TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议

UDP 一种无连接的传输层协议，提供面向事务的简单不可靠信息传送服务

HTTP是应用层协议，主要解决如何包装数据 http协议是web服务器默认的协议  
http协议特点 ： https 安全协议  
是一个无状态协议  
基于请求响应的协议 get 请求路径传值 安全性较低 post 请求体 数据量大 安全性较高  
无法记录浏览器状态  
可以传输图片 文件 文字 声音

HTTP(超文本传输协议)是利用TCP在两台电脑(通常是Web服务器和客户端)之间传输信息的协议。客户端使用Web浏览器发起HTTP请求给Web服务器，Web服务器发送被请求的信息给客户端。

服务器和客户端

服务器 ： 为客户端提供服务的一台电脑 服务器软件  
服务器语言 ： php --apache java – tomcat c\# asp ---- iis  
客户端语言 ： javascript 浏览器直接运行

[php_mysql]: /images/20220109/52901d677de04963a81303d816bbc39f.png
[php_mysql 1]: /images/20220109/c6d1adf79b694fb587348bda477b7dfc.png
[20190621114942995.png]: /images/20220109/789c87e8cd434f78a87ee53e8b1eb594.png
[php_mysql 2]: /images/20220109/bed1506870c24aed8e4433737ea008af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20220109/dab77e6e60f3478c9eb155094e2996d4.png
[php_mysql 3]: /images/20220109/13fb9d54c77d4fbf860435d6a77cb25f.png
[php_mysql 4]: /images/20220109/b0ecb3ef706f40569ccbd940769e539a.png
[ajax]: /images/20220109/c246c0ea554749c8938bafe5ed256abb.png
[http_localhost_80]: http://localhost:80
[http_127.0.0.1_80]: http://127.0.0.1:80
[http_localhost_8080]: http://localhost:8080
[https_localhost_80]: https://localhost:80