HexBlog

0%

2018-寒假学习记录

发表于 更新于 分类于

2018-寒假学习记录

假期学习了

  • Thinkphp5.1
  • Bootstrap4
  • jquery ajax
  • markdown

便于爬虫识别的html标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
section定义 
	用来区分各板块
header main footer为方便爬虫检索


table定义

<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>


div 背景图片自适应显示
	background-image: url(../imgs/footerkuang.png);
    background-repeat: no-repeat;     //无重复
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
	
图片自适应div大小 
	可重复
	background-size:contain

ThinkPhp5.1

  1. 在linux下,需要权限php程序才能运行php文件,所以需要chown apache2.apache2 /var/html/tp5/runtime -R 递归修改tp5下的runtime目录
  2. 在linux下,使用文件上传,应该给tp5目录下的public/upload目录apapche用户权限,否则无法上传文件.
  3. 在linux下,需要额外安装php7.2-mysql,否则会产生无法访问数据库的错误.
  4. linux配置php-fpm时,使用sock连接fpm时应该这么写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<VirtualHost *:80>
        DocumentRoot "/home/divint3/WWW/tp5/public"                        
        ServerName www.divint3.com            
        ServerAlias divint3.com               
        DirectoryIndex index.htm index.php index.html
  <Directory "/home/divint3/WWW/tp5/public">
        Options FollowSymLinks ExecCGI //禁止访问目录,允许在该目录下执行CGI脚本
        AllowOverride All //允许rewrite,根据htc
        Order allow,deny //设置缺省的访问权限与Allow和Deny语句的处理顺序
        Allow from all //允许从任何地址访问
        Require all granted //允许所有请求访问资源
        Satisfy all //禁止直接访问
  </Directory>
        ProxyRequests Off
        ProxyPassMatch ^/(.*\.php(/.*)?)$ unix:/run/php/php7.2-fpm.sock|fcgi://localhost/home/divint3/WWW/tp5/public/
</VirtualHost>

最后用phpinfo()验证是否开启php-fpm成功

  1. linux下apache开启模块
    1
    2
    3
    a2enmod rewrite 
    a2enmod proxy
    a2enmod proxy_fcgi
  2. 想要隐藏url的php文件名,应该编辑.htaccess
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <IfModule mod_rewrite.c>
      Options +FollowSymlinks -Multiviews
      RewriteEngine On

      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteCond %{REQUEST_FILENAME} !-f
      //以上为默认配置文件
      RewriteRule ^(.*)$ index.php?s=$1 [QSA,PT,L]
      //写的是rewrite规则,可以省略index.php文件访问
    </IfModule>
  3. 本来要自己写分页操作的,没想到tp5自己有分页操作,语法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    public function bkList($type){
        $info=Bkarticle::where("type",$type)->paginate(10);
        // 获取分页显示
        $page = $info->render();
        // 模板变量赋值
        $this->assign('info', $info);
        $this->assign('page', $page);
        return $this->fetch();
    }
    Bkartical为数据库中的同名表.可用于查询数据库中的同名表.paginate(10)的意思是每页显示十条数据. 这是tp5中的模型操作数据库.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    {extend name="./common/father" /} //继承父模板

    {block name="title"}
    <title>灾害大百科</title>
    {/block}

    {block name="content"}

    <div class="container">
        <ul>
            <table class="text-center table  table-bordered">
                <tr>
                    <th>文章标题</th>
                    <th>文章内容预览</th>
                </tr>
                {volist name='info' id='bklist' length="50"}
                {php}
                    $content=$bklist["content"];
                    preg_replace('/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i','[图片]',$content); //把数据库中取出的html文本数据中的匹配img标签的文本替换为[img],因为这这只是一个预览内容,不能把整个img文件链接地址暴露出来
                    preg_replace('/(</?)(w+)([^>]*>)/e', "'\1'.strtoupper('\2').'\3'", $content); //替换掉所有标签,只保留文本内容
                    $content=substr($content,0,100); //截取100的长度
                {/php}
                <tr>
                    <td><a href="/bkarticle/{$bklist.id}">{$bklist.title}</a></td>
                    <td class="text-left">{php}echo $content;{/php}</td>
                </tr>
                {/volist}
            </table>
        </ul>
        <div class="float-right">{$info|raw}</div> //这里输出分页表

    </div>

    {/block}

    {block name="js"}
    <script src="/static/js/baike/bklist.js"></script>
    {/block}
    使用jquery为对象添加class,因为{$info|raw}输出的是一个html代码,而这个代码不法修改,只能用jquery确定元素,增加class
    1
    2
    3
    4
    5
    $(function () {
        $("main section div div ul li").addClass("page-item");
        $("main section div div ul span").addClass("page-link");
        $("main section div div ul li a").addClass("page-link");
    })
    分页效果如下
  4. phpstrom在linux下有个东西不知道怎么取消,反正就是根据是否使用git提交文件的颜色会有变化,其实只要Alt+F12 用git同步就行了,一个add,一个comment颜色就没啦,这种颜色不一样保持了我这个强迫症不断备份啊.红色是未提交,绿色是新添加,蓝色是已修改

9.PHP版本过高会使tp5无法连接数据库,在尝试数据库迁移时,会报错SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client发生这种错误，是由于MySQL 8默认使用了新的密码验证插件：caching_sha2_password，而之前的PHP版本中所带的mysqlnd无法支持这种验证。

修改 /etc/mysql/my.cnf，添加下面一行：

1
2
[mysqld]
default_authentication_plugin= mysql_native_password
然后重置密码：
1
ALTER USER 'user'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
---

简单的ajax.post

  1. 首先说说a标签如何触发onclick事件
1
<a href="javascript:void(0);" onclick="js_method()">Some Thing</a>

这里herf超链接指向了一个空的js脚本,然后定义onclick事件 这样,我们可以使用a标签使用onclick事件发送一个ajax请求 定义一个类 叫做upload,创建一个方法,用来接收数据,这里在js处理完数据后,php仍然会检验数据可用性,我把它定义在了admin/bkadd/addcheck下,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*
* 前端文章上传类
* @author Divint3
* */

var upload = {
    check: function () {
        var type = $('input[name="type"]:checked').val();
        var title = $('input[name="title"]').val();
        var content = editor.txt.html();//获取各种值并定义变量
        if (content == "<p><br></p>") {
            return dialog.error("内容不能为空");
        }
        if (!title) {
            return dialog.error("标题不能为空");
        }
        if (!type) {
            return dialog.error("未指定文章类型");
        }
        var url = "admin/bkadd/addcheck";
        var data = {
            "type": type,
            "title": title,
            "content": content,
        };

        $.post(url, data, function (result) {//result是admin/bkadd/addcheck返回的json数据
            if (result.status) {//status返回的是php检验数据是否成功,检验数据成功后,tp5助手函数db会返回一个非零数值,如果插入失败,返回零
                dialog.success(result.message);//dialog封装了layer弹出层的方法,方便调用
                editor.txt.html('<p><br></p>');
                $('input[name="title"]').val("");//数据信息清空
            } else{
                dialog.error(result.message);
            }
        }, "JSON");
    }
};

PHP检验代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public function addCheck()
    {
        //这里接收ajax请求,处理请求
        $type = $_POST['type'];
        $title = $_POST['title'];
        $content = $_POST['content'];
        if (!$type) {
            return show(0, '未指定文章类型');
        }
        if (!$title) {
            return show(0, '标题不能为空');
        }
        if ($content == "<p><br></p>") {
            return show(0, '内容不能为空');
        }
        $data = [
            "type" => $type,
            "title" => $title,
            "content" => $content,
        ];

        $isset = Bkarticle::where("title", $title)->find();
        if ($isset == array()) {
            $s = db("bkarticle")->data($data)->insert();
            return show($s, "插入百科文章成功", array(
                "type" => $type,
                "content" => $content,
            ));
        }
        return show(0, "这个文章名已经被用过了");
    }

这里的show方法我定义在了application下的comment.php下,因为这里是公共方法,所有方法都可以引用

1
2
3
4
5
6
7
8
9
function show($status, $message, $data = array())
{
    $result=[
        'status'=>$status,
        'message'=>$message,
        'data'=>$data,
    ];
    exit(json_encode($result));
}//就是返回了一个json,给使用ajax.post方法的一个result,这样js才能处理插入状态

bootstrap4

  1. 使用bs4的原因是他的排版和配色真的好看,给大家一个bs4主题链接https://bootswatch.com/ ,配色什么的方案多样.
  2. bs4的栅格结构也很好,支持动态响应.反正我现阶段是写不出来.
  3. bs4没啥好说的,就是个css加js,调用就完事了. 常用知识点
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    容器
    	container 类用于固定宽度并支持响应式布局的容器。
    	container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
    颜色操作 bg-
    	primary
    	secondary
    	success
    	waring
    	light(高亮)
    	
    前景色 text-

    字体位置
    	text-center/left/right
    	font-weight-normal 普通
    				-bold 加粗
    英文变换
    	text-lowercase 小写
    		-uppercase 大写
    		-capitalize 自动大小写
    字体大小 display-
    	display-1 最大
    			-2
    			-3
    			-4 最小

    网格系统 col-
    	一共划分为12个网格
    	.col- 针对极小屏幕
    	.col-sm- 平板 - 屏幕宽度等于或大于 576px
    	.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
    	.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
    	.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
    	
    	xl与lg同时存在,若大于xl判定,使用xl规则,大于lg小于xl,使用lg规则,以此类推
    	只定义了col-md 那么md及md以上使用md的规则,md以下使用默认规则
    	
    	offset-
    		偏移系统,指定偏移多少单位,最高12
    		

    余白与边框 
    	padding 余白
    	margin 边框
    	写法
    		p/m{location=t[op]b[lod]l[eft]r[ight]xy}-size
    		x代表上下
    		y代表左右
    	size定义值
    		1 0.25rem
    		2 0.5rem
    		3 1rem
    		4 1.5rem
    		5 3rem
    	maigin在class中定义
    		margin-tblr:#px %
    	        {margin-left: auto;
                margin-right: auto;}代表水平居中
    			
    按钮定义 btn-
    	primary
    	secondary
    	success
    	waring
    	light(高亮)
    定义行 row
    显示顺序 order	
    	order-屏幕尺寸-顺序值


layer弹出层

这就是个充数的,调用看官网就行了.

MarkDown

同上

恰饭,恰饭