2020年开始,本模块貌似要停止维护了 https://github.com/request/request,node.js 的http模块就已经很好了。这篇就先介绍一个Node.js的模块——request。有了这个模块,http请求变的超简单。var request = require('request');
request('http://www.google.com', function (error, response, body) {
if (!error && response.statusCode == 200) {
console.log(b
编写爬虫时,需要HTMLParser解析HTML,HTML本质上是XML的子集,但是HTML的语法没有XML那么严格,所以不能用标准的DOM或SAX来解析HTML。现在流行很多解析器,综合一下比较看好 cheerio 和 jsdom。 cheerio简单好用速度快,JSDOM的目标是提供一个我们在浏览器里面看到的相同的 DOM 环境。支持最新的javascript选择器。 安装npm install cheerio HTML示例 ul id=“fruits”
li class=“apple” Apple /li
li class=“orange” Orange /li
网络爬虫,又称为网页蜘蛛、网络机器人或网页追逐者,是一种按照预定规则自动抓取万维网信息的程序或脚本。其核心功能在于能够自动化浏览网络并获取数据,这些数据可以是网页内容、图片、视频等多种形式的信息。爬虫在工作时会根据开发者设定的规则(爬虫算法)来遍历网页链接,获取页面内容,解析所需数据,并常常进一步存储或分析这些数据。
爬虫的基本组成部分及流程:
获取网页:爬虫首先向目标网站发送HTTP请求,就像我们在浏览器中输入网址并按下回车键一样。这个过程涉及遵循robots.txt文件规定,尊重网站的爬取规则。
解析网页:获取到网页内容后,爬虫会使用HTML解析器(如BeautifulSoup、l
CSS Reset 是革命党,CSS Reset 里最激进那一派提倡不管你小子有用没用,通通给我脱了那身衣服,凭什么你 body 出生就穿一圈 margin,凭什么你姓 h 的比别人吃得胖,凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动,把人家全拍扁了。看似是众生平等了,实则是浪费了资源又占不到便宜,有求于人家的时候还得贱贱地给加回去,实在需要人家的默认样式了怎么办?人家锅都扔炉子里烧了,自己看着办吧。
Normalize.css 是改良派。他们提倡,各个元素都有其存在的道理,简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间,那就改掉。士农工商,
将图片文件转换为base64编码并载入浏览器能够减少http请求数,但是增大了js或html文件的体积,如果图片在项目中的重用度较高,那么每处引用都会生成base64编码,造成了代码的冗余。通过http请求载入到浏览器的文件可以缓存到本地,当图片在项目中的重用度较高时,会为图片的访问增加缓存的便利性,下次访问更快。因此要平衡考虑。
Install
npm install --save-dev url-loader
Usage
url loader与file loader的工作方式相似,但如果文件的体积比byte limit小,就能返回Data Url。
需要用一个查询参数(qu
一,删除Node.js的方法卸载node 依次在终端执行下面的脚本sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/
前两种方法需要设置路由history模式,后两种方法貌似更合适。
方法一:
1.在router.js里面(即路由文件中),此时模式为 history
const router = new VueRouter({
mode: 'history',
routes,
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
if (from.meta.keepAlive) {
实现难点
如何判断切换路由时是前进还是后退
每次向左向右切换动画如何实现
解决方案
我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画.
router/index.js
import VueRouter from 'vue-router'
import Home from '../components/home/home'
import User from '../components/user/user'
var router = new VueRouter({
routes
CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
实现方法:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果如图:
但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号,如下。
实现方法:
display: -webkit-box;
-webkit
Audio对象的属性
属性
描述
audio.volume
(读/写) 音量
audio.src
(读/写) 歌曲地址
audio.currentTime
(读/写) 歌曲当前已播放时长
audio.duration
(读) 歌曲的总长度
audio.paused
(读) 布尔类型 是否处于暂停状态
audio.ended
(读) 布尔类型 歌曲是否已经播放完毕
Audio对象的方法
方法
描述
audio.play()
让歌曲开
在Vue组件中,使用.foo img{max-width:100%}不会生效,解决方法如下:
template
div class="foo"
div v-html="myHtml" /div
/div
/template
style scoped
.foo { height: 300px; }
/style
而如果在组件中使用了v-html,要为myHtml中的标签添加CSS样式,我们需要在写样式的时候添加 :
.foo img { max-width: 100%; }
这样,编译
大多数情况下,我们都是判断页面滚动到底部,如下:
window.addEventListener('scroll', this.handleScroll);
// 处理滚动到底部的事件
handleScroll(arg) {
var clientHeight = document.documentElement.clientHeight; // 客户区大小
var scrollHeight = document.documentElement.scrollHeight; // 没用滚动条的情况下,元素内容的总高度
var scrollTop
// 时间转换 几分钟 几小时 几天
tools.formatTime = function (timespan) {
var dateTime = new Date(timespan);
var year = dateTime.getFullYear();
var month = dateTime.getMonth() + 1;
var day = dateTime.getDate();
var hour = dateTime.getHours();
var minute = dateTime.getMinutes();
var second
当一个api是GET请求, 地址是http://javascript.net.cn/user/comments
正常的GET请求是没有问题的,但是有时候该GET请求会变成非简单请求。比如:
this.$http({
method: 'GET',
url: '/user/comments',
params: {page:1, object_id:that.article.id, table_name:"portal_post"},
headers: {
'XX-Token': tools.getCookie('token'),
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
本文详细介绍CORS的内部机制。
一、简介
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出
解决方案一,检查Vuex中的数据,没有的话,重新从服务器获取,该方案可以满足存储的简单信息。该方法的好处是比较干净。
mounted: function(){
var that = this;
//如果登录后,刷新了,vuex里的登录数据会清空,这里重新从服务器获取数据
if(tools.getCookie('token') && !this.$store.state.user.user_type){
// 判断不需要重新获取信息的页面
var noNeed = ['/login','/register','/reset'];
在写vue或者react中,有时候目录过深。使用相对路径引入模块,有点容易出错。比如下面这样:
import {tools} from "../../../../../tools";
在webpack.config.js 中,配置如下:
resolve: {
alias: {
'@': require('path').resolve(__dirname, 'src')
}
},
然后就可以在项目中使用绝对路径了。
import {tools} from "@/tools";
那么CSS中的1px是什么?浏览器是怎么渲染它的?网页在一个叫viewport的东西里渲染,可以理解为画布,画布被分成 N x M 个小方格,1个CSS像素,就是其中的一个小方格。一,viewport又是什么?网页在viewport上渲染,可以想像在PS上画东西时,上面也有个画布,这个画布分割了 N x M 个方格,N是它的宽度,M是它的高度。宽高都可以任意设置,所以说viewport是虚拟的。假设设置宽度是400,那么浏览器显示区域的横向将被分为400份,CSS的1px占的宽度就是显示区域的 1/400。viewport值不一样时,对页面元素宽度的影响,比如一个头像宽度是50px。 当vie
物体与观察者的距离远近在静态时通过物体的大小来体现。当物体运动时,通过远近物体不同的运动速度来体现,从而形成层次感。近处的物体运动快,远处的物体运动慢。
手机演示地址://javascript.net.cn/test/446/#/
代码:
template
div class="viewport"
div class="sence"
div class="sprite sprite-free-right" /div
/div
div class="front-background" /div
只关注了2d方面的,对现在项目有意义的概念。
UI坐标系
UI坐标就是Android和iOS等应用开发的时候使用的二维坐标系。它的原点是在左上角的。
我看pixi.js的坐标原点在左上角,
OpenGL坐标
OpenGL坐标是种三维坐标。由于Cocos2d-x底层采用OpenGL渲染,因此的默认坐标就是OpenGL坐标,只不过只采用两维(x和y轴)。如果不考虑z轴,OpenGL坐标的原点在左下角。
世界坐标系
世界坐标系是系统的绝对坐标系,在没有建立用户坐标系之前画面上所有点的坐标都是以该坐标系的原点来确定各自的位置的。
世界坐标和模型坐标,Cocos2d-JS的坐标也
所有标签