开发中常用的一些代码片段

适用于手机端网页的<meta>属性

告诉浏览器，网页的宽度应该等于设备的宽度，设置了网页的初始缩放比例为1.0。这意味着网页在加载时将以原始大小显示，不进行缩放。用户能够手动缩放的最大比例为1.0，禁止了用户手动缩放网页的能力，指定了内容应该尽可能大地填充视口，同时保持其原始宽高比。

HTML
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">

微信手机端<meta>属性

HTML
<meta name="wechat-enable-text-zoom-em" content="true">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="color-scheme" content="light dark">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="referrer" content="origin-when-cross-origin">
<meta name="referrer" content="strict-origin-when-cross-origin">

清除移动端网站点击a标签时闪现的边框或遮罩层

CSS
a{-webkit-tap-highlight-color:rgba(255,0,0,0);}

去除表单输入框黄色背景

CSS
input:-webkit-autofill, 
textarea:-webkit-autofill, 
select:-webkit-autofill { 
    -webkit-box-shadow: 0 0 0 1000px white inset; 
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset; 
}

PHP截取指定字符（前面）和（后面）的内容

PHP截取指定字符【后面】的内容

使用函数strripos()获取一个字符串在另一个字符串中第一次出现的位置。

中文字符串使用mb_strripos()

PHP
$str = 'ABC-DEF';
$ret = substr($str, strripos($str, "-") + 1);
echo $ret; // 输出 DEF

PHP截取指定字符【前面】的内容

使用函数strrops()获取一个字符串在另一个字符串中最后一次出现的位置。

中文字符串使用mb_strrops()

PHP
$str = 'ABC-DEF';
$ret = substr($str, 0, strrpos($str, "-"));
echo $ret; // 输出 ABC

PHP验证字符串中是否包含指定字符串

strpos函数返回boolean值。FALSE和TRUE不用多说，用===进行判断。strpos在执行速度上都比以上两个函数快，另外strpos有一个参数指定判断的位置，但是默认为空。意思是判断整个字符串。缺点是对中文的支持不好。

PHP
if(strpos('www.php.cn','php') !== false){ 
  echo '包含php';
}else{
  echo '不包含php';
}

用explode进行判断PHP判断字符串的包含。

PHP
function check($str){
 // 判断是否包含a这个字符
 $needle ='a';
 $tmparray = explode($needle,$str);
 if(count($tmparray)>1){
     // 如果包含就返回true
     return true;
 } else{
     return false;
 }
}

CSS实现超出部分显示省略号

当文字处于一个容器中，我只想显示一行或者两行，又想表达我还有更多内容的时候，那么可以通过这段CSS代码来是实现，超出部分就自动变为省略号。

显示一行

CSS
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;

显示两行

CSS
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

PHP判断URL的合法性

正则表达式

PHP
function is_url($url){
    $r = "/http[s]?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/is";
    if(preg_match($r,$url)){
        //return true;
        echo '正确的 url 地址';
    }else{
        //return false;
        echo '不是合法的 url 地址';
    }
}

内置函数filter_var()

PHP
function is_url_2($url){
    if (filter_var($url, FILTER_VALIDATE_URL) !== false) {
        echo 'url 地址正确';
    }else{
        echo 'url 地址不正确';
    }
}

让Json更懂中文(JSON_UNESCAPED_UNICODE)

用PHP的json_encode来处理中文的时候，中文都会被编码，变成不可读的, 类似\u***的格式，还会在一定程度上增加传输的数据量。json新增了一个选项JSON_UNESCAPED_UNICODE故名思议，就是说，json不要编码Unicode

PHP
<?php
    echo json_encode("中文", JSON_UNESCAPED_UNICODE);
?>

css奇数偶数选择器

前端项目开发中，需要根据行数的奇数和偶数的不同，设置不同的颜色显示，以在视觉上给用户以良好的浏览体验，这里就需要使用css奇数偶数选择器。

方式一：nth-child

CSS
div:nth-child(odd){
    // 针对奇数行的CSS处理
} 
div:nth-child(even){
    // 针对偶数行的CSS处理
} 

方式二：nth-of-type

CSS
div:nth-of-type(odd){
    // 针对奇数行的CSS处理
}
div:nth-of-type(even){
    // 针对偶数行的CSS处理
}

CSS媒体查询适配手机、平板、电脑

PHP
/* 大屏幕设备（如台式电脑） */
@media screen and (min-width: 1024px) {
    /* 这里放置大屏幕设备的特定样式 */
}

/* 平板设备 */
@media screen and (max-width: 1023px) and (min-width: 768px) {
    /* 这里放置平板设备的特定样式 */
}

/* 手机设备 */
@media screen and (max-width: 767px) {
    /* 这里放置手机设备的特定样式 */
}

PHP获取当前页面URL信息（参数、服务器、目录、路径）

PHP
//获取域名或主机地址
echo $_SERVER['HTTP_HOST']."<br>"; #localhost
  
//获取网页地址
echo $_SERVER['PHP_SELF']."<br>"; #/blog/testurl.php
  
//获取网址参数
echo $_SERVER["QUERY_STRING"]."<br>"; #id=5
  
//获取用户代理
echo $_SERVER['HTTP_REFERER']."<br>";
  
//获取完整的url
echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'];
#http://localhost/blog/testurl.php?id=5
  
//包含端口号的完整url
echo 'http://'.$_SERVER['SERVER_NAME'].':'.$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
#http://localhost:80/blog/testurl.php?id=5
  
//只取路径
$url='http://'.$_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"];
echo dirname($url);
#http://localhost/blog

PHP获取文件的绝对路径

PHP
<?php
    echo  __FILE__  ;  // 取得当前文件的绝对地址，结果：D:\www\test.php
    echo  dirname( __FILE__ );  // 取得当前文件所在的绝对目录，结果：D:\www\
    echo  dirname(dirname( __FILE__ ));  //取得当前文件的上一层目录名，结果：D:\
?>
===========PHP获取文件绝对路径=======
 
=========== chdir () 函数===========
定义和用法
chdir () 函数把当前的目录改变为指定的目录。
 
若成功，则该函数返回 true，否则返回 false。
 
语法
chdir (directory)参数 描述
directory 必需。规定新的当前目录。
例子
<?php
//获得当前目录
echo  getcwd ();
echo  "<br />" ;
 
//改变为 images 目录
chdir ( "images" );
echo  "<br />" ;
echo  getcwd ();
?> 输出：
 
C:\testweb\main
C:\testweb\main\images
=========== chdir () 函数===========

一些常用的CDN

jquery.min.js

HTML
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

vue.global.prod.min.js

HTML
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.min.js"></script>

axios.min.js

HTML
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>

element-ui（index.min.js）

HTML
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>

element-ui（index.min.css）

HTML
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.min.css" rel="stylesheet">

一个html页面基础结构

PHP
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <title>My Website</title>
    <link rel="stylesheet" href="">
</head>
<body>
</body>
</html>

Vue v-cloak指令隐藏未编译的模板语法

v-cloak 指令用于在 Vue 实例准备完毕之前隐藏未编译的 Mustache 标签（即 {{}}）和 v-bind 指令。这可以防止页面在 Vue 实例挂载之前显示未渲染的模板内容。

使用 v-cloak 指令时，你需要将其与 CSS 结合使用，在 CSS 中定义一个不可见的类，并在需要隐藏的元素上添加 v-cloak 指令和该类。当 Vue 实例准备好时，Vue.js 会自动删除这个指令，同时你的 CSS 规则也会让被隐藏的元素显示出来。

CSS
/*v-cloak指令被添加到根元素上*/
/*在CSS中定义了一个display: none;的规则*/
/*这样在Vue实例渲染前*/
/*根元素和其子元素都会被隐藏*/
/*当Vue实例渲染完成后，v-cloak指令会被自动移除*/
/*同时CSS规则不再生效*/
/*因此根元素和其子元素会显示出来*/
/*请将v-cloak指令放在你希望受影响的根元素上*/
[v-cloak] {
    display: none;
}

HTML
<div id="app" v-cloak>
    <div v-if="dataLoaded">
        <!-- 这里放你的模板内容 -->
    </div>
    <div v-else>
        <!-- 这里可以放一个加载动画或者提示信息 -->
        数据加载中...
    </div>
</div>