精华内容
下载资源
问答
  • react实现单选框复选框和下拉框

    万次阅读 2018-05-03 16:23:11
    在博文 vue.js实现单选框复选框和下拉框中详细叙述了vue实现表单的基本原理。本文将利用react实现相同功能。一、react开发模板 使用react进行网页开发,其基本结构如下:<!DOCTYPE html> <...

        react和vue已经是当下前端开发领域的主流框架。确实极大程度的提高了开发效率。在博文 vue.js实现单选框、复选框和下拉框中详细叙述了vue实现表单的基本原理。本文将利用react实现相同功能。

    一、react开发模板

        使用react进行网页开发,其基本结构如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../source/react.js"></script>
        <script src="../source/react-dom.js"></script>
        <script src="../source/browser.min.js"></script>
    </head>
    <body>
    <div id="root"></div>
    <script type="text/babel">
     //todos
    </script>
    </body>
    </html>

    在head部分,引入了三个非常重要的js文件。其作用分别为:

    • react.js:React的核心库
    • react-dom.js:提供与DOM相关的功能
    • browser.js:实现JSX语法向JavaScript语法的转换

     另一个值得注意的地方在于body标签内,script标签的type属性设置为:text/babel。这是因为react的JSX语法与JavaScript语法不兼容,凡是用到JSX语法的地方都需要设置type属性。

    二、react实现单选框

        在HTML当中,一些表单元素会根据用户的输入更新某些属性值。而在react中,这些可变的状态通常保持在组件的状态属性中,并且只能用setState( )方法更新。

        利用react实现单选框,其body部分的代码如下:

    <div id="root"></div>
    <script type="text/babel">
        class FlavorForm extends React.Component {
            constructor(props) {
                super(props);
                this.state = {value: ''};
                this.handleChange = this.handleChange.bind(this);
            }
    
            handleChange(event) {
                this.setState({value: event.target.value});
            }
    
            render() {
                return (
                        <div>
                            <label > <input type="radio" name='gender' value="Man"
                                            onChange={this.handleChange}/>Man</label><br/>
                            <label > <input type="radio" name='gender' value="Women"
                                            onChange={this.handleChange}/>Women</label>
                            <div>gender: {this.state.value}</div>
                        </div>
                )
            }
        }
        ReactDOM.render(
                <FlavorForm/>,
            document.getElementById('root')
        )
    </script>

    由以上代码可以看到,监听每个input标签的onChange事件,并在相应函数里更新组件状态。

    三、多选框

        多选框的实现方式和单选框类似,也可以通过监听各input标签的onChange事件来实现。其body部分的标签如下所示。

    <div id="root"></div>
    <script type="text/babel">
        class CheckBox extends React.Component {
            constructor(props) {
                super(props);
                this.state = {value: []};
                this.handleChange = this.handleChange.bind(this);
            }
            handleChange(event) {
                let item = event.target.value;
                let items = this.state.value.slice();
                let index = items.indexOf(item);
                index === -1 ? items.push(item) : items.splice(index, 1);
                this.setState({value: items});
            }
            render() {
                return (
                        <div>
                            choose fruit:<br/>
                            <label><input type="checkbox" name="fruit" value="apple"
                                          onChange={this.handleChange}/>apple</label><br/>
                            <label><input type="checkbox" name="fruit" value="banana"
                                          onChange={this.handleChange}/>banana</label><br/>
                            <label><input type="checkbox" name="fruit" value="pear"
                                          onChange={this.handleChange}/>pear</label><br/>
                            <div>Chosen : {this.state.value.join('-')}</div>
                        </div>
                )
            }
        }
        ReactDOM.render(
                <CheckBox/>,
            document.getElementById('root')
        )
    </script>

    从代码中可以看到,我们定义了一个组件状态value,其值是一个数组,存放着选中信息。需要注意的是,在handleChange函数中,更新value时,必须使用setState函数,否则代码不会被重新渲染,在return中显示已选中的选项不会实时更新。

    四、下拉框

    下拉框的实现方式和单选框、复选框类似,这里直接以一个例子说明,其body部分的代码如下:

    <div id="root"></div>
    <script type="text/babel">
        class FlavorForm extends React.Component {
            constructor(props) {
                super(props);
                this.state = {value: 'basketball'};
                this.handleChange = this.handleChange.bind(this);
            }
            handleChange(event) {
                this.setState({value: event.target.value});
            }
            render() {
                return (
                        <div>
                            <label>choose favorite sports:
                                <select value={this.state.value} onChange={this.handleChange}>
                                    <option value="running">running</option>
                                    <option value="basketball">basketball</option>
                                    <option value="skiing">skiing</option>
                                </select>
                            </label>
                            <div>chosen: {this.state.value}</div>
                        </div>
                )
            }
        }
        ReactDOM.render(
                <FlavorForm/>,
            document.getElementById('root')
        )
    </script>

    以上代码中,组件状态value给了一个默认值,并在return中的select标签中使用,这些实现的是一个默认选中的功能。

    总之,利用react实现表单的原理都是相同的,利用一个组件状态来存储选中信息,然后监听各input标签的onChange事件。并在响应函数中更新组件状态。


    展开全文
  • 用户在输入的信息称之为内容,内容的文本分为普通密码型,用户通过单选框复选框、下拉框(也就是下拉菜单)完成内容信息输入,最后通过提交按钮发送给服务器! 这里要讲到浏览器怎么发送给服务器?涉及到http...

    表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器。用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框、复选框、下拉框(也就是下拉菜单)完成内容信息输入,最后通过提交按钮发送给服务器!

    这里要讲到浏览器怎么发送给服务器?涉及到http协议,也就是超文本传输协议,它是浏览器和服务器通讯的一种机制。模式为:请求——应答,浏览器发送请求=>服务器接收=>自身处理=>结果返回浏览器=>浏览器根据结果展示页面给用户,请求分为GET和POST。下面用代码依次展示说明:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>html基本标签表单实现交互原理,单选框,复选框,下拉框介绍</title>
     7 </head>
     8 <body>
     9     <form action="" method="POST">
    10         <!-- <input type="text"> --><!--如果没有name值,提交不成功,导航网址会显示file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?-->
    11         用户:<input type="text" name="ueser"><!--文本输入类型text-->
    12         <!--添加name值,提交后,导航网址会显示file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=111-->
    13         <br>
    14         密码:<input type="password" name="password"><!--密码是password--><!--如果输入用户是11,密码是abc展示为这样file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=11&password=abc-->
    15         <p>这里涉及到加密问题,浏览器传输服务器加密的密文用JS操作处理,后面学习中会聊到的</p>
    16         <br>
    17         性别:<input type="radio" name="sex" value="boy">男<input type="radio" name="sex" value="womnen">女<input type="radio" name="sex" value="weizhi">中性 18         <!--radio是单选框,这里的name值都是一样的,如果是不一样的,选择就是多个了-->
    19         <!-- 性别: <input type="radio" name="sex1">男<input type="radio" name="sex">女<input type="radio" name="sex">中性 -->
    20         <br>
    21         <!-- <input type="checkbox">是这个复选框,可以选择多个 -->
    22         爱好:<input type="checkbox" name="like" value="meinv">美女<input type="checkbox" name="like" value="car">汽车<input type="checkbox" name="like" value="power">权利 23         <br>
    24         <!-- 下拉框select 里面有选项是option -->
    25 城市: 26         <select name="city">
    27             <option name="beijing" value="bj">北京</option>
    28             <option name="shanghai" value="sh">上海</option>
    29             <option name="guangzhou" value="gz">广州</option>
    30             <option name="shenzhen" value="sz">深圳</option>
    31         </select>  
    32         <br>
    33         <input type="submit"><!--文本提交按钮submit-->
    34         <!--如果这样就点击提交,导航栏会出现file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=1&password=1&sex=on&like=on&city=%E5%8C%97%E4%BA%AC-->
    35     </form>
    36 </body>
    37 </html>
    
    专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    

    然后你会惊讶的发现你的爱好和性别展示都是on,没出来,这是什么原因了?因为前端浏览器给用户看,会涉及到一个默认值,用value表示,就是说只要和选择相关就需要有默认值提交给服务器,这样我们添加下value值,之前是没有的,现在在重新输入下:
    浏览器的窗口网址就会展示如下:

    file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=1&password=abc&sex=boy&like=meinv&city=bj

    当然这样你提交的内容,服务器还是没办法接收到,那怎么办了?在中action="“是一个提交动作,填写你提交的地址,比方说http://www.dhnblog.com/,注意了这里需要用到method=”",我们的请求分为GET和POST,只需要修改form表单开始标签

    GET请求POST请求,它们的区别是GET请求内容展示在导航栏网址中,POST请求在控制台里面,如下图所示:

    展开全文
  • 2) 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框单选框、下拉选择框和文件上传框等。 3) 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以...

    什么表单:

    组成:

      一个表单有三个基本组成部分:
    1) 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
    2) 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
    3) 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

    作用:

      表单主要负责在网页中数据采集。

    我是这样理解的:

      表单,就是自己家里贴着各种标签的调料盒,里面根据对应的标签放满了对应的调料。等某一天邻居找我借“盐”的时候,我就直接把整个调料盒递给他,说“你随便用”。

    工作原理:

      当我们点击了提交按钮后,表单中所填的数据会被打包发送到服务器进行处理,接着服务器会根据表单中的信息返回特定的响应。
      在表单中,我们可以输入的元素大致可以分成两种:输入赋值和选择赋值。虽然有两种,但是其最终结果却是一样的。都是先为一个变量赋值,然后后将此变量传到服务器进行处理。

    <input type="text" name="test_name" value="165">

      上面的实例中,test_name就是一个变量名,test_name的初始值就是value=“165”,当我们删除输入框中的初始值,然后写入新值的时候比如777,test_name的值变成了777,提交表单的时候,就会将变量test_name和其新赋值提交到服务器等。

    <input type="radio" name="test_radio" value="not">
    <input type="radio" name=" test_radio" value="yes">
    

      虽然是两行代码,但是这两个单选框为一组,只能选择一个。两个选项都是为 test_radio赋值,所赋值即每个选项 value 的值。表单提交时同样会提交变量 test_radio及它的 value.

    实例:

      下面我们一个简单的实例来运行并解释一下:

    <html>
       <head>
        <title>表单的例子</title>
       </head>
       <body>
        <form action="http://www.baidu.com" method="post" target="_blank">
            用  户  名:<input type="text" name="username" value="今天天气很好" size="20" maxlength="3"/><br/><br>
            密      码:<input type="password" name="userpwd" value="123456" size="20" maxlength="3"/><br/><br/>
            性      别:<input type="radio" value="1" name="sex" checked/><input type="radio" value="2" name="sex"/><br/><br>
            爱      好:<input type="checkbox" value="" name="hobby"/>打乒乓球
                    <input type="checkbox" value="" name="hobby"/>打篮球
                    <input type="checkbox" value="" name="hobby" checked/>打羽毛球<br/><br/>
            文  件  域:<input type="file"/><br/><br/>
            隐  藏  域:<input type="hidden" value="123456"/><br/><br/>
            多行文本框:<textarea name="txt" rows="5" cols="30" disabled readonly>今天天气很好</textarea><br><br>
            地      区:<select>
                    <option value="1"/>北京
                    <option>上海</option>
                    <option selected>广州</option>
                    </select><br/><br/>
            <input type="submit" value="提交"/>&nbsp;&nbsp;
            <input type="reset" value="重置"/>&nbsp;&nbsp;
            <input type="button" value="自定义按钮">
        </form>
       </body
    </html>
    

    浏览器效果图:

    这里写图片描述

    实例解析:

      我们为了方便,我直接引用个照片,大家一看就明白了。

    这里写图片描述

    展开全文
  • 【学习笔记】PHP进阶

    2020-07-03 21:37:51
    文章目录表单传值概念为什么使用表单传值表单传值方式GET传值POST传值GET传值POST传值的区别PHP接收数据的三种方式PHP处理复选框数据复选框单项的命名方式单选按钮的数据处理多选按钮的数据处理无选中情况文件上传...

    文章目录

    表单传值

    概念

    表单传值即通过浏览器通过表单元素将用户的选择或者输入的数据提交给后台服务器语言

    为什么使用表单传值

    动态网站(WEB2.0)的特点就是后台根据用户的需求定制数据,所谓的“需求”就是用户通过当前的选择或者输入的数据信息,表单就是这些数据的承载者

    表单传值方式

    GET传值
    1. form表单
      <form method = "get"></form>
    2. a标签
      <a href="www.itcast.cn/index/php?学科=php">
    3. location对象的href属性
      <script>location.href="www.itcast.cn/index.php?data=php"</script>
    4. location对象的assign()方法
      <script>location.assign("www.itcast.cn/index.php?data=php")</script>
    POST传值

    <form method="post"></form>

    GET传值和POST传值的区别
    1. GET传输的数据主要用来获取数据,不改变服务器上的资源
    2. POST传输的数据主要用来增加数据,会改变服务器上的资源
    3. 传输方式上POST必须使用form表单,而GET可以使用form和URL
    4. GET传输数据可以在URL中对外可见(GET传值最终会在浏览器的地址栏中全部显示:?数据名=数据值&数据名2=数据值2…),而POST不可见
    5. GET和POST能传输的数据大小不同,GET为2k,POST理论上无限制(事实上GET和POST本身没有数据长度限制,但是浏览器厂家做了限制)
    6. GET和POST能够传输的数据格式有区别:GET传输简单数据(数值/字符串),POST可以提交复杂数据(如二进制)

    PHP接收数据的三种方式

    1. $_GET方式:接受GET方式提交的数据
    2. $_POST方式:接受POST方式提交的数据
    3. $_REQUEST方式:接受POST或者GET提交的所有数据

    不管是$_GET,$_POST还是$_REQUEST,三个都是PHP超全局预定义数组,表单元素的name属性的值作为数组的下标,而value属性对应的值就是数组的元素值

    $_REQUEST存储数据本质上就是将$_POST$_GET合并存储到一个数组,如果数组下标冲突,那么POST会覆盖GET

    PHP处理复选框数据

    复选框单项的命名方式

    复选框通常是将一类内容以同名的形式传递给后台,数据库存储通常是一个字段存储

    ① 在浏览器端,checkbox的name属性不论什么都会被浏览器毫无保留的提交
    ② 在PHP中$_POST/$_GET都会对同名name属性进行覆盖

    解决方案:浏览器不识别[](浏览器不认为有特殊性),但是PHP认为[]有特殊性,会认为该符号是数组的形式,所以PHP就会自动的将同名但是带有[]的元素组合到一起形成一个数组

    单选按钮的数据处理

    1. 表单中的name属性必须使用同名
    2. 后台接受数据也不需要额外处理
    3. 数据库存储的话只需要一个字段存储普通数据即可
    4. PHP拿到数据之后,组织SQL直接存储到数据表即可

    多选按钮的数据处理

    1. 表单中name属性使用数组格式:名字[]
    2. 后台接受到数据之后是一个数组(数组不能存储到数据库)
    3. PHP需要将数组转换成指定格式的字符串:使用分隔符分隔每一个元素并且形成字符串:inplode('分隔符',数组)
    4. PHP组织SQL直接存储到数据库
    5. 从数据库取出时,使用explode把字符串变成数组

    无选中情况

    如果表单提交时没有复选框或者单选框被选中,那么浏览器就不会提交复选框或单选框的内容,因此在PHP使用单/复选框时需要先判断是否存在该数据

    文件上传

    原理

    文件上传:文件从用户本地电脑通过传输方式(WEB表单)保存到服务器所在电脑的指定目录下

    1. 增加文件上传表单:浏览器请求一个服务器的HTML脚本(包含文件上传表单)
    2. 用户从本地选择一个文件(点击上传框(按钮))
    3. 用户点击上传:文件会通过互联网传输到服务器上
    4. 服务器操作系统会将文件保存到临时目录:是以临时文件格式保存(windows下为tmp)
    5. 服务器脚本开始工作:判断文件有效
    6. 服务器脚本将有效文件从临时目录移动到指定的目录下(完成)

    表单编写

    • method属性:文件表单提交方式必须为POST
    • enctype属性:form表单属性,主要是规范表单数据的编码方式

    在PHP中接收文件

    在PHP中有一个预定义变量$_FILES专门用来存储用户上传的文件

    $_FILES变量详解
    1. name:文件在用户(浏览器端)电脑上实际存在的名字(用来保留后缀)
    2. tmp_name:文件上传到服务器后操作系统保存的临时路径(用来给PHP后期使用)
    3. type:NIME(多功能互联网邮件扩展)类型,用来在计算机中客户端识别文件类型(确定用什么软件打开)
    4. error:文件上传的代号,用来告知应用软件(PHP)文件接受过程中出现了什么问题(PHP后期根据代码进行文件判断)
    5. size:文件大小(PHP根据实际需求来确定是否保留)
    移动临时文件到目标位置

    文件上传之后会保存到$_FILES中,那么访问文件信息的形式就是$_FILES['表单name属性值']['元素信息']

    1. 判断是否为上传的文件:is_uploaded_file()
    2. 移动文件:move_uploaded_file()
    <?php
    $file = $_FILES['img']; //获取文件信息
    if (is_uploaded_file($file['tmp_name'])) { //判断是否为上传的文件
        if (move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name'])) { //判断是否移动成功
            echo 'succeed';
        } else {
            echo 'failed';
        }
    } else {
        echo '文件上传失败';
    }
    

    多文件上传

    • 当商品需要上传多个图片进行展示的时候:需要使用多文件上传,针对一个内容但是不同的文件说明:同名表单
      同名表单会将表单名字(如img[ ])形成一个数组,而且同时将文件对应的五个要素:name、tmp_name、size、error都形成对应数量的数组,每个文件上传对应数组元素的下标都是一样的:如name[0]和type[0]来自同一个文件
    • 当商品需要进行多个维度的图片说明的时候:需要使用多文件上传,针对的是不同内容所以表单的名字不一样:批量解决问题
      不同名表单:每个文件都会形成一个属于自己独立的5个元素的数组

    对多文件上传的文件信息的读取

    不同名多文件上传处理方式:按照表单名字从$_FILES中取出来就可以直接使用(明确知道表单中有多少个文件上传);如果不确定表单中有多少个文件上传,不适合挨个去取(效率不高),可以通过遍历$_FILES数组,挨个取出来实现文件上传
    同名多文件上传处理方式:想办法得到一个文件对应的五个元素数组。从$_FILES中把对应的name/tmp_name/size/error/type挨个取出来存放到不同的数组中

    <?php
    echo '<pre>';
    for ($i = 0; $i < count($_FILES['upload']['name']); $i++) {
    
        //Get the temp file path
    
        $tmpFilePath = $_FILES['upload']['tmp_name'][$i];
        //Make sure we have a filepath
    
        if ($tmpFilePath != "") {
    
            //Setup our new file path
    
            $newFilePath = "uploads/" . $_FILES['upload']['name'][$i];
    
            //Upload the file into the temp dir
    
            if (move_uploaded_file($tmpFilePath, $newFilePath)) {
                //Handle other code here
            }
        }
    }
    

    MySQL扩展

    PHP针对Mysql数据库操作提供的扩展:允许PHP当做mysql的客户端连接服务器进行操作

    连库基本操作

    连接数据库服务器

    mysqli_connect(服务器地址,用户名,密码)

    设置连接编码

    保持客户端与服务器之间的沟通顺畅:同一字符集语言

    1. mysqli_query('set names xxx')
    2. mysqli_set_charset('xxx')

    如何确定使用哪种编码:当前客户端执行脚本的界面是什么字符集就设置为什么

    确定要使用的数据库
    1. mysqli_query('use xxx')
    2. mysqli_select_db('xxx')
    关闭连接

    主动释放连接:mysql服务器的连接资源是有限的,不用了需要释放(PHP脚本执行结束系统会自动释放)
    语法:mysqli_close()

    执行增删改操作

    mysqli_query函数执行结果返回的是true或者false,true代表执行成功,false代表执行失败,失败原因分两种:一种是SQL指令本身语法错误,第二种是执行失败
    插入数据
    mysqli_query('insert ...')

    <?php
    $link = mysqli_connect('localhost', 'root', 'songyahui');
    mysqli_query($link, 'use News');
    $sql = "insert into n_news values(null,'heima',1,'黑马','itcaster',123)";
    if (mysqli_query($link, $sql)) {
        echo '数据插入成功';
    } else {
        echo '数据插入失败';
    }
    
    

    查询操作

    执行查询语句

    mysqli_query('select')
    其他类似查询语句,比如show,desc
    以上两种情况的总结:凡是执行操作希望拿到数据库返回的数据进行展示的
    执行结果的处理:成功为结果集,失败为false
    成功返回结果:SQL指令没有错误,但是如果查询结果本身为空,返回也是true

    获取结果集行数

    mysqli_num_rows():获取结果集中到底有多少行记录

    解析结果集

    将一种结果集资源(PHP不能直接使用),转换成一种PHP能够解析的数据格式:通过从结果集中(结果集指针:类似数组指针)按照结果集指针所在位置取出对应的一条记录(一行),返回一个数组,同时指针下移,直到指针移除结果集
    mysqli_fetch_assoc():获取关联数组,表的表头名字作为数组下标,元素值作为数组元素值
    mysqli_fetch_row():获取索引数组,只获取数据的值,然后数组的下标从0开始索引
    mysqli_fetch_array():获取关联或者索引数组,但是默认是同时存在:一个记录取两次,形成一组关联数组和一组索引数组,可以通过第二个参数来决定获取方式:mysqli_assoc只获取关联数组,mysqli_num只获取索引数组,mysqli_both两种都获取,注意第二个参数要大写

    其他相关函数

    有关字段信息

    mysqli_num_fields():获取一个指定结果集中所有的字段数
    mysqli_field_name():获取一个指定结果集中指定位置字段的名字,索引从0开始

    有关出错信息

    mysqli_error():获取出错对应的提示信息
    mysqli_errno():获取出错对应的错误提示代号
    错误的判断:基于mysqli_query这个函数执行的结果,结果返回false就代表执行错误

    其他函数

    mysqli_insert_id():获取上次插入操作所产生的自增长ID,如果没有自增长ID则返回0

    HTTP协议

    HTTP协议初步认识

    HTTP协议概念

    HTTP协议,即超文本传输协议(Hypertext transfer protocol),是一种详细规定了浏览器和万维网(www = World Wide Web)服务器之间互相通信的规则,通过因特网传送万维网文档的数据传送协议
    HTTP协议是用于从www服务器传输超文本到本地浏览器的传送协议,它可以使浏览器更加高效,使网络传输减少。它不仅保证计算机正确快速地传输超文本文档,还确定传输文档中的哪一部分,以及哪部分内容首先显示(如文本先于图形等)。

    HTTP协议特点
    1. 客服/服务器模式:客户端(浏览器)/服务端
    2. 简单快速:客服向服务器请求服务时,只需传送请求方法和路径,由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度更快
    3. 灵活:HTTP允许传输任意类型的数据对象(MIME类型)
    4. 无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接,采用这种方式可以节省传输时间
    5. 无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力,缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。
    HTTP协议分类
    1. HTTP请求协议:浏览器向服务器发起请求的时候需要遵循的协议
    2. HTTP响应协议:服务器向浏览器发起响应的时候需要遵循的协议

    HTTP请求

    请求行

    格式:请求方式 资源路径 协议版本号-GET /index.php HTTP/1.1
    请求行独占一行(第一行)

    请求头

    请求头就是各项协议内容:具体的协议内容不会每次都全部使用

    1. Host:请求的主机地址(必须)
    2. Accept:当前请求能够接收服务器返回的类型(MIME)类型
    3. Accept-language:接收的语言
    4. User-Agent:客户浏览器所在点的一些信息

    请求头不固定数量,每个请求协议也是独占一行,最后会有一行空行(用来区分请求头和请求体)

    请求体

    请求体就是请求数据
    只有POST请求会有请求体,GET请求所有的数据都是跟在URL之后,会在请求行中的资源路径上体现

    基本格式:资源名字 = 资源值&资源名字 = 资源值...

    在这里插入图片描述

    HTTP响应

    响应行

    形式:协议版本号 状态码 状态消息(独占一行)-HTTP/1.1 200 ok

    响应头

    具体协议内容:

    • 时间:Date: Tue, 30 Jun 2020 09:13:23 GMT
    • 服务器:Server:Apache/2.2.22 (win 32) PHP/5.3.13
    • 内容长度:Content-Length:1571,数据具体的字节数(响应体)
    • 内容类型:Content-Type:text/html:告诉浏览器对应的数据格式

    以上并不是所有的响应头;
    响应头一个占一行,最后一行空行(用来区分响应头和响应体)

    响应体

    实际服务器响应给浏览器的内容
    在这里插入图片描述

    常用HTTP状态码
    • 200 ok:成功
    • 403 Forbidden:没权限访问
    • 404 Not Found:没找到页面
    • 500 Server Internal Error:服务器内部错误
    常见HTTP响应设置及使用

    PHP中针对HTTP协议(响应)进行了底层设计,可以通过函数header来实现修改http响应(响应头)

    注意事项:

    header可以设计HTTP响应,因为HTTP协议的特点是:响应行,响应头,响应体。通过header设计响应头的时候,不应该有任何内容输出,所以一旦产生内容输出(哪怕一个空格),系统都会认为响应头已经结束而响应体开始了,所以如果先输出内容后设置响应头(header使用),理论设置无效
    在PHP5以后,增加程序缓存内容:允许服务器脚本在输出内容的时候,不直接返回浏览器而是先在服务器端使用程序缓存保留(php.ini中使用output_buffering),有了该内容之后,在程序缓存内会自动调整响应头和响应体(允许响应头在已经输出的内容之后再设置),但是会报错

    总结:header设置响应体之前不要有任何输出

    • location:重定向,立即跳转(响应体不用解析)
      浏览器在解析服务器响应的时候,先判定响应行,继续响应头,最后响应体:location是在响应头中,所以浏览器一旦见到该协议项,不再向下解析
      语法:header('location:test.php');
    • refresh:重定向,定时跳转(响应体会解析)
      延时重定向:浏览器会根据具体时间延迟后在访问指定跳转链接:浏览器在准备跳转访问之前,会继续解析HTTP协议(响应头和响应体)
      语法:header('refresh:3;url=test.php');
    • content-type:内容类型,MIME类型
      语法:header('content-type:text/html;charset:utf-8');
    • content-disposition:内容类型,MIME类型扩展,激活浏览器文件下载对话框
      浏览器在解析内容的时候,默认是直接解析:那么有时候需要浏览器不解析,当做内容下载成文件时就需要使用该设置
      语法:header('content-disposition:attachment;filename=girl.jpg');

    PHP模拟HTTP请求

    原理

    PHP可以通过模拟HTTP协议发起HTTP请求
    CURL是一个非常强大的开源库,支持很多协议,包括HTTP、FTP、TELNET等,我们使用它来发送HTTP请求,它给我们带来的好处是可以通过灵活的选项设置不同的HTTP协议参数,并且支持HTTPS。CURL可以根据URL前缀是“HTTP”还是“HTTPS”自动选择是否加密发送内容

    前提条件:HTTP协议的客户端/服务端模式,HTTP协议不局限于一定要浏览器访问

    CURL扩展库使用
    1. 去ini文件中开启CURL扩展
    2. 如果扩展无法使用,则需要将对应的dll文件放到C盘的windows目录下
    3. 重启Apache
    模拟步骤:
    1. 建立连接:curl_init():激活一个CURL连接功能,用一个变量来接收
    2. 设置请求选项:curl_setopt()
      CURLOPT_URL:连接对象
      CURLOPT_RETURNTRANSFER:将服务器执行的结果(响应)以文件流的形式返回给请求界面(PHP脚本)
      CURLOPT_POST:是否采用POST方式发起请求(默认为GET)
      CURLOPT_POSTFIELDS:用来传递POST提交的数据,分文两种方式:字符串(name=abc&pswd=123)以及数组形式(array(‘name’=>‘abc’,…))
      CURLOPT_HEADER:是否得到相应的header信息(响应头),默认不获取
    3. 执行请求:curl_exec():执行选项(与服务器发起请求),得到服务器返回的内容
    4. 关闭连接:curl_close():关闭资源

    文件编程

    文件编程初步认识

    文件编程的必要性

    文件编程指利用PHP代码针对文件(文件夹)进行增删查改操作

    在实际开发项目中,会有很多内容(文件上传、配置文件等)具有很多不确定性,不能在一开始就手动创建,需要根据实际需求和数据本身来进行管理,这个时候就可以使用PHP文件变成来实现代码批量控制和其他操作

    文件操作的分类
    1. 目录操作:文件夹,用来存放文件的特殊文件
    2. 文件操作:用来存放内容

    目录操作

    文件操作创建目录结构

    mkdir(路径名字);:创建成功返回true,创建失败返回false
    如果我们重复创建了一个同名文件夹,那么浏览器会报错,但有时我们做的这些操作都是为了得到已经创建了该文件夹这样的一个结果,如果结果已经存在了,那么可以忽略该错误:抑制错误-@mkdir(路径名字);

    删除目录

    语法:rmdir(文件夹路径);

    读取目录

    读取方式:将文件夹(路径)按照资源方式打开

    1. opendir():打开资源,返回一个路径资源,包含指定目录下的所有文件(文件夹)
    2. readdir():从资源中读取指针所在位置的文件名字,然后指针下移,直到指针移出资源
      每个文件夹都包含两个文件夹,分别是./../文件夹,代表当前目录和上一级目录,且这两个文件夹排在第1,2位

    读取所有目录我们可以使用遍历:

    while($file = readdir($r)){
        echo $file,'<br/>';
    }
    
    关闭目录

    closedir():关闭资源

    其他目录操作
    1. dirname(路径):得到该路径(可以是文件夹,也可以是具体文件)的上一层路径
    2. realpath(路径):得到真实路径:得到该文件夹的路径,如果路径参数给的是一个具体文件,那么会返回false
    3. is_dir():判断指定路径是否为目录,返回true或false
    4. scandir():封装版的opendir()+readdir()+closedir(),获取一个指定路径下的所有文件信息,以数组形式返回
    递归遍历目录

    指定一个目录的情况下,将其下的所有文件和目录,及其目录内部的所有内容都输出出来

    递归算法:

    将大问题切成相似的小问题,然后可以调用解决大问题的方法来解决小问题

    递归遍历目录的思维逻辑:

    1. 设计一个能够遍历一层文件的函数
    2. 找到递归点:遍历得到的文件是目录,应该调用当前函数(调用自己)
      ① 需要构造路径(遍历得到的结果只是文件的名字)
      ② 需要注意排除./../
    3. 找到递归出口:遍历完这个文件夹之后,发现没有任何子文件夹(函数不再调用自己)

    补充:如何显示层级关系?
    函数第一次运行遍历的结果是最外层目录,内部调用一次说明进入一个子目录,子目录再调用一次函数进入孙目录,如果能够在第一次调用的时候给个标记,然后在进入的时候,通过标记的变化来识别层级关系,就可以达到目的。通过该标记还可以进行相应的缩进

    代码实现
    <?php
    $dir = realpath('./father/');
    function my_scandir($dir, $level = 0)
    {
        //保证文件安全:如果不是路径则没有必要执行
        if (!is_dir($dir)) dir($dir . '<br/>');
        //读取全部路径信息,遍历输出
        $files = scandir($dir);
        foreach ($files as $file) {
            if ($file == '.' || $file == '..') continue;
    
            //$file就是一个个文件名
            echo str_repeat("&nbsp;&nbsp;&nbsp;", $level) . $file . '<br/>';
            //构造路径
            $file_dir = $dir . '/' . $file;
            if (is_dir($file_dir)) my_scandir($file_dir, $level + 1);
        }
    }
    
    my_scandir($dir);
    

    文件操作

    常见文件操作函数
    1. file_get_contents(文件路径):获取指定文件的所有内容,如果路径不存在最好做安全处理
    2. file_put_contents(文件路径,内容):将指定内容写入到指定文件内,如果当前路径下不存在指定的文件,函数会自动创建(如果路径不存在则不会创建路径)
    旧版本PHP常见文件操作函数

    旧版本PHP中是将文件操作用资源形式处理,不论是读还是写都依赖资源指针:文件内容中指针所在位置

    1. fopen(文件路径,打开模式):打开一个文件资源,限定打开模式
    2. fread(资源,长度):从打开的资源中读取指定长度的内容(字节)
    3. fwrite(资源,内容):向打开的资源中写入指定的内容
    4. fclose(资源):关闭资源
    其他文件操作函数
    1. is_file():判断文件是否正确(不识别路径)
    2. filesize():获取文件大小
    3. file_exists():判断文件是否存在(识别路径)
    4. unlink():取消文件名字与磁盘地址的连接
    5. filemtime():获取文件最后一次修改的时间
    6. fseek():设定fopen打开的文件的指针位置
    7. fgetc():一次获取一个字符
    8. fgets():一次获取一个字符串(默认行)
    9. file():读取整个文件,类似file_get_contents,但file是按行读取,返回一个数组
    文件下载

    文件下载:从服务器将文件通过HTTP协议传输到浏览器,浏览器不解析并保存成相应的文件

    提供下载方式可以使用HTML中的a标签<a href="互联网绝对文件路径">,但不推荐,缺点:

    1. a标签能够让浏览器自动下载的内容有限,浏览器是发现如果解析不了了才会启用下载
    2. a标签下载的文件存储路径会需要通过href属性写出来,这样会暴露服务器存储数据的位置

    PHP下载:
    php下载:读取文件内容,以文件流的形式传递给浏览器,在响应头中告知浏览器不要解析,激活下载框实现下载

    1. 指定浏览器解析字符集
    2. 设定响应头
      ① 设定文件返回类型:image/jpg||application/octem-stream
      ② 设定返回文件计算方式:Accept-ranges:bytes
      ③ 设定下载提示:content-disposition:attachment:filename=‘文件名’
      ④ 设定文件大小:Accept-length:文件大小(字节)
    3. 读取文件
      如果文件较小,可以使用file_get_contents()来读取文件,如果文件较大,则需要使用fopen()
    4. 输出文件

    示例代码:

    <?php
    //设定解析字符集
    header('content-type:text/html;charset=utf8');
    $file = 'c++笔记.docx';
    
    //设定下载响应头
    header('content-type:application/octem-stream'); //以文件流形式传输数据给浏览器
    header('accept-ranges:bytes'); //以字节方式计算
    header('content-disposition:attachment;filename=' . $file); //附件下载,指定命名
    header('accept-length:' . filesize($file));
    
    //如果文件的名字是从文件夹读取出来的,而且存在中文,那么如果直接使用名字作为下载名字会出现乱码,就需要进行字符集转码:$file = iconv('gbk', 'utf-8', $file);
    //输出文件
    echo file_get_contents($file);
    
    //大文件下载
    //方案1:直接读,再输出
    // $f = @fopen($file, 'r') or die();
    // while ($row = fread($f, 1024)) {
    //     echo $row;
    // }
    
    //方案2:判定是否可读,再读和输出
    // while (!feof($f)) {
    //     echo fread($f, 1024);
    // }
    fclose($file);
    

    会话技术

    会话技术初步认识

    会话技术介绍

    web会话可简单理解为:用户开一个浏览器,访问某一个web站点,在这个站点点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称为一个会话
    HTTP协议的特点是无状态/无连接,当一个浏览器连续多次请求同一个web服务器时,服务器时无法区分多个操作是否来自同一个浏览器(用户)。会话技术就是通过HTTP协议想办法让服务器能够识别来自同一个浏览器的多次请求,从而方便浏览器(用户)在访问同一个网站的多次操作中,能够持续进行而不需要进行额外的身份验证

    会话技术分类
    1. cookie技术
      cookie是在HTTP协议下,服务器或脚本可以维护客户工作站上信息的一种方式。cookie是由web服务器保存在用户浏览器(客户端)上的小文本文件(HTTP协议响应头),它可以包含有关用户的信息。无论何时用户链接到服务器(HTTP请求携带数据),web站点都可以访问cookie信息
    2. session技术
      senssion没有恰当的翻译,一般翻译为“时域”。在计算机专业术语中,senssion是指一个终端用户与交互系统进行通信的时间间隔,通常指从注册进入系统到注销退出系统之间所经过的时间。以及如果需要的话,可能还有一定的操作空间。senssion技术是将数据保存到服务端,无论何时用户链接到服务器,web站点都可以访问session信息,session技术的实现是依赖于cookie技术的
    cookie与session的区别
    1. 安全性方面
    • session存储在服务器端,安全性高
    • cookie存储浏览器端,安全性低
    1. 数据大小方面
    • cookie的数量和大小都有限制
    • session数据存储不限
    1. 可用数据类型
    • cookie只能存储简单数据,如数值/字符串
    • session可以存储复杂数据(自动序列化)
    1. 存储位置
    • cookie存在浏览器中
    • session存在服务器上

    cookie的基本使用

    cookie原理

    cookie技术:服务器将数据通过HTTP响应存储到浏览器上,浏览器可以在以后携带对应的cookie数据访问服务器

    1. 第一次请求时,PHP通过setcookie函数将数据通过http协议响应头传输给浏览器
    2. 浏览器在第一次响应的时候将cookie数据保存到浏览器
    3. 浏览器后续请求同一个网站的时候,会自动检测是否存在cookie数据,如果存在将在请求同中将数据携带到服务器
    4. PHP执行的时候会自动判断浏览器请求中是否携带cookie,如果携带,自动保存到$_COOKIE
    5. 利用$_COOKIE访问cookie数据
    设置cookie信息

    setcookie函数用来设定cookie信息
    setcookie(名字,值);

    1. cookie名的设置:字符串,作第一个参数
    2. cookie值的设置:第二个参数
    3. cookie值的类型要求:必须是简单类型中的整数或者字符串

    COOKIE(会话技术)能够实现跨脚本共享数据

    cookie高级使用

    cookie的生命周期

    cookie生命周期:cookie在浏览器的生存时间

    1. 默认(不设定)的生命周期:默认是关闭浏览器后(会话结束)
    2. 设定一个常规日期戳的周期:通过setcookie第三个参数可以限定生命周期,是用时间戳来表示,从格林威治时间开始
    3. 设定为"0"的周期,当时间戳设置为0的时候,表示就是会话结束就过期
    删除cookie

    服务器没有权限去操作浏览器上的内容,但可以通过设定生命周期来让浏览器自动判定cookie是否有效,无效会清除

    1. 清空cookie数据内容:setcookie('name','');
    2. 设置过期的时间戳:setcookie('name','wsc',time());
    cookie作用范围

    不同的文件夹层级中,设定的cookie默认是在不同的文件夹下有访问限制。上层文件夹中设定的cookie可以在下层(子文件夹)中访问,而子文件夹中设定的cookie不能在上层文件夹中访问

    1. 默认的范围:上层看不到下层的内容,而下层可以看到上层的内容
    2. 设置范围为/:告知浏览器当前cookie的作用范围是网站根目录:setcookie(名字,值,生命周期,作用范围);
    cookie跨子域

    跨子域:在同一级别域名下,myitcast.com(一级域名)可以有多个子域名(www.myitcast.com和gz.myitcast.com),他们之间是搭建在不同的服务器上(不同网站根目录文件夹),但是可以通过COOKIE设置实现对应的cookie共享访问,但是默认是不允许跨域名访问的

    1. 设定cookie的有效域名(不同的域名、主机之间不能共享cookie)
      可以通过setcookie的第五个参数来控制:setcookie(名字,值,生命周期,作用范围,有效域名)
    2. 不设定时的默认有效域名
    3. 跨子域的设定方法:在设定域名访问的时候设定上级域名即可:myitcast.com,这个是所有以myitcast.com结尾的网站都可以共享cookie
    cookie数组数据

    cookie本身只支持简单数据(数据或字符串),能够保留的数据本身有限,也不成体系。如果需要使用cookie来保留一组数据的话,要想办法凑成数组,但cookie不支持数组

    1. 伪装数组,虽然浏览器不接受中括号,但是PHP会将中括号当数组处理:
      setcookie('数组名[下标]',值);
    2. 读取伪装数组:$_COOKIE[数组名][下标];

    session基本使用

    会话技术的本质是为了实现跨脚本共享数据:在一个脚本中定义数据,在另外一个脚本中保存数据

    session原理

    session与浏览器无关,但是与cookie有关

    1. PHP碰到session_start()时开启session会话,会自动检测sessionID
      a)如果碰到cookie中存在,使用现成的
      b)如果cookie中不存在,则创建一个sessionID,并通过响应头以cookie形式保存到浏览器上
    2. 初始化超全局变量$_SESSION为一个空数组
    3. PHP通过sessionID去指定位置(session文件存储位置),匹配对应的文件
      a)不存在该文件:创建一个以sessionID命名的文件
      b)存在该文件:读取文件内容(反序列化),将数据存储到$_SESSION
    4. 脚本执行结束,将$_SESSION中保存的所有数据序列化存储到sessionID对应的文件夹
      在这里插入图片描述
    session的使用

    任何时候都要先开启session
    $_SESSION是通过session_start()函数的调用才会定义的,没有直接定义

    1. 设置session信息
      如果想存储数据到session中,那么只要不断给$SESSION数组添加元素即可(数值,字符串都可以)
    2. 读取session信息
      通过数组访问即可
    删除一个session信息

    删除session就是将session数据清理掉($_SESSION拿不到)
    语法:unset($_SESSION[元素下标]);

    删除全部session信息

    删除全部数据就是让$_SESSION变成一个空数组
    语法:$_SESSION = array();

    session相关配置

    session基础配置
    1. session.name:session名字,保存到cookie中sessionID对应的名字
    2. session.auto_start:是否自动开启session(无需手动session_start()),默认关闭
    3. session.save_handler:session数据的保存方式,默认是文件形式
    4. session.save_path:session文件默认存储的范围,默认存在系统临时文件,我们需要指定一个文件夹来存储
    session常用配置
    1. session.cookie_lifetime:PHPsessionID在浏览器端对应cookie的生命周期,默认是会话结束
    2. session.cookie_path:sessionID在浏览器存储之后允许服务器访问的路径(cookie有作用范围)
    3. session.cookie_domain:cookie允许访问的子域(cookie可以跨子域)
    如何进行配置
    1. php.ini中配置:全局配置,修改php.ini中的配置项
    2. 脚本中配置:PHP可以通过ini_set函数来在运行中设定某些配置项(只会对当前运行的脚本有效),把这种配置称之为项目级:
      ini_set('session.save_path','E:/server/sessions');

    销毁session

    前面的删除session是指删除session数据,$_SESSION中看不到而已,而销毁session是指删除session对应的session文件

    系统提供了一个函数session_destory(),会自动根据session_start得到的sessionID去找到指定的session文件,并把其删除

    session垃圾回收机制

    垃圾回收机制原理

    session会话技术后,session文件并不会自动清除,如果每天有大量session文件产生但是又都是失效的,会增加服务器的压力和影响session效率

    垃圾回收,是指session机制提供了一种解决垃圾session文件的方式:给session文件指定周期,通过session文件最后更改时间与生命周期进行综合判定,如果已经过期则删除对应的session文件,如果没有过期则保留。这样就可以及时清理无效的僵尸文件,从而提高空间利用率和session工作效率

    1. 任何一次session开启(session_start),session都会尝试去读取session文件
    2. 读取session文件后,有可能触发垃圾回收机制(在session系统中也是一个函数,自己有一定几率调用)
    3. 垃圾回收机制会自动读取所有session文件的最后编辑时间,然后加上生命周期与当前时间进行比较
      a)过期:删除
      b)有效:保留
    垃圾回收参数设置
    • session.gc_maxlifetime = 1440;规定的session文件最大的生命周期是1440秒,即24分钟
    • session.gc_probability = 1; 垃圾回收概率分子
    • session.gc_divisor = 1000; 垃圾回收概率分母

    即默认触发概率为1/1000

    禁用cookie后如何使用session

    禁用cookie后不能使用session的原因

    session技术需要利用到cookie技术来保存sessionID,从而使得PHP能够在跨脚本的时候得到相同的sessionID,从而访问同一个session文件

    解决思路:最终让session_start在开启之前拿到原来的sessionID

    实现无cookie使用session

    在PHP中,想要解决没有cookie也实现session技术的方式有两种
    方案一:
    利用PHP提供的session函数session_idsession_name来获得和设置sessionID或者name从而解决session_start产生新sessionID的情况
    a)在session保存数据的脚本中获取sessionID和名字
    b)将数据传送给另外一个脚本(使用URL或Form表单)
    c)在需要使用到session的脚本中先接受数据
    d)阻止session_start产生新的ID:session_id(获取数据中的ID);
    方案二:
    可以利用session已经提供的解决方案自动操作

    原因1:默认session配置只允许使用cookie保存sessionID:cookie_only
    原因2:默认关闭了其他能够传送数据的方式,值保留了cookie

    a)修改PHP配置文件,开启其他方式传输sessionID,关闭只允许使用cookie传输功能
    b)一旦配置开启,PHP会自动将sessionID和session名字在其他位置绑定数据,同时还会在session_start的时候,考虑其他方式(表单)传递的数据,而不是只有cookie

    GD图像处理

    GD图像处理基本技术

    GD库引入与介绍

    GD库的概念:Graphic Device,图像处理扩展(外部提供的API),能够允许PHP在脚本中使用对应的函数来实现某些图像制作功能
    GD库的引入:GD库是外部提供的API,已经被集成到PHP扩展库中,只需在PHP的配置文件中开启对应的GD2扩展即可

    画图介绍

    画图本质是在内存中开辟一块很大的内存区域用于图片制作
    画图的基本流程:

    1. 准备画布
    2. 开始作画
    3. 保存内容
    4. 销毁画布
    创建画布资源
    1. imagecreate(宽,高):创建一个空白画布(背景色是白色)
    2. imagecreatetruecolor(宽,高):创建一个真彩画布(背景色是黑色的,需要填充)
    3. iamgecreatefromjpeg(图片文件路径):打开一个jpeg格式的图片资源
    4. imagecreatefromgif(图片文件路径):打开个gif格式图片资源(PHP中无法实现动态)
    5. imagecreatefrompng(图片文件路径):打开png格式图片资源
    操作画布资源

    所有的画布资源操作都是需要指定画布资源,而且是作为第一个参数

    1. 分配颜色:imagecolorallocate(画布资源,红色,绿色,蓝色);,根据RGB三色组给指定画布资源分配一组颜色,会返回一个颜色句柄(一组整数),每一个色组都是从0到255
      在真彩图片资源中,所有分配的颜色都不会自动给图片资源上色,是用来后续操作图片资源的时候,指定着色的。但是如果当前使用的是imagecreate创建的图片资源,那么第一个分配的颜色,会自动被着色为图片背景色
    • 凡是给图片上增加内容,基本都需要分配颜色(每一个操作图片的函数之前,都需要先调用分配颜色的函数得到一个颜色)
    1. 填充区域:imagefill(画布资源,起始X坐标,起始Y左边,颜色句柄);:指定位置开始填充指定颜色
      imagefill填充逻辑:从指定点开始,自动匹配相邻点,如果颜色一致,自动渲染,扩展到全图
    2. 画直线:imageline(图片资源,起始点X,起始点Y,终点X,终点Y,颜色);
    3. 画矩形:imagerectangle(图片资源,左上角X,左上角Y,右下角X,右下角Y);
    4. 画圆弧:imagearc(图像资源,轴点X,轴点Y,宽度,高度,弧度重点,颜色);
    5. 在画布上写字:
      a)写英文:imagestring(图片资源,文字大小,起始X,起始Y,内容,颜色);
      b)写中文:imagettftext(图片资源,文字大小,旋转角度,起始X,起始Y,颜色,字体(绝对路径),内容);
    输出画布资源
    1. 输出为图片文件:以图片文件形式保存到本地文件夹
    2. 输出为网页图片:将图片展示给HTML

    相关函数:
    imagejpeg():保存成jpeg格式图片
    imagepng():保存成png格式图片
    imagegif():保存成gif格式图片
    如果图片只是提供了图片资源,不指定保存的文件位置(第二个参数),那么系统认为是输出给浏览器;如果指定了位置,那么系统认为是保存到本地

    如果要输出给浏览器则必须告知浏览器响应头这是图片脚本,不然会乱码

    两个小细节:
    1)如果图片输出或者保存出错,浏览器只会让你看到错误的图片,但不会告知你错误原因代码,此时我们需要关闭header的图片设置,再看问题
    2)如果图片输出出错,且关掉header也看不到错误,最大的可能是图片输出之前输出了别的额外内容,如空格、空行、pre等,此时应该查看网页源代码,看是否有多余的输出

    销毁画布资源

    语法:iamgedestory(画布资源);

    获取图片信息
    1. 获取图片尺寸:imagesx()imagesy()
    2. 获取图片所有信息:getimagesize()

    GD图像处理应用案例

    验证码的实现

    验证码(CAPTCHA)是“completely autpmated public turing test to tell computers and humans apart”(全自动区分计算机和人类的图灵测试)的缩写,是一种区分用户是计算机还是人的公共全自动程序。可以防止:恶意破解密码、刷票、论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上用验证码是现在很多网站通行的方式,我们利用比较简易的方式实现了这个功能。这个问题可以由计算机生成并评判,但是必须只有人类才能解答。由于计算机无法解答CAPTCHA的问题,所以回答出问题的用户就可以被认为是人类

    图片验证码:计算机将拿到的验证码存放到图片中,然后用户看到并识别,随后提交给服务器,服务器再根据用户提交的和服务器之前生成的进行比较
    实现步骤:

    1. 实现验证码图片的展示
      a)生成图片资源,设定背景色
      b)写入文字
      c)输出图片给浏览器
      d)关闭资源
    2. 实现验证码文字的随机变化
      a)制作目标字符串集:从这里选内容
      b)一个汉字在utf8中占用3个字节:确定字符数
      c)随机取出对应的字符
      d)将取到的字符放到指定的图片位置即可
    3. 文字颜色随机改变
    4. 添加验证码背景干扰和噪点(干扰点、干扰线、修改字体大小,位置等)
    5. 实现点击刷新验证码功能:
      a)创建一个表单文件,里面有一个img标签能够显示图片:<img src = '验证码.php'>
      b)实现点击更换验证码:让src重新请求PHP脚本,产生一张新的验证码。因此需要给img标签添加一个点击事件:img的src是否重新请求,取决于浏览器,而浏览器重新发起请求取决于src是否改变
      c)在src后面添加一个?+随机数就可以让每次点击的src都不一样,即可重新请求PHP脚本
      <img src="test.php" onclick="this.src='test.php?' + Math.random()" />
    验证码脚本完整代码
    <?php
    //设置响应头
    header('content-type:image/png');
    //获得画布资源
    $img = imagecreatetruecolor(200, 50);
    //设置画布颜色并填充
    $img_color = imagecolorallocate($img, 70, 115, 100);
    imagefill($img, 0, 0, $img_color);
    //设置字符颜色和字体
    $str_color1 = imagecolorallocate($img, rand(0, 255), rand(0, 255), rand(0, 255));
    $str_color2 = imagecolorallocate($img, rand(0, 255), rand(0, 255), rand(0, 255));
    $str_color3 = imagecolorallocate($img, rand(0, 255), rand(0, 255), rand(0, 255));
    $str_color4 = imagecolorallocate($img, rand(0, 255), rand(0, 255), rand(0, 255));
    $typeface = 'D:\phpstudy_pro\WWW\simhei.ttf';
    //制作字符串验证源
    $words = '啊啊给我一杯忘情水换我一生不流泪';
    //记录字符串字符数
    $count = mb_strlen($words);
    //使用rand随机生成一个数字,代表从第几个字符开始截取
    $char1 = mb_substr($words, rand(0, $count - 1), 1);
    $char2 = mb_substr($words, rand(0, $count - 1), 1);
    $char3 = mb_substr($words, rand(0, $count - 1), 1);
    $char4 = mb_substr($words, rand(0, $count - 1), 1);
    //书写汉字
    imagettftext($img, 28, 30, 10, 30, $str_color1, $typeface, $char1);
    imagettftext($img, 28, 60, 50, 30, $str_color2, $typeface, $char2);
    imagettftext($img, 28, -30, 100, 30, $str_color3, $typeface, $char3);
    imagettftext($img, 28, -30, 150, 30, $str_color4, $typeface, $char4);
    //增加干扰点和干扰线
    
    for ($i = 0; $i < 7; $i++) {
        $star_color = imagecolorallocate($img, rand(0, 255), rand(0, 255), rand(0, 255));
        imagestring($img, 2,  rand(5, 195), rand(5, 45), '*', $star_color);
        $line_color = imagecolorallocate($img, rand(0, 255), rand(0, 255), rand(0, 255));
        imageline($img, rand(0, 5), rand(0, 50), rand(195, 200), rand(0, 50), $line_color);
    }
    imagepng($img);
    imagedestroy($img);
    

    缩略图的实现

    制作图片缩略图的原理

    将原图打开,然后放到另外一个较小的图片资源中,得到一个尺寸上较小的图,最后进行保存即可

    实现固定宽高的缩略图
    1. 得到一张原图资源
    2. 得到一个缩略图资源(较小)
    3. 图片采样赋值:GD提供了一个函数:
      imagecopyresampled($dst_image,$src_image,$dst_x,$dst_y,$src_x,$src_y,$dst_w,$dst_h,$src_w,$src_h)
      dst_image:目标图象连接资源
      src_image:源图象连接资源。
      dst_x:目标 X 坐标点
      dst_y:目标 Y 坐标点
      src_x:源的 X 坐标点
      src_y:源的 Y 坐标点
      dst_w:目标宽度
      dst_h:目标高度
      src_w:源图象的宽度
      src_h:源图象的高度
    4. 保存缩略图到本地
    5. 销毁所有资源(原图和缩略图):imagedestory()
    //制作一个缩略图
    <?php
    $src_tiger = 'D:\phpstudy_pro\WWW\tiger.jpg';
    $tiger = imagecreatefromjpeg($src_tiger);
    $dst = imagecreatetruecolor(100, 100);
    imagecopyresampled($dst, $tiger, 0, 0, 0, 0, 100, 100, imagesx($tiger), imagesy($tiger));
    header('content-type:image/jpeg');
    imagejpeg($dst);
    
    实现等比缩放的固定宽或高的缩略图

    优点:图片不会失真(变形)
    缺点:缩略图有些部分需要进行额外填充(白色填充:补白)

    等比例缩略图与固定缩略图的制作区别:在于需要通过计算来得出缩略图的宽和高,算法原理:

    1. 计算缩略图宽高比
    2. 计算原图宽高比
    3. 比较:
      a)如果缩略图宽高比大于原图宽高比,则将缩略图中用原图的高尽可能填满,即缩略图的高是完整的,但宽度不够
      b)如果缩略图宽高比小于原图宽高比,则将缩略图中用原图的宽尽可能填满,即缩略图的宽是完整的,但高度不够
    4. 将图片放到缩略图中间

    水印图的实现

    制作水印图的原理

    水印图制作原理:将一个带有明显标志的图片放到另外一张需要处理的图片之上

    制作固定位置的水印图(左上角)

    a)获取原图资源(需要放上水印图)
    b)获取水印图资源
    c)合并图片(把水印图合到目标图上):imagecopymerge(目标资源,水印资源,目标起始X,目标起始Y,水印起始X,水印起始Y,目标宽,目标高,透明度);
    d)保存输出
    e)清除资源

    实现可选9个位置的水印图

    a)创建一个制作水印图的函数结构:原图路径,水印图路径,水印图存储路径,错误信息记录,水印加载位置(1代表左上角,以此类推至右下角),透明度
    b)结果是希望产生水印图,但是要考虑两种结果。如果成功了,返回文件保存名字;如果失败了,返回false,但是还需要告知外界错误原因:通过引用传参
    c)制作水印图前提:原图和水印图都存在(判断MIME类型)
    d)判定保存路径是否存在
    e)打开原图和水印图资源:确定要用什么函数来打开图片资源(通过判断图面MIME类型来确定)
    f)计算水印位置,合并图片
    g)保存带水印图片

    <?php
    /*
    *制作水印图
    *@param1 string $src_image,原图路径
    *@param2 string $wat_image,水印图路径
    *@param3 string $path,水印图存储路径
    *@param4 string &$error,记录错误信息的变量
    *@param5 int $position = 1,水印加载位置:1代表左上角以此类推至右下角
    *@param6 int $pct = 20,透明度,默认20
    */
    function watermark($src_image, $wat_image, $path, &$error, $position = 1, $pct = 20)
    {
        if (!is_file($src_image)) {
            $error = '原图不存在';
            return false;
        }
        if (!is_file($wat_image)) {
            $error = '原图不存在';
            return false;
        }
        if (!is_dir($path)) {
            $error = '保存位置错误';
            return false;
        }
        $src_info = getimagesize($src_image);
        $wat_info = getimagesize(($wat_image));
        //定义一组数据,用来产生对应图片格式
        $allow = array(
            'image/jpeg' => 'jpeg',
            'image/jpg' => 'jpeg',
            'image/gif' => 'gif',
            'image/png' => 'png',
            'image/pjpeg' => 'jpeg'
        );
        //匹配数据
        if (!array_key_exists($src_info['mime'], $allow)) {
            $error = '当前文件资源不允许制作水印图!';
            return false;
        }
        if (!array_key_exists($wat_info['mime'], $allow)) {
            $error = '当前水印图不允许作资源使用!';
            return false;
        }
        //组合出一个函数名
        $src_open = 'imagecreatefrom' . $allow[$src_info['mime']];
        $wat_open = 'imagecreatefrom' . $allow[$wat_info['mime']];
        $src_save = 'image' . $allow[$src_info['mime']];
        //打开原图资源
        $src = $src_open($src_image); //因为$src_open($src_image)的值为imagecreatefromjpeg,所以给它加上括号就可以当imagecreatefromjpeg()函数来使用,相当于$src = imagecreatefromjpeg($src_image),同时jpeg会根据上面的mime类型而实时改变
        $wat = $wat_open($wat_image);
        //计算水印图在原图中出现的位置
        $start_x = $start_y = 0;
        switch ($position) {
            case 1: //左上
                break;
            case 2: //上中
                $start_x = floor(($src_info[0]) / 2);
                break;
            case 3: //右上
                $start_x = $src_info[0] - $wat_info[0];
                break;
            case 4: //中左
                $start_y = floor(($src_info[1] - $wat_info[1]) / 2);
                break;
            case 5: //中心
                $start_x = floor(($src_info[0] - $wat_info[0]) / 2);
                $start_y = floor(($src_info[1] - $wat_info[1]) / 2);
                break;
            case 6: //中右
                $start_x = $src_info[0] - $wat_info[0];
                $start_y = floor(($src_info[1] - $wat_info[1]) / 2);
                break;
            case 7: //下右
                $start_y = $src_info[1] - $wat_info[1];
                break;
            case 8:
                $start_x = floor(($src_info[0] - $wat_info[0]) / 2);
                $start_y = $src_info[1] - $wat_info[1];
                break;
            case 9:
                $start_x = $src_info[0] - $wat_info[0];
                $start_y = $src_info[1] - $wat_info[1];
                break;
        }
        //合并图片资源
        if (imagecopymerge($src, $wat, $start_x, $start_y, 0, 0, $wat_info[0], $wat_info[1], $pct)) {
            //保存图片
            $filename = 'watermark_' . trim(strrchr($src_image, '/'), '/');
            $src_save($src, $path . '/' . $filename);
        } else {
            //失败
            $error = '水印图制作失败!';
            return false;
        }
    }
    $res = watermark('D:/phpstudy_pro/WWW/wallpaper.jpg', 'd:/phpstudy_pro/WWW/wtm.jpg', './', $error, 9);
    if ($res) {
        echo $res;
    } else {
        echo $error;
    }
    
    展开全文
  • 02_CheckBoxDemo 演示复选框和单选按钮控件的使用方法。 03_ComboBoxDemo 演示组合框和列表框控件的使用方法。 04_ScrollBarDemo 演示滚动条控件的使用方法。 05_SpinDemo 演示数值调节按钮的使用方法。 06...
  • Java典型模块

    2012-02-25 18:27:40
    14.3.3 单选按钮和复选框组件 14.3.4 选择框组件 14.3.5 输入框组件 14.4 小结 第15章 控制动画项目 (JSliderTimer组件) 15.1 控制动画原理 15.1.1 项目结构框架分析 15.1.2 项目功能业务分析 15.2 控制动画的...
  • Bootstrap官网教程整理

    热门讨论 2015-02-03 10:07:36
    复选框和单选插件 115 按钮插件 116 带有下拉菜单的按钮 117 分割的下拉菜单按钮 119 Bootstrap 导航元素 121 表格导航或标签 121 胶囊式的导航菜单 122 两端对齐的导航 124 禁用链接 125 下拉菜单 126 Bootstrap ...
  •  14.3.3 单选按钮和复选框组件 258  14.3.4 选择框组件 261  14.3.5 输入框组件 263  14.4 小结 265  第15章 控制动画项目 (jslidertimer组件) 266  教学视频:7分钟  15.1 控制动画原理 266...
  •  14.3.3 单选按钮和复选框组件 258  14.3.4 选择框组件 261  14.3.5 输入框组件 263  14.4 小结 265  第15章 控制动画项目 (jslidertimer组件) 266  教学视频:7分钟  15.1 控制动画原理 266  ...
  •  14.3.3 单选按钮和复选框组件 258  14.3.4 选择框组件 261  14.3.5 输入框组件 263  14.4 小结 265  第15章 控制动画项目 (jslidertimer组件) 266  教学视频:7分钟  15.1 控制动画原理 266...
  •  14.3.3 单选按钮和复选框组件 258  14.3.4 选择框组件 261  14.3.5 输入框组件 263  14.4 小结 265  第15章 控制动画项目 (jslidertimer组件) 266  教学视频:7分钟  15.1 控制动画原理 266...
  • 12.1 Struts下JSP页面传递复选框值技巧 15 12.1 Struts中下拉选取/选项列表的HTML标签 15 12.1 Struts中html:errors的HTML标签 15 12.1 Struts中使用标签上传文件 15 第13章 Struts Bean标签库 15 13.1 如何获得...
  • 8.3.4 考虑国际化 8.3.5 模拟时钟 8.4 在状态报告上使用计时器 第9章 子窗口控件 9.1 按钮类 9.1.1 创建子窗口 9.1.2 子窗口传递信息给父窗口 9.1.3 父窗口传递信息给子窗口 9.1.4 按钮 9.1.5 复选框 9.1.6 单选按钮...
  • VBScript介绍手册

    2010-11-29 12:58:42
    12.6 单选框控件和复选框控件 12.6.1 单选框控件 12.6.2 复选框控件 12.7 选择列表控件 12.8 其他控件 12.8.1 图像控件 12.8.2 文件控件 12.9 小结 第13章 鼠标键盘事件处理 13.1 event对象 13.2 鼠标事件的处理 ...
  • 复选框操作.avi ├0048.实例:多选取消以及反选 ├0049.单选框以及下拉框.avi ├0050.属性操作 ├0051.实例:Tab菜单.avi ├0052.标签操作之创建并插入操作.avi ├0053.标签操作之创建并插入操作2 ├0054.标签操作...
  • HTML与CSS入门经典(第7版

    热门讨论 2012-09-03 21:50:17
    18.6.1复选框 18.6.2单选按钮 18.6.3选择列表 18.6.4文本区域 18.7提交表单数据 18.8使用PayPal BuyNow按钮 18.9总结 18.10问与答 18.11作业 18.11.1坝4验 18.11.2答案 18.12练习 第19章 在网页中嵌入...
  • 然后介绍如何运用 DataReader 获取数据,接着将那些数据绑定到像单选按钮、复选框这样的不同控件上最重要的 DataGrid 上。 第 5 章讨论了一个重要的 ADO.NET 对象: DataSet ,它用于存储检索服务器上任何复杂...
  • JavaScript学习指南

    2011-08-18 09:59:11
    8.3 单选按钮和复选框 8.4 文本框、多行文本框、密码框和隐藏表单域元素 8.4.1 文本验证 8.5 input元素和基于正则表达式的验证 8.6 表单、沙箱和XSS 8.7 知识测验 8.8 测验答案 第9章 浏览器就像个难题箱 9.1 ...
  • 5.8.2 为ListView列表项添加复选框和选项按钮 147 5.8.3 对列表项进行增、删、改操作 149 5.8.4 改变列表项的背景色 153 5.8.5 ListActivity(封装ListView的Activity) 154 5.8.6 ExpandableListView(可扩展...
  • 9.1.5 复选框 9.1. 6 单选按钮 9.1.7 分组框 9.1.8 更改按钮文本 9.1.9 可见的启用的按钮 9.1.10 按钮输入焦点 9.2 控制与颜色 9.2.1 系统颜色 9.2.2 按钮颜色 9.2.3 wm_ctlcolorbtn...
  • 9.1.5 复选框 9.1. 6 单选按钮 9.1.7 分组框 9.1.8 更改按钮文本 9.1.9 可见的启用的按钮 9.1.10 按钮输入焦点 9.2 控制与颜色 9.2.1 系统颜色 9.2.2 按钮颜色 9.2.3 wm_ctlcolorbtn...
  • 5.8.2 为ListView列表项添加复选框和选项按钮 147 5.8.3 对列表项进行增、删、改操作 149 5.8.4 改变列表项的背景色 153 5.8.5 ListActivity(封装ListView的Activity) 154 5.8.6 ExpandableListView(可扩展...
  • 7.2.5 复选框 119 7.2.6 单选按钮 119 7.2.7 选择域 119 7.2.8 文件域 120 7.2.9 按钮 120 7.2.10 图像域 120 7.3 了解HTML 5表单 125 7.3.1 HTML表单的发展 125 7.3.2 HTML 5新增表单元素的作用 125 ...
  • 22.6.1 复选框 243 22.6.2 单选按钮 245 22.6.3 选择列表 245 22.6.4 文本区域 246 22.7 提交表单数据 246 22.8 总结 246 22.9 问与答 247 22.10 作业 248 22.10.1 测验 248 22.10.2 测验答案 ...
  • 疯狂Android讲义源代码

    2016-11-08 21:23:53
    2.3.5 单选按钮(RadioButton)与复选框(CheckBox)的功能与用法 2.3.6 状态开关按钮(ToggleButton)与开关(Switch)的功能与用法 2.3.7 时钟(AnalogClockDigitalClock)的功能与用法 2.3.8 计时器...
  • 7.7.1 布局的基本原理 117 7.7.2 布局计算的常用方法 118 7.7.3 自定义布局类(BorderLayout) 119 7.8 使用VE可视化布局 123 7.8.1 创建可视化的类 123 7.8.2 进行布局设置 124 7.9 本章小结 125 第8...
  • 7.7.1 布局的基本原理 117 7.7.2 布局计算的常用方法 118 7.7.3 自定义布局类(BorderLayout) 119 7.8 使用VE可视化布局 123 7.8.1 创建可视化的类 123 7.8.2 进行布局设置 124 7.9 本章小结 125 第8...
  • 7.7.1 布局的基本原理 117 7.7.2 布局计算的常用方法 118 7.7.3 自定义布局类(BorderLayout) 119 7.8 使用VE可视化布局 123 7.8.1 创建可视化的类 123 7.8.2 进行布局设置 124 7.9 本章小结 125 第8...

空空如也

空空如也

1 2 3 4
收藏数 68
精华内容 27
关键字:

复选框和单选框基本原理