解析rss链接数据，来长期把某博客数据订阅到自己的网站

news2024/9/24 10:28:18

目的

在这里插入图片描述
当我们打开这个订阅链接，会看到我们的文章信息以xml的形式呈现到浏览器页面中，怎么直接在我们自己的网站中，将这个链接的数据转为我们熟悉的json数据，然后渲染到自己的网站中呢

技术栈

react hooks
typescript
webpack

核心思想

通过axios请求这个订阅链接，拿到xml文本；
将xml文本转为XMLDocument格式；
将xmlDocument格式解析为json数据；（最后一步，网上找了一个解决方案，不过博主已经上传到自己的个人资源中，以便于大家方便使用）。

代码

按照上面三步骤，会依次贴上代码
api/index.ts

/** 简单写了一下请求拦截器和响应拦截器，就导出来了 大家可以直接axios就行的 */
import request from '../utils/request';
import { CSDN_RSS_URL } from '../constants';

/** 把常量从外面引进来，统一管理思想 */
export const getRssList = () => request({
  url: CSDN_RSS_URL,
  method: 'get'
});

别人的请求，我们直接访问会跨域，所以本地开发要代理，当然我们部署的时候，让运维帮忙配置代理转发，或者交给后端去处理（后端直接不跨域）
webpack.dev.config.js

// 开发环境的反向代理配置 devserver这个配置项中
proxy: {
 '/qq_36579455': {
   target: 'https://rss.csdn.net',
   changeOrigin: true,
 }
}

xml文本转为XMLDocument格式
utils/index.ts

// 这里导入的文件，就是上面博主说的，大家直接在我的主页去下载就可以啦
import XMLToJson from './XMLToJson';

/**
 * 解析xml 字符串为 dom 对象
 * @param xml 
 * @returns 
 */
export function xmlToDom(xml: string): XMLDocument {
    let xmlDom: any;
    if (window.DOMParser) {
        const parser = new DOMParser();
        xmlDom = parser.parseFromString(xml, 'text/xml');
    } else if ((window as any).ActiveXObject) { // 兼容ie6或者更老的
        const xmlDom = new (window as any).ActiveXObject('Microsoft.XMLDOM');
        xmlDom.async = false;
        xmlDom.loadXML(xml);
    }
    return xmlDom;
}

export function xmlToJson(xml: XMLDocument): IRss | null {
    const obj = XMLToJson.parseXML(xml) as IRss;
    if (obj.rss && obj.rss.length) {
        return obj;
    } else {
        return null;
    }
}

为了方便，博主直接给大家贴出使用代码

随便一个新的组件



const [feeds, setFeeds] = useState([] as IRssItem[]);

  const getRss = async () => {
    try {
      const xml = await getRssList();
      const xmlDom = xmlToDom(xml as unknown as string);
      const tempJson = xmlToJson(xmlDom);
      tempJson && setFeeds(tempJson.rss[0].channel[0].item);
    } catch (err: any) {
      console.log(err.message, "get rss error");
    }
  };

  useEffect(() => {
    getRss();
  }, []); // 如果有eslint提示  加上这个注释就行// eslint-disable-next-line react-hooks/exhaustive-deps

不知名的types.ts

export interface IRssText {
  _text: string;
}

export interface IRssItem {
  title: IRssText[];
  link: IRssText[];
  description: IRssText[];
  pubDate: IRssText[];
  author: IRssText[];
  category: any[];
  guid: IRssText[];
}