LsWorld

@TOC 最近想做一个背单词相关的app，要是自己一个个去网站搜然后再复制到数据库中太慢了，所以就考虑能不能通过接口或者python自动将数据爬下来。 第一步，登录并寻找可以爬取的数据（想直接看结论可以到第四步）首先要先登录去寻找扇贝单词中有显示单词的地方，在我找了一圈，发现在单词学习的词表中（这要先自己提前添加一本词书），只要自己单词还没有开始背，可以在未学单词中来获取本词书的单词数据。 到这未学单词页面，首先就是先查看扇贝单词是通过服务器渲染还是客户端渲染，要是服务器渲染，在源码中就可以直接看到单词的数据，那样就可以直接通过python来进行爬取，要是客户端渲染，那就得考虑通过调用接口来拿取单词数据了。这里我到源码中去搜索matter这个单词。 结果发现，源码中并没有这个单词的数据，就说明得通过接口的方式来获得数据了。 第二步，对症下药那此时就是得通过F12的网络检查来进行抓包了。（注意：这里要在Fetch/XHR中才会更清晰的展示） 通过下方的按钮，我们转换到第二页，看看发送的网络请求是什么样的。 这里我们可以点击后在preview中查看，发现数据是有返回的，但却做了加...

Vue3中使用ref和reactive需要注意的点最近在开发项目中，想到复杂的数据对象都应该用reactive，就想用reactive来接收父组件传来的值，再通过emit传递回去。 但在这遇到了一个坑，用reactive来接收对象时，控制台输出没有问题，但页面显示却是空白！ 目前要实现的是一个编辑的功能，列表中的数据是通过父组件传递给子组件数据实现的，因为要保证单向数据流，所以当用户点击编辑按钮的时候（即触发handleEdit），将从父组件收到的点击的那一条数据存到form中。 // 对类型进行限制 interface Props { barTitle: Array<BarType>, //这里类型不用多了解，就是为了减少维护成本 tableData: Array<String> } // 提供初始值 const props = withDefaults(defineProps<Props>(), { barTitle: () => [], tableData: () => [] }) // 点击编...

fs文件操作模块fs作为node.js的内置模块，只需用require("fs")引入后即可使用。可以用js来实现对计算机文件的增删改查操作 创建目录//在根目录下创建avatar文件夹 创建成功err为null，反之则有失败的原因 fs.mkdir('./avatar',(err)=>{ console.log(err) }) 目录重命名//将avatar改名为avatar2 fs.rename('./avatar','./avatar2',err=>{ console.log(err) }) 删除目录//删除名为avatar2的目录 fs.rmdir('./avatar2',err=>{ console.log(err) }) 往文件中写入数据 会覆盖其中内容//往text.txt文件中写入helloworld 文件不存在会自动创建 fs.writeFile('./text.txt','helloWorld',err=>{ console.log(e...

启动服务器热更新默认方式重启服务器为node file。 在全局安装npm i -g nodemon后可以自动服务器热更新 输入命令nodemon file即可开启热更新 搭建HTTP服务器搭建一个简单的HTTP web 服务器 //获取HTTP模块 const http = require('http') // 设置端口号 const port = 3000 // 创建 const server = http.createServer((req, res) => { //req接收浏览器传的参数 //res 返回渲染的内容 res.statusCode = 200 res.setHeader('Content-Type', 'text/html;charset=utf-8') res.end('你好世界\n') }) // 监听端口是否被访问，访问则输出其中内容 server.listen(port, () => { console.log(`服务器已经启动`) }) url模块介绍在引入url模块后，可以...

npm包管理器简介npm 是 Node.js 标准的软件包管理器。现在也可以使用yarn来代替npm作为一个包管理器。 npm常用命令 下载npm 可以管理项目依赖:npm i 或 npm install 它会在 node_modules 文件夹（如果尚不存在则会创建）中安装项目所需的所有东西。 安装单个软件包npm i <package-name> 或 npm install <package-name> 在安装软件包的时候添加--save表明安装并添加条目到 package.json 文件的 dependencies。 --save-dev 安装并添加条目到 package.json 文件的 devDependencies。 区别主要是，devDependencies 通常是开发的工具（例如测试的库），而 dependencies 则是与生产环境中的应用程序相关。 更新所有软件包：npm update 更新指定软件包：npm update <package-name> 运行指定任务： 在项目的package.json...

package.json文件package.json 文件是项目的清单。 它可以做很多完全互不相关的事情。 例如，它是用于工具的配置中心。 它也是 npm 和 yarn 存储所有已安装软件包的名称和版本的地方。 例如Vue项目中的package.json文件: { "name": "test-project", "version": "1.0.0", "description": "A Vue.js project", "main": "src/main.js", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "test": "npm run unit", ...

命令行运行node.jsapp.js为要运行的主程序文件。 node app.js 退出node.js程序console.log(123) process.exit(1) console.log(1234) //1234 将不会输出 exit(1)中 exit()括号中默认的退出码为0，表示成功。 在node.js中导入其他包node.js中使用的模块化语法为common.js，所以在导入文件时使用require，暴露文件则用exports 第一种方式//export.js文件 const obj = { name: '小王' } module.exports = obj //导入文件 const obj = require('./export.js') console.log(obj) //控制台输出 { name: '小王' } 第二种方式//export.js文件 exports.person = { name: '张三', age: 20 } const obj = re...

今天部署博客发现在本地运行的时候也会出现页面迟迟无法出现的问题，结果打开控制台面板一看发现type.js没有使用上。 查看源代码发现https://cdn.jsdelivr.net/npm/typed.js@2.0.11挂了，而matery主题默认使用jsdelivr来引入一些js代码。 现在在控制台中发现了错误，那解决办法就很简单了，在matery主题的源代码中将cdn换成国内加速就可以完美解决副标题不显示的问题了。 问题定位到 Matery 主题中引入 typed.js 的 CDN 地址不可用。 经过一路筛查后发现在主题文件的\layout\_partial\bg-cover-content.ejs中发现了代码。接下来把他替换成https://cdn.bootcss.com/typed.js/2.0.5/typed.js，就可以完美解决问题了 重新启动后发现报错没了，副标题也一如既往的显示了。

Vercel的基本介绍要是用过hexo来搭建的博客的话，在hexo的官方文档中就有介绍过如何将博客的静态页面搭建到Vercel平台中。但Vercel不仅能搭建静态的页面，也可以将自己github账号中的项目所作的页面进行一个展示，可以省去自己使用服务器搭建的费用。这里只对Vercel基础搭建做一个介绍，想了解更多可以查看官方文档Introduction to Vercel – Vercel Docs 注册Vercel进入到Vercel登录页面，这里直接连接你的github账号。 因为我早已经连接过了，其他的步骤就无法演示了。根据提示一步步下去到最后出现下面这个页面就成功了。 搭建使用vue3+vite所建立的的项目在node.js环境下使用npm init vite@latest来创建一个vite项目 这里接下来会有让你选择项目名与框架。如上图可知我目前创建的项目名是vite-project使用的框架为vue，并且使用ts语法。 在项目的根目录中使用npm install命令导入了vite所需要的包。接下来就是启动项目看看项目页面如何。 vite默认开启了端口...

数组Array是大家日常开发中使用的比较多的数据类型，这里就不进行过多赘述了，本文主要介绍一些数组常用的方法与操作，以供在写算法或在开发中更好的解决问题。（这里只做了一些我平常用到较多的方法，更多的方法参考MDN Web Docs (mozilla.org)官方文档） 数组的常见操作创建数组//使用new Array()创建数组 let arr = new Array(1,2,3) console.log(arr) //[1, 2, 3] //使用字面量来创建数组 let arr = [1,2,3] console.log(arr) //[1, 2, 3] 访问数组元素let arr = [1,2,3] console.log(arr[0]) // 1 console.log(arr[3]) // undefined JavaScript中访问一个不存在的元素不会报错，会返回undefined 遍历数组//使用for循环遍历数组 let arr = [1,2,3] for(let i = 0; i <arr.length; i++){ c...

在项目实际开发中，有时候需要对数据进行限制或模糊匹配的时候，正则可以很好的解决这些问题。 正则表达式的基础使用正则表达式的语法：/表达式/ 在javascript中，创建正则表达式的方式有两种，一是用字面量的方式创建，即let 变量名 = /表达式/，另一种是通过RegExp()构造函数的方式创建。 在检测字符串是否符合正则编写规范时，可以使用test()来检测。 let str = '123' let reg1 = /123/ let reg2 = RegExp(/123/) console.log(reg1.test(str)) //true console.log(reg2.test(str)) //true 模式修饰符模式修饰符是在正则基础表达式后面加上后缀，从而实现一些功能。 模式符 说明 g 用于在目标字符串中实现全局匹配 i 忽略大小写 m 实现多行匹配 u 以Unicode编码执行正则表达式 y 黏性匹配，仅匹配目标字符串中此正则表达式的lastIndex属性指示的索引 模式符可以根据需求多个混合使用 let str = 'a...

TypeScript的安装因为TypeScript只是相当于JavaScript的拓展，JavaScript所有语法并对其进行一些语法的增加，安装可以通过Node.js的npm包控制管理进行安装。使用npm i -g typescript进行全局安装。 浏览器目前默认识别不了ts文件，需要通过tsc xxx.ts来进行将ts转变为js，使用tsc xxx.ts -w会自动监听ts文件的变更。 TypeScript配置在根目录创建tsconfig.json对ts进行配置，在命令行中使用tsc或tsc -w来运行配置文件 //tsconfig.json文件 { //"compilerOptions"编译器的选项 "compilerOptions": { //"target"用来指定ts编译为js的版本 "target": "ES6", //"module"指定要使用的模块化的规范 "module": "ES6", //"strict"所有严格检查开...