202408 记录平时的一些事情
vue 整合富文本编辑器 wangEditor
https://blog.csdn.net/qq_51137480/article/details/131021377
vue 项目添加百度富文本编辑器 ueditor
https://blog.csdn.net/sgjy_15522801752/article/details/139009728
php 怎么接收 json
POST 和 GET 都是键值对
json 格式就不是键值对了，接收的方法有点特别
// 获取请求体中的JSON内容
$jsonContent = file_get_contents('php://input');
// 解析JSON内容到PHP数组
$data = json_decode($jsonContent, true);
// 检查是否解析成功
if (json_last_error() !== JSON_ERROR_NONE) {
// 错误处理
die('JSON解析错误');
}
// 现在你可以使用$data中的数据了
print_r($data);参考
https://www.php.cn/faq/418454.html
https://www.baidu.com/s?tn=68018901_3_dg&ie=UTF-8&wd=php%20%E6%80%8E%E4%B9%88%E6%8E%A5%E5%8F%97%20json
实际练习测试用的文件
<?php
$data = file_get_contents('php://input');
$data = json_decode($data, true);
// sleep(3);
// 判断解析后的数据是否为空
if (!empty($data)) {
$response = ['msg'=>'','code'=>0,'data'=>$data]; // 拼接响应体
echo json_encode($response);
} else {
echo '{"msg":"这是错误信息","code":406,"data":null}';
}
?>功能、样式齐全的 Tag 选项卡
class="" 里面有两个样式，同时又涉及到两个类样式的切换，使用了袁老师 html5 课里面讲 classList 的方式，实现起来比较轻松
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab</title>
<style>
/* reset default STYLE */
body,ul,li { margin:0; padding:0; }
li { list-style:none; }
body { font-size:12px; font-family:"微软雅黑"; }
/* public STYLE */
.fl{float:left;}
.fr{float:right;}
.clear:after{content:"";display:block;clear:both;}
.gradient{background:-webkit-linear-gradient(top ,#ffffff ,#f8f8f8);cursor:pointer;}
/* tab module STYLE */
.option{width:350px;height:200px;position:fixed;left:0;top:0;right:0;bottom:0;margin:auto;}
.option .tab{height:34px;}
.option .tab li{height:33px;width:172px;border:1px solid #e5e5e5;line-height:33px;text-align:center;border-bottom:none;border-radius:10px 10px 0 0;}
.option .tab .active{height:34px;background:#fff;/*position:relative;*/}
.option .con{width:348px;height:150px;border:1px solid #e5e5e5;border-radius:0 0 6px 6px;}
</style>
</head>
<body>
<div class="option">
<ul class="tab clear">
<li class="active fl">Left</li>
<li class="gradient fr">Right</li>
</ul>
<div class="con"></div>
</div>
<script>
const lis = document.getElementsByTagName("li");
for(let i = 0; i < lis.length; i++){
lis[i].onclick = function(){
// 获取带有.active类样式的li元素
let beforeActive = document.querySelector('.active');
// 移除active，加上gradient
beforeActive.classList.remove('active');
beforeActive.classList.add('gradient');
// 与上面相反，移除gradient，加上active
this.classList.add('active');
this.classList.remove('gradient');
}
}
</script>
</body>
</html>新浪财经消息弹出框样式
可以参考 box-shadow 属性的投影效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新浪财经</title>
<style>
*{margin:0;padding:0;}
body {font-size:12px; font-family:"微软雅黑";}
.SNP-layer{
width:300px;height:546px;border-radius:4px;
box-shadow: rgba(200, 200, 200, .5) 0 2px 4px;
position:absolute;transform:translate(-50%,-50%);left:50%;top:50%;
background-image: -webkit-image-set(url(//n.sinaimg.cn/finance/cece9e13/20230419/pop_main_back.png) 1x, url(//n.sinaimg.cn/finance/cece9e13/20230419/pop_main_back_2x.png) 2x);
background-repeat: no-repeat;
background-position-y: -11px;
}
</style>
</head>
<body>
<div class="SNP-layer"></div>
</body>
</html>PHP 接口文件，json 格式字符拼接模板
<?php
header("Content-type:text/html;charset=utf-8");
header("Content-type:application/json");
header("Access-Control-Allow-Origin: *");
$movies = '{
"code": 0,
"msg": "",
"data": {
"movieTotal": 36,
"movieList": [{
"_id": "5c25ddba5a165113265510ef",
"name": "午夜整容室",
"ename": "PaintedSkin: The Double Mask",
"type": "恐怖,惊悚",
"area": "中国大陆",
"time": "85分钟",
"poster": "https://p0.meituan.net/movie/5581cf675d3d623685328facc05abd933568286.jpg",
"upDate": "2018-12-14",
"score": 8.2,
"count": "15亿",
"intro": "最近龙泉的一所“废弃整容医院”，突然变成网红...",
"createTime": "2018-12-28T08:24:26.662Z",
"updateTime": "2019-01-09T10:40:32.954Z",
"isHot": true,
"isComing": true,
"isClassic": true
}, {
"_id": "5c25ddba5a165113265510e3",
"name": "命运之夜——天之杯：恶兆之花",
"ename": "Fate/stay night [Heaven’s Feel]i.presage flower",
"type": "剧情,动画,悬疑",
"area": "日本",
"time": "119分钟",
"poster": "https://p0.meituan.net/movie/9ef2613395eed698322cdc46ca3f34072433474.jpg",
"upDate": "2019-01-11",
"score": "9",
"count": "8亿",
"intro": "圣杯是传说中可实现持有者一切愿望的宝物...",
"createTime": "2018-12-28T08:24:26.662Z",
"updateTime": "2019-01-09T10:40:31.793Z",
"isHot": true,
"isComing": true,
"isClassic": true
}, {
"_id": "5c25ddba5a165113265510f5",
"name": "断片之险途夺宝",
"ename": "The Morning After",
"type": "喜剧,冒险",
"area": "中国大陆",
"time": "95分钟",
"poster": "https://p1.meituan.net/movie/39d9a68afcf3499dc142dc10ac4aaa291548254.jpg",
"upDate": "2018-12-29 08:00",
"score": 6.7,
"count": "22亿",
"intro": "卖鱼大叔牙叔（葛优 饰）、海豚训练员阿乐...",
"isComing": true,
"isClassic": true
}]
}
}';
echo $movies;两个前端请求数据时报的错误
1. SyntaxError: Expected ',' or ']' after array element in JSON 意思是可能少了 , 或 ]
如果字符串拼接没有问题还报错误，
原因是字符串的最外层不能用数组字面量的方括号 [ ] ，要改用对象字面量的 { } 花括号，字符串里面可以用数组字面量 [ ]
2. SyntaxError: Bad control character in string literal in JSON at position... 意思是字符串里面有不合法字符
关键是这个错误，
在拼接过程中，数组最后一位后面有逗号，
数组的最后一位、对象的最后一位，都不能有逗号，否则会报错
意思是 [ {}，{}，{} ] 第三个对象后面就没有了，后面不能出现逗号，这一点跟 js 里面不一样，js 里面可以有逗号
开始以为是因为空格和回车，
实际上在 php 中拼接 json 格式的字符串的时候，可以有回车跟空格，主要是格式要正确
记录一个 js 去掉字符串中的换行、回车的正则。因为不是因为空格回车报的错，所以没有用上这个方法
let text = '{"fail_station": "FSW_WELDING_DRY_2\r\n","fail_resourceid": "200118223\r\n","fail_timestamp": "2022-12-17"}';
text = text.replace(/[\r|\n|\t]/g,"");
JSON.parse(text);
// 链接：https://juejin.cn/post/7186898828342558777css 平滑滚动样式失效
scroll-behavior: smooth 设置后，点击锚链接没有滚动的效果
解决方法
1. 点击 + 打开一个新选项卡（标签页）
2. 地址栏输入 chrome://flags，转到 Chrome 的实验标志
3. 搜索 'smooth scrolling'
4. 将标志设置为 enabled
转自 https://www.5axxw.com/questions/content/tigijs