Go to comments

记录平时的知识点

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






Leave a comment 0 Comments.

Leave a Reply

换一张