分类 PHP 下的文章

"前车之鉴"-再造车轮Typecho_Plugin


前言

这是基于SweetAlert2伪实现的typecho图片放大效果的插件,因为之前发现博客里插入图片之后,它默认不能放大,而我虽然用的是笔记本电脑,但是电脑显示里的缩放与布局我不习惯用它推荐的125%,而是用了传统的100%,这就在浏览一些博客的时候显得主体内容比较小巧。我看了其他的一些博客平台,但凡是插入图片的,双击一下图片就会增大显示,这也算是个基本功能吧,但不知道是因为主题原因还是啥,我的博客就不行,自己先前在网上找过类似的插件,比如说梁先生制作的pScaleUp插件,能应对大多数typecho主题,但是我使用的这一款GreenGrapes主题却不是那么的理想,在启用这款插件时,在文章里试了下,发现图片确实被放大了,但是却被局限在容器里,因为在当前主题设定的文章内容主题容器有一个css属性 overflow: hidden;,这就导致了上述问题,本着不影响原先主题源代码并适当增加效果的选择性与美观性,就想着要不在尝试着再写一个简单的插件?因为之前写过一个,这次就是把轮子拿过来直接照葫芦画瓢就行,也不怎么麻烦。说干就干……

实现功能

  • 启用后进入的设置页面(因为我的主题配绿色会比较协调,所以选择了纯净绿)

设置页面.png

  • 按照上示设置后的页面效果(以我上一篇博客内的图片为例)

放大效果示例.png

  • 启用方法

git clone至plugins文件夹下并修改文件名为ExImg,后台启用并进入设置打开即可。
单击放大后图片的外部即可取消放大效果
git地址

过程

如何实现放大的效果我想了一下,之前基于SweetAlert实现过表白的弹窗效果,感觉效果还不错,以前用的是是这个官网的,但是相比起来SweetAlert2中的功能要更加完善一点(但我个人觉得从弹窗的美观性上来讲不如上一个)。后者可以自定义弹窗(alert)的图标和大小,并且只传入一个url即可,原先我暂定是使用向弹窗中插入HTML代码块实现显示image的功能,但是实际做了一下发现效果并不怎么样,索性还是直接用它的图标属性吧,还可以设置自定义图标的CSS类,对于这一句我开始以为能直接在里面写CSS属性,结果最后发现是能够指定类名,汗……然后他那个弹窗的宽高和边框的大小可以自己设定,然后我就根据给图片设置的大小来设定了,保证其美观性。还有背景颜色(themes)这一功能非常讨人喜欢,然后我就简单加了三种可以选项的颜色,分别是幻影紫、纯净绿和暖心红(后续还会添加令人愉悦的颜色选择)。名字当然是我自己瞎起的……然后图片的选择用了jQuery的双击监听事件,确保了双击的标签是img后才显示放大效果。目前看来所有的一切顺利进行。但是我这个憨憨在仿制车轮的时候又翻车了,反正开始以为遇到玄学问题了,实在忍不住了还反问它:我与阁下无冤无仇,为何你却要把我的智商按在地上摩擦?……我先简单说一下这个伪玄学~

当时表单正常传过来值之后我便在下边判断了值的类型与value,确保准确无误后以传参的形式传给了handleImgExType()

$expandImgType = Typecho_Widget::widget('Widget_Options')->plugin('ExImg')->expandImgType;
$expandImgBgType = Typecho_Widget::widget('Widget_Options')->plugin('ExImg')->expandImgBgType;
if ($expandImgType != 'default') {
    self::handleImgExType($expandImgType, $expandImgBgType);
}

这没错吧?看下边……

private static function handleImgExType($$expandImgType, $$expandImgBgType){}

我也想不起哪里多打了个$符,导致传过来的是null,而swal({})接收到的参数如果有Null的时候,他不执行,而且还不给你报错?具体也忘了什么情况的时候不报错但也不运行来着……害的我一点点的调试,看看click事件能否监听正常,dblclick事件能否监听正常,那还用说么?当然得正常了,但是我一加入下方的其他有关调控alertJS代码后就完全没反应了,WDFK!!!玄学???在本地运行的好好的,肿么又不行了……最后还是没发现问题,将属性值写死后才发现正常运行,终于出现了久违的alert当即发现传参的问题,但是传参在第一步就已经检查过了没问题呀?然后在传进参数的函数里又var_dump()了一下参数,双双Null……仔细一看形参我写的是:

self::handleImgExType($$expandImgType, $$expandImgBgType);
private static function handleImgExType($$expandImgType, $$expandImgBgType){}

因为记不大清了哪写的多了$了,不是第一个就是第二个……

所谓玄学,云尔已矣,但确实挺刺激的……
于昨夜完成
其实吧,写这些东西主要是方便自己使用的,如果有幸入得了使用者的法眼,我也是蛮开心的(●'◡'●)


writing Typecho Plugin记录


前言

​ 自从我于2020-01-05(阳历)使用小马哥推荐的Typecho建立博客后(别看我建立博客之前还有文章发布,那都是之前写的随笔,被我从QQ空间的日志搬迁到了这里),就深深的被其精简化吸引,Typecho的插件也是多样,且能自主开发,能满足大部分人的需求,我感觉这样的社区氛围很赞。主题也一样,都可以自主开发,相比WordPress来说更加灵活,增加了使用者多元化选择的自由体验感。也就是最近几天,突然想要了解一下插件的实现,之前也粗略看过其他插件的code实现,但是当时不大了解Typecho的框架机制,所以也没看懂Plugin里的那些类接口到底干嘛的。今天心血来潮,整整试试吧,先弄个简单的,看看Plugin实现的coding流程...以后要什么效果如果可以的话,自己可以尝试写一下……

过程

​ 上午起来后花了一点时间把以前写的鼠标点击效果与图标跟随的代码翻了出来改了一下(以前用原生js写的,又给改成jQuery了),下午打开了几个我正在用的插件,想看看他们咋写的,应该就能推出那些接口干嘛的,参照了Typeho最初默认自带的那个Hello World插件,顺带打开了官方文档,因为Hello World 那个插件太简洁了,就完全是官方文档上介绍的那样。官方文档


先暂停,眼疼,明天再写,看了一天电脑了,吓人~先碎觉碎觉,狗命要紧~


主要是这部分:

2.注释

/**
 * Hello World
 *
 * @package HelloWorld
 * @author qining
 * @version 1.0.0
 * @link http://typecho.org
 */
  • Hello World: 插件描述
  • @package: 插件名称
  • @author: 插件作者
  • @version: 插件版本
  • @link: 插件作者链接

注释信息.png

因为他这个注释跟名称一样,所以说有点不明显,不过大体还是能看出来。

3.插件主体

/* 激活插件方法 */
public static function activate(){}

/* 禁用插件方法 */
public static function deactivate(){}

/* 插件配置方法 */
public static function config(Typecho_Widget_Helper_Form $form){}

/* 个人用户的配置方法 */
public static function personalConfig(Typecho_Widget_Helper_Form $form){}

/* 插件实现方法 */
public static function render(){}
  • activate: 插件的激活接口,主要填写一些插件的初始化程序。
  • deactivate: 这个是插件的禁用接口,主要就是插件在禁用时对一些资源的释放。
  • config: 插件的配置面板,用于制作插件的标准配置菜单。
  • personalConfig: 个人用户的配置面板,基本用不到。
  • render: 自己定义的方法,用来实现插件要完成的功能。

然后就没啥太重要的了,插件需要的一些东西放在config()里,Hello World插件的active()方法里放了这一句:

Typecho_Plugin::factory('admin/menu.php')->navBar = array('HelloWorld_Plugin', 'render');

​ 等号前边是接口代码,官方文档说复制进来就行,激活了用户管理那个面板,等号后边则是插件要实现的方法,这段代码会在接口处运行(也可以说是后台也启用了插件效果)。

// 当前接口的赋值以数组形式出现
// HelloWorld_Plugin 插件的类名,一般是插件名加上“_Plugin”,其中类名还可以用__CLASS__,不过经常是直接把插件类名写上
// render 插件实现的方法名,后面插件实现方法的命名要与此一致(当然你也可以改,不过一般不会改)

​ 因为我不仅要启用navBar,还需要向页面中添加css格式和js脚本(还是那句话,最简单的东西,熟悉一下流程),所以我将headerfooter也一块启用了:

public static function activate()
    {
        Typecho_Plugin::factory('Widget_Archive')->header = array(__CLASS__, 'header');
        Typecho_Plugin::factory('Widget_Archive')->footer = array(__CLASS__, 'footer');
        Typecho_Plugin::factory('admin/menu.php')->navBar = array('Mou_Plugin', 'render');
    }

​ 因为上边官方文档说类名类名还可以用__CLASS__ ,然后我就没改,其实原理都一样,只要后边把实现方法激活一下就行。

对于这个函数:

public static function deactivate(){}

​ 一般是在禁用插件时,需要释放的资源,我也没搞明白这个资源指的是啥,有关数据库之类的?用到的很少,也不敢说,我是用不着嘿嘿...

关键下边这个函数:

 public static function config(Typecho_Widget_Helper_Form $form)
{
    $name = new Typecho_Widget_Helper_Form_Element_Text('word', NULL, 'Hello World', _t('说点什么'));
    $form->addInput($name);
}
$form->addInput($name);

这句则是把定义的变量写入到配置项中,以便后面使用。

这是Hello World插件里的,没有什么实际作用,就是在插件设置里给你展示了一个表单:

hello设置.png

Typecho_Widget_Helper_Form这个类里还有一些别的我们如果要做开关之类的会用的到,比如说:

//mouseFollow开关
$options = [
     'default' => _t('关闭'),
     'paper' => "<img src='{$mouseFollowImageDir}/paper.ico' alt='paper'>",
  ];
$followType = new Typecho_Widget_Helper_Form_Element_Radio('followType', $options, 'default', _t('follow样式,默认关闭'));
$form->addInput($followType);

​ 先拿我的举个例子,Typecho_Widget_Helper_Form_Element_Radio他们都是继承自Typecho_Widget_Helper_Form_Element这个类的,这个父类的构造方法:

/**
     * 构造函数
     *
     * @access public
     * @param string $name 表单输入项名称
     * @param array $options 选择项
     * @param mixed $value 表单默认值
     * @param string $label 表单标题
     * @param string $description 表单描述
     * @return void
     */
public function __construct($name = NULL, array $options = NULL, $value = NULL, $label = NULL, $description = NULL)
{
    #code...
}

​ 我们可以看到第二个options行为参数需要传递一个数组,正好对应了选择项,$value可以填默认值,这样就可以给用户自己选择启不启用某一项功能,第一个参数和后边两个就好看了。

因为我在当前类里定义了一个常量

const STATIC_DIR = '/usr/plugins/Mou/static';

所以在config里再定义一下路径用来访问那个图标:

(这里和Helper::options()->pluginUrl这个方法效果一样,所以就没用着那个常量)

$dir = self::STATIC_DIR;
$staticDir = Helper::options()->pluginUrl . '/Mou/static/';
$mouseFollowImageDir = $staticDir . 'images';

这里的实现效果就是在设置的面板上显示出选项的图标:

图表显示.png

这里的路径要好好看看,如果显示不出来的话,用调试工具看看路径是不是多了或者少了一个/

之后便是人用户的配置方法:

/* 个人用户的配置方法 */
public static function personalConfig(Typecho_Widget_Helper_Form $form){}

不过在观察了几个插件的代码后发现基本都空着,所以我也空着了,上网查了一下:

public static function personalConfig(Typecho_Widget_Helper_Form $form) 插件的个性化配置面板。用法暂时还不明,有待Hanny进一步研究。

​ 我还是有空去看看源码,回头找着再补上吧~~话说回来,相关的官方文档太少了,网上搜出来的大多是一些个人博客里的东西。

接下来render

public static function render()
    {
        echo '<span class="message success">'
            . htmlspecialchars(Typecho_Widget::widget('Widget_Options')->plugin('HelloWorld')->word)
            . '</span>';
    }

函数里的内容便是要显示已经自定义好的欢迎话语。

Typecho_Widget::widget('Widget_Options')->plugin('HelloWorld')->word这句是调用插件配置项的,上边的配置项里有条这个:

$name = new Typecho_Widget_Helper_Form_Element_Text('word', NULL, 'Hello World', _t('说点什么'));
$form->addInput($name);

这里便是通过类的一些方法Typecho_Widget::widget('Widget_Options')->plugin('HelloWorld')->word提了出来。

​ 如果你仅仅是向页面中添加一点js脚本和css样式表,在你激活的herderfooter填写实现逻辑就行,可能有人会说就添加点cssjs而且,用得着小题大做弄个Plugin吗?我的回答还是一样,

  • 第一:熟悉一下Typecho Plugin的大体coding 流程
  • 第二:Typeho以其精简化深受光大用户的喜爱,我是完全可以直接在源码中扔进去cssjs但是这样对于Typecho日后升级更新啥的可能会影响到实现效果。这里的一个博主与我观点一致。

其原文内容如下(翻了半天历史记录才找着,汗~):

其实类似这种炫酷的鼠标插件一般借助CSSJS代码就可以实现,不过明月还是喜欢使用插件,毕竟插件实现的更稳定,兼容性也有保障,无论是升级Typecho还是主题都不会有太大的影响。

 /**
     *为header添加css文件
     * @return void
     */
    public static function header()
    {
        $StaticCssUrl = Helper::options()->pluginUrl . '/Mou/static/css/';
        echo '<link rel="stylesheet" href=" ' . $StaticCssUrl . 'style.css"/>';
    }

    /**
     *为footer添加js文件
     * @return void
     */
    public static function footer()
    {
        $dir = self::STATIC_DIR;
        $StaticJsUrl = Helper::options()->pluginUrl . '/Mou/static/js/';
        $followType = Typecho_Widget::widget('Widget_Options')->plugin('Mou')->followType;
        echo '<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>';
        $mouseFollowImageDir = $dir . '/images';
        // 调试部分
        // $test = 'test';
        // echo '<script type="text/javascript" src="' . $followType . $test . 'main.js"></script>';
        self::handleFollowType($followType);
        echo '<script type="text/javascript" src="' . $StaticJsUrl . 'main.js"></script>';
    }

这里看到还调用了一个函数handleFollowType()

/*mouseFollowStyle*/
    private static function handleFollowType($followType)
    {
        if ($followType != 'default') {
            $followTypeImage = $followType . '.ico';
            $dir = self::STATIC_DIR;
            $mouseFollowImagesDir = self::STATIC_DIR . '/images';
            $js .= '<script>';
            $js .= <<<JS
            $(document).ready(function () {
                $('body').append('<div id="followMouseContent"><img src="{$mouseFollowImagesDir}/{$followTypeImage}" alt="followMouse"></div>');
                $(document).mousemove(function (e) {
                var x = e.pageX;
                var y = e.pageY;
                var mms = document.getElementById('followMouseContent');
                var cx = parseInt(x) - parseInt(80);
                var cy = parseInt(y) + parseInt(10);
                mms.style.left = cx + "px";
                mms.style.top = cy + "px";
                });
            });
JS;
            $js .= '</script>';
            echo $js;
        } else {
            echo '';
        }
    }

这里主要是看看你的选择啦,要是不启用就没啥事了,启用的话判断一下你启用的图标。

这里调用的时候还犯了一个语法错误,用了$this->handleFollowType($followType)

PHP$thisself的区别 this是在实例化的时候来确定指向谁。 ... self是指向类本身,也就是self是不指向任何已经实例化的对象,一般self使用来指向类中的静态变量。

我怕不是个憨批……

现在流程说完了,要去后台启用看看生不生效。

​ 一般是没啥子问题,我这里却掉坑去了,其一便是上边那个self$this用混了,其二便是一个非常低级的错误……我写完后放在服务器的plugins文件夹下,启用没问题,但是那个图标选择却没生效,我又看了看逻辑没错啊,起初也是摸索着写,以为接口的一些参数东西还没整好,然后一顿查一顿看源码,没错啊肿末回事?反正做了一堆跟问题不搭边的事,还又把自己写的东西搞得一团乱麻,最后借助调试工具看了一下$followType = Typecho_Widget::widget('Widget_Options')->plugin('Mou')->followType;的传值,也没错啊,传的正确,但为何不顶用哪?条件判断也没错啊!不就是=某一项的时候选择哪一项嘛,咋还默认不启用了呢?WDFK!!!看出来了吧,我用的=来判断相不相等……赤果果的憨批一个真是心里上万只草泥马奔腾而过……这倒又让我想起来了前些日子练习Python爬虫,爬了猫眼电影的Top100榜,这个我也是醉了……我当时写了:

pattern = re.compile('<dd>.*?board-index.*?>(\d+)</i>.*?data-src="(.*?)".*?name"><a'
                         +'.*?>(.*?)</a>.*?star">(.*?)</p>.*?releasetime">(.*?)</p>'
                         +'.*?integer">(.*?)</i>.*?fraction">(.*?)</i>.*?</dd>', re.S)
items = re.findall(pattern, html)
for item in items:
    yield {
      'index': item[0],
      'image': item[1],
      'title': item[2],
      'actor': item[3].strip()[3:],
      'time': item[4].strip()[5:],
      'score': item[5]+item[6]
   }

​ 但是给我返回的 items 一直为空?嘛情况呀这是?正则语法错了?一查没嘚问题呀,而且错了会报错的吧,漏了条件?呃?不用 ^ 来标注起始呀……然后我又找了别的网站的源码,试着用正则提取一下,能提取出来也没问题啊,然后我居然去查了半天 compilefindall 函数……沃日,最后再重新一看那个源码:

<dd>
    <i class="board-index board-index-1">1</i>
    <a href="/films/1203" title="霸王别姬" class="image-link" data-act="boarditem-click" data-val="{movieId:1203}">
      <img src="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png" alt="" class="poster-default">
      <img alt="霸王别姬" class="board-img" src="https://p0.meituan.net/movie/[email protected]_220h_1e_1c">
    </a>
    <div class="board-item-main">
      <div class="board-item-content">
              <div class="movie-item-info">
        <p class="name"><a href="/films/1203" title="霸王别姬" data-act="boarditem-click" data-val="{movieId:1203}">霸王别姬</a></p>
        <p class="star">
                主演:张国荣,张丰毅,巩俐
        </p>
<p class="releasetime">上映时间:1993-07-26</p>    </div>
    <div class="movie-item-number score-num">
<p class="score"><i class="integer">9.</i><i class="fraction">5</i></p>        
    </div>

      </div>
    </div>

</dd>

​ 我又吐了……人家的标签是嘛?是 <i>标签,我开始写的啥?是 <li> 标签……一开始就错了,能给你返回结果,骚年做梦去吧……一些简单的问题恰巧是一些人经常忽视的,有些你眼中的 Bug 可能就是哪个细节没做到位,而且不易察觉,因为大多数人会认为这么简单的东西没问题,恰巧这些忽视的就是问题所在。

​ 现在这个极为简单的插件算是基本完工,还有一些东西需要完善,比如多几个跟随图标的选择,字体这一块暂时是固定死的,用了字珠压缩字体包提高一下速度,后续也会像跟随图标一样可供选择,其文字和字体的选择后续会安排上……还有一个毛病就是弹出的字体是用的 <span> 标签,开始以为会对博客中的一些标签产生影响(我觉得id冲突了),可以通过创建新的标签 tag 进行解决(HTML5)刚才一看用的通配符选择器,(lll¬ω¬)我的我的~然后我看着本地的图标跟随很流畅如德芙巧克力般纵享丝滑然后博客里一启用咋感觉这么僵硬~~陷入沉思……

该看网课了,已经落下三天了,再不看看说不过去……这个等着以后再进行完善吧(●ˇ∀ˇ●)

git插件地址


PHP-PDO对象


PDO概述

数据库有很多种,MySQL、sqserver、Oracle、db2......通过PHP去连接数据库的时候使用的扩展是不一样的,这就导致更换数据库时比较麻烦,因为不同扩展库的API不同,代码逻辑、函数需要更改......那么有没有一套扩展库可以直接用来连接所有的数据库呢?有,就是PDO(php data object)

百度释义:PDO(PHP Data Objects)是一种在PHP里连接数据库的使用接口。PDO与mysqli曾经被建议用来取代原本PHP在用的mysql相关函数,基于数据库使用的安全性,因为后者欠缺对于SQL注入的防护。

图示:

pdo.png

在info中查看已安装的

info.png

wamp PHP扩展启用:

PDO的使用

主要是这三个类 PDO、PDOStatement、PDOException

dsn(data source name)

数据源名称或叫做 DSN,包含了请求连接到数据库的信息。通常,一个 DSN 由 PDO 驱动名、紧随其后的冒号、以及具体 PDO 驱动的连接语法组成。

创建PDO对象

PDO::__construct ( string $dsn [, string $username [, string $password [, array $driver_options ]]] )

创建一个表示连接到请求数据库的数据库连接 PDO 实例。

<?php

$dsn = 'mysql:dbname=pdo_demo;host:localhost;charset=utf8';
//这里我将host放在了紧挨着mysql后边,数据库连接没问题,但是在之后的执行sql语句中报了错:
//SQLSTATE[3D000]: Invalid catalog name: 1046 No database selected
//将dbname前移就好了,手册里有讲,难道版本升级后顺序变了?

try {
    $pdo = new PDO($dsn, 'root', '');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die('数据库连接失败:'.$e->getMessage());
}

1、字符串形式:'mysql:host:localhost;dbname=pdo_demo;charset=utf8';

2、文件形式:uri:file:///path/to/dsnfile

3、php.ini

获取和设置信息

​ PDO::getAttribute — 取回一个数据库连接的属性

​ PDO::setAttribute — 设置属性

PDO执行sql语句

  • exec 执行不要结果集的语句 比如:增删改
  • query 执行要结果集的语句 比如:插 desc
  • lastInsertId 最后插入语句的id号

PDO错误模式

1、默认

2、警告:

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);

3、异常:

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
<?php

$dsn = 'mysql:dbname=pdo_demo;host:localhost;charset=utf8';
try {
    $pdo = new PDO($dsn, 'root', '');
    //在创建完PDO对象的时候设置错误模式
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die('数据库连接失败:'.$e->getMessage());
}
try {
    $sql = 'insert into user(name, pwd) values("fmujie", "123456")';

    $ret = $pdo->exec($sql);
    if ($ret > 0) {
        echo '插入成功';
        //返回插入的id索引
        echo $pdo->lastInsertId();
    } else {
        echo '插入失败';
    } 
} catch (PDOException $e) {
    echo $e->getMessage();
}
查询

PDO::query() returns a PDOStatement object, or FALSE on failure.

try {
    $sql = 'select * from user';

    $ret = $pdo->query($sql);
    var_dump($ret);
} catch (PDOException $e) {
    echo $e->getMessage();
}

query.png

PDO的事务处理

​ 比如:转账 A转出和B转入要都正确无误,否则交易失败(把多条sql语句作为一个整体(事务)来执行,如果其中有一条sql语句执行失败,所有的sql语句都要执行失败,将状态回滚到初始状态)

​ 表的引擎有两种 myisam (不支持) innodb(支持)
database.png

$pdo->beginTransaction();    开启一个事务//在执行sql语句之前
$pdo->commit();                提交事务
$pdo->rollback();           回滚到初始状态
try {
    $pdo->beginTransaction();
    $sql = '';
    $ret = $pdo->exec($sql);
    if ($ret > 0) {
        echo '执行成功';
        //返回插入的id索引
        echo $pdo->lastInsertId();
    } else {
        throw new PDOException('执行失败');
    }
    $sql = '';
    $ret = $pdo->exec($sql);
    if ($ret > 0) {
        echo '执行成功';
        //返回插入的id索引
        echo $pdo->lastInsertId();
    } else { 
        throw new PDOException('执行失败');
    }
    
    $pdo->commit();
    echo '执行都成功';
} catch (PDOException $e) {
    $pdo->rollback();
    echo $e->getMessage();
}

预处理语句

优点
  • 效率
  • 安全(sql注入)

平差我们每插入一条语句便写一条insert的sql语句,php每次都得编译生成,这样重复的向同一个表中插入语句会造成很大的资源浪费。使用预处理语句对于相同的sql语句,在值的部分使用占位符,这样在程序编译的时候只需要编译一条sql语句,Then以下添不同的值就ok了,这样的效率无疑会提升许多。

PDOStatement::bindParam — 绑定一个参数到指定的变量名

  • parameter

参数标识符。对于使用命名占位符的预处理语句,应是类似 :name 形式的参数名。对于使用问号占位符的预处理语句,应是以1开始索引的参数位置。

增删改

增加:

$stmt = $pdo->prepare('insert into user(name, pwd) values(?, ?)')

$stmt->bindParam(1, $name);
$stmt->bindParam(2, $pwd);
$name = '...';
$pwd = '...';
$stmt->execute();
//或者
$stmt = $pdo->prepare('insert into user(name, pwd) values(:name, :pwd)');
$stmt->bindParam(':name', $name);
$stmt->bindParam(':pwd', $pwd);
$name = '...';
$pwd = '...';
$stmt->execute();
//写起来比较麻烦,重复太多
$stmt->execute(['...', '...']);   //?占位符使用索引数组
$stmt->execute([':name'=> '...', ':pwd'=> '...']);   //:占位符使用关联数组

PDO提取结果集

select query()返回的 $ret

try {
   $stmt = $pdo->prepare('select * from user');
   $stmt->execute();
   $res = $stmt->fetch();//默认是索引数组和关联数组都有  一条
   $result = $stmt->fetchAll();//取出全部
    var_dump($res);
} catch (PDOException $e) {
    echo $e->getMessage();
}

控制下一行如何返回给调用者。此值必须是 PDO::FETCH_* 系列常量中的一个,缺省为 PDO::ATTR_DEFAULT_FETCH_MODE 的值 (默认为 PDO::FETCH_BOTH )。

• PDO::FETCH_ASSOC:返回一个索引为结果集列名的数组

• PDO::FETCH_BOTH(默认):返回一个索引为结果集列名和以0开始的列号的数组

• PDO::FETCH_NUM:返回一个索引为以0开始的结果集列号的数组

• PDO::FETCH_OBJ:返回一个属性名对应结果集列名的匿名对象

(常用)


仿图书检索系统第二弹jQuery(页面功能)


仿图书检索系统第二弹

主要应用jQuery

  • 主要是用jQuery来调控多数量的信息输入检索框,~哎简单点说就是实时检测input状态~,检索检索!!!=> 当然主要是用MySql进行数据的多重多重多重检索(这里并没有卡带~~~),考虑到后端搞太多的条件拼接不怎么好处理(个人感觉,大神勿喷~)索性就直接在前端根据使用者填入的条件来搞,觉得还方便点~(手动滑稽)

主要用到的jQuery的知识部分:

  • 先来了解了解jQuery对于input框的捕捉
    • JQuery实时监听input中值变化
      <!DOCTYPE html>
      <html>
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
              <title>RunJS</title>
          <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
          </head>
          <body>
              <h1 >
                  实时监测input中值的变化
              </h1>
              <input type="text" id="testinput" autoComplete='off'>
              <div id="output"></div>
          </body>
      </html>
$(function(){
    $('#testinput').bind('input propertychange', function() {
        $('#output').html($(this).val().length + ' characters');
    });
})

oninput,onpropertychange,onchange的用法:
oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同, 它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。
onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;
onchange触发事件必须满足两个条件:
1、当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
2、当前对象失去焦点(onblur);


汇总 onchange onpropertychange 和 oninput 事件的区别
1. onchange 事件与 onpropertychange 事件的区别:
onchange 事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发。
onpropertychange 事件却是实时触发,即每增加或删除一个字符就会触发,通过 js 改变也会触发该事件,但是该事件 IE 专有。
2.oninput 事件与 onpropertychange 事件的区别:
oninput 事件是 IE 之外的大多数浏览器支持的事件,在 value 改变时触发,实时的,即每增加或删除一个字符就会触发,然而通过 js 改变 value 时,却不会触发。
onpropertychange 事件是任何属性改变都会触发的,而 oninput 却只在 value 改变时触发,oninput 要通过 addEventListener() 来注册,onpropertychange 注册方式跟一般事件一样。(此处都是指在js中动态绑定事件,以实现内容与行为分离)
3.oninput 与 onpropertychange 失效的情况:
(1)oninput 事件:a). 当脚本中改变 value 时,不会触发;b).从浏览器的自动下拉提示中选取时,不会触发。
(2)onpropertychange 事件:当 input 设置为 disable=tru e后,onpropertychange 不会触发。

下划线之中来源于菜鸟教程笔记 => 在此附上链接 => https://www.runoob.com/jsref/event-oninput.htm
在了解了上述用法后,我们就开始吧~~~

介绍部分:

最初为何会写这个东西,是因为图书馆老师找到了我的一个~灰常NB~的学长,他的时间有些紧,所以找到了高小盆友和我~,我们负责分别负责前端和后端,当时数据是需要我们自己爬取的,接着用以前的那一丢丢php爬虫的入门菜鸟级别的经验爬了爬试试,不爬不知道,一爬一~懵逼~,在这附上他们网站的链接 = >https://www.zhihuiya.com/ 没有账号的可以申请一个试用,~就是当时申请了一下试用,后期的时候把我吓坏了~这个网站的安全措施很足,~普通菜鸟级别的爬虫玩家一边玩泥巴去吧~而且最重要的一点,他们网站采用的基本全是动态渲染(动态渲染是个啥?自个百度去,~哭了,你凶我~)简单来说就是你查看网页源码查看不了什么有用的信息(原本想用QueryList + Guzzle来着,反正到最后泡汤了 )页面结果是这样滴,如下:
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=google value=notranslate><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><meta name=keywords content="Patsnap Analytics View"><title></title><style>.analytics-website {
                height: 100%;
                width: 100%;
            }
            #header-wrapper {
                position: fixed;
                z-index: 999;
                width: 100%;
                height: 64px;
                background: #fff;
                border-bottom: 1px solid #e0e0e0;
                color: #061632;
            }</style><script>window.CDN_BASE_URL = "//static-analytics.cdn.zhihuiya.com";
            window.CDN_I18N_HOST = "//static-core-i18n.cdn.zhihuiya.com";</script><!--[if IE 9]>
        <script type="text/javascript">
          try{
              console.log(11)
          }catch (e){
              ;(function(g) {
                  'use strict';
                  var _console = g.console || {};
                  var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'exception', 'error', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];

                  var console = {version: '0.1.0'};
                  var key;
                  for(var i = 0, len = methods.length; i < len; i++) {
                      key = methods[i];
                      console[key] = function (key) {
                          return function () {
                              if (typeof _console[key] === 'undefined') {
                                  return 0;
                              }

                              Function.prototype.apply.call(_console[key], _console, arguments);
                          };
                      }(key);
                  }

                  g.console = console;
              }(window));
          }
        </script>
        <![endif]--><link href=//static-analytics.cdn.zhihuiya.com/analytics-patent-view/9.23.9/css/chunk-vendors.001cda67.css rel=stylesheet><link href=//static-analytics.cdn.zhihuiya.com/analytics-patent-view/9.23.9/css/index.7c16337e.css rel=stylesheet></head><body><noscript><strong>We're sorry but app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div class=analytics-website><div id=header-wrapper><div id=header></div></div><div id=view-root></div></div><iframe id=marvinjs-package src=/marvinjs_latest/marvinpack.html width=0 height=0 frameborder=0 scrolling=no style=position:absolute;top:0;left:0;width:0;height:0;border:0;></iframe><script src=//static-analytics.cdn.zhihuiya.com/analytics-patent-view/9.23.9/js/chunk-vendors.bb328504.js></script><script src=//static-analytics.cdn.zhihuiya.com/analytics-patent-view/9.23.9/js/index.c483e8e0.js></script><script src=//static-analytics.cdn.zhihuiya.com/analytics-fundation/9.23.9/js/index.js></script></body></html>
看到这些我当时心里虽然~万只草泥马奔腾而过~但我那受伤的心灵还是抱有一丝丝希冀的,直到~~~我了解到phantomjs,能不能不要让我更加绝望~这里附上一篇CSDN的文章 => https://blog.csdn.net/mxdzchallpp/article/details/82971348 关键是之后我了解到phantomjs很久很久很久不更新维护了能不能最开始就不要让我知道~,之后十月一期间,我想了想还是用Python爬虫吧,普通的根据https请求url估摸着行不通(网站安全级别太高,整不了,虽然自己有正规账号,但是然并卵~)还是用Python 的另一种爬取方法吧webdriver类似于脚本(小时候玩游戏外挂用过吧?对对对就是那个,没错,自动帮你操纵~不管三七二十一,只要你网页上你能看到的都能给你扒拉下来(●'◡'●)),在学校鼓捣了一个黄金七天(现学现卖速度是不是有点慢),基本整出来了(传送门点这!!!),可悲的是到最后验收的时候考虑到效率问题(效率肯定没有普通抓https url来的快,但是没法啊)还有安全问题(虽然老师的账号正规,但是爬取那么多数据怕是有封号的危险)
反正到最后没用这套方案,我的心里~上亿只草泥马奔腾~嘘~就用了学长说的另一套方案,学长找到一个免费下载说明书的网站(免费的~呼~)剩下的look look~哦,我这蹩脚的英语~哦,这该死的翻译腔~
最终效果图:

TIM图片20200108105536.png

~说实话,写的时候没加注释,现在看都不知道写的啥玩意了~
我数了一下,光input输入框就有24个,条件select框还有20个 ~难搞哦~
HTML部分:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/searchView.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <title>专利搜索</title>
</head>

<body>
    <div class="area">

        <div class="container">
            <ul class="circles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <nav class="row justify-content-center">欢迎使用山东理工大学,专利检索系统</nav>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                    <li class="breadcrumb-item"><a href="#">Search View</a></li>
                </ol>
            </nav>
            <form method="POST" id="form1">
                {{ csrf_field() }}
                <ul class="container">
                    <!-- 0 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control col-3" placeholder="标题" disabled>
                            <input type="text" class="form-control" id="title" name="title" placeholder="例如:太阳能电池">
                        </div>
                    </li>
                    <!-- 1 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="abstract_option" id="select1">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="摘要" disabled>
                            <input type="text" class="form-control" id="abstract" name="abstract" placeholder="例如:太阳能电池">
                        </div>
                    </li>
                    <!-- 2 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="demands_option" id="select2">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="权利要求" disabled>
                            <input type="text" class="form-control" id="demands" name="demands" placeholder="例如:太阳能">
                        </div>
                    </li>
                    <!-- 3 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="demand_option" id="select3">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="独立权利要求" disabled>
                            <input type="text" class="form-control" id="demand" name="demand" placeholder="例如:太阳能电池">
                        </div>
                    </li>
                    <!-- 4 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="introduction_option" id="select4">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="说明书" disabled>
                            <input type="text" class="form-control" id="introduction" name="introduction" placeholder="例如:太阳能电池">
                        </div>
                    </li>
                    <!-- t5 -->
                    <li class=" field-item time">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="ask_begin_date_option" id="select5">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="申请日" disabled>
                            <input type="date" class="form-control" id="ask_begin_date" name="ask_begin_date" placeholder="例如:132465789">
                            <!-- <span class="input-group-text">到</span> -->
                            <div class="timedao">
                                <input type="text" class="input-group-text form-control" style="width:50px;" placeholder="到" disabled>
                            </div>
                            <input type="date" class="form-control" id="ask_over_date" name="ask_over_date" placeholder="例如:132465789">
                        </div>
                    </li>
                    <!-- t6 -->
                    <li class=" field-item time">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="public_begin_date_option" id="select6">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="公开公告日" disabled>
                            <input type="date" class="form-control" id="public_begin_date" name="public_begin_date" placeholder="例如:132465789">
                            <!-- <span class="input-group-text">到</span> -->
                            <div class="timedao">
                                <input type="text" class="input-group-text form-control" style="width:50px;" placeholder="到" disabled>
                            </div>
                            <input type="date" class="form-control" id="public_over_date" name="public_over_date" placeholder="例如:132465789">
                        </div>
                    </li>
                    <!-- t7 -->
                    <li class=" field-item time">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="priority_begin_date_option" id="select7">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="优先权日" disabled>
                            <input type="date" class="form-control" id="priority_begin_date" name="priority_begin_date" placeholder="例如:132465789">
                            <!-- <span class="input-group-text">到</span> -->
                            <div class="timedao">
                                <input type="text" class="input-group-text form-control" style="width:50px;" placeholder="到" disabled>
                            </div>
                            <input type="date" class="form-control" id="priority_over_date" name="priority_over_date" placeholder="例如:132465789">
                        </div>
                    </li>
                    <!-- 8 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="public_number_option" id="select8">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="公开(公告)号" disabled>
                            <input type="text" class="form-control" id="public_number" name="public_number" placeholder="例如:US123456">
                        </div>
                    </li>
                    <!-- 9 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="ask_number_option" id="select9">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="申请号" disabled>
                            <input type="text" class="form-control" id="ask_number" name="ask_number" placeholder="例如:US10/123456">
                        </div>
                    </li>
                    <!-- 10 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="priority_number_option" id="select10">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="优先权号" disabled>
                            <input type="text" class="form-control" id="priority_number" name="priority_number" placeholder="例如:JP2013270967">
                        </div>
                    </li>
                    <!-- 11 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="ipc_number_option" id="select11">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="IPC分类号" disabled>
                            <input type="text" class="form-control" id="ipc_number" name="ipc_number" placeholder="例如:A61K">
                        </div>
                    </li>
                    <!-- 12 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="ipc_primary_number_option" id="select12">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="IPC主分类号" disabled>
                            <input type="text" class="form-control" id="ipc_primary_number" name="ipc_primary_number" placeholder="例如:A61K">
                        </div>
                    </li>
                    <!-- 13 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="cpc_number_option" id="select13">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="CPC分类号" disabled>
                            <input type="text" class="form-control" id="cpc_number" name="cpc_number" placeholder="例如:Y02B60/50">
                        </div>
                    </li>
                    <!-- 14 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="loc_number_option" id="select14">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="LOC分类号" disabled>
                            <input type="text" class="form-control" id="loc_number" name="loc_number" placeholder="例如:01-01">
                        </div>
                    </li>
                    <!-- 15 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="origin_name_option" id="select15">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="原始申请(专利权)人" disabled>
                            <input type="text" class="form-control" id="origin_name" name="origin_name" placeholder="例如:华为">
                        </div>
                    </li>
                    <!-- 16 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="present_name_option" id="select16">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="当前申请(专利权)人" disabled>
                            <input type="text" class="form-control" id="present_name" name="present_name" placeholder="例如:华为">
                        </div>
                    </li>

                    <!-- 17 -->
                    <!-- <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="origin_name_option" id="select17">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="原始申请(专利权)人" disabled>
                            <input type="text" class="form-control" id="origin_name" name="origin_name" placeholder="例如:华为">
                        </div>
                    </li> -->
                    <!-- ??? -->
                    <!-- 18 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="present_name_address_option" id="select18">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="当前申请(专利权)人地址" disabled>
                            <input type="text" class="form-control" id="present_name_address" name="present_name_address" placeholder="例如:北京朝阳区">
                        </div>
                    </li>
                    <!-- 19 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="invent_name_option" id="select19">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="发明人" disabled>
                            <input type="text" class="form-control" id="invent_name" name="invent_name" placeholder="例如:李书福">
                        </div>
                    </li>
                    <!-- 20 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="agent_name_option" id="select20">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="代理人" disabled>
                            <input type="text" class="form-control" id="agent_name" name="agent_name" placeholder="例如:吴乐观">
                        </div>
                    </li>
                    <!-- 21 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="agent_company_name_option" id="select21">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="代理机构" disabled>
                            <input type="text" class="form-control" id="agent_company_name" name="agent_company_name" placeholder="例如:132465789">
                        </div>
                    </li>
                </ul>
            </form>
        </div>
        <div class="interval"></div>
        <div class="fixed-bottom">
            <div class="container">
                <!-- <h2>卡片头部和底部</h2> -->
                <div class="card bom">
                    <!-- <div class="card-header">头部</div> -->
                    <div class="card-body">
                        <div>
                            <span id="title_result"></span>
                            <!-- 1 -->
                            <span id="abstract_option"></span>
                            <span id="abstract_result"></span>

                            <!-- 2 -->
                            <span id="demands_option"></span>
                            <span id="demands_result"></span>

                            <!-- 3 -->
                            <span id="demand_option"></span>
                            <span id="demand_result"></span>

                            <!-- 4 -->
                            <span id="introduction_option"></span>
                            <span id="introduction_result"></span>

                            <!-- t5 -->
                            <span id="ask_begin_date_option"></span>
                            <span id="ask_begin_date_result"></span>
                            <span id="ask_over_date_result"></span>
                            <span id="ask_result"></span>


                            <!-- t6 -->
                            <span id="public_begin_date_option"></span>
                            <span id="public_begin_date_result"></span>
                            <span id="public_over_date_result"></span>
                            <span id="public_result"></span>

                            <!-- t7 -->
                            <span id="priority_begin_date_option"></span>
                            <span id="priority_begin_date_result"></span>
                            <span id="priority_over_date_result"></span>
                            <span id="priority_result"></span>

                            <!-- 8 -->
                            <span id="public_number_option"></span>
                            <span id="public_number_result"></span>

                            <!-- 9 -->
                            <span id="ask_number_option"></span>
                            <span id="ask_number_result"></span>

                            <!-- 10 -->
                            <span id="priority_number_option"></span>
                            <span id="priority_number_result"></span>

                            <!-- 11 -->
                            <span id="ipc_number_option"></span>
                            <span id="ipc_number_result"></span>

                            <!-- 12 -->
                            <span id="ipc_primary_number_option"></span>
                            <span id="ipc_primary_number_result"></span>

                            <!-- 13 -->
                            <span id="cpc_number_option"></span>
                            <span id="cpc_number_result"></span>

                            <!-- 14 -->
                            <span id="loc_number_option"></span>
                            <span id="loc_number_result"></span>

                            <!-- 15 -->
                            <span id="origin_name_option"></span>
                            <span id="origin_name_result"></span>

                            <!-- 16 -->
                            <span id="present_name_option"></span>
                            <span id="present_name_result"></span>

                            <!-- 17 -->
                            <span id="origin_name_option"></span>
                            <span id="origin_name_result"></span>

                            <!-- 18 -->
                            <span id="present_name_address_option"></span>
                            <span id="present_name_address_result"></span>

                            <!-- 19 -->
                            <span id="invent_name_option"></span>
                            <span id="invent_name_result"></span>

                            <!-- 20 -->
                            <span id="agent_name_option"></span>
                            <span id="agent_name_result"></span>

                            <!-- 21 -->
                            <span id="agent_company_name_option"></span>
                            <span id="agent_company_name_result"></span>

                        </div>
                        <span id="mergeVal"></span>
                        <span id="mergeTimeVal"></span>
                    </div>
                    <div class="card-footer">
                        <!-- <button id="mergeOption">合并</button>
                        <button id="mergeOptionTime">时间合并</button> -->
                        <form action="/search_data" method="POST" class="form-inline">
                            {{ csrf_field() }}
                            <input type="hidden" id="submitVal" class="form-control search_data" type="text" name="transData" value="" placeholder="Search">
                            <button type="submit" id="searchBtn" class="btn btn-primary">开始搜索</button>
                        </form>
                        <button id="clears" class="btn btn-secondary">重置</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/patentSearch.js"></script>
    <script>
    </script>
</body>

</html>

还有一个小问题,就是在当时我写的时候HTML5更新了一次,input框多了个属性type="date"专门来处理日期的,但是jQuery还不能单独捕获这个属性的input框~最初想法破灭,头疼哦~~无奈全部选中吧~(主要用了propertychange这个属性,具体见上述)建议还是先看最后的全部code~
$('input').bind('input propertychange', function () {
            var currentName = $(this).attr('name');//看看当前哪个input状态发生了变化
            console.log(currentName);
            var TypeOfInput = judgeTimeInput(currentName);//看看发生状态变化的input是不是data
            console.log(TypeOfInput);
            var idName = '#' + currentName;//拼接一个id名
            var result = '#' + $(this).attr('name') + '_result';//这里用了span来接收值,同样拼id
            var option = '#' + $(this).attr('name') + '_option';//too
            console.log(result, option);
            if (TypeOfInput == 3) {//不同情况下拼接
                $(result).html($(this).attr('name') + ' LIKE ' + "'%" + $(this).val() + "%'");
            } else if (TypeOfInput == 1) {
                $(result).html('(' + $(this).attr('name') + ' >= ' + "'" + $(this).val() + "'" + ')');
            } else {
                $(result).html('(' + $(this).attr('name') + ' <= ' + "'" + $(this).val() + "'" + ')');
            }
            console.log($(result).text(), $(option).text());
            var select = judgeSelect(currentName);//这里是看当前input前的条件select是啥
            console.log(select);
            var data = $(this).val().length;
            console.log(data);//以下是看看select条件是啥   AND OR NOT???根据具体情况拼接
            if (data == 0) {
                $(result).empty();
                $(option).empty();
                $(select).val('AND');
            } else {
                $(option).html($(select).val());
                console.log($(option).text());
                $(select).change(function () {
                    var selVal = $(select).val();
                    if (selVal == "NOT") {
                        $(option).html('AND ' + $(this).val());
                        if ((TypeOfInput == 1) || (TypeOfInput == 2)) {
                        } else {
                            $(result).html($(idName).attr('name') + ' LIKE ' + '(' + "'%" + $(idName).val() + "%'" + ')');
                        }
                    } else {
                        $(option).html($(this).val());
                    }
                });
            }
        });

所用函数及其他:
 //因为title没有单独的select,所以单独写了一个
$('#title').bind('input propertychange', function () {
            $('#title_result').html($(this).attr('name') + '=' + "'" + $(this).val() + "'");
            var data = $(this).val().length;
            if (data == 0) {
                $('#title_result').empty();
            }
        }); 
var inputAoptionVal = [//定义了俩数组,对照着HTML部分看
            ['abstract', '#select1'],
            ['demands', '#select2'],
            ['demand', '#select3', ''],
            ['introduction', '#select4'],
            ['ask_begin_date', '#select5'],
            ['ask_over_date', '#select5'],
            ['public_begin_date', '#select6'],
            ['public_over_date', '#select6'],
            ['priority_begin_date', '#select7'],
            ['priority_over_date', '#select7'],
            ['public_number', '#select8'],
            ['ask_number', '#select9'],
            ['priority_number', '#select10'],
            ['ipc_number', '#select11'],
            ['ipc_primary_number', '#select12'],
            ['cpc_number', '#select13'],
            ['loc_number', '#select14'],
            ['origin_name', '#select15'],
            ['present_name', '#select16'],
            // ['origin_name', '#select17'],
            ['present_name_address', '#select18'],
            ['invent_name', '#select19'],
            ['agent_name', '#select20'],
            ['agent_company_name', '#select21']
        ];

        var inputDataVal = [
            ['ask_begin_date', 'ask_over_date', '#select5', 'ask_result'],
            ['public_begin_date', 'public_over_date', '#select6', 'public_result'],
            ['priority_begin_date', 'priority_over_date', '#select7', 'priority_result']
        ]
        //判断是哪个input对应的select
        function judgeSelect(currentName) {
            var currentName = currentName;
            var returnSelect;
            for (var i = 0; i < inputAoptionVal.length; i++) {
                returnSelect = inputAoptionVal[i][0];
                if (returnSelect == currentName) {
                    returnSelect = inputAoptionVal[i][3];
                    break;
                }
            }
            return returnSelect;
        }
        //因为title没有单独的select,所以单独写了一个
        function judgeTitle() {
            if ($('#title').val().length != 0) {
                $('#mergeVal').append($('#title_result').text());
                return true;
            } else {
                return false;
            }
        }
        //用于传给后端的MySql语句
        function transferStorage() {
            var transferStr = $('#mergeVal').text();
            $("#submitVal").attr('value', transferStr);
            // console.log($("#submitVal").val());
        }
        //
        function judgeTime(currentIdName) {
            var currentIdName = currentIdName;
            // console.log(currentIdName);
            currentIdNameLen = $(currentIdName).val().length;
            console.log(currentIdName, currentIdNameLen);
            if (currentIdNameLen != 0) {
                // console.log(currentIdNameLen);
                return true;
            } else {
                // console.log(currentIdNameLen);
                return false;
            }
        }
        //合成MySql
        function mergeOptionTime(condition1, condition2, condition3, condition4) {
            console.log(condition1, condition2, condition3, condition4);
            var res1 = $(condition1).text()
            var res2 = $(condition2).text()
            var currentOptionRest = $(condition3).val();
            // console.log(currentOptionRest);
            console.log(res1, res2);
            var endRes = ' ' + currentOptionRest + '(' + ' ' + res1 + ' ' + 'AND' + ' ' + res2 + ')';
            // console.log(endRes);
            $(condition4).append(endRes);
            console.log($(condition4).text());
            console.log($('#mergeVal').text());
            var resVal = $(condition4).text();
            console.log(endRes);
            $('#mergeVal').append(resVal);
            console.log($('#mergeVal').text());
        }
        //判断时间input的输入
        function judgeTimeInput(currentName) {
            var currentName = currentName;
            console.log(currentName);
            console.log(inputAoptionVal.length);
            var i = 0;
            for (var j = 0; j < inputDataVal.length; j++) {
                if (currentName == inputDataVal[j][0]) {
                    i = 1;
                    break;
                } else if (currentName == inputDataVal[j][4]) {
                    i = 2;
                    break;
                } else {
                    i = 3;
                    continue;
                }
            }
            return i;
        }
        //合成函数
        function mergeOption() {
            var currentVal;
            var currentResult;
            var currentOption;
            var titleCondition = judgeTitle();
            // console.log(titleCondition);
            for (var i = 0; i < inputAoptionVal.length; i++) {
                if ((i == 4) || (i == 5) || (i == 6) || (i == 7) || (i == 8) || (i == 9)) {
                    continue;
                } else {
                    currentIdResult = '#' + inputAoptionVal[i][0];
                    currentOption = '#' + inputAoptionVal[i][0] + '_option';
                    currentResult = '#' + inputAoptionVal[i][0] + '_result';
                    currentIdResult = $(currentIdResult).val().length;
                    if (currentIdResult != 0) {
                        currentVal = ' ' + $(currentOption).text() + ' ' + $(currentResult).text();
                        $('#mergeVal').append(currentVal);
                    } else {
                        continue;
                    }
                }
            }
            if (!titleCondition) {
                var endVal = $('#mergeVal').text();
                endVal = endVal.slice(5);
                $('#mergeVal').text(endVal);
            }
            for (var i = 0; i < inputDataVal.length; i++) {
                var condition1 = judgeTime('#' + inputDataVal[i][0]);
                var condition2 = judgeTime('#' + inputDataVal[i][5]);
                var condition3 = inputDataVal[i][6];
                var condition4 = '#' + inputDataVal[i][7];
                console.log(condition1, condition2, condition3, condition4)
                if ((condition1) && (condition2)) {
                    condition1 = '#' + inputDataVal[i][0] + '_result';
                    condition2 = '#' + inputDataVal[i][8] + '_result';
                    console.log(condition1, condition2, condition3, condition4);
                    mergeOptionTime(condition1, condition2, condition3, condition4);
                } else {
                    continue;
                }
            }
            transferStorage();
        }
        //重置按钮
         $('#clears').click(function () {
            $('span').empty();
            $('select').val('AND');
            $('input').val('');
        });
        //搜索按钮
        $('#searchBtn').click(function () {
            mergeOption();
        });
综合附上一个git地址吧:
点这点这

召唤看板娘