Passing data using React
P粉696891871
P粉696891871 2023-09-14 20:43:08
0
1
458

In the code below "CameraPage.tsx", a logic is made. Its function is to search for camera images. It is very simple. It just sends a GET request to search for images registered in the backend. The front-end display and operation will be introduced later. correct.

When the user clicks on the "InfoOutlineIcon", another page should load, showing the image, but when clicking on it, another page opens, but does not show the image. The problem that arises is that when you click, the console.log shows that the image is loaded, but when a new page is opened, it seems like everything starts from scratch and no requests are made, so no image is loaded/displayed on the frontend.

// CameraPage.tsx FILE CODE function CameraPage() { const fetchCameraImage = async (cameraId: number, currentPageImages: number): Promise => { if (!accessToken) { console.log("Access token not found"); return false; } try { console.log("Calling responseFetchCameraImage"); let responseFetchCameraImage; const page = currentPageImages > 0 ? currentPageImages : 1; const size = 20; responseFetchCameraImage = await axios.get(`${API_URL}/api/v1/imagens/pagination/${cameraId}?page=${page}&size=${size}`, { headers: { Authorization: `Bearer ${accessToken}` }, }); console.log(responseFetchCameraImage) if (responseFetchCameraImage.status === 200) { const images = responseFetchCameraImage.data.items; const cameraImages = images.filter((image: any) => image.camera_id === cameraId); console.log(cameraImages) if (cameraImages && cameraImages.length > 0) { const uniqueImagesData: ImageData[] = []; cameraImages.forEach((image: any) => { const imageData: ImageData = { imageURL: `data:image/jpg;base64,${image.image}`, data: image.data, placa: image.placa, score: image.score, }; uniqueImagesData.push(imageData); }); setImageData(uniqueImagesData); console.log("Images found"); return true; } else { console.error("This camera has no images yet"); return false; } } else { console.error("Error while trying to fetch camera images"); return false; } } catch (error) { console.error("Error while trying to fetch camera images"); errorTimeout = setTimeout(() => { setError(""); }, 3000); return false; } }; useEffect(() => { const fetchData = async () => { if (editingCameraId !== null) { const success = await fetchCameraImage(editingCameraId, currentPageImages); if (success) { setCurrentPageImages(1); setImageCounter(0); } } }; fetchData(); }, [editingCameraId, currentPageImages]); return (     { const hasImage = await fetchCameraImage(camera.id, currentPageImages); if (hasImage) { routerAfterClickInfoCamera.push('CameraImages') } }} />  {camera.name}   ); } export default CameraPage;

The code below "CameraForm.tsx" is where the image should be displayed, usingrouterAfterClickInfoCamera.push('CameraForm')you will be taken to the page, however, nothing is displayed as shown below Said before. But I don't understand how to do it, I've been researching but I don't understand it, if anyone can help me I'd be grateful.

// CameraForm.tsx FILE CODE export interface ImageData { imageURL: string; data: string; placa: string; score: number; } interface CameraModalProps { imageData?: ImageData[]; currentPageImages: number; imagesPerPage: number; } const CameraImages: React.FC = ({ imageData = [], currentPageImages, imagesPerPage, }) => { const [searchPlaca, setSearchPlaca] = useState(""); const startIndex = (currentPageImages - 1) * imagesPerPage; const endIndex = startIndex + imagesPerPage; // Filter images by placa const filterImagesByPlaca = () => { if (searchPlaca === "") { return imageData; } return imageData.filter((image) => image.placa.toLowerCase().includes(searchPlaca.toLowerCase()) ); }; // Get images filtered by placa const filteredImages = filterImagesByPlaca(); const visibleImages = filteredImages.slice(startIndex, endIndex) ?? []; return (     </Flex> <Box> <Input type="text" border="none" style={{ marginLeft: "1rem", outline: "none", backgroundColor: "transparent", borderBottom: "1px solid #ccc", }} width="auto" placeholder="Buscar placa" value={searchPlaca} onChange={(e) => setSearchPlaca(e.target.value)} /> </Box> <Box> {visibleImages.map((imageData, index) => { const { imageURL, data, placa, score } = imageData; const imageNumber = startIndex + index + 1; return ( <Box key={index} borderBottom="1px solid #ccc" py={2}> <Text fontSize={["sm", "md"]} fontWeight="normal"> Imagem {imageNumber} </Text> <Text fontSize={["sm", "md"]} fontWeight="normal"> Data: {data} </Text> <Text fontSize={["sm", "md"]} fontWeight="normal"> Placa: {placa} </Text> <Text fontSize={["sm", "md"]} fontWeight="normal"> Score: {score} </Text> <ChakraImage src={imageURL} alt={`Image ${index}`} /> </Box> ); })} </Box> </Layout> ) } export default CameraImages;</pre>
      <p></p>
     </div>
     <div class="share flexRow">
      <div class="shareReply flexColumn shareDiv">
       <a href="javascript:;"><img class="sharerImg" src="//m.sbmmt.com/static/images/images/icon50.png" data-id="1"></a>
       <span class="sharerSpan">1</span>
      </div>
      <div class="shareLike flexColumn shareDiv" onclick="ask_comment_good(172685)">
       <a href="javascript:;"><img class="sharerImg" src="//m.sbmmt.com/static/images/images/icon52.png" data-id="2"></a>
       <span class="sharerSpan">0</span>
      </div>
      <div class="shareLDz flexColumn shareDiv dzdiv dzdiv1 askgoodICollection" data-id="172685">
       <a href="javascript:;"><img class="sharerImg " src="//m.sbmmt.com/static/images/images/icon37.png" data-id="5"></a>
       <span class="sharerSpan">0</span>
      </div>
     </div>
     <div id="commentinput" class="info detail-comment-input layui-hide-sm">
      <div class="detail-ci-avator">
       <img src="//m.sbmmt.com/static/images/user_avatar.jpg" alt="P粉696891871">
       <div class="detail-r">
        <span class="detail-name">P粉696891871</span>
        <p class="detail-signal"></p>
       </div>
      </div>
      <div id="js-reply-wrap">
       <div id="js-reply-editor-box" class="wd-comment-box js-ci-inner edui-imooc"></div>
       <div class="qa-ci-footer">
        <div class="qa-ci-footright">
         <button id="js-wenda-ci-submit" class="detail-btn" data-qid="172685">reply</button>
        </div>
       </div>
      </div>
     </div>
     <div id="pinglundeplace" class="allReply ask-reply-all-list comments-content">
      <div class="arTop flexRow">
       <div class="artLeft flexRow fontBold fontColor1">
        reply all
        <b class="artlb colorGrey">(1)</b>
       </div>
       <button class="artBtn ask-comment-answer gbaskcommentanswer">I'll reply</button>
       <button class="artBtn ask-comment-answer gbaskcomment">Close</button>
      </div>
      <div class="allReplayLine"></div>
      <div class="wdsyConDiv flexRow ask_top_ul">
       <img src="//m.sbmmt.com/static/images/user_avatar.jpg" alt="P粉464113078" class="wdcdImg">
       <div class="wdcdContent flexColumn">
        <div class="wdcdContentReply">
         <div class="wdxqrcTop flexRow">
          <a href="//m.sbmmt.com/member/1271974.html" target="_blank" class="wdcdcName">P粉464113078<b class="wdxqRcT colorGrey">2023-09-15 16:45:39</b></a>
          <span class="wdxqrcTopspan colorGrey">1 floor</span>
         </div>
         <div class="wdcdcCons">
          <p>I think the problem is that you are calling the "CameraImages" component, but you are not sending the props. That's why the image doesn't show up.</p>
          <p>You should do something like this.</p>
          <pre class="brush:php;toolbar:false;"><CameraImages imageData={imageData} currentPageImages={currentPageImages} imagesPerPage={imagesPerPage} /></pre>
         </div>
         <div class="wdcdcInfo flexRow">
          <a href="javascript:ask_reply_good(256436)"><img class="wdxqindz" src="//m.sbmmt.com/static/images/images/icon27.png"></a>
          <span class="wdxqindzspan">Like<b>+0</b></span>
          <div class="wdcdcileft">
           <a href="javascript:;" class="wdcdciSpan reply openreply">Add Reply</a>
           <a href="javascript:;" class="wdcdciSpan reply closereply" style="display:none">关闭回复</a>
          </div>
         </div>
         <div class="wdcdContentReplyss" style="display: none;">
          <div class="reply textarea-con">
           <div class="replyTop flexRow">
            <div class="retLeft flexRow">
             <img src="//m.sbmmt.com/static/images/user_avatar.jpg" class="retlAvatar">
             <span class="retlName">P粉696891871</span>
            </div>
           </div>
           <textarea class="replaytext colorGrey" id="release-reply" placeholder="Write down your reply"></textarea>
           <button type="button" class="replayBtn do-reply-btn" data-id="256436">reply</button>
          </div>
         </div>
         <div class="wdcdContentReplyss">
          <ul class="replyssul"></ul>
         </div>
        </div>
       </div>
      </div>
      <div class="wdsyCondivLine"></div>
      <div></div>
     </div>
    </div>
    <!-- left end -->
    <div class="phpwzright wdxq">
     <a href="javascript:void(0);" onclick="publish_ask('Post Topic',1,'en')"><img src="//m.sbmmt.com/static/images/images/needtiwen.png" class="wdxqrImg"></a>
     <div class="wzrTwo">
      <div class="wzrt-title">
       <div>
        Popular Topics
       </div>
       <a href="//m.sbmmt.com/faq/zt">More></a>
      </div>
      <div class="wzrtlist">
       <ul>
        <li><a target="_blank" href="//m.sbmmt.com/faq/cakephp-tutor" title=""><img src="https://img.php.cn/upload/subject/000/000/083/66e2a5dda5112223.jpg?x-oss-process=image/resize,m_fill,h_96,w_156" alt="CakePHP Tutorial"></a><a target="_blank" href="//m.sbmmt.com/faq/cakephp-tutor" title="" class="title-a-spanl"><span>CakePHP Tutorial</span></a></li>
        <li><a target="_blank" href="//m.sbmmt.com/faq/cakephp-tutor" title=""><img src="https://img.php.cn/upload/subject/000/000/083/66e2a5dda5112223.jpg?x-oss-process=image/resize,m_fill,h_96,w_156" alt="CakePHP Tutorial"></a><a target="_blank" href="//m.sbmmt.com/faq/cakephp-tutor" title="" class="title-a-spanl"><span>CakePHP Tutorial</span></a></li>
        <li><a target="_blank" href="//m.sbmmt.com/faq/laravel-tutori" title=""><img src="https://img.php.cn/upload/subject/000/000/083/66d95857c13be635.jpg?x-oss-process=image/resize,m_fill,h_96,w_156" alt="Laravel Tutorial"></a><a target="_blank" href="//m.sbmmt.com/faq/laravel-tutori" title="" class="title-a-spanl"><span>Laravel Tutorial</span></a></li>
        <li><a target="_blank" href="//m.sbmmt.com/faq/php-tutorial" title=""><img src="https://img.php.cn/upload/subject/000/000/083/66d956a674879652.jpg?x-oss-process=image/resize,m_fill,h_96,w_156" alt="PHP Tutorial"></a><a target="_blank" href="//m.sbmmt.com/faq/php-tutorial" title="" class="title-a-spanl"><span>PHP Tutorial</span></a></li>
       </ul>
      </div>
     </div>
     <div class="wzrOne">
      <div class="wzroTitle">
       <div>
        Popular Articles
       </div>
      </div>
      <div class="wzroList">
       <ul>
        <li>
         <div class="wzczzwzli">
          <span class="layui-badge-dots wzrolr"></span>
          <a target="_blank" title="Bitstamp exchange currency withdrawal rules and advantages and disadvantages" href="//m.sbmmt.com/faq/1796602374.html">Bitstamp exchange currency withdrawal rules and advantages and disadvantages</a>
         </div></li>
        <li>
         <div class="wzczzwzli">
          <span class="layui-badge-dots wzrolr"></span>
          <a target="_blank" title="Dogecoin (DOGE) Whales Are Eyeing Mpeppe (MPEPE) As September Approaches" href="//m.sbmmt.com/faq/1796602591.html">Dogecoin (DOGE) Whales Are Eyeing Mpeppe (MPEPE) As September Approaches</a>
         </div></li>
        <li>
         <div class="wzczzwzli">
          <span class="layui-badge-dots wzrolr"></span>
          <a target="_blank" title="IFA 2024 | New Lenovo Yoga Pro 7 debuts with AMD Strix Point processor" href="//m.sbmmt.com/faq/1796601883.html">IFA 2024 | New Lenovo Yoga Pro 7 debuts with AMD Strix Point processor</a>
         </div></li>
        <li>
         <div class="wzczzwzli">
          <span class="layui-badge-dots wzrolr"></span>
          <a target="_blank" title="pen-source alternatives to Jira, Linear and Asana" href="//m.sbmmt.com/faq/1796601908.html">pen-source alternatives to Jira, Linear and Asana</a>
         </div></li>
        <li>
         <div class="wzczzwzli">
          <span class="layui-badge-dots wzrolr"></span>
          <a target="_blank" title="Ethereum (ETH) Struggles to Maintain Momentum, While Meme Coin Contender Mpeppe (MPEPE) Shoots for the Stars" href="//m.sbmmt.com/faq/1796602620.html">Ethereum (ETH) Struggles to Maintain Momentum, While Meme Coin Contender Mpeppe (MPEPE) Shoots for the Stars</a>
         </div></li>
       </ul>
      </div>
     </div>
     <div class="wzrThree">
      <div class="wzrthree-title">
       <div>
        Popular Tutorials
       </div>
       <a target="_blank" href="//m.sbmmt.com/course.html">More></a>
      </div>
      <div class="wzrthreelist swiper2">
       <div class="wzrthreeTab swiper-wrapper">
        <div class="check tabdiv swiper-slide" data-id="one">
         Related Tutorials
         <div></div>
        </div>
        <div class="tabdiv swiper-slide" data-id="two">
         Popular Recommendations
         <div></div>
        </div>
        <div class="tabdiv swiper-slide" data-id="three">
         Latest courses
         <div></div>
        </div>
       </div>
       <ul class="one">
        <li><a target="_blank" href="//m.sbmmt.com/course/812.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="//m.sbmmt.com/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a>
          <div class="wzrthreerb">
           <div>
            1398529
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="812">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
        <li><a target="_blank" href="//m.sbmmt.com/course/74.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP introductory tutorial one: Learn PHP in one week"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="PHP introductory tutorial one: Learn PHP in one week" href="//m.sbmmt.com/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a>
          <div class="wzrthreerb">
           <div>
            4213001
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="74">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
        <li><a target="_blank" href="//m.sbmmt.com/course/286.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="JAVA Beginner's Video Tutorial" href="//m.sbmmt.com/course/286.html">JAVA Beginner's Video Tutorial</a>
          <div class="wzrthreerb">
           <div>
            2380213
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="286">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
       </ul>
       <ul class="two" style="display: none;">
        <li><a target="_blank" href="//m.sbmmt.com/course/812.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="//m.sbmmt.com/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a>
          <div class="wzrthreerb">
           <div>
            1398529
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="812">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
        <li><a target="_blank" href="//m.sbmmt.com/course/286.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="JAVA Beginner's Video Tutorial" href="//m.sbmmt.com/course/286.html">JAVA Beginner's Video Tutorial</a>
          <div class="wzrthreerb">
           <div>
            2380213
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="286">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
        <li><a target="_blank" href="//m.sbmmt.com/course/504.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="//m.sbmmt.com/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a>
          <div class="wzrthreerb">
           <div>
            495199
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="504">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
        <li><a target="_blank" href="//m.sbmmt.com/course/901.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Quick introduction to web front-end development"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="Quick introduction to web front-end development" href="//m.sbmmt.com/course/901.html">Quick introduction to web front-end development</a>
          <div class="wzrthreerb">
           <div>
            213780
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="901">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
        <li><a target="_blank" href="//m.sbmmt.com/course/234.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Master PS video tutorials from scratch"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="Master PS video tutorials from scratch" href="//m.sbmmt.com/course/234.html">Master PS video tutorials from scratch</a>
          <div class="wzrthreerb">
           <div>
            849121
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="234">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
       </ul>
       <ul class="three" style="display: none;">
        <li><a target="_blank" href="//m.sbmmt.com/course/1648.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Node.js quick start"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="[Web front-end] Node.js quick start" href="//m.sbmmt.com/course/1648.html">[Web front-end] Node.js quick start</a>
          <div class="wzrthreerb">
           <div>
            3761
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="1648">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
        <li><a target="_blank" href="//m.sbmmt.com/course/1647.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Complete collection of foreign web development full-stack courses"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="Complete collection of foreign web development full-stack courses" href="//m.sbmmt.com/course/1647.html">Complete collection of foreign web development full-stack courses</a>
          <div class="wzrthreerb">
           <div>
            2895
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="1647">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
        <li><a target="_blank" href="//m.sbmmt.com/course/1646.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go language practical GraphQL"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="Go language practical GraphQL" href="//m.sbmmt.com/course/1646.html">Go language practical GraphQL</a>
          <div class="wzrthreerb">
           <div>
            2399
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="1646">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
        <li><a target="_blank" href="//m.sbmmt.com/course/1645.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W fan master learns JavaScript from scratch step by step"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="550W fan master learns JavaScript from scratch step by step" href="//m.sbmmt.com/course/1645.html">550W fan master learns JavaScript from scratch step by step</a>
          <div class="wzrthreerb">
           <div>
            504
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="1645">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
        <li><a target="_blank" href="//m.sbmmt.com/course/1644.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours"></a>
         <div class="wzrthree-right">
          <a target="_blank" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" href="//m.sbmmt.com/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a>
          <div class="wzrthreerb">
           <div>
            13073
            <b class="kclbcollectb"></b>
           </div>
           <div class="courseICollection" data-id="1644">
            <b class="nofollow small-nocollect"></b>
           </div>
          </div>
         </div></li>
       </ul>
      </div>
     </div>
     <div class="wzrFour">
      <div class="wzrfour-title">
       <div>
        Latest Downloads
       </div>
       <a href="//m.sbmmt.com/xiazai">More></a>
      </div>
      <div class="wzrfourList swiper3">
       <div class="wzrfourlTab swiper-wrapper">
        <div class="check swiper-slide" data-id="onef">
         Web Effects
         <div></div>
        </div>
        <div class="swiper-slide" data-id="twof">
         Website Source Code
         <div></div>
        </div>
        <div class="swiper-slide" data-id="threef">
         Website Materials
         <div></div>
        </div>
        <div class="swiper-slide" data-id="fourf">
         Front End Template
         <div></div>
        </div>
       </div>
       <ul class="onef">
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a target="_blank" title="[form button] jQuery enterprise message form contact code" href="//m.sbmmt.com/xiazai/js/8071">[form button] jQuery enterprise message form contact code</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a target="_blank" title="[Player special effects] HTML5 MP3 music box playback effects" href="//m.sbmmt.com/xiazai/js/8070">[Player special effects] HTML5 MP3 music box playback effects</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a target="_blank" title="[Menu navigation] HTML5 cool particle animation navigation menu special effects" href="//m.sbmmt.com/xiazai/js/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a target="_blank" title="[form button] jQuery visual form drag and drop editing code" href="//m.sbmmt.com/xiazai/js/8068">[form button] jQuery visual form drag and drop editing code</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a target="_blank" title="[Player special effects] VUE.JS imitation Kugou music player code" href="//m.sbmmt.com/xiazai/js/8067">[Player special effects] VUE.JS imitation Kugou music player code</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a target="_blank" title="[html5 special effects] Classic html5 pushing box game" href="//m.sbmmt.com/xiazai/js/8066">[html5 special effects] Classic html5 pushing box game</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a target="_blank" title="[Picture special effects] jQuery scrolling to add or reduce image effects" href="//m.sbmmt.com/xiazai/js/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a target="_blank" title="[Photo album effects] CSS3 personal album cover hover zoom effect" href="//m.sbmmt.com/xiazai/js/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</a>
         </div></li>
       </ul>
       <ul class="twof" style="display:none">
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/7647" title="[Bootstrap template] Organic fruit and vegetable supplier web template Bootstrap5" target="_blank">[Bootstrap template] Organic fruit and vegetable supplier web template Bootstrap5</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/7646" title="[backend template] Bootstrap3 multifunctional data information background management responsive web page template-Novus" target="_blank">[backend template] Bootstrap3 multifunctional data information background management responsive web page template-Novus</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/7645" title="[Bootstrap template] Real estate resource service platform web page template Bootstrap5" target="_blank">[Bootstrap template] Real estate resource service platform web page template Bootstrap5</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/7644" title="[Bootstrap template] Simple resume information web template Bootstrap4" target="_blank">[Bootstrap template] Simple resume information web template Bootstrap4</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/7639" title="[Bootstrap template] bootstrap responsive widescreen book education website template-DREAMLIFE" target="_blank">[Bootstrap template] bootstrap responsive widescreen book education website template-DREAMLIFE</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/7634" title="[backend template] MAC style responsive blue enterprise CMS background management system template" target="_blank">[backend template] MAC style responsive blue enterprise CMS background management system template</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/7632" title="[backend template] Responsive gradient atmosphere background management system website template-usinessbox" target="_blank">[backend template] Responsive gradient atmosphere background management system website template-usinessbox</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/7629" title="[Bootstrap template] Responsive vegetable and fruit store website template-Organio" target="_blank">[Bootstrap template] Responsive vegetable and fruit store website template-Organio</a>
         </div></li>
       </ul>
       <ul class="threef" style="display:none">
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/sucai/3078" target="_blank" title="[PNG material] Cute summer elements vector material (EPS PNG)">[PNG material] Cute summer elements vector material (EPS PNG)</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/sucai/3077" target="_blank" title="[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)">[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/sucai/3076" target="_blank" title="[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)">[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/sucai/3075" target="_blank" title="[PNG material] Golden graduation cap vector material (EPS PNG)">[PNG material] Golden graduation cap vector material (EPS PNG)</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/sucai/3074" target="_blank" title="[PNG material] Black and white style mountain icon vector material (EPS PNG)">[PNG material] Black and white style mountain icon vector material (EPS PNG)</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/sucai/3073" target="_blank" title="[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses">[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/sucai/3072" target="_blank" title="[banner picture] Flat style Arbor Day banner vector material (AI+EPS)">[banner picture] Flat style Arbor Day banner vector material (AI+EPS)</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/sucai/3071" target="_blank" title="[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)">[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)</a>
         </div></li>
       </ul>
       <ul class="fourf" style="display:none">
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/8328" target="_blank" title="[Front-end template] Home Decor Cleaning and Repair Service Company Website Template">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/8327" target="_blank" title="[Front-end template] Fresh color personal resume guide page template">[Front-end template] Fresh color personal resume guide page template</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/8326" target="_blank" title="[Front-end template] Designer Creative Job Resume Web Template">[Front-end template] Designer Creative Job Resume Web Template</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/8325" target="_blank" title="[Front-end template] Modern engineering construction company website template">[Front-end template] Modern engineering construction company website template</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/8324" target="_blank" title="[Front-end template] Responsive HTML5 template for educational service institutions">[Front-end template] Responsive HTML5 template for educational service institutions</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/8323" target="_blank" title="[Front-end template] Online e-book store mall website template">[Front-end template] Online e-book store mall website template</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/8322" target="_blank" title="[Front-end template] IT technology solves Internet company website template">[Front-end template] IT technology solves Internet company website template</a>
         </div></li>
        <li>
         <div class="wzrfourli">
          <span class="layui-badge-dots wzrflr"></span>
          <a href="//m.sbmmt.com/xiazai/code/8321" target="_blank" title="[Front-end template] Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</a>
         </div></li>
       </ul>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="phpFoot">
   <div class="phpFootIn">
    <div class="phpFootCont">
     <div class="phpFootLeft">
      <dl>
       <dt>
        <a href="//m.sbmmt.com/about/us.html" rel="nofollow" target="_blank" title="About us" class="cBlack">About us</a>
        <a href="//m.sbmmt.com/about/disclaimer.html" rel="nofollow" target="_blank" title="Disclaimer" class="cBlack">Disclaimer</a>
        <a href="//m.sbmmt.com/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a>
        <div class="clear"></div>
       </dt>
       <dd class="cont1">
        php.cn:Public welfare online PHP training,Help PHP learners grow quickly!
       </dd>
      </dl>
     </div>
    </div>
   </div>
  </div>
  <input type="hidden" id="verifycode" value="/captcha.html">
 </body>
</html>