记录平时的知识点
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
功能、样式齐全的 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/7186898828342558777
css 平滑滚动样式失效
scroll-behavior: smooth 设置后,点击锚链接没有滚动的效果
解决方法
1. 打开新选项卡
2. 转到 Chrome 的实验标志 (chrome://flags)
3. 搜索 'smooth scrolling'
4. 将标志设置为 enabled
转自:https://www.5axxw.com/questions/content/tigijs