0

当我爬到我的大学网站的一部分时，出现了错误。

Failed to load resource: net::ERR_CONNECTION_REFUSED (localhost:3000/:1)
createError.js:16 Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:99)

我已经尝试过其他事情，但我不确定为什么它会显示“加载...”并且在控制台中出现错误。

该站点正在运行，但爬网无法正常运行并显示“加载...”

这是kangnam.js：

const axios = require('axios');
const cheerio = require('cheerio');
const log = console.log;
const express = require("express");
const cors = require("cors");
const PORT = 4000;
const app = express();

app.use(cors());

const getHTML = async () => {
    try {
        return await axios.get('https://web.kangnam.ac.kr', {
            headers: {
                Accept: 'text/html'
            }
        });
    } catch (error) {
        console.log(error);
    }
};

app.get("/", (req, res) => {
    getHTML()
        .then(html => {
        const $ = cheerio.load(html.data);
        const $allNotices = $("ul.tab_listl div.list_txt");

        let resultArr = [];
        $allNotices.each(function(idx, element) {
            let itemObj = {
                title : $(this).children('a').attr('title'),
                url : $(this).children('a').attr('href'),
            };
            resultArr.push(itemObj);
        });
        
        resultArr.forEach((element) => {
            console.log(`현재 ${element._title}의 현황 : ${element._url}`);
        });
        return resultArr;

        // const data = ulList.filter(n => n.title);
        // return data;
    }). then((data) => res.send(data));
});

app.listen(PORT, () => 
    console.log(`Example app listening at http://localhost:${PORT}`)
);

这是NoticesList.js：

import React, {useEffect, useState} from 'react';
import styled from 'styled-components';
import NoticesItem from './NoticesItem';
import axios from "axios";

const NoticesListBlock = styled.div`
    box-sizing: border-box;
    padding-bottom: 3rem;
    width: 768px;
    margin: 0 auto;
    margin-top: 2rem;
`;

const sampleArticle = {
    title: 'title',
    url: 'https://google.com',
};

const NoticesList = () => {
    
    const [data, setData] = useState(null);
    useEffect(() => {
        const getData = async() => {
            const datas = await axios.get("http://localhost:3000/");
            setData(datas.data);
        };
        getData();
    }, []);
    
    useEffect(() => {
        console.log(data);
    }, [data]);
    
    if(data === null){
        return <div>Load....</div>;
    }else{
        console.log(data);
        return (
            <div>
                {data.map((ele) => (
                    <>
                        <div>
                            {ele.title};
                        </div>
                    <br/>
                    </>
                ))}
            </div>  
        );
    };

    
    
};

export default NoticesList;

这是NoticesItem.js：

import React from 'react';
import styled from 'styled-components';

const NoticesItemBlock = styled.div`
    display: flex;
    .contents {
        h6 {
            margin: 15px;
            a {
                color: black;
            }
        }
    }
    & + & {
        margin-top: 1.5rem;
    }
`;

const NoticesItem = ({ article }) => {
    const { title, url } = article;
    return (
        <NoticesItemBlock>
            <div className="contents">
                <h6>
                    <a href={url} target="_blank" rel="noopener noreferrer">
                        {title}
                    </a>
                </h6>
            </div>
        </NoticesItemBlock>
    );
};

export default NoticesItem;

在此处输入图像描述

4

1 回答 1

0

尝试在 goormide 上部署一个 API，只需将 kangnam.js 的最后一部分更改为：

app.listen(3000, function() { 
  console.log('Server listening on port 3000'); 
});

这将给出一个链接，如：https ://server-clgoz.run-eu-central1.goorm.io/ 您将使用它而不是：NoticesList.js 上的 http://localhost:4000/

同样在此文件中，您可以设置一个变量，如：

const site="https://web.kangnam.ac.kr/";

然后在地图功能中：

<a href={site+decodeURIComponent(ele.url.slice(17))}>{ele.title}</a>

这将提供指向该网站的链接。

祝你好运 ：） ！！！

于 2021-10-03T15:48:08.270 回答