通过谷歌服务获取网站favicon
前言起因是为了给Notion的文章添加icon
通过 域名+/favicon.ico 找网站的icon这个办法不一定能找到。
在浏览器开发者工具里的Network找也不一定找得到
使用谷歌的服务第一种: Google favicons将要获取icon的网站域名填入domain里面
格式: https://www.google.com/s2/favicons?domain=<domain>&size=<size>
eg: https://www.google.com/s2/favicons?domain=https://www.baidu.com&size=64
获取到图标后的链接里面也有size参数可以修改尺寸
第二种: Chrome favicon 是chrome浏览器自带的功能格式: chrome://favicon/<domain>
eg: chrome://favicon/https://www.baidu.com
koa2+mongodb搭建后端api项目
使用koa2+mongodb搭建后端api项目一、环境搭建1自行安装 node + npm
二、安装脚手架并创建项目12npm i -g koa-generatorkoa2 <pro_name>
三、安装依赖并启动项目123npm inpm i koa2-cors mongoose (跨域还有操作数据库的库)npm dev (启动命令自行查看package.json)
四、数据库操作(模块化开发)脚手架生成的初始文件目录结构
创建mongodb文件夹mongodb文件夹结构
123controller文件夹: 存放对数据库增删改查的函数的文件,文件名对应数据库中的一个表(集合);models文件夹: 存放由schemas生成的表,文件名同理;schemas文件夹: 存放schemas文件
模块化开发
先创建mongodb/index.js文件,再在app.js中导入,导入时注意模块导入顺序123456789101112131415161718192021222324252627/** * mongodb/index.js * @file 连接数据库 * @a ...
Angular
Angular中文官网
AngularJS 和 Angualr 的区别
Angular CLI
安装CLInpm install -g @angular/cli
创建新项目ng new demo --skip-install
安装依赖cd Demo && yarn
启动应用yarn start
组件创建组件
使用CLI创建组件
ng g component path/componentName
path ==> 组件存放的路径
componentName ==> 组件的名称
运行成功后会在src/app下创建path文件夹,path文件夹下创建componentName文件夹,componentName文件夹里面有四个文件(.ts、.html、.css、.spec.ts)
手动创建组件
创建一个componentName.component.ts12345678910111213import { Component } from '@angular/core';@ ...
python+selenium webdriver自动化测试
安装selenium和浏览器驱动pip install selenium
Linux:下载各浏览器驱动然后解压到/usr/bin/下即可或者配置环境变量eg:/usr/bin/chromedriver
各浏览器驱动下载地址(根据浏览器的版本下载对应驱动)
chrome:http://npm.taobao.org/mirrors/chromedriver/
firefox:http://npm.taobao.org/mirrors/geckodriver/
selenium使用12345678910111213141516# coding = utf-8from selenium import webdriverimport time# 使用chrome浏览器browser = webdriver.Chrome()# 打开浏览器并跳转到百度browser.get("https://www.baidu.com")# 找到搜索框输入seleniumbrowser.find_element_by_id("kw").send_keys("sel ...
electron
安装
设置镜像 npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
打包electron-packager打包全平台 electron-packager ./ --all
nativefier介绍: 基于electron的一键封装url为桌面应用的工具使用: nativefier url例子: nativefier https://www.baidu.com
替代品 tauri参考官网
官网说tauri原始程序打包后比electron小140多MB
vuepress的使用
VuePress介绍安装npm i -g vuepress
创建项目123456# 创建目录mkdir vuepress_blog && cd vuepress-blog# 初始化yarn init# 安装项目依赖yarn add -D vuepress
新建md文档12mkdir docsecho '# Hello VuePress' > docs/README.md
启动vuepress dev docs
配置创建docs/.vuepress/config.js
1234module.exports = { title: 'Hello VuePress', description: 'Just playing around'}
ng-alain的使用
NG-ALAIN介绍ng g12ng g ng-alain:module xxxng g ng-alain:empty yyy -m=xxx
使用iconfont
第一步:iconfont 生成js在线链接
第二步:在startup.service.ts中引入
1234567891011121314151617181920>// src/app/core/startup/startup.service.ts>export class StartupService { constructor( iconSrv: NzIconService, private menuService: MenuService, private translate: TranslateService, @Inject(ALAIN_I18N_TOKEN) private i18n: I18NService, private settingService: SettingsService, private aclService: ACLService, p ...
webpack
WebPack一、概述官网:https://webpack.js.org
中文网:https://www.webpackjs.com
目的:
为了react的学习
为了了解vue的脚手架的2个命令操作的实现
npm run serve(启动开发服务器)
npm run build(打包上线的代码)
1、webpack是什么?
webpack是一种前端资源构建(打包)工具(npm run build),一个静态模块打包器。在webpack看来,前端的所有资源文件(js/json/css/image/less/sass…)都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源。webpack可以解决当前web开发中所面临的困境,webpack提供了:
友好的模块化支持
代码压缩混淆
处理js兼容问题
性能优化
目前绝大多数企业中的前端项目,都是基于webpack进行打包构建的。
示例:使用==模块化开发思想(能拆就拆原则)==创建一个隔行换色的效果
先初始化一个空项 ...
Redux
Redux简介2013年Facebook提出了Flux架构的思想,引发了很多的实现。2015年,Redux出现,将Flux与函数式编程结合一起,很短时间内就成为了最热门的前端架构。
简单说,如果你的UI层非常简单,没有很多互动,Redux就是不必要的,用了反而增加复杂性。
如果你的项目的迭代变得越来越复杂,组件的数量和层级也变得越来越多,越来越深,此时组件间的数据通信就变得异常的复杂和低效,为了解决这个问题,引入了状态管理(redux)从而很好的解决多组件之间的通信问题。
如果需要使用Redux请先进行安装:
网址:https://redux.js.org/introduction/getting-started
1npm i -S redux
与vuex的区别:
代码书写上vuex的代码会比redux的感觉简单一些
两者在模块化上的实现也有区别,redux的模块化分的文件会更多,但是redux在命名空间层面的操作比vuex简单
三大原则(重点)
单一数据源
整个应用的state(这个state不是组件中的state,请不要混淆)被储存在一棵对象结构树中,并且这个对象结构只 ...
Vuex
Vuexvuex是什么?vuex是一种项目中数据共享的方式。
其具有以下优势:
能够在vuex中集中管理共享的数据,便于开发和后期进行维护
能够高效的实现组件之间的数据共享,提高开发效率(代码量)
存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新
什么样的数据适合存储在Vuex中?
一般情况下,只有组件之间共享的数据才有必要存储到vuex中,对于组件中私有的数据依旧存储在组件自身的data中即可。
vuex的安装及配置vuex不是脚手架在安装项目的时候自带的,是一个选配的功能,默认是不被安装的(需要自己根据需要选择)。因此其安装和配置存在两种情况:
情况1:在通过vue脚手架vue create xxxx的命令的时候,手动选择安装vuex【极力推荐】。好处在于不需要自己手动创建store目录及目录下的index.js文件。
情况2:在通过vue脚手架vue create xxxx的命令的时候,可能没有选择安装vuex,则这个时候我们有两种选择:
删了重来,再建立项目的时候选择安装vuex
当然也可以通过命令来补救安装,但是通过命令后续安装的vuex, ...