1.爬虫 | Python搞定软科中国大学排名
2.Mathjax加载慢，商城t商如何在Nuxt中加载本地JS文件
3.SSR 服务器端渲染
4.如何找到软件的源码源代码
5.nuxt3怎么样,新项目可以上吗?
6.nuxt.js + localStorage

爬虫 | Python搞定软科中国大学排名

       大家好，我是城源Python当打之年

       近期很多粉丝询问如何通过Python进行软科中国大学排名的爬虫分析，本期就为大家详细解析这一过程，商城t商希望对大家有所帮助，源码以下内容仅供参考，城源编辑小程序模板源码是什么请勿用于其他用途。商城t商

       目标网址为：shanghairanking.cn/rank...

       年的源码中国大学排名共有所学校。

       1. 网页分析

       每页展示所学校信息，城源共页。商城t商通过翻页发现网址并未发生变化，源码说明页面信息是城源通过动态加载的方式展示的，因此无法通过get传参的商城t商方式切换网页进行爬取。通过按F或右键选择审查元素，源码搜索清华大学查看网页结构，城源可以看到信息存储在payload.js文件中。继续分析该文件，可以发现这里有所学校的所有信息，说明网页显示的内容是通过javascript解析这个文件动态加载进去的，因此我们只需要解析这个文件即可。

       2. 解析js文件

       查看学校的具体字段信息，文件内容格式不规则，既有类似json格式的信息，也有JavaScript的语法，因此不能直接使用json进行解析，这里我们使用re正则提取。

       生成Dataframe，信息齐全，但其中包含很多a,f,e,q,[i,l,j],ei,eg,ek...等字符信息，这些应该是某些信息的替代字符，类似于函数中的形参。

       继续分析payload.js文件的开头部分，补充知识：NUXT_JSONP是JavaScript中的一个全局变量，在使用uxtjs架构时会自动生成，用于在客户端渲染(CSR)模式下获取服务器端渲染(SSR)的投资指标源码数据。在Nuxt.is的客户端渲染模式下，NUXT_JSONP变量的值是一个函数，用于将服务器端渲染的数据注入到客户端渲染的页面中。这个函数的参数是服务器端渲染的数据，返回值是将这些数据注入到页面中的代码。因此，__NUXT_JSONP__变量的类型是一个函数，可以看出现有的function和return就是内层函数(存在函数嵌套)及其返回值，那么(a,b,c,d...ps,pt,pu,pv)就是函数的参数。

       文件的结尾部分，这里就是外层函数的参数，仔细对比会发现外层函数的参数和上面内层函数的参数是一一对应的，因此进行字典映射即可。

       3. 变量替换

       获取实际值，结果如下，保存表格数据。

       4. 可视化源码+数据：

       在线运行地址(含全部代码)：heywhale.com/mw/project...

       以上就是本期为大家整理的全部内容，赶快动手练习吧，喜欢的朋友可以点赞、收藏，也可以分享让更多人知道。更多内容敬请关注(公众号：Python当打之年)

       推荐阅读：

Mathjax加载慢，如何在Nuxt中加载本地JS文件

       在 Vue 或 Nuxt 中如何渲染数学公式？本文将探讨在 Nuxt 中使用 Mathjax 的方法。尽管使用 CDN 加载 Mathjax 便于集成，但它可能影响页面性能，导致加载速度变慢。

       为提升性能，本地加载 Mathjax 提供了一种解决方案。你只需通过 npm 将 Mathjax 安装至项目中即可。

       然而，要在 Nuxt 中整合 Mathjax 并非易事，因可用资源有限，且遵循官方文档可能不适用于 Nuxt。此时，aqs系列源码本地加载 Mathjax 的 JS 文件成为了一种可行且简便的方法。

       以下是具体操作步骤：

       1. 下载 Mathjax v4.0.0-beta.6 的源代码。

       2. 将所有 Mathjax 文件放置于 `public/mathjax` 目录下。若使用 VSCode 编写 Nuxt 项目，请避免报错 `To enable project-wide JavaScript/TypeScript language features, exclude large folders...` 的情况。

       3. 修改 `nuxt.config.ts` 文件以确保正确配置。

       通过本地加载 Mathjax 的 JS 文件，你可以在不牺牲性能的前提下，高效地在 Nuxt 应用中渲染数学公式。

SSR 服务器端渲染

       近年来，服务器端渲染 (SSR) 在前端开发中越来越受欢迎，特别是与React的next框架和Vue的nuxt框架结合。不同于前端框架默认的浏览器渲染，SSR允许在服务器端生成HTML，再将预处理的静态内容发送到浏览器，形成一个交互性强的客户端应用。

       常规的浏览器渲染依赖JavaScript动态生成HTML，比如React和Vue中的路由功能。相比之下，服务器端渲染则是通过后端语言（如Java配合VM模版引擎或NodeJS配合Jade）生成完整的HTML文档，这些文档在发送给浏览器之前已经预渲染好了内容。

       要实现SSR，首先从新建项目开始，安装Vue及其SSR库vue-server-renderer。在testSSR目录下，创建一个简单的Vue组件，确保在HTML根元素上添加"data-server-rendered"属性，以标识这部分是由服务器端渲染的。接下来，可以创建一个HTML模板，将组件内容作为注释嵌入其中，使用fs库读取并注入到渲染器中。

       为了实现服务器整合，选择Node.js的nscd源码解析Express作为基础框架，构建一个可以处理每个请求的Vue实例。在server.js中配置Express服务器，创建app.js并配置路由和渲染逻辑。然后，将应用到index.template.html模板并测试。

       在项目工程化阶段，为了兼容客户端和服务器端的需求，需要创建不同的webpack配置，例如entry-server.js和webpack.server.config.js，分别生成服务器端和客户端的bundle。通过配置vue-router和webpack，实现路由管理以及资源预加载。最后，使用createBundleRenderer处理源代码更改和source map问题，提高开发效率。

       除了基础配置，Vue SSR还提供了更丰富的功能，如CSS管理、缓存管理、流式渲染等。进一步了解和实践，可以参考Vue SSR官方指南和API文档。

如何找到软件的源代码

       源码就是指编写的最原始程序的代码。运行的软件是要经过编写的，程序员编写程序的过程中需要他们的“语言”。音乐家用五线谱和音符，建筑师用图纸和笔，那程序员的工作的语言就是“源码”了。

       人们平时使用软件时就是程序把“源码”翻译成我们可直观的形式表现出来供我们使用的。[1]

       任何一个网站页面，换成源码就是一堆按一定格式书写的文字和符号，但我们的浏览器帮我们翻译成眼前的模样了

nuxt3怎么样,新项目可以上吗?

       Nuxt3当前面临较多问题，团队急于推出新功能，表面看起来提升了开发体验，xen源码编译但随之而来的小问题让人头疼不已。

       例如在版本3.5.2中，静态模式默认不会生成 _payload.json，这在文档中没有明确说明，只有通过GitHub问题反馈得知需要添加实验性配置选项。

       官方Nuxtlab UI代码简洁，但组件功能有限，许多关键的定制项都无法修改。遇到最独特的情况是Toast默认继承主题色，且无法修改，页面展现“压缩 -> 复原”的效果，让人感到非常诡异。

       框架自带的loading更是让人费解，尽管可以设置进度条和传入插槽显示内容，但整个页面会展现出“压缩 -> 复原”的动画效果，这在设计上显得过于怪异。关闭这个功能似乎是不可能的，只能通过复制源码解决。

       Nuxt3继承了Vue3的困惑，发送请求有三种方式，其中一种还是糖，让人感到不统一。

       在配置方面，Nuxt3并没有像预期那样统一，例如静态和输出配置，按照直觉应该放在nuxt.config里，结果却需要放在nitro属性下，强调了nitro的存在。nitro本身也十分难用，如果要统一处理请求结果，最好的方式是自定义一个customHandler，通过一个handler包装另一个handler。

       应用的配置也出现了两个选项，分别称为nuxt.config和app.config。即便在版本3.5.2，这样的复杂性让人感到难以接受。

       综合来看，Nuxt3在提供新功能的同时，也带来了不少问题和复杂性，是否适合新项目，需要开发者根据项目需求和团队对这些问题的接受程度来决定。在使用时，需要有足够耐心和灵活性来适应其特性和需求。

nuxt.js + localStorage

       在 Vue.js 开发中，localStorage 和 sessionStorage 提供了在浏览器中存储数据的能力。然而，当使用 nuxt.js 这样的服务端渲染框架时，直接使用 localStorage 将会遇到问题，因为 nuxt.js 期望的上下文与浏览器中的 localStorage 不兼容。为解决这一问题，可以采用三种策略：客户端初始化 Store、使用 cookie 或 nuxt-vuex-localStorage 插件。

       选择 nuxt-vuex-localStorage 插件的原因有以下几点：

       服务端渲染不会受到任何影响。

       提供了 localStorage 和 sessionStorage 的支持。

       数据加密功能，确保了数据安全。

       支持设置过期时间，方便数据管理。

       操作简单，类似于常规的 Vuex 操作。

       使用插件的关键步骤包括：

       初始化 Store 文件，用于本地存储数据。

       在 modules 注册 Store 文件，确保每个页面可独立缓存。

       处理数组或对象数据时，需创建副本以避免直接修改。

       在对象外部保存数据，确保正确访问。

       注意缓存生命周期，避免死循环。

       在使用过程中，还需注意以下注意事项：

       在单文件组件中操作数组或对象需谨慎，避免引用类型错误。

       理解数据存储与读取的顺序，确保 DOM 渲染的正确性。

       在使用过程中遇到的问题，可以通过 GitHub issue 提出，获得官方解答。另外，使用尝试缓存（try-cache）机制，以应对浏览器本地存储功能关闭或隐身模式下可能出现的异常情况。深入研究插件的源代码，了解其具体实现方式，或在 GitHub 讨论区提问，能够获得最直接、有效的答案。在实际应用中，结合这些策略与注意事项，能够有效地在 nuxt.js 项目中利用 localStorage 提供的数据持久化能力。

SvelteKit 初学者入门实践指南 (1)

       SvelteKit 初学者入门实践指南

       SvelteKit 是利用 Svelte 构建 Web 应用的框架，如同 React 与 Next.js 或 Vue 与 Nuxt.js 的关系。在开始使用 SvelteKit 之前，需要先掌握 Svelte 基础知识。

       1. 创建 SvelteKit 应用

       通过 `npm create svelte@latest blog` 创建一个简易博客程序，创建过程会询问项目类型和添加 TypeScript、Vitest 等选项，推荐选择 TypeScript 以提高编写后台代码的便利性。这里选择 "Skeleton project" 作为示例。

       2. 安装 Svelte VSCode 插件

       安装官方 Svelte for VSCode 插件以优化编辑体验，提供对 .svelte 文件的语法支持。

       3. 适配器与依赖安装

       安装前，修改 package.json 中的 adapter，将 "adapter-auto" 更改为 "adapter-node"，以便针对云服务器或Serverless环境部署。默认的 adapter-auto 会自动选择云服务，但国内通常使用本地服务器，因此手动指定为 node。

       4. 编写第一个页面与路由

       通过 `npm run dev` 启动开发服务器，查看初始页面并创建路由，如 src/routes/+page.svelte。注意，页面组件以 +page.svelte 标识，代表支持路由。

       5. 布局与URL路由

       SvelteKit 使用文件夹结构表示路由，如 albums 和 about 文件夹对应相应的页面。路由规则中，+号前缀表示支持路由，避免了与 index.svelte 的混淆。

       6. 布局与公共内容

       通过 +layout.svelte 文件组织公共内容，减少页面间的重复代码。

       7. 项目结构

       了解项目的基本结构，包括 .svelte-kit 临时文件夹，src 存放源码和路由，static 存放静态资源，以及其他配置文件。

       8. 总结

       通过本章节，你已建立了基础的 SvelteKit 项目，理解了适配器、路由规则和布局的应用。接下来会逐步扩展功能，深入理解 SvelteKit 的更多特性。

Nuxt.js踩坑记，利用Nuxt一键生成多页面静态站点

       本文介绍使用Nuxt.js创建多页面静态站点的方法，利用Nuxt.js的模板、路由配置、模块、插件和页面布局等功能，实现快速开发。

       Nuxt.js是一个基于Vue.js的通用应用框架，它预设了服务端渲染应用所需的各种配置，简化了开发过程。

       Nuxt.js提供了多种模板，包括starter-template、typescript-template、express-template等，用于快速创建项目。使用vue-cli可以轻松安装Nuxt.js，并生成项目结构。

       项目配置方面，Nuxt.js默认配置覆盖了大部分使用情形，可以使用nuxt.config.js进行自定义设置，包括路由、模块、插件和页面布局等。

       路由配置基于pages目录结构生成vue-router模块的路由配置，可以修改或添加新路由。Nuxt.js社区提供router-module等模块，实现更加个性化的自定义路由。

       插件可以向Vue注入常用属性或方法，例如埋点插件用于统计PV页面浏览量。埋点插件通过plugins配置项实现，设置watch参数监听路由变化，确保每次页面进入或跳转时自动统计。

       页面元信息可以通过head方法设置，避免重复的meta标签，使用hid键为每个meta标签赋予唯一标识。seo.config.js文件可以抽取公用的头部信息，与页面路由关联，实现个性化设置。

       Nuxt.js中引入了layout概念，将页面划分为三层：layout、page和component，提供灵活的布局方案。指定布局可以使用页面文件中的layout属性，不指定时默认使用default布局。

       状态管理方面，Nuxt.js支持vuex，无需额外配置，只需在项目根目录创建store文件夹。store支持普通方式和模块方式，实现状态树的划分。

       一键静态化功能可以生成应用的静态目录和文件，方便部署。静态化时需注意资源版本更新问题，通过git控制上线，实现版本智能更新，避免文件名变动导致的git清理需求。

       虽然在静态化编译时遇到一些问题，例如Nuxt.js和vue-server-renderer模块之间的兼容性问题，但可以通过修改源码或使用npm模块间接解决。

       本文介绍了Nuxt.js的多个核心功能及其使用方法，旨在帮助开发者快速构建多页面静态站点。如有疑问或需要进一步了解，欢迎交流讨论。