js提取指定网站内容(
webpack中的link标签导入样式，这时候应该怎么做呢？)
　　
　　在上一篇文章文章中我们讲解了webpack中的loader，使用less、less-loader、css-loader、style-loader将js中导入的less文件通过webpack打包到页面中，但是我们发现页面中的样式确实存在，但是页面的样式是以样式标签的形式写入页面的。在实际开发中，我们其实更喜欢使用链接标签来导入样式。这个时候我们应该怎么做？
　　一、使用 mini-css-extract-plugin 插件
　　该插件可以将CSS提取到单独的文件中，为每个收录css的js文件创建一个CSS文件，并支持按需加载css和sourceMap。
　　先安装插件
　　cnpm install mini-css-extract-plugin --save-dev
　　安装插件后，其实就是设置。以下是简单的设置信息：
　　const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode:"development",
entry:{
"common":"./src/js/common.js",
"index":"./src/js/index.js",
"login":"./src/js/login.js"
},
output:{
filename:"js/[name].js",
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:["common","index"],
hash:true
}),
new HtmlWebpackPlugin({
template:'./src/login.html',
filename:'login.html',
chunks:["common","login"],
hash:true
}),
new MiniCssExtractPlugin({
filename:'css/[name].css',
chunkFilename:'[id].css'
})
],
module:{
rules:[
// {
// test:/\.less$/,
// use:[
// {loader:"style-loader"},
// {loader:"css-loader"},
// {loader:"less-loader"}
// ]
// }
{
test:/\.less$/,
use:[
{
loader:MiniCssExtractPlugin.loader
},
"css-loader",
"less-loader"
]
},
]
}
}
　　在webpack.config.js中，我们先定义插件，然后在plugins项中实例化插件（插件需要安装、定义、实例化如前所述），最后在模块中定义处理less的规则，而注释掉的部分则是在解释加载器的时候用到的。它不会被删除以进行比较。
　　plugins项中mini-css-extract-plugin的实例化参数filename其实和output和html-webpack-plugin中定义的filename一样，就是给输出文件命名（可能有人说没有定义在 output? 中，其实 webpack 的入口和输出只有 js，其他的都是由 plugins 或 loader 处理的，所以不要混淆）。
　　chunkFilename 和 html-webpack-plugin 中的 chunk 类似，但是下面的 [id].css 不太好理解（如果真的看懂了就这样写，固化不会改变）。实际上，在这个地方没有办法写出实际的具体名称。因为这是由以下加载程序中的 mini-css-extract-plugin 插件在内部生成的。
　　我们看看rules中的定义，我们去掉了style-loader，因为我们不想在页面中写样式，我们要链接一个单独的css文件。规则的意思是用less-loader处理js中导入的以.less结尾的文件，然后转换成css，然后让css-loader处理style里面的一些url，或者@import等一些css问题，然后交给下一个装载机。这时候loader就变成了mini-css-extract-plugin里面的loader。这个loader将css单独提取出来放到页面中，如下图：
　　
　　二、处理图片资源
　　页面中引用图片的方式有3种，一种是html页面中的img标签，另一种是样式中类似于background:url()，另一种是在脚本中创建图片并插入这一页。然后我们将尝试所有三种方法。项目目录如下：
　　
　　添加了三张图片，但实际上只是一张不同名称的图片。然后分别修改less文件、js文件、html文件。每个文件的内容如下：
　　
　　无索引
　　
　　index.js
　　
　　索引.html
　　图片资源处理的loader有很多，这里我们使用url-loader，对于页面中的img标签，我们使用html-withimg-loader。
　　安装装载机：
　　cnpm install url-loader html-withimg-loader --save-dev
　　然后配置 webpack.config.js：
　　const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode:"development",
entry:{
"common":"./src/js/common.js",
"index":"./src/js/index.js",
"login":"./src/js/login.js"
},
output:{
filename:"js/[name].js",
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:["common","index"],
hash:true
}),
new HtmlWebpackPlugin({
template:'./src/login.html',
filename:'login.html',
chunks:["common","login"],
hash:true
}),
new MiniCssExtractPlugin({
filename:'css/[name].css',
chunkFilename:'[id].css'
})
],
module:{
rules:[
{
test:/\.less$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:"../"
}
},
"css-loader",
"less-loader"
]
},
{
test:/\.(png|svg|jpg|gif)$/,
use:[
{
loader:'url-loader',
options:{
limit:10240,
name:"imgs/[name].[ext]",
}
}
]
},
{
test:/\.(htm|html)$/,
use:["html-withimg-loader"]
}
]
}
}
　　这里有几点需要注意：
　　一、minicssextractplugin 中添加了一个配置 publicPath，为什么不把它放在输出中呢？因为输出中的 publicPath 会影响所有路径。这里我们只希望css-loader在处理完css后只解决样式表中的路径问题。
　　第一个二、url-loader，limit参数，当图片文件小于10K时，将文件转换成dataUrl格式图片减少链接请求，name参数就是生成文件的名字，当然，以前的 imgs 在 dist 目录的 imgs 文件夹中。
　　当三、遇到以html或htm结尾的文件时，使用html-withimg-loader处理其中的图片资源。
　　对于前端模块化开发，不建议直接在页面上使用图片链接，而是将图片导入js，但我觉得不太现实。毕竟，img 标签不是装饰品。
　　接下来运行npx webpack命令，效果如下：
　　
　　我们的图片大小超过50K，所以在dist目录下生成imgs文件夹，测试src中的图片。
　　如果我们把limit的值改成102400，图片会直接转成dataurl格式，而不是保存到dist目录下，输入如下图片：
　　
　　我们可以发现它们的链接地址是不同的。
　　三、总结
　　我们分五个部分简要介绍 webpack4 的一些最基本的知识点，包括：
　　1、安装
　　安装节点的先决条件
　　在项目中使用npm init -y来初始化项目，主要是创建一个package.json文件来记录项目信息和依赖。
　　为了防止plugin或者loader被下载，引入了cnpm。
　　2、输入输出
　　webpack.config.js webpack 配置文件
　　npx webpack 命令运行 webpack
　　进入和退出的最基本概念
　　3、插件
　　clear-webpack-plugin 清除 dist 目录下的插件
　　html-webpack-plugin 一个简化html创建和关联js的插件
　　mini-css-extract-plugin 单独的 css 文件作为插件
　　4、加载器
　　模型模式（开发模式、生产模式）
　　less-loader, css-loader, style-loader, url-loader, html-withimg-loader
　　这些知识点仅供初学者快速运行一个webpack，避免踩坑，在实际项目中遇到问题时确切知道从哪里着手解决问题。
　　内容如有错误，请指正。谢谢！ 查看全部

　　js提取指定网站内容(分析1.第一个登录页面，里面有提交表单，提交到表单
)
　　分析
　　1.第一个登录页面有提交表单，动作提交到index.html页面
　　2.第二页，可以使用第一页的参数，实现不同页面之间传输数据的效果
　　3.之所以第二页可以使用第一页的数据，是因为使用了URL中的location.search参数
　　4.在第二页，需要提取这个参数
　　5.第一步是将提取到参数中的去掉？ , 使用 substr
　　6.第二步，用=号分割key和value。拆分后得到一个数组，通过数组split('=')得到值
　　代码
　　login.html


Document

用户名：


　　index.html


Document


var params = location.search.substr(1);
console.log(params);
var arr = params.split('=');
console.log(arr);
var div = document.querySelector('div');
div.innerHTML = arr[1] + '欢迎您'; 查看全部

　　js提取指定网站内容(一种JsonPath机器学习视频下载
)
　　JsonPath
　　JsonPath 是一个信息提取类库。它是一种从 JSON 文档中提取指定信息的工具。它提供多种语言的实现版本，包括：Javascript、Python、PHP 和 Java。
　　JsonPath 用于 JSON，XPATH 用于 XML。
　　下载地址：
　　安装方法：点击Download URL链接下载jsonpath，解压后执行python setup.py install
　　官方文档：
　　JsonPath 和 XPath 语法对比：
　　Json 结构清晰，可读性高，复杂度低，非常容易匹配。下表对应XPath的用法。
　　
　　例子：
　　我们以拉狗网城市JSON文件为例，获取所有城市。
　　
　　注意事项：
　　如果传入字符串的编码不是UTF-8，需要指定字符编码参数encoding
　　dataDict = json.loads(jsonStrGBK);
　　dataDict = json.loads(jsonStrGBK, encoding=GBK
　　dataJsonStrUni = dataJsonStr.decode("GB2312"); dataDict = json.loads(dataJsonStrUni, encoding="GB2312");
　　
　　decode的作用是将其他编码的字符串转换成Unicode编码。 encode的作用是将Unicode编码转换成其他编码的字符串。一句话简介：UTF-8是对Unicode字符集进行编码的一种编码方式
　　
　　机器学习视频下载：关注私信（机器学习）获取下载链接
　　 查看全部

　　js提取指定网站内容(国内最好TypeScript4官方文档Hanbook的翻译，一共本地)
　　前言
　　最近完成了TypeScript最新官方文档Hanbook的翻译，共14篇，算是国内最好的TypeScript4入门教程之一。为了方便大家阅读，我使用VuePress + Github Pages搭建了一个博客，博客效果如下：
　　
　　
　　博客地址如下：
　　0. VuePress
　　不用说，VuePress 是一个基于 Vue 的静态 网站 生成器，风格简洁，配置简单。我不使用 VitePress 的原因是因为我想使用现有的主题，而 VitePress 与当前的 VuePress 生态系统不兼容。至于为什么不选择 VuePress@next，考虑到它还处于 Beta 阶段，在开始迁移之前它会很稳定。
　　1. 本地构建
　　VuePress官网快速入门：
　　创建并进入一个新目录
　　// 文件名自定义
mkdir vuepress-starter && cd vuepress-starter
复制代码
　　使用您最喜欢的包管理器进行初始化
　　yarn init # npm init
复制代码
　　将 VuePress 安装为本地依赖项
　　yarn add -D vuepress # npm install -D vuepress
复制代码
　　创建你的第一个文档，VuePress 会使用 docs 作为文档根目录，所以这个 README.md 相当于主页：
　　mkdir docs && echo '# Hello VuePress' > docs/README.md
复制代码
　　将一些脚本添加到 package.json
　　{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
复制代码
　　本地启动服务器
　　yarn docs:dev # npm run docs:dev
复制代码
　　VuePress 将在 :8080 (opens new window) 启动一个热重载的开发服务器。
　　2. 基本配置
　　在文档目录下创建一个 .vuepress 目录，所有 VuePress 相关文件都将放置在其中。此时您的项目结构可能如下所示：
　　.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
复制代码
　　在.vuepress文件夹中添加config.js，并配置网站的标题和描述，方便SEO：
　　module.exports = {
title: 'TypeScript4 文档',
description: 'TypeScript4 最新官方文档翻译'
}
复制代码
　　此时界面类似于：
　　
　　3. 添加导航栏
　　我们现在在页眉右上角添加导航栏，修改config.js：
　　module.exports = {
title: '...',
description: '...',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{
text: '冴羽的 JavaScript 博客',
items: [
{ text: 'Github', link: 'https://github.com/mqyqingfeng' },
{ text: '掘金', link: 'https://juejin.cn/user/7121392 ... 39%3B }
]
}
]
}
}
复制代码
　　效果如下：
　　
　　有关更多配置，请参阅 VuePress 导航栏。
　　4. 添加侧边栏
　　现在我们添加一些md文件，当前文件目录如下：
　　.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
| └─ handbook
| └─ ConditionalTypes.md
| └─ Generics.md
└─ package.json
复制代码
　　我们在 config.js 中配置如下：
　　module.exports = {
themeConfig: {
nav: [...],
sidebar: [
{
title: '欢迎学习',
path: '/',
collapsable: false, // 不折叠
children: [
{ title: "学前必读", path: "/" }
]
},
{
title: "基础学习",
path: '/handbook/ConditionalTypes',
collapsable: false, // 不折叠
children: [
{ title: "条件类型", path: "/handbook/ConditionalTypes" },
{ title: "泛型", path: "/handbook/Generics" }
],
}
]
}
}
复制代码
　　对应的效果如下：
　　
　　5. 改变主题
　　现在基本的目录和导航功能已经实现了，但是如果我还要加载加载、切换动画、模式切换（暗模式）、返回顶部、评论等功能，为了简化开发成本，我们可以直接使用主题，这里使用的主题是vuepress-theme-rec：
　　现在我们安装 vuepress-theme-reco：
　　npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco
复制代码
　　然后在 config.js 中引用主题：
　　module.exports = {
// ...
theme: 'reco'
// ...
}
复制代码
　　刷新页面，我们会发现一些细节上的变化，比如加载时的加载动画，以及支持切换深色模式：
　　
　　6. 添加 文章 信息
　　但是我们也会发现条件类型（Conditional Types）在文章文章中出现了两次，这是因为本主题自动提取了第一个大标题作为本文的标题，我们可以在文章中添加一些信息修改每个 文章 的 md 文件：
　　---
title: 条件类型
author: 冴羽
date: '2021-12-12'
---
复制代码
　　此时文章的效果如下：
　　
　　但是如果你不想要标题、作者、时间信息，我们可以将其隐藏在样式中，这将在后面讨论。
　　7. 设置语言
　　注意上图中的文章时间，我们把格式写成2021-12-12，但是显示的是12/12/2021，这是因为VuePress的默认lang是en-US，我们修改一下配置.js：
　　module.exports = {
// ...
locales: {
'/': {
lang: 'zh-CN'
}
},
// ...
}
复制代码
　　可以发现，时间已经以不同的方式显示了：
　　
　　8. 打开目录结构
　　在原来的主题中，我们发现每个文章的目录结构出现在左边：
　　
　　并且 vuepress-theme-reco 把原来侧边栏中的多级页眉去掉，生成一个子侧边栏，放在页面右侧。如果要全局启用，可以在页面 config.js 中设置为启用：
　　module.exports = {
//...
themeConfig: {
subSidebar: 'auto'
}
//...
}
复制代码
　　此时效果如下：
　　
　　9. 修改主题颜色
　　VuePress 是基于 Vue 的，所以主题颜色是 Vue 的绿色，而 TypeScript 的官方颜色是蓝色，那么如何修改 VuePress 的主题颜色呢？
　　您可以使用以下代码创建 .vuepress/styles/palette.styl 文件：
　　$accentColor = #3178c6
复制代码
　　此时，可以发现主题颜色发生了变化：
　　
　　更多颜色修改参考 VuePress 的palette.styl。
　　10. 自定义修改样式
　　如果你想自定义一些 DOM 元素的样式怎么办？例如在暗模式下：
　　
　　我们发现用于强调的文字颜色比较暗淡，在深色模式下看不清楚。我想更改此文本的颜色和背景颜色？
　　VuePress 提供了一种添加额外样式的简单方法。你可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件，但您也可以使用普通的 CSS 语法。
　　我们在 .vupress 文件夹下创建这个目录，然后使用以下代码创建 index.styl 文件：
　　// 通过检查，查看元素样式声明
.dark .content__default code {
background-color: rgba(58,58,92,0.7);
color: #fff;
}
复制代码
　　至此，文字就清晰多了：
　　
　　然后我们提到隐藏每篇文章文章的标题、作者和时间，其实也是类似的方式：
　　.page .page-title {
display: none;
}
复制代码
　　最终效果如下：
　　
　　11. 部署
　　即使我们的博客正式完成，我们也会将其部署到免费的 Github Pages。我们在 Github 上新建了一个仓库，这里我得到了仓库名称：learn-typescript。
　　
　　相应地，我们需要在 config.js 中添加一个基本路径配置：
　　module.exports = {
// 路径名为 "//"
base: '/learn-typescript/',
//...
}
复制代码
　　最终的 config.js 文件内容为：
　　module.exports = {
title: 'TypeScript4 文档',
description: 'TypeScript4 最新官方文档翻译',
base: '/learn-typescript/',
theme: 'reco',
locales: {
'/': {
lang: 'zh-CN'
}
},
themeConfig: {
// lastUpdated: '上次更新',
subSidebar: 'auto',
nav: [
{ text: '首页', link: '/' },
{
text: '冴羽的 JavaScript 博客',
items: [
{ text: 'Github', link: 'https://github.com/mqyqingfeng' },
{ text: '掘金', link: 'https://juejin.cn/user/7121392 ... 39%3B }
]
}
],
sidebar: [
{
title: '欢迎学习',
path: '/',
collapsable: false,
children: [
{ title: "学前必读", path: "/" }
]
},
{
title: "基础学习",
path: '/handbook/ConditionalTypes',
collapsable: false,
children: [
{ title: "条件类型", path: "/handbook/ConditionalTypes" },
{ title: "泛型", path: "/handbook/Generics" }
],
}
]
}
}
复制代码
　　然后我们在项目vuepress-starter目录下创建一个脚本文件：deploy.sh，注意修改对应的用户名和仓库名：
　　#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://.github.io/
git push -f git@github.com:mqyqingfeng/learn-typescript.git master:gh-pages
cd -
复制代码
　　然后将命令行切换到vuepress-starter目录，执行sh deploy.sh，就会开始构建，然后提交到远程仓库。请注意，它被提交到 gh-pages 分支。我们查看对应仓库分支的代码：
　　
　　我们可以在存储库的 Settings -> Pages 中看到最终地址：
　　
　　比如我上次生成的地址是mqyqingfeng.github.io/learn-types...
　　至此，我们已经完成了 VuePress 和 Github Pages 的部署。 查看全部

　　js提取指定网站内容(
关于cookie的使用设置获取键名过期的事件，IE8及以上浏览器都兼容特点)
　　
　　一、如何
　　我们主要介绍以下四种javaScript本地缓存的方法：
　　cookies
　　Cookies，属于“小文本文件”类型，是指存储在用户本地终端上的特定数据网站，用于识别用户。就是解决HTTP无状态带来的问题
　　作为一条一般不超过4KB的小文本数据，由名称（Name）、值（Value）和其他几个可选属性组成，用于控制有效期、安全性和使用范围饼干
　　但是，cookie 将在每个请求中发送。如果不使用HTTPS并进行加密，其中存储的信息很容易被窃取，从而产生安全隐患。比如在一些使用cookies保持登录状态的网站s上，如果cookie被盗，别人很容易利用你的cookie冒充你登录网站
　　关于cookies的常用属性如下：
　　Expires=Wed, 21 Oct 2015 07:28:00 GMT
　　Max-Age=604800
　　Path=/docs # /docs/Web/ 下的资源会带 Cookie 首部
　　通过以上我们可以看出cookie的作用并不是为缓存而设计的，只是借用cookie的特性来实现缓存
　　cookies的使用如下：
　　document.cookie = '名字=值';
　　关于cookies的修改，首先要确保domain和path属性相同，当其中一个不同时会创建一个新的cookie
　　Set-Cookie:name=aa; domain=aa.net; path=/ # 服务端设置
document.cookie =name=bb; domain=aa.net; path=/ # 客户端设置
　　删除最后一个cookie最常用的方法是为cookie设置过期事件，这样cookie过期后会被浏览器删除
　　本地存储
　　HTML5新方法，兼容IE8及以上浏览器
　　特点
　　我们来看看localStorage的使用
　　设置
　　localStorage.setItem('username','cfangxu');
　　获取
　　localStorage.getItem('username')
　　获取密钥名称
　　localStorage.key(0) //获取第一个键名
　　删除
　　localStorage.removeItem('username')
　　一次性清空所有存储空间
　　localStorage.clear()
　　localStorage 也不完美，它有两个缺点：
　　localStorage.setItem('key', {name: 'value'});
console.log(localStorage.getItem('key')); // '[object, Object]'
　　会话存储
　　sessionStorage 和 localStorage 的用法基本相同，唯一不同的是生命周期。一旦页面（会话）关闭，sessionStorage 将删除数据
　　扩展的前端存储方式
　　indexedDB 是一种用于客户端存储大量结构化数据（包括文件/blob）的低级 API。 API 使用索引来实现对这些数据的高性能搜索
　　虽然网络存储对于存储少量数据很有用，但对于存储大量结构化数据的用处不大。 IndexedDB 提供了解决方案
　　优点：缺点：
　　使用indexedDB的基本步骤如下：
　　indexdb 的使用会比较麻烦。可以使用 Godb.js 库进行缓存，尽量降低操作难度
　　二、区别
　　cookies、sessionStorage和localStorage的主要区别如下：
　　三、应用场景
　　了解了上面提到的前端缓存方式后，我们可以看看不正确场景的使用选项： 查看全部

　　js提取指定网站内容(一般直接window.print()打印了整个页面，需要一些方法
)
　　一般直接使用window.print()；它直接打印整个页面，但需要一些方法来打印它的一部分
　　
function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr=""; //开始打印标识字符串有17个字符
eprnstr=""; //结束打印标识字符串
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML
window.print(); //调用浏览器的打印功能打印指定区域
window.document.body.innerHTML=bdhtml;//重新给页面内容赋值；
}
　　即附加到用户需要打印保存的文本对应的html中。同时，如果小偷程序用于获取远程数据，需要打印，可以将数据放在定义标签中。
　　要打印的内容在 startprint 和 endprint 之间的区域。
　　添加打印链接事件
　　打印 查看全部

　　js提取指定网站内容(js提取指定网站内容提取网页中所有文本，将这些文本提取成一个字符串)
　　js提取指定网站内容提取网页中所有文本，将这些文本提取成一个字符串；正则提取通过正则提取到匹配后的文本，得到匹配对应的提取位置；webpack提取静态资源所有的静态资源都需要进行上传，才能在浏览器中显示，但是我们不能保证所有的静态资源都是开源的，比如apache的文件上传请求是不需要提供网站文件名路径，可以把url传递给webpackpathmatch来使用，因为路径匹配后服务器是可以返回路径的，但是静态资源和js等文件是不允许这样做，webpack只能匹配项目文件名等特殊字符是可以的，那么有没有办法可以只通过webpack提供的工具就能提取到静态资源，然后不需要自己上传静态资源呢？答案是有的，本章节用到两个工具，就是webpack提供的pathmatch和proxymatch。
　　cdn推送模块/***高性能互联网应用基础服务**///网站服务器端的负载均衡*/webpack-config-all配置文件中添加这一句，规定传递url的格式：path.append({publicpath:'app.js',//在传递资源的publicpath的目录时，要使用命名方式，而不是location.prototype.$basename),//服务器将传递的资源按路径依次执行*/path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath'],path.resolve(['publicpath],path.resolve(['pub。 查看全部

　　js提取指定网站内容(js提取指定网站内容的办法，大家先准备好一个工具，voicecloud！)
　　js提取指定网站内容的办法，大家先准备好一个工具，voicecloud！voicecloud的工具地址：，下载安装voicecloud后，创建一个虚拟机或真机登录到服务器。先创建一个网站：登录voicecloud后，打开chrome开发者工具,添加网站模板打开音频访问网站proxyswitchy-connect，跳转到自己的真机音频输出端口：74825000然后修改配置文件：config.js：{"voicecloud":{"host":"111.29.101.199","forceresult":{"port":4646,"usburl":":4646/proxy","vstruct":""}}},proxyingsearch:{"allocator":{"type":"proxy","id":"location.getsearchresult(vest.contact)","location":""}},然后打开voicecloud的api服务器：创建webmodule，代码如下：constrequest=require('url');constwebmapper=require('webmapper');constrouter=require('web-inf.router');constserver=require('./web-inf/http');constwebidletemplate=require('web-inf/http');consthttp=newwebmapper({type,allocator,workspace,documentonly,routes,filters,cache,routes,audio,audioencoder,audioencoder});//webmapper转码器端口server.postmessage(request.url,"get/mp3");//filters使用转码器server.postmessage(request.url,"get/mp3");//路由表server.postmessage(request.url,"get/mp3");//proxysearchserver.postmessage(request.url,"get/mp3");/setplacementplacement=[];server.postmessage(request.url,"mp3/");server.postmessage(request.url,"http/");server.postmessage(request.url,"png/");server.postmessage(request.url,"jpg/");server.postmessage(request.url,"bmp/");server.postmessage(request.url,"rt-jpg");//将上面export中的下载地址和文件名替换回“../mp3”，下载地址写入生成的executor列表中:post(url,page,function(){console.log("encrypt");});webmapper.host(webmapper.get(''),":111.29.101.199");proxyingsearch.port=4646;http.server.postmessage(request.url,"../mp。 查看全部

　　js提取指定网站内容(js提取指定网站内容大部分提取软件支持js语句)
　　js提取指定网站内容，大部分js提取软件支持爬虫编写js语句，获取页面元素信息，然后再向服务器交换，网页地址一般是爬虫请求网页获取。
　　python?人家有成熟的第三方库beautifulsoup
　　有个叫beautifulsoup的js库，
　　如果不是web开发的话，不要去了解那些js，看看专业的东西，毕竟提取js用不上。
　　js是包含在html当中的，请看这个页面。页面会发生变化的，
　　写个爬虫去请求吧。如果是特定的网站，那当然有js提取器去实现。
　　首先确定是不是你想要的url。然后，
　　我的macbook不是xcode。
　　如果你需要提取,python。
　　javascript中的异步和解析方法都是基于ie来实现的，所以只需要for,if语句，不需要任何额外的函数。如果网站提供了text,pdf,视频下载这些功能，那么也可以使用selenium库。
　　看了一大堆好像对你来说没什么用提取出来做video咯
　　selenium或者webdriver就可以。
　　直接在浏览器看到一个页面之后你就知道怎么取网页内容了。如果你去看那些第三方video提取器， 查看全部

　　js提取指定网站内容(dedecms用sql批量删除注册会员的SQL语句来解决的,)
　　本文示例介绍了dedecms删除垃圾成员的方法。分享给大家，供大家参考。具体实现方法如下：
　　有些站长一定很为会员的问题而烦恼，有些人在网站上注册了很多会员，发了很多垃圾邮件。
　　我的Yotour网站经常会被一些注册软件注册大量非法用户。我通过dedecms解决了批量删除成员的SQL语句。现在我在这里有一个解决方案。，嗯，废话不多说，直奔真正的问题。
　　一、操作前必须备份数据库。
　　如下所示：
　　二、这个方法只管用，保留管理员的网站即可。
　　dedecms使用sql批量删除注册会员，会员注册信息主要在dede_member表中，系统/SQL命令行工具，查询表中有多少会员 select * from dede_member
　　三、查询结果：运行
　　复制代码 代码如下： SQL：select * from dede_member 一共598条记录，最大返回100条。
　　删除方法：
　　打开dede后台系统---->sql命令行工具
　　复制代码代码如下：delete from dede_member where not mid="1"（mid:1是我自己，所以不删）如图：
　　成功执行了1条sql语句，再看，没有注册用户，到此结束
　　希望这篇文章对大家的dedecms建设有所帮助。 查看全部

　　js提取指定网站内容(我想刮掉“财务报表注释”下的所有内容。我怎样才能做到这一点？
)
　　我想刮掉“财务报表注释”下的所有内容。我怎样才能做到这一点？这是网页的链接：
　　这是屏幕截图：
　　
　　“财务报表附注”下的每个项目都是由我单击链接生成的。我想获取每个项目的来源并对其进行解析，例如“重要会计政策摘要。
　　谢谢！
　　更新时间：2019-10-22
　　现在我的问题归结为如何从以下（即 r9、r10 等）中提取 ID。它是其中之一
　　s 其类 = "手风琴"。中有一个 href="#" 。
　　不是最好的代码。这就是我设法做到的方式：
　　 lis = soup.select("li.accordion")
notes = [str(li) for li in lis if "menu_cat3" in str(li)]
ids = re.findall(r'id="(r\d+)"', notes[0])
　　
　　解决方案
　　该页面根据该部分中 lis 的 ID 发出请求。采集 id，转换为大写并发出相同的请求。需要 bs4 4.7.1+
　　from bs4 import BeautifulSoup as bs
import requests
with requests.Session() as s:
s.headers = {'User-Agent':'Mozilla/5.0'}
r = s.get('https://www.sec.gov/cgi-bin/viewer?action=view&cik=320193&accession_number=0000320193-18-000145&xbrl_type=v#')
soup = bs(r.content, 'lxml')
urls = [f'https://www.sec.gov/Archives/edgar/data/320193/000032019318000145/{i["id"].upper()}.htm' for i in soup.select('li:has(#menu_cat3) .accordion')]
for url in urls:
r = s.get(url)
soup = bs(r.content, 'lxml')
print([i.text for i in soup.select('font')]) 查看全部

　　js提取指定网站内容([学英语]构建一个Web工具的两种类型网站构建)
　　新手程序员可以承担的最有用的自动化项目之一是构建网络爬虫应用程序。网络抓取的一个重要用例可以是从网站中提取相关数据并将其存储以供以后使用。例如，我们可以在 Reddit 网站上检索帖子的标题并将它们显示在我们的页面上，而无需打印出标题的正文。另一个例子是只提取 Twitter 帖子上评论者的姓名，而不会看到他们评论的内容。
　　新手程序员可以执行的最有用的自动化项目之一是构建网络爬虫应用程序。网络抓取的一个重要用例是从 网站 中提取相关数据并将其存储以供以后使用。例如，我们可以在 Reddit网站 上检索帖子的标题并将其显示在我们的页面上，而无需打印出标题正文。另一个例子可能是只提取 Twitter 帖子上的评论者的姓名，而看不到他们评论的内容。
　　在这个项目中，我们将为两种类型的网站构建一个网络爬虫：
　　在这个项目中，我们将为两种类型的网站构建一个网络爬虫：
　　让我们首先安装所需的模块。
　　让我们首先安装所需的模块。 查看全部

　　js提取指定网站内容(通过url传参的实现方法和sessionStorage)
　　通过url传递参数。
　　如果是HTML页面，JS转新页面时输入window.location.href='a.html?id=100'。那么a.html页面的JS就是document.getElementById("s").innerHTML=window.location.split('?')[1];
　　如果要实现AJAX，将a页面的参数传递给b页面，并在a页面的层显示b页面的参数执行结果，使用AJAX。下面是JQUERY的。 $("#a").load("b.html?id=100");//或 $.get("b.html?id=100",function(data){$("#a") .html(数据);})
　　本地存储sessionStorage或者localStorage，html5可以使用sessionStorage或者localStorage，很简单。 sessionStorage 是会话存储，当你关闭浏览器时它就消失了。 localStorage 是持久化存储，完全可以用更大的存储空间替代cookies。
　　实现方法：保存：sessionStorage["par1"]="123"。取：sessionStorage["par1"] localStorage的实现方法和sessionStorage一样。
　　把你要调用的部分内容用一个标识符围起来，比如加一个div，给这个div加一个ID，比如ID测试，这样就可以这样调用了，document.getElementById(' test ').innerHTML 得到你想要的内容
　　不知道ajax是否可行，但应该考虑跨域问题。
　　function search() { var search_value = document.getElementById('box').value; var url = 'other.html'; switch(search_value) {case 'aaa':url = '0001. html';break;case 'bbb':url = '0002.html';break;case 'ccc':url = '0003.html';break; } 位置 = 网址；}
　　把需要调用的部分做成一个单独的页面，然后用iframe语句插入。
　　iframe标签的格式为：
　　src：文件的路径，可以是HTML、文本、ASP等； width,height：“画中画”区域的宽度和高度；
　　scrolling：当指定区域没有显示SRC的指定HTML文件时，滚动选项，如果设置为NO，则不会出现滚动条；如果是Auto：滚动条会自动出现；如果是，则显示；
　　FrameBorder：区域边框的宽度。为了使“画中画”与相邻内容融为一体，通常设置为0。
　　例子：
　　如何通过js跨域获取其他页面的内容值：可以通过js主动向本页面发送请求来获取本页面的内容吗？以jquery的post请求为例，假设你要获取的页面是： $.post('#39;,{}, function(response){ // response就是返回的页面内容，然后我们可以做进一步处理},'html');
　　javascript能否获取另一个网站中的数据？：在浏览器页面获取是没问题的（其实IFRAME可以），你很难获取你的变量，因为有安全性问题，一般不允许跨域调用。
　　如何使用js获取其他页面的内容：window.open然后查看子窗口的window变量获取子窗口的Dom，就这样
　　js 使用js获取另一个页面的信息-: 你好：如果要获取另一个页面的值，可以使用ajax，比如点击按钮时获取文本元素的值另一个页面。在另一个页面A页面首先写一个函数来获取value值。然后使用ajax请求，通过location提交到本页面，获取本页面提交的url值。回来吧。
　　如何获取其他人网页上的数据。这个网页是用js实现的。您是在谈论获取代码还是获取变量的值？如果直接看代码，js代码是开放的。查看值如果是的话，使用开发者工具（F12)在某处不加单引号，直接输入即可。例如
　　如何用javascript读取另一个页面的内容：不看一楼的程序好不好用，但是lz的问题是java网页数据抓取的问题，在其实并不难，如果百度java网页数据抓取的话，会花很多。如果楼上的代码不好用，就照我说的做。原理就是把url连接起来，得到一个字符串就是你看到的源文件，然后解析一下，lz一定要对自己有信心哦。拿到代码就不会懒惰去学习，只有靠自己的努力才能成长。
　　如何使用JS在另一个页面获取表单POST提交的数据-: 1 你应该在action string text = getParameter("text1") ; setAttribute("text1",text1); in second getAttribute("text1");2 一页或String的函数中 text1 = request.getParameter("text1");
　　在第二页
　　js提取另一个网页的信息：亲爱的...这需要name=username通过表单提交到另一个页面...
　　如何使用JS将html文件中的内容读取到另一个HTML页面——：使用JS页面URL指向页面并添加参数；然后获取页面...
　　javascript 获取指定网页的内容？ - : 下面是我做的两个静态测试页面，只要你把你的a.asp中的代码改成用javascript从两个页面中获取值，就是两个windows的父子关系就可以了，但是问题是两个窗口都需要存在... 查看全部

　　js提取指定网站内容(html页面的JS就document.getElementById(s).)
　　通过 url 传递参数。
　　如果是HTML页面，JS转新页面时输入window.location.href='a.html?id=100'。那么a.html页面的JS就是document.getElementById("s").innerHTML=window.location.split('?')[1];
　　如果要实现AJAX，将a页面的参数传递给b页面，并在a页面的层显示b页面的参数执行结果，那么就使用AJAX。下面是JQUERY的。$("#a").load("b.html?id=100");//或 $.get("b.html?id=100",function(data){$("#a") .html(数据);})
　　本地存储sessionStorage或者localStorage，html5可以使用sessionStorage或者localStorage，很方便。sessionStorage 是会话存储，当你关闭浏览器时它就消失了。localStorage 是持久化存储，可以用更大的存储空间完全替代cookies。
　　实现方法：保存：sessionStorage["par1"]="123"。取： sessionStorage["par1"] localStorage 的实现方法与 sessionStorage 相同。
　　通过 url 传递参数。
　　如果是HTML页面，JS转新页面时输入window.location.href='a.html?id=100'。那么a.html页面的JS就是document.getElementById("s").innerHTML=window.location.split('?')[1];
　　如果要实现AJAX，将a页面的参数传递给b页面，并在a页面的层显示b页面的参数执行结果，那么就使用AJAX。下面是JQUERY的。$("#a").load("b.html?id=100");//或 $.get("b.html?id=100",function(data){$("#a") .html(数据);})
　　本地存储sessionStorage或者localStorage，html5可以使用sessionStorage或者localStorage，很方便。sessionStorage 是会话存储，当你关闭浏览器时它就消失了。localStorage 是持久化存储，可以用更大的存储空间完全替代cookies。
　　实现方法：保存：sessionStorage["par1"]="123"。取： sessionStorage["par1"] localStorage 的实现方法与 sessionStorage 相同。
　　js不行，js显示的数据必须支持ajax的采集器采集，我在网上找了一个，你看看行不行，我摘录一段，你可以去自己的详细信息网站 看看：
　　浏览器能看到的数据可以轻松采集，尤其擅长采集Js脚本输出、Ajax动态加载、点击后显示、大长列表、隐藏、iframe框架等难点数据
　　单个任务每天可以采集300,000页，采集速度可以根据客户要求进一步增减，保证数据采集工作能最快完成速度。
　　采集、新闻、论坛、博客、生活服务、电子商务网站、行业网站、门户网站、微博范围内各类网站等等，只要浏览器能浏览所有网站都可以采集。
<p>可突破防采集措施，如登录采集、验证码采集等技术难题，可对目标 查看全部

　　js提取指定网站内容(js中自定义初始化方法页面中获取全局数据的时候获取不到)
　　在微信小程序app.js中初始化全局数据是个好主意，但是有些数据需要异步获取，导致无法获取页面中的全局数据。目前的解决方案如下。
　　app.js 中的自定义初始化方法
　　wxLogin() {
    // 登录
    return new Promise((resolve, reject) => {
        //自己的业务，可能是 异步请求服务端的，如果是异步请求的就请求成功后 resolve(res)
        wx.login({success: function(res) {
          ....
          resolve(res)
        })
     
    })
},
_appRoute(obj){
    console.log(&#39;_appRoute-curPath&#39;, this.globalData.curPath)
    if (!this.globalData.curPath){
      return
    }
    //_appRoute是在appInt中执行
   //拿到 当前路由页面路径和传入的 obj 可以自己做一些判断 this.globalData.curPath，比如在某些条件下跳转到指定页面等等
    ...
},
appInt(){
    return this.wxLogin().then(obj => {
      this._appRoute(obj);
      return obj
    });
},
onLaunch(e) {
    let that = this;
    console.log(&#39;onLaunch&#39;,e);
    //注意这个 wx.onAppRoute 一旦启动，不受控制，而且它执行的比较早，所以这里如果获取到 当前页面路径（res.path）后直接 赋值到全局 this.globalData.curPath = res.path;
    //后续的方法执行的时候 判断下 this.globalData.curPath 是否存在，不存在返回。
    wx.onAppRoute((res) => {
      wx.hideHomeButton(); //隐藏新版小程序左上角的home图标      
      that.globalData.curPath = res.path;
      console.log(&#39;onLaunch-curPath&#39;, that.globalData.curPath);
    })
},
globalData: {
    curPath:&#39;&#39;
}
　　在页面中调用： 查看全部

　　js提取指定网站内容(代码：运行结果图：代码：导入按钮)
　　在很多项目中，文件可能需要从外部实时读取，而不是上传。如何做到这一点？
　　最近，我也遇到了类似的问题。即项目中有一个文本框和一个导入按钮。当需要点击按钮时，可以导入excel文件，然后自动读取其中的行号并在文本中显示。不出所料，我开始在网上搜索关于JS实现相关功能的帖子，也获得了很多有用的经验。唯一的问题是，总会有一些昏昏欲睡的小问题。为了给以后的朋友节省时间，我这里给大家一个更好的实现。
　　话不多说，先上代码：
<p>

New Document







var oWB = null;
var oXL = null;
function loadExcel() {
$("#upfile").click();
//得到文件路径的值
var filePath = $("#upfile").val();
//创建操作EXCEL应用程序的实例
try{
this.oXL = new ActiveXObject("Excel.Application");
try{
//打开指定路径的excel文件
this.oWB = this.oXL.Workbooks.open(filePath);
//获取sheet数
var sheet = this.oWB.Worksheets.count;
//返回所传excel表格的sheet数供选择
$("#sheet").css("display","block");
for(var i = 1;i -第&#39;+i+&#39;页-&#39;;
$("#sheet").append(option);
}
}catch(e){
alert("请设置浏览器启用将文件上传到浏览器时包含本地路径!");
}
}catch(e){
alert("请设置浏览器允许初始化和执行未标记为可安全执行脚本的ActiveX控件!");
}
}
function readexcel(){
var selsheet = $("#sheet").val();
var tempStr = [];
//操纵所选sheet页(从一开始，而非零)
oWB.worksheets(parseInt(selsheet)).select();
var oSheet = oWB.ActiveSheet;
//使用的行数和列数
var rows = oSheet.usedrange.rows.count;
var columns = oSheet.usedrange.Columns.count;
//查找线路号所在列
var j = 1;
for(j;j 查看全部

　　js提取指定网站内容(用React和Next.js做一个简单的博客网站（上）)
　　原文：使用 React 和 Next.js 构建博客（站点点）
　　字数：4272 字（非直译，有补充）
　　阅读：10 分钟
　　
　　大家好，在一个简单的React和Next.js的博客网站（第1部分）文章，我们了解了Next.js是什么，并手动创建了一个简单的Next.js项目，学习了如何基于模板创建一个简单的页面，这篇文章文章，我们继续改进这个案例。
　　一、根据MD文档生成动态路由
　　创建博客自然需要文章内容。如果我们每次写一个文章都创建一个JSX单页，这太不现实了，太费时间了，也很难维护。我们的开发者更喜欢使用 Markdown 文档来编写文档。
　　幸运的是，Next.js 允许我们使用 Markdown 作为 文章 的数据源，根据文件名生成动态路由，并使文件内容的 HTML 静态化。
　　1、在编写这个函数时，最好停止Next.js服务（Ctrl | Cmd + C）。
　　2、接下来，在项目根目录下创建一个articles文件夹，将你的Markdown文件放在这里，例如：articles/article-01.md，MD文件格式如下显示：
　　---
title: The first article
description: This is the first article.
date: 2020-10-01
---
This is an article post.
## Subheading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
　　我们将文档的标题名称、文档描述和创建日期放在 - 之间。基于这种格式，npm 插件 Front-matter 可以读取上述相关信息来提取文档的标题、描述和创建日期。要将MD文档格式化成网页，我们还需要安装两个npm插件remark和remark-html。安装命令如下：
　　npm i front-matter remark remark-html
　　3、安装完成后，我们需要实现读取和格式化MD文件的功能，然后创建lib/posts-md.js工具函数文件。 getFileIds(dir)函数返回一个MD文件名数组（文件名不带.md扩展名），示例代码如下：
　　import { promises as fsp } from &#39;fs&#39;;
import path from &#39;path&#39;;
import fm from &#39;front-matter&#39;;
import remark from &#39;remark&#39;;
import remarkhtml from &#39;remark-html&#39;;
import * as dateformat from &#39;./dateformat&#39;;
const fileExt = &#39;md&#39;;
// return absolute path to folder
function absPath(dir) {
  return (
    path.isAbsolute(dir) ? dir : path.resolve(process.cwd(), dir)
  );
}
// return array of files by type in a directory and remove extensions
export async function getFileIds(dir = &#39;./&#39;) {
  const loc = absPath(dir);
  const files = await fsp.readdir(loc);
  return files
    .filter((fn) => path.extname(fn) === `.${fileExt}`)
    .map((fn) => path.basename(fn, path.extname(fn)));
}
　　获取文件名数组后，我们需要解析MD的具体内容，如标题、描述、创建日期、具体内容的HTML格式等。示例代码如下：
　　export async function getFileData(dir = &#39;./&#39;, id) {
  const
    file = path.join(absPath(dir), `${id}.${fileExt}`),
    stat = await fsp.stat(file),
    data = await fsp.readFile(file, &#39;utf8&#39;),
    matter = fm(data),
    html = (await remark().use(remarkhtml).process(matter.body)).toString();
  // date formatting
  const date = matter.attributes.date || stat.ctime;
  matter.attributes.date = date.toUTCString();
  matter.attributes.dateYMD = dateformat.ymd(date);
  matter.attributes.dateFriendly = dateformat.friendly(date);
  // word count
  const
    roundTo     = 10,
    readPerMin  = 200,
    numFormat   = new Intl.NumberFormat(&#39;en&#39;),
    count       = matter.body.replace(/\W/g, &#39; &#39;).replace(/\s+/g, &#39; &#39;).split(&#39; &#39;).length,
    words       = Math.ceil(count / roundTo) * roundTo,
    mins        = Math.ceil(count / readPerMin);
  matter.attributes.wordcount = `${ numFormat.format(words) } words, ${ numFormat.format(mins) }-minute read`;
  return {
    id,
    html,
    ...matter.attributes
  };
}
　　你可能注意到我使用了日期格式函数，它定义在 lib/dateformat.js 文件中，示例代码如下：
　　// date formatting functions
const toMonth = new Intl.DateTimeFormat(&#39;en&#39;, { month: &#39;long&#39; });
// format a date to YYYY-MM-DD
export function ymd(date) {
  return date instanceof Date
    ? `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, &#39;0&#39;)}-${String(date.getUTCDate()).padStart(2, &#39;0&#39;)}` : &#39;&#39;;
}
// format a date to DD MMMM, YYYY
export function friendly(date) {
  return date instanceof Date
    ? `${date.getUTCDate()} ${toMonth.format(date)}, ${date.getUTCFullYear()}` : &#39;&#39;;
}
　　4、Next.js 使用带有 [ ] 符号的特殊文件名生成动态路由。接下来，我们在 Pages 目录中创建这个特殊的文件 pages/articles/[id].js。 Next.js 使用 id 作为路由的参数，生成 /articles/article-01 的页面路由。
　　pages/articles/[id].js 该文件实现了Next.js独有的GetStaticPaths()函数（静态生成），在项目构建时生成指定的路由路径。比如本例中，articles目录下的MD为 文档返回如下数组格式，id会匹配pages/articles/[id].js对应的[id]参数生成动态路由：
　　[
  { params: { id: "article-01" } },
  { params: { id: "article-02" } },
  { params: { id: "article-03" } },
  ...
]
　　该方法调用读取lib/posts-md.js文件中getFileIds文件路径列表的方法。示例代码如下：
　　import { getFileIds, getFileData } from &#39;../../lib/posts-md&#39;;
// post directory
const postsDir = &#39;articles&#39;;
// dynamic route IDs
export async function getStaticPaths() {
  const
    paths = (await getFileIds(postsDir))
      .map((id) => ({ params: { id } }));
  return {
    paths,
    fallback: false,
  };
}
　　5、动态路由生成后，我们需要实现MD内容格式化和渲染。我们实现了 Next.js 特有的异步方法 getStaticProps({ params })，并在项目构建时调用这个函数（静态生成）。通过id参数调用lib/posts-md.js文件中getFileData()定义的方法，将MD文档的内容异步返回给收录postData属性的组件（第六点的代码部分）。示例代码如下：
　　// dynamic route content
export async function getStaticProps({ params }) {
  return {
    props: {
      postData: await getFileData(postsDir, params.id),
    },
  };
}
　　6、获取到数据后，我们需要将其填充到组件的模板中，并以更友好的形式显示出来。我们在pages/articles/[id].js中编写JSX相关代码，并将文章内容嵌套在上一节的组件模板中，示例代码如下：
　　import Layout from &#39;../../components/layout&#39;;
import Head from &#39;next/head&#39;;
...
export default function Article({ postData }) {
  // generate HTML from markdown content
  const html = `
    ${ postData.title }
    ${ postData.dateFriendly }
    ${ postData.wordcount }</p>
    ${ postData.html }
  `;
  return (
    
      
        { postData.title }
        
      
      
    
  );
}
</p>
　　最后，我们需要重启 Next.js 服务。如果一切正常，你会发现在浏览器上可以通过/articles/文件名的路径查看所有MD文档，例如：3000/articles/article-01对应/articles/article-01. md 这个MD文件，效果如下图：
　　
　　二、创建博客列表页面
　　对于博客相关的内容页面，我们需要按照文档创建时间的倒序构建博客列表页面
　　1、首先我们在lib/posts-md.js文件中定义一个getAllFiles()方法来获取指定目录下的文件列表：
　　// return sorted array of all posts for indexes
export async function getAllFiles(dir) {
  const
    now = dateformat.ymd(new Date()),
    files = await getFileIds(dir),
    data = await Promise.allSettled( files.map(id => getFileData(dir, id)) );
  return data
    .filter(md => md.value && md.value.dateYMD  md.value)
    .sort((a, b) => (a.dateYMD  (
          
        ))}
      
    
  );
}
　　4、你可能注意到我在上面引用了一段代码
　　组件，在components/pagelink.js文件中定义，该组件实现了显示文章的标题、链接、描述、日期等，示例代码如下：
　　import Link from &#39;next/link&#39;;
export default function Pagelink(props) {
  const link = `/${ props.postsdir }/${ props.id }`;
  return (
    
      <a>{ props.title }</a>
      { props.datefriendly }
      
　　{ props.description }
    
  );
}
</p>
　　博客列表页面的功能都在这里完成。在浏览器中输入:3000/articles，预览效果如下图：
　　
　　所有 MD 文件都将在此页面上列出。随着内容的增加，需要添加相关的逻辑进行分页。这里需要用到getStaticPaths()方法，并且这个页面需要改成pages/articles/[index].js（注意：index可以换成你想要的参数，但是需要和里面的参数对应getStaticPaths方法），在页面构建的时候生成对应的页面路由，可以参考第一部分根据MD文档生成动态路由，具体逻辑如何实现可以考虑，这里不再介绍;
　　三、创建网站导航
　　为了方便用户浏览我们的博客网站，我们需要新建一个components/navmenu.js导航组件来实现网站导航的功能。由于函数的简单性，这里就不做解释了。 ，示例代码如下：
　　import Link from &#39;next/link&#39;;
import Link from &#39;next/link&#39;;
// menu name and link
const menu = [
  { text: &#39;home&#39;, link: &#39;/&#39; },
  { text: &#39;about&#39;, link: &#39;/about&#39; },
  { text: &#39;articles&#39;, link: &#39;/articles&#39; }
];
// render menu
export default function Navmenu() {
  // get current page route
  const
    router = useRouter(),
    currentPage = router.pathname;
  return (
    
      
        { menu.map(item => (
          
        ))}
      
    
  )
}
// render individual menu link
function Navlink({ text, link, currentpage }) {
  if (link === currentpage) {
    return (
      { text }
    );
  }
  else {
    return (
      <a>{ text }</a>
    );
  }
}
　　导航组件完成后，我们将其引入到 components/header.js 组件中。示例代码如下：
　　import Navmenu from &#39;./navmenu&#39;;
　　更新后的JSX代码如下：
　　...
  
...
　　完成后博客导航效果如下图：
　　
　　四、使用 Sass 为您的博客添加全局样式
　　到此，一个基于MD文档的简单博客网站到此就完成了，最后还要给网站添加样式，不然网站真的太丑了。
　　Next.js 可以使用 Sass、Less、PostCSS、Styled JSX、CSS 模块、plain old CSS 等方式给网站添加样式，这里我们使用 Sass 给网站添加样式，这里我们手动安装 Sass 为项目：
　　npm i sass
　　接下来，我们可以为每个组件定义相关的样式，然后将它们组合到一个styles/global.scss文件中。由于本文文章重点介绍Next.JS的使用，这里就不做介绍了。 Sass怎么写，有兴趣的同学可以点击阅读文末原文下载本文的Sass风格：
　　// settings
@import &#39;01-settings/_variables&#39;;
@import &#39;01-settings/_mixins&#39;;
// reset
@import &#39;02-generic/_reset&#39;;
// elements
@import &#39;03-elements/_primary&#39;;
// layout
@import &#39;04-layout/_site&#39;;
// components
@import &#39;05-components/_header&#39;;
@import &#39;05-components/_footer&#39;;
@import &#39;05-components/_article&#39;;
　　最后我们需要将styles/global.scss导入到特殊文件pages/_app.js中，这样网站所有页面都可以使用这个样式，示例代码如下：
　　import &#39;../styles/global.scss&#39;;
export default function App({ Component, pageProps }) {
  return 
};
　　最后我们重启 Next.js 服务，你会看到一个漂亮的博客主页，如下图：
　　
　　待续
　　由于篇幅原因，今天的文章就到这里，一个基于MD文档的简单博客网站就完成了，通过这个文章我们学习了如何基于MD文档生成动态路由，完成 文章 内容页面、列表页面、导航，并为 网站 添加漂亮的样式。在下一篇文章中，我们为blog网站添加dark mode，根据界面数据渲染内容（服务端渲染），以及如何编译项目并将blog网站部署到Node.js 服务器 按需或纯静态部署，最后会提供完整的项目源码，敬请期待... 查看全部

　　js提取指定网站内容(Python中获取网页源码最简单的方法(图))
　　本文示例分享Pyt[emailprotected]#code&amp;wang 6hon的具体代码，获取指定网页的源码，供大家参考。具体内容如下
　　1、任务介绍
　　前段时间一直在学习Python的基础知识，所以一直没有更新博客。最近学习了一些关于爬虫的知识。我将更新在多个博客中学到的知识。今天给大家分享一下获取指定网页源代码的方法。只有抓取网页的源代码，才能从中提取出我们需要的数据。
　　2、任务代码
　　Python获取指定网页源代码的方法比较简单。我在Java中用了38行代码来获取网页的源代码（可能不太熟练），但是在Python中只用了6行就实现了效果。
　　在 Python 中获取网页源代码的最简单方法是使用 urllib 包。具体代码如下：
　　
import urllib.request #导入urllib.request库
b = str(input("请输入：")) #提示用户输入信息，并强制类型转换为字符串型
a = urllib.request.urlopen(b)#打开指定网址
html = a.read() #读取网页源码
html = html.decode("utf-8") #解码为unicode码
print(html) #打印网页源码
　　我输入的网址是我博客主页的网址
　　结果如下：
　　3、总结
　　本博客介绍的方法比较简单。事实上，有些网站 会“反爬虫”。这时候我们就需要使用User-Agent或者proxy了。这些东西将在以后的博客中更新。我希望以后会这样。博客更新了“CSDN博客访问阅读小程序”和“有道翻译小程序”等更难的知识。由于刚开始学爬虫，水平有限，请多多包涵。
　　以上就是本文的全部内容。希望对大家的学习有所帮助，也希望大家多多支持代码。 查看全部

　　js提取指定网站内容(用Python编写的JS引擎运行js代码获取你需要的内容)
　　今天偶然发现了这个东西 PyV8，感觉就像你想要的。
　　它直接搭建了一个js运行环境，也就是说你可以直接在python中执行页面上的js代码来获取你需要的内容。
　　参考：
　　/博客/?p=252
　　/p/pyv8/ 我直接看了一下js源码，分析了一下，然后爬了。
　　比如页面用ajax请求一个json文件，我会先爬取那个页面，获取ajax需要的参数，然后直接请求json页面，然后解码，然后处理数据，合并到图书馆。
　　如果直接把页面上的所有js都跑一遍（就像浏览器一样），然后得到最终的HTML DOM树，性能很差，不推荐使用这种方式。由于 Python 和 js 性能天生就差，如果这样做，会消耗大量 CPU 资源，最终导致获取效率极低。js代码需要js引擎运行，Python只能通过HTTP请求获取HTML、CSS、JS的原创代码。
　　不知道有没有用Python写的JS引擎，估计需求不大。
　　我通常使用 PhantomJS 和 CasperJS 进行浏览器爬取。
　　直接在里面写JS代码做DOM操作和分析，结果以文件的形式输出。
　　让Python调用程序，通过读取文件来获取内容。去年我真的爬过这样的数据，因为我赶时间，我的方法比较难看。
　　PyQt有一个专门的库来模拟浏览器的请求和行为（好像是webkit，算了，看看就好。用的时候几行代码就够了），第一次在运行的程序中（只有第一次）返回结果是js运行后的代码。于是我写了一个py脚本做访问分析，然后写了一个windows脚本通过传递命令行参数循环py脚本，最后得到数据。
　　方法有点脏，但是拿到数据还是不错的。对于某个网站，可以查看网络请求，找到返回实际内容的，有针对性的发送。如果是通用的，则必须使用无头浏览器，例如 PhantomJS。又一个爬北幽门论坛的人。.
　　文字来源为 gao([emailprotected]@#code(NetArt的方法，使用浏览器引擎，比如PhantomJS，用它导出html，然后用python解析html。不要直接用PhantomJS解析，虽然我知道很简单，为什么呢？那不叫python爬虫，因为用python解析比较统一，这里假设你还在爬非js页面。
　　正常方式，解析 AJAX 请求。即使它是在 JS 中呈现的，数据也是通过 HTTP 协议传输的。什么？不能模拟吗？读懂HTTP协议，其实是经验。例如，在请求北友人论坛的正文时，需要
　　X-Requested-With:XMLHttpRequest
　　这是一个栗子：
　　的职位列表
　　点击Android后，我们从浏览器上传了几个参数到拉钩的服务器
　　一个是first=true，一个是kd=android，（关键字）一个是pn=1（页码）
　　所以我们可以模仿这一步来构造一个数据包来模拟用户的点击动作。
　　post_data = {&#039;first&#039;:&#039;true&#039;,&#039;kd&#039;:&#039;Android&#039;,&#039;pn&#039;:&#039;1&#039;}
　　虽然这是很久以前的问题，但线程所有者似乎也解决了这个问题。但是看到很多答案有点太重了，这里有一个更高效，资源消耗更少的方法。由于标题没有具体说明需要什么，所以这里的例子取了首页所有帖子的链接和标题。
　　首先请记住，浏览器环境的内存和CPU消耗是非常严重的，要尽量避免模拟浏览器环境的爬虫代码。请记住，对于一些前端渲染的网页，虽然我们需要的数据在 HTML 源代码中看不到，但更有可能通过另一个请求得到纯数据（很可能是 JSON 格式），不仅不需要模拟浏览器，但可以省去解析HTML的消耗。
　　然后，打开北友人论坛首页，发现其首页的HTML源码中确实没有文章页面显示内容。那么，很有可能这是通过JS异步加载到页面中的。通过浏览器开发工具（OS X下的Chrome浏览器通过command+option+i或者Win/Linux下通过F12）分析加载首页时的请求，很容易发现，请求如下截图：
　　截图中选中的请求得到的响应是首页的文章链接，在预览选项中可以看到渲染的预览：截图中选中的请求得到的响应是文章@ &gt; 主页链接，在预览选项中可以看到渲染的预览：
　　至此，我们已经确定这个链接可以获取到首页的文章和链接。至此，我们已经确定这个链接可以获取到首页的文章和链接。
　　在 headers 选项中，有这个请求的请求头和请求参数。我们可以通过 Python 模拟这个请求，得到同样的响应。然后配合BeautifulSoup等库解析HTML，就可以得到对应的内容。
　　关于如何模拟请求以及如何解析HTML，请移步我的专栏进行详细介绍，这里不再赘述。
　　这样就可以在不模拟浏览器环境的情况下抓取数据，大大提高了内存和CPU的消耗以及抓取速度。在编写爬虫时，请务必记住，除非必要，否则不要模拟浏览器环境。如果是windows下，可以尝试调用windows系统中的webbrowser控件。另外，ie本身也提供了接口。但是这两种方法都需要渲染页面，在性能上有些浪费。为了加快速度，可以关闭ie的图片下载显示，然后通过点击等方法模拟真实行为。谷歌幻影JS 查看全部

　　js提取指定网站内容(parsel集XPath和pyquery为一体，可以灵活使用两者的表达式
)
　　parsel集成了XPath和pyquery，可以灵活使用这两种表达式。
　　安装
　　pip install parsel
　　了解html解析库
　　之前学过pyquery和XPath，爬虫的html解析库，概念是一样的，不外乎：
　　在系统学习python爬虫的过程中，如果这个概念不清楚，对后续学习会有很大的阻力。之所以一定要学parsel库，是因为想学好python爬虫，必须学习scrapy爬虫框架，而parsel是框架的基础。
　　解析解析
　　from parsel import Selector
html = &#39;&#39;&#39;hello, parsel
hello, xpath
&#39;&#39;&#39;
selector = Selector(text=html)
items_css = selector.css(&#39;h1&#39;)
items_xpath = selector.xpath(&#39;//h1&#39;)
　　在parsel中选择节点，css和xpath方法效果一样。其实底层的css方法也是XPath方法。就效果而言，两者没有区别。 Parsel 只提供了一种灵活的节点选择方式供我们选择。 .
　　两种选择节点的方法返回的SelectorList是一个可迭代对象，可以通过遍历来操作。
　　items_css = selector.css(&#39;h1&#39;)
items_xpath = selector.xpath(&#39;//h1&#39;)
for item in items_css:
print(item)
for item in items_xpath:
print(item)
>>>




　　两次遍历的结果相同，数据收录相同的内容。
　　提取文本
　　from parsel import Selector
"""
parsel集pyquery 和XPath一体，支持使用css选择器和XPath表达式
"""
html = &#39;&#39;&#39;

hello, parsel
hello, xpath


锅大虾的自学网站
百度
网易




&#39;&#39;&#39;
selector = Selector(text=html)
items_css = selector.css(&#39;.dv span&#39;)
items_xpath = selector.xpath(&#39;//div[@class="dv"]/span&#39;)
print(items_css.getall())
print(items_css.get())
>>>
[&#39;锅大虾的自学网站&#39;, &#39;百度&#39;, &#39;网易&#39;]
锅大虾的自学网站
　　SelectorList 有两种提取节点的方法，get 和 getall。结合上面的例子，get方法返回SelectorList的第一个节点对象，getall返回SelectorList的所有节点。
　　print(type(items_css.getall()))
print(type(items_css.get()))
>>>


　　经过测试，getall返回一个列表，get返回一个字符串。
　　只使用get和getall，只提取节点，可以使用XPath方法提取文本。
　　items_css = selector.css(&#39;.dv span&#39;)
items_xpath = selector.xpath(&#39;//div[@class="dv"]/span&#39;)
for item in items_css:
text = item.xpath(&#39;.//text()&#39;).get()
print(text)
>>>
锅大虾的自学网站
百度
网易
　　你也可以使用getall直接从节点选择中提取返回列表，不用遍历，然后遍历处理：
　　xpath_items = selector.xpath(&#39;//div[@class="dv"]/span/a/text()&#39;).getall()
print(xpath_items)
>>>
[&#39;锅大虾的自学网站&#39;, &#39;百度&#39;, &#39;网易&#39;]
　　当然也可以先提取文本所在的节点，然后遍历提取：
　　for item in items_css:
text = item.xpath(&#39;.//text()&#39;).get()
print(text)
>>>
锅大虾的自学网站
百度
网易
　　# 提取属性
attr = selector.css(&#39;.dv span a::attr(href)&#39;).getall()
for a in attr:
print(a)
# 这个方法和上面的是等效的，parsel两种提取的方法
attr = selector.xpath(&#39;//div[@class="dv"]/span/a/@href&#39;).getall()
print(attr)
>>>
https://nodepro.cn
https://baidu.com
https://163.com
[&#39;https://nodepro.cn&#39;, &#39;https://baidu.com&#39;, &#39;https://163.com&#39;] 查看全部