013 Javascript(134 - 147)

[A] JSON对象

            1. 数据传输格式有两种：

                　　　　json数据传输格式    字符串的一种数据格式

                　　　　XML数据传输格式

            　　家具城              运输                家

            　　装好的家具          拆卸                组长

            

            　　前端                运输                后端

           　　 数据结构            字符串              数据结构

            　　数据从在前后端进行交流时需要经历 数据结构 -> 字符串 -> 数据结构 的过程，而实现这个过程的数据传输格式有json和XML两种。

        2. JSON对象

           　　 前端JSON进行数据格式转换的两种方法：

                　　　　JSON.Stringify()        数据结构 => JSON格式的字符串

                　　　　JSON.parse()            JSON格式的字符串字符串 => 数据结构

            　　后端JSON进行数据格式转换的两种方法：

                　　　　json_encode()           数据结构 => JSON格式的字符串

                　　　　json_decode()           JSON格式的字符串字符串 => 数据结构

[B] mysql

　　　　数据库简介：

　　　　　　 -SQL Server Oracle

  　　　　　　-MySQL  DB2

 　　　　　　 -SyBase

           　　 　shell   壳

 　　　　　　core    核

 　　　　　　shell编程，用dos的命令提示符框进行编程           

 

　　1. mysql相关操作：

　　　　　　1. 在windows操作系统下，shell编程报错说“xxx不是内部或外部命令，也不是可运行的程序”，

　　　　　　　　说明虽然系统安装了相关程序，但是控制台找不到相关的路径，无法识别

　　　　　　　　【解决】：配置环境变量

　　　　　　　　【操作】：

                       　　　　 1. 右键点击我的电脑，打开属性

                       　　　　 2. 系统高级设置 -> 高级 -> 环境变量 -> abc的用户变量

                      　　　　  3. 找到path变量，点击新增，将xxx的路径添加即可

                          　　  【注】若path路径原本为一行，则加;后添加，若为多行，直接添加。

            　　　2. 查看当前电脑安装的MySQL版本的方法：

                   　　　　 打开浏览器，地址栏输入：localhost/index.php，输入密码即可查看

           　　　 3. mysql的启动和停止方式

                  　　　　  a. 因为mysql已经做成服务，因此可以到服务界面启动

                  　　        　　  步骤：计算机右键 -> 管理 -> 服务

                   　　　　 b. 也可以直接在命令行运行启动和关闭代码：

                          　　　　  net stop mysql

                         　　　　   net start mysql

           　　　 4. 登录mysql

                　　　　命令行输入：mysql -u root -p + 回车键

               　　　　 输入密码：123456

              　　　　  出现：mysql>    表示登录成功

 

　　

 

　　2.数据库相关操作：

                　　　　【注】mysql中的所有语句必须加;表示结束，然后enter键表示确定

           　　 1. 查看mysql有多少个数据库

                    　　　　show databases;

           　　 2. 创建一个数据库

                    　　　　create database db1;

               　　　　　 　　创建了一个名叫db1的数据库，该数据库的默认格式为jbk编码的

                    　　　　create database db2 character set utf8;

                　　　　　　　创建了一个名叫db2的数据库，并且指定编码格式为utf8

            　　3. 校对规则

                　　　　校对规则可以理解为排序规则，默认为utf8_general_ci 其中ci表示大小写不敏感

                    　　create database db3 character set outfit collate utf8_general_ci

                　　　　　　创建了一个使用utf8编码，并带有校对规则为utf8_general_ci的数据库db3

            　　4. 删除数据库：

                            drop database [if exist] 数据库名;     if exist为可选

                            　　如果存在就删除，不存在就不删除，if exist的存在可以防止报错

        

 

        3. 表的相关操作:

            　　1. 创建表

                　　　　create table 表名{

                   　　　　 字段名1 数据类型,

                   　　　　 字段名2 数据类型,

                   　　　　 ......

                    　　　　字段名n 数据类型

               　　　　 }charater set 字符集 collate 校对规则;

                　　　　【注】创建表的时候一定要给一个id值。

               

                　　　数据类型：

                   　　 　　int     整型

                  　　 　　 float   浮点型

                   　　　　 char(10)    只能存10个字符，固定长度类型

                    　　　　varchar(30) 能存30个字符可适量超过

                  　　　　  data  日期  "2020-01-01"

                    　　　　text    文本  (理论上没有上限)

     

                　　示例：

                   　　　　 create table employee(

                     　　　　   id int unsigned,

                    　　　　    name char(30) not null default '',

                   　　　　     sex char(3) not null default 'nan',

                   　　 　　    birthday date,job varchar(50) not null default '',

                   　　　　     alary float not null default 0.0,

                 　　　　       resume text not null default ''

                 　　　　   )character set utf8;

 

               　　 shell中输入(取消掉所有换行)：　　　　　

　　　　　　　　create table employee(

　　　　　　　　　　id int unsigned,name char(30) not null default '',

　　　　　　　　　　sex char(3) not null default 'nan',

　　　　　　　　　　birthday date,

　　　　　　　　　　job varchar(50) not null default '',

　　　　　　　　　　salary float not null default 0.0,

　　　　　　　　　　resume text not null default '')character set utf8;

            

           　　 2. 查看当前数据库下的表

               　　 　　use 数据库名;

                　　　　show tables;

           　　 3. 查看表结构

            　　    　　desc 表名;

           　　 4. 查看表中所有的数据

                　　　　select *from 表名; 

            

        

        3. 表内数据相关操作：

               　　 mysql中的SQL语句

                     　　   ->insert语句    插入数据

                   　　     ->update语句    更新数据

                   　　     ->delete语句    删除数据

                  　　      ->select语句    查找数据

           　　 a. insert语句

               　　     用于向表中插入数据

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

                　　【注】  1. 插入的值必须与字段的数据类型相同

                        　　　 2. 值的数据大小不能超过字段规定的长度

                   　　         3. values中的值与字段应该一一对应，位置不能错

                  　　　      4. 字符和日期型数据应该包含在单引号内

                     　　　   5. 如果添加的字段为全部字段，则可以不用表名，直接按顺序写值即可

        　　    b. update语句

                 　　   用于修改表中的数据

              　　  update 表名 set 字段1=值1, 字段2=值2,... where 条件;

                　　【注】  1. 批量修改，将所有数据的某个字段值全部修改

                         　　　　　　   update employee set salary=5000;

                           　　　　 将所有员工的工资都修改为5000

                     　　　　 2. 单个值修改

                          　　　　　　 update employee set salary=3000 where name='jack';

                            　　　　将员工jack的工资都修改为5000

                      　　　　3. 某个值操作

                        　　　　　　    update employee set salary=salary+3000 where name='Tom';

                        　　　　    将员工Tom的工资在原来的基础上增加1000

           　  c. delete语句

                 　　   　　用于删除某一条语句

              　　　　  delete from 表名 where 条件;

　　                【注】  1. 若没有where条件语句，则默认删除表内所有信息

                      　　　　2. delete不能删除某一列的值，只能删除某一行的值，即某个人的所有信息

                        　　　 3. delete只能删除表里面的内容，不能删除表本身，

                                　　　　若要删除表本身，需用 -> drop table 表名;

                       　　　 4. 删除表中的数据，也可以用 -> truncate table 表名;

                              　　　　 但是此时不能带条件，所有尽量用delete实现删除

           　　 d. select语句

                    　　　　　　用于查找信息

                　　　　select 字段1, 字段2,... from 表名 where 条件;       把表中响应字段信息提取出来

                　　　　select [dictinct]*from 表名 where 条件;             *表示把表中所有字段的信息全部提取出来

                　　【注】  1. 查询全部学生的所有信息

                            　　　　select *from student;

                      　　　  2. 查询所有学生的姓名及其对应的英语成绩

                            　　　　select name,English from student;

                       　　　 3. 过滤表中重复数据

                           　　　　 select distinct name,English from student;

                        　　有条件的查询：

 　　　　　　　　　　4. 查询名为‘jack’的学生所有成绩

　　　　　　　　　　　　select *from student where name='jack';

　　　　　　　　　　5. 查询查询名为‘jack’的学生英语和数学成绩

 　　　　　　　　　　　  select English,math from student where name='jack';

  　　　　　　　　　　6. 查询数学成绩大于90的学生的id号和姓名

 　　　　　　　　　　　　select id,name from student where English>90;

　　　　　　　　　　  7. 查询总分在200-300的同学(and or in(查询范围))

　　　　　　　　　　　　select name from student where total>200 and total<300;

　　　　　　　　　　8. 模糊查询，查询所有姓李的学生

　　　　　　　　　　　　select *from student where name like '李%'

　　　　　　　　　　　　【说明】    'a%'    -> 表示以a开头

  　　　　　　　　　　　　　　　　 '%a%'  -> 表示a在中间

 　　　　　　　　　　　　　　　　   '%a'    -> 表示以a结束

 　　　　　　　　　　9. 将查询结果进行排序

　　　　　　　　　　　　select name,math from student order by math desc;

　　　　　　　　　　　　将所有同学的姓名与其对应的数学成绩查询出来并按照数学成绩降序排列

　　　　　　　　　　　　这里排序方式有两种：

　　　　　　　　　　　　　　　　asc    默认值，升序排列

　　　　　　　　　　　　　　　　desc    降序排列

　　　　　　　　　　　　select name, (math+English+chinese) as total from student order by total desc;

　　　　　　　　　　　　 将所有同学的名字及其对应的总分查找出来，并按照总分降序排列

 

 

[C] 可视化操作mysql数据库

                1. 打开数据库

                    在浏览器中输地址：localhost/phpMyAdmin      打开即可

                2. 在添加信息时，若要保证某些信息不重复，如学生id，则可将该条信息设置为PrimaryKey，勾选A-J表示字段增长

 

 

[D] PHP操作数据库

　　PHP操作数据库分为八个步骤

　　　　链接数据库(8个步骤):

            　　1. 连接数据库

                   　　 $link = mysql_connect("localhost","root","123456");

                　　　　参数：

                    　　　　第一个参数：连接数据库的IP或域名

                    　　　　第二个参数：用户名

                    　　　　第三个参数：密码

                　　　　返回值：

                    　　　　true    连接成功

                   　　　　 false   连接失败

           　　 2. 判断是否连接成功

                    　　if(!$link){

                     　　   echo("连接失败！！！");

                     　　   exit;       //终止所有代码

                  　　  }

           　　 3. 设置字符集

                  　　  mysql_set_charset("utf8");

           　　 4. 选择数据库

                  　　  mysql_select_db("db1");

           　　 5. 准备sql语句

                   　　 $sql_1 = "select *from student";

            　　6. 发送sql语句

                 　　   $res = mysql_query("$sql_1");

               　　 　　返回值：

                  　　 　　 mysql式的结果

            　　7. 处理结果集

                  　　  $row = mysql_fetch_assoc($res);

                    　　【注】第一次调用

            　　8. 关闭数据库

                    　　mysql_close($link);

 

[E] 练习

　　　　通过.html控制.php操作数据库

　　控制界面：

 

 

　　.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="ajax.js"></script>
    <style>
        #container{ width: 800px; height: 650px; border: solid black 2px; padding: 10px;
                    margin: 10px auto;}
        .title{ color: chartreuse;}
        .inf{ display: inline-block; margin-left: 25px; margin-bottom: 20px;}
        .label{font-size: 16px;}
        #show{ margin-left: 20px; display: block; margin-bottom: 20px;}
        #submit{display: block; width: 80px; height: 30px; background-color: darkblue;
                border: none; margin: 10px auto; cursor: pointer;}
        #displayArea{ width: 600px; height: 200px; border: solid green 4px; display: inline-block;
                margin-left: 100px; overflow-y: scroll; text-align: center;}
        /* #tab{ border: 1px;} */
    </style>
    <script>
        /*
            html通过ajax技术控制php操作数据库的练习
        */

        window.onload = function(){
            var oSubmit = document.getElementById("submit");
            var oStudent = document.getElementsByClassName("content");
            var oShow = document.getElementById("show");
            var oArea = document.getElementById("displayArea");
            var oTbody = document.getElementById("tbody");
            var oDel = document.getElementById("delcontent");
            var oDelbtn = document.getElementById("delbtn");

            // 1. 提交学生信息
            oSubmit.onclick = function(){
                // 1. 判断提交时，信息是否填写完整
                // var is_infromation_completed = false;
                // while(!is_infromation_completed){
                //     for(var i = 0; i < oStudent.length; i++){
                //         if(!oStudent[i].value){
                //             alert("请完整填写学生信息！！！");
                //             location.reload();

                //         }else{
                //             is_infromation_completed = false;
                //         }
                //     }
                // } 
                // alert("这就对了嘛");      
                
                
                obj1 = {
                    method: "get",
                    url: "2222submitGETPHP.php",
                    data:{
                        name: oStudent[0].value,
                        id: oStudent[1].value,
                        sex: oStudent[2].value,
                        chinese: oStudent[3].value,
                        math: oStudent[4].value,
                        english: oStudent[5].value
                    },
                    success: function(res){
                        alert("添加学生信息指令顺利返回");
                    },
                    error: function(res){
                        alert("添加学生信息指令返回失败了");
                    }
                };
                $ajax(obj1);
            }

            // 2. 显示所有学生信息
            oShow.onclick = function(){
                obj2 = {
                    method: "post",
                    url: "2222submitPOSTPHP.php",
                    data: {
                        order: "getAllStudentInformation"
                    },
                    success: function(re){
                        // alert("获取学生信息指令顺利发送了");
                        var res = JSON.parse(re);
                        var at = ``;
                        for(var i = 0; i < res.length; i++){
                            at = at + `<tr>
                                            <td>${res[i].name}</td>
                                            <td>${res[i].id}</td>
                                            <td>${res[i].sex}</td>
                                            <td>${res[i].chinese}</td>
                                            <td>${res[i].math}</td>
                                            <td>${res[i].english}</td>
                                        </tr>`;
                        }
                        oTbody.innerHTML = at;
                    },
                    error: function(res){
                        alert("获取学生信息指令发送失败了")
                    }
                };
                $ajax(obj2);
            }

            // 3. 删除指定姓名的学生信息
            oDelbtn.onclick = function(){
                obj3 = {
                    method: "post",
                    url: "2222submitPOSTPHP.php",
                    data: {
                        delName: oDel.value
                    },
                    success: function(res){
                        alert("删除指令顺利发送了");
                    },
                    error: function(res){
                        alert("删除指令发送失败了")
                    }
                };
                $ajax(obj3);
            }
        }

    </script>
</head>
<body>
    <div id="container">
        <div id="add">
            <h2 class="title">添加学员信息</h2>
            <div class="inf">
                <span class="label">姓名：</span>
                <input type="text" class="content">
            </div>
            <div class="inf">
                <span class="label">学号：</span>
                <input type="text" class="content">
            </div>
            <div class="inf">
                <span class="label">性别：</span>
                <input type="text" class="content">
            </div><br>
            <div class="inf">
                <span class="label">语文：</span>
                <input type="text" class="content">
            </div>
            <div class="inf">
                <span class="label">数学：</span>
                <input type="text" class="content">
            </div>
            <div class="inf">
                <span class="label">英语：</span>
                <input type="text" class="content">
            </div>
            <button id="submit">提交</button>
        </div>
        <div id="search">
            <h2 class="title">显示学员信息</h2>
            <button id="show">显示</button>
            <div id="displayArea">
                <table id="tab" align="center" border="1px" cellspacing = "0px">
                    <colgroup span = "6" width = "100px">
                    <thead>
                        <tr>
                            <td align="center">姓名</td>
                            <td>id</td>
                            <td>性别</td>
                            <td>语文</td>
                            <td>数学</td>
                            <td>英语</td>
                        </tr>
                    </thead>
                    <tbody id="tbody"></tbody>
                </table>
            </div>
        </div>
        <div id="delete">
            <h2 class="title">删除学员信息</h2>
        </div>
        <div class="inf">
            <span class="label">姓名：</span>
            <input type="text" id="delcontent">
            <button id="delbtn">删除</button>
        </div>
    </div>
</body>
</html>

 　　.php代码(get)

<?php
    header('content-type:text/html,charset:"utf-8"');

    $flag = 0;
    if(isset($_GET["order"])){
        $flag = 2;
        $do = "select * from studentinformation order by id";
    }else if(isset($_GET["delName"])){
        $flag = 3;
        $value = $_GET["delName"];
        $do = "delete from studentinformation where name = '{$value}'";
    }else{
        $flag = 1;
        $name = $_GET["name"];
        $id = $_GET["id"];
        $sex = $_GET["sex"];
        $ch = $_GET["chinese"];
        $ma = $_GET["math"];
        $en = $_GET["english"];
        $do = "insert into studentinformation values('{$name}',{$id},'{$sex}',{$ch},{$ma},{$en})";
    }

    // 1. 连接mysql
    $link = mysql_connect("localhost", "root", "123456");
    
    // 2. 判断是否连接成功
    if(!$link){
        echo "连接失败！！！";
        exit;
    }

    // 3. 设置字符集
    mysql_set_charset("utf8");

    // 4. 选择数据库
    mysql_select_db("carrey");

    // 5. 准备指令
    // $do

    // 6. 发送指令
    $res = mysql_query($do);

    // 7. 结果处理
    switch($flag){
        case 1:
            echo "恭喜你，插入学生信息成功！";
            break;
        case 2:
            // echo "恭喜你，获取学生信息成功！";
            $arr = array();
            while($g = mysql_fetch_assoc($res)){
                array_push($arr, $g);
            }
            echo(json_encode($arr));
            break;
        case 3:
            echo "恭喜你，删除学生信息成功！";
        default:
            echo "不好意思，耍帅失败！";
    }

    // 8. 关闭连接
    mysql_close($link);
?>

　　.php(post)

<?php
    header('content-type:text/html,charset:"utf-8"');

    $flag = 0;
    if(isset($_POST["order"])){
        $flag = 2;
        $do = "select * from studentinformation order by id";
    }else if(isset($_POST["delName"])){
        $flag = 3;
        $value = $_POST["delName"];
        $do = "delete from studentinformation where name = '{$value}'";
    }else{
        $flag = 1;
        $name = $_POST["name"];
        $id = $_POST["id"];
        $sex = $_POST["sex"];
        $ch = $_POST["chinese"];
        $ma = $_POST["math"];
        $en = $_POST["english"];
        $do = "insert into studentinformation values('{$name}',{$id},'{$sex}',{$ch},{$ma},{$en})";
    }

    // 1. 连接mysql
    $link = mysql_connect("localhost", "root", "123456");
    
    // 2. 判断是否连接成功
    if(!$link){
        echo "连接失败！！！";
        exit;
    }

    // 3. 设置字符集
    mysql_set_charset("utf8");

    // 4. 选择数据库
    mysql_select_db("carrey");

    // 5. 准备指令
    // $do

    // 6. 发送指令
    $res = mysql_query($do);

    // 7. 结果处理
    switch($flag){
        case 1:
            echo "恭喜你，插入学生信息成功！";
            break;
        case 2:
            // echo "恭喜你，获取学生信息成功！";
            $arr = array();
            while($g = mysql_fetch_assoc($res)){
                array_push($arr, $g);
            }
            echo(json_encode($arr));
            break;
        case 3:
            echo "恭喜你，删除学生信息成功！";
        default:
            echo "不好意思，耍帅失败！";
    }

    // 8. 关闭连接
    mysql_close($link);
?>